fulldev-ui 0.6.0-beta.9 → 0.6.0

package/src/blocks/{Industries1.astro → JobCategories1.astro}

@@ -1,6 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
@@ -12,24 +10,22 @@ import Container from 'fulldev-ui/structures/Container.astro'
 import Matrix from 'fulldev-ui/structures/Matrix.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
-import { getHref } from 'fulldev-ui/utils/getHref'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {
-  pages: CollectionEntry<'pages'>[]
-}
+interface Props extends BlockSchema {}
 
-const { heading, button, pages, ...rest } = Astro.props
+const { depth = 2, heading, button, cards, ...rest } = Astro.props
 ---
 
 <Section
-  class:list="industries-1"
+  class="job-categories-1"
   {...rest}
 >
-  <Container>
-    <Element class:list="industries-1-segment">
+  <Container class="flex flex-col gap-12">
+    <Element class="flex items-center justify-between gap-8">
       <Heading
         size="3xl"
         text={heading}
+        {depth}
       />
       <Button
         size="sm"
@@ -37,19 +33,20 @@ const { heading, button, pages, ...rest } = Astro.props
         {...button}
       />
     </Element>
-    <Matrix size="lg">
+    <Matrix>
       {
-        pages?.map(({ slug, data: { title, list, image } }) => (
+        cards?.map(({ href, heading, list, image }) => (
           <Card
-            class="industries-1-card"
-            href={getHref(slug)}
+            class="p-0"
+            {href}
           >
             <Image {...image} />
-            <Writeup>
+            <Writeup class="p-4">
               <Heading
+                depth={(depth + 1) as 3}
                 as="h2"
                 size="lg"
-                text={title}
+                text={heading}
               />
               <List
                 size="sm"
@@ -62,25 +59,3 @@ const { heading, button, pages, ...rest } = Astro.props
     </Matrix>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .industries-1 {
-      .container {
-        @apply flex flex-col gap-12;
-      }
-
-      .industries-1-segment {
-        @apply flex items-center justify-between gap-8;
-      }
-
-      .card {
-        @apply overflow-hidden p-0;
-
-        .writeup {
-          @apply p-4;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/JobCategory1.astro

@@ -0,0 +1,90 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import { getCollection } from 'astro:content'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Card from 'fulldev-ui/structures/Card.astro'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Matrix from 'fulldev-ui/structures/Matrix.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props {
+  slug?: CollectionEntry<'pages'>['slug']
+  heading?: string | undefined
+  paragraph?: string | undefined
+  pages?: CollectionEntry<'pages'>[]
+}
+
+const { slug, heading, paragraph, pages, ...rest } = Astro.props
+
+// Jobs that reference the current category, or any of `pages` select categories
+const jobs = await getCollection('pages', (page) =>
+  page.data.categories?.some(
+    (category) =>
+      category.slug == slug || pages?.some((p) => p.slug == category.slug)
+  )
+)
+---
+
+<Section
+  class:list="job-category-1 flex flex-col gap-12 pt-0"
+  {...rest}
+>
+  <Container class="border-b py-12">
+    <Prose>
+      <Heading
+        as="h1"
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+    </Prose>
+  </Container>
+  <Container class="flex flex-col gap-12">
+    <Matrix class="gap-2">
+      {
+        pages?.map(({ slug, data: { title, image } }) => (
+          <Card
+            class="grid grid-cols-3 items-center bg-transparent p-0"
+            href={getHref(slug)}
+          >
+            <Image
+              class="h-full w-auto rounded-sm object-cover"
+              {...image}
+            />
+            <Heading
+              class="col-span-2 p-4"
+              as="h3"
+              size="md"
+              text={title}
+            />
+          </Card>
+        ))
+      }
+    </Matrix>
+    <Matrix>
+      {
+        jobs?.map(({ slug, data: { title, list } }) => (
+          <Card
+            class="jobs-1-card flex flex-col gap-3"
+            href={getHref(slug)}
+          >
+            <Heading
+              as="h2"
+              size="lg"
+              text={title}
+            />
+            <List
+              size="sm"
+              items={list}
+            />
+          </Card>
+        ))
+      }
+    </Matrix>
+  </Container>
+</Section>

package/src/blocks/Jobs1.astro

@@ -1,6 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
@@ -10,13 +8,10 @@ import Card from 'fulldev-ui/structures/Card.astro'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Matrix from 'fulldev-ui/structures/Matrix.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
-import { getHref } from 'fulldev-ui/utils/getHref'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {
-  pages: CollectionEntry<'pages'>[]
-}
+interface Props extends BlockSchema {}
 
-const { heading, button, pages, ...rest } = Astro.props
+const { depth = 2, heading, button, cards, ...rest } = Astro.props
 ---
 
 <Section
@@ -28,6 +23,7 @@ const { heading, button, pages, ...rest } = Astro.props
       <Heading
         size="3xl"
         text={heading}
+        {depth}
       />
       <Button
         size="sm"
@@ -37,15 +33,16 @@ const { heading, button, pages, ...rest } = Astro.props
     </Element>
     <Matrix>
       {
-        pages?.map(({ slug, data: { title, list } }) => (
+        cards?.map(({ href, heading, list }) => (
           <Card
             class="jobs-1-card"
-            href={getHref(slug)}
+            {href}
           >
             <Heading
+              depth={(depth + 1) as 3}
               as="h2"
               size="lg"
-              text={title}
+              text={heading}
             />
             <List
               size="sm"

package/src/blocks/Logos1.astro

@@ -1,5 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
@@ -9,9 +8,9 @@ import Container from 'fulldev-ui/structures/Container.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, images, ...rest } = Astro.props
+const { depth = 2, tagline, heading, paragraph, images, ...rest } = Astro.props
 ---
 
 <Section
@@ -23,6 +22,7 @@ const { tagline, heading, paragraph, images, ...rest } = Astro.props
       <Heading
         size="xl"
         text={heading}
+        {depth}
       />
       <Paragraph
         size="sm"
@@ -44,7 +44,7 @@ const { tagline, heading, paragraph, images, ...rest } = Astro.props
       }
 
       .logos-1-cards {
-        @apply flex flex-wrap justify-center gap-12;
+        @apply flex flex-wrap justify-center gap-8;
       }
 
       .image {

package/src/blocks/Pages1.astro

@@ -0,0 +1,85 @@
+---
+// Heading etc left, image and content right, sticky
+import Badges from 'fulldev-ui/components/Badges.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
+
+interface Props extends BlockSchema {}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  content,
+  cards,
+} = Astro.props
+---
+
+<Section class="pages-1">
+  <Container>
+    <Split class="items-start">
+      <Prose class="lg:sticky lg:top-sticky-16 lg:max-w-xl">
+        <Tagline text={tagline} />
+        <Heading
+          as="h2"
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <Group>
+          <Buttons
+            variant="secondary"
+            {buttons}
+          />
+        </Group>
+      </Prose>
+      <Element class="flex flex-col gap-8">
+        {
+          cards?.map(({ href, image, badges, heading, paragraph }) => (
+            <Element
+              as="a"
+              class="flex flex-col gap-2"
+              {href}
+            >
+              <Image
+                class="mb-4"
+                {...image}
+              />
+              <Group>
+                <Badges
+                  size="sm"
+                  {badges}
+                />
+              </Group>
+              <Heading
+                depth={(depth + 1) as 3}
+                as="h3"
+                size="xl"
+                text={heading}
+              />
+              <Paragraph text={paragraph} />
+            </Element>
+          ))
+        }
+      </Element>
+    </Split>
+  </Container>
+</Section>

package/src/blocks/Pricings1.astro

@@ -0,0 +1,61 @@
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Card from 'fulldev-ui/structures/Card.astro'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Stack from 'fulldev-ui/structures/Stack.astro'
+
+interface Props extends BlockSchema {}
+
+const { depth = 2, heading, paragraph, cards } = Astro.props
+---
+
+<Section class="pricings-1">
+  <Container class="flex flex-col items-center gap-16">
+    <Prose class="text-center">
+      <Heading
+        size="5xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        size="xl"
+        text={paragraph}
+      />
+    </Prose>
+    <Stack class="mx-auto flex flex-wrap items-stretch justify-center">
+      {
+        cards?.map(({ tagline, heading, paragraph, list, button }) => (
+          <Card class="min-w-sm flex max-w-md flex-col justify-between gap-8 p-8">
+            <Prose>
+              <Tagline text={tagline} />
+              <Heading
+                depth={(depth + 1) as 3}
+                size="3xl"
+                text={heading}
+              />
+              <Paragraph
+                muted
+                text={paragraph}
+              />
+              <List
+                size="sm"
+                items={list}
+              />
+            </Prose>
+            <Button
+              class=""
+              {...button}
+            />
+          </Card>
+        ))
+      }
+    </Stack>
+  </Container>
+</Section>

package/src/blocks/Products1.astro

@@ -1,6 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import { getEntries } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
@@ -10,13 +8,10 @@ import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Card from 'fulldev-ui/structures/Card.astro'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
-import { getHref } from 'fulldev-ui/utils/getHref'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const { heading, button, products, ...rest } = Astro.props
-
-const entries = products && (await getEntries(products))
+const { depth = 2, heading, button, cards, ...rest } = Astro.props
 ---
 
 <Section
@@ -28,6 +23,7 @@ const entries = products && (await getEntries(products))
       <Heading
         size="2xl"
         text={heading}
+        {depth}
       />
       <Button
         variant="ghost"
@@ -37,14 +33,15 @@ const entries = products && (await getEntries(products))
     </Element>
     <Element class:list="products-1-cards">
       {
-        entries?.map(({ slug, data: { images, title, price } }) => (
-          <Card href={getHref(slug)}>
+        cards?.map(({ href, images, heading, price }) => (
+          <Card {href}>
             <Image {...images?.[0]} />
             <Element class:list="products-1-card-content">
               <Heading
+                depth={(depth + 1) as 3}
                 as="h3"
                 size="md"
-                text={title}
+                text={heading}
               />
               <Price amount={price} />
             </Element>

package/src/blocks/Projects1.astro

@@ -1,6 +1,4 @@
 ---
-// Heading etc left, image and content right, sticky
-import type { ComponentProps } from 'astro/types'
 import Badges from 'fulldev-ui/components/Badges.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Element from 'fulldev-ui/components/Element.astro'
@@ -8,96 +6,74 @@ import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  cards?: {
-    image?: ComponentProps<typeof Image> | undefined
-    badges?: ComponentProps<typeof Badges>['badges']
-    heading?: string | undefined
-    paragraph?: string | undefined
-  }[]
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, content, cards, ...rest } =
-  Astro.props
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  content,
+  cards,
+} = Astro.props
 ---
 
-<Section
-  class:list="projects-1"
-  {...rest}
->
+<Section class="projects-1">
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Element class:list="projects-1-cards">
-      {
-        cards?.map(({ image, badges, heading, paragraph }) => (
-          <Element class:list="projects-1-card">
-            <Image {...image} />
-            <Group>
-              <Badges
-                size="sm"
-                {badges}
+    <Split class="items-start">
+      <Prose class="lg:sticky lg:top-sticky-16 lg:max-w-xl">
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <Group>
+          <Buttons
+            variant="secondary"
+            {buttons}
+          />
+        </Group>
+      </Prose>
+      <Element class="flex flex-col gap-8">
+        {
+          cards?.map(({ image, badges, heading, paragraph }) => (
+            <Element class="flex flex-col gap-2">
+              <Image
+                class="mb-4"
+                {...image}
               />
-            </Group>
-            <Heading
-              as="h3"
-              size="xl"
-              text={heading}
-            />
-            <Paragraph text={paragraph} />
-          </Element>
-        ))
-      }
-    </Element>
+              <Group>
+                <Badges
+                  size="sm"
+                  {badges}
+                />
+              </Group>
+              <Heading
+                depth={(depth + 1) as 3}
+                as="h3"
+                size="xl"
+                text={heading}
+              />
+              <Paragraph text={paragraph} />
+            </Element>
+          ))
+        }
+      </Element>
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .projects-1 {
-      .container {
-        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
-      }
-
-      .prose {
-        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
-      }
-
-      .projects-1-cards {
-        @apply flex flex-col gap-8;
-      }
-
-      .projects-1-card {
-        @apply flex flex-col gap-2;
-
-        .image {
-          @apply mb-4 rounded-md;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Reviews1.astro

@@ -1,9 +1,7 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
+import Proof from 'fulldev-ui/components/Proof.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Card from 'fulldev-ui/structures/Card.astro'
@@ -12,9 +10,9 @@ import Masonry from 'fulldev-ui/structures/Masonry.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
 ---
 
 <Section
@@ -30,19 +28,21 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
       <Heading
         size="3xl"
         text={heading}
+        {depth}
       />
       <Paragraph text={paragraph} />
     </Writeup>
     <Masonry>
       {
-        cards?.map(({ rating, heading, paragraph, image }) => (
+        cards?.map(({ tagline, avatar, rating, heading, paragraph }) => (
           <Card class="reviews-1-card">
-            <Image {...image} />
-            <Rating
-              size="sm"
-              score={rating}
+            <Proof
+              text={tagline}
+              {rating}
+              {avatar}
             />
             <Heading
+              depth={(depth + 1) as 3}
               as="h3"
               size="md"
               text={heading}