fulldev-ui 0.6.0-beta.9 → 0.6.1

package/src/blocks/Features1.astro

@@ -1,18 +1,18 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Icon from 'fulldev-ui/components/Icon.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 Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Stack from 'fulldev-ui/structures/Stack.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
@@ -20,20 +20,21 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
   {...rest}
 >
   <Container>
-    <Writeup>
+    <Prose>
       <Tagline
         size="sm"
         text={tagline}
       />
       <Heading
-        size="3xl"
+        size="4xl"
         text={heading}
+        {depth}
       />
       <Paragraph
         size="lg"
         text={paragraph}
       />
-    </Writeup>
+    </Prose>
     <Stack>
       {
         cards?.map(({ icon, heading, paragraph }) => (
@@ -43,6 +44,7 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
               name={icon}
             />
             <Heading
+              depth={(depth + 1) as 3}
               as="h3"
               size="xl"
               text={heading}

package/src/blocks/Features2.astro

@@ -0,0 +1,71 @@
+---
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Icon from 'fulldev-ui/components/Icon.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 Matrix from 'fulldev-ui/structures/Matrix.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
+
+interface Props extends BlockSchema {}
+
+const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="features-2"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="4xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+      />
+    </Prose>
+    <Matrix size="sm">
+      {
+        cards?.map(({ icon, heading, paragraph }) => (
+          <Writeup>
+            <Icon
+              size="md"
+              name={icon}
+            />
+            <Heading
+              depth={(depth + 1) as 3}
+              as="h3"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Writeup>
+        ))
+      }
+    </Matrix>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .features-2 {
+      .container {
+        @apply flex flex-col gap-12;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>

package/src/blocks/Footer.astro

@@ -1,5 +1,4 @@
 ---
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Channels from 'fulldev-ui/components/Channels.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Logo from 'fulldev-ui/components/Logo.astro'
@@ -11,12 +10,9 @@ import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends HTMLAttributes<'footer'>, BlockSchema {
-  as?: HTMLTag
-}
+interface Props extends BlockSchema {}
 
 const {
-  as = 'footer',
   logo,
   heading,
   paragraph,
@@ -31,7 +27,7 @@ const {
 
 <Element
   class:list="footer"
-  {as}
+  as="footer"
   {...rest}
 >
   <Container class:list="footer-container">

package/src/blocks/Header.astro

@@ -1,7 +1,6 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
 // import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Button from 'fulldev-ui/components/Button.astro'
 // import Cart from 'fulldev-ui/components/Cart.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Links from 'fulldev-ui/components/Links.astro'
@@ -14,25 +13,14 @@ import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Drawer from 'fulldev-ui/structures/Drawer.astro'
 
-interface Props extends HTMLAttributes<'header'>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const {
-  logo,
-  heading,
-  links,
-  socials,
-  menus,
-  search,
-  themer,
-  buttons,
-  cart,
-  ...rest
-} = Astro.props
+const { logo, links, menus, socials, search, themer, button } = Astro.props
 ---
 
 <Element
   class:list="header"
-  {...rest}
+  as="header"
 >
   <Container>
     <Element class:list="header-start">
@@ -53,7 +41,6 @@ const {
           />
         )
       }
-
       <!-- {
         cart && (
           <Cart
@@ -76,11 +63,11 @@ const {
         {socials}
       />
 
-      <Buttons
+      <Button
         size="sm"
-        {buttons}
+        variant="outline"
+        {...button}
       />
-
       <!-- <Button
         class:list="menu-button"
         as="label"
@@ -95,10 +82,7 @@ const {
         size="sm"
       >
         <Container>
-          <Menus
-            menu={{ links }}
-            {menus}
-          />
+          <Menus {menus} />
         </Container>
       </Drawer>
     </Element>
@@ -108,7 +92,7 @@ const {
 <style is:global>
   @layer fulldev {
     .header {
-      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center overflow-hidden border-b bg-background;
+      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center border-b bg-background;
       height: var(--header-height);
 
       &,

package/src/blocks/Hero1.astro

@@ -1,28 +1,29 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Chip from 'fulldev-ui/components/Chip.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 Proof from 'fulldev-ui/components/Proof.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 Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
 const {
-  badge,
+  depth = 2,
+  chip,
   tagline,
   heading,
   paragraph,
   content,
-  button,
   buttons,
   image,
+  proof,
   ...rest
 } = Astro.props
 ---
@@ -31,22 +32,24 @@ const {
   class:list="hero-1"
   {...rest}
 >
-  <Container>
-    <Writeup align="center">
-      <Badge
+  <Container class="flex flex-col items-center gap-16">
+    <Prose align="center">
+      <Proof {...proof} />
+      <Chip
         size="lg"
-        {...badge}
+        {...chip}
       />
       <Tagline
         size="sm"
         text={tagline}
       />
       <Heading
-        as="h1"
         size="6xl"
         text={heading}
+        {depth}
       />
       <Paragraph
+        class="text-balance"
         size="xl"
         text={paragraph}
       />
@@ -54,24 +57,13 @@ const {
       <Group>
         <Buttons
           size="lg"
-          {button}
           {buttons}
         />
       </Group>
-    </Writeup>
-    <Image {...image} />
+    </Prose>
+    <Image
+      class="mx-auto max-h-[700px] w-auto rounded-lg"
+      {...image}
+    />
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .hero-1 {
-      .container {
-        @apply flex flex-col items-center gap-16;
-      }
-      .image {
-        @apply rounded-lg;
-      }
-    }
-  }
-</style>

package/src/blocks/Intro1.astro

@@ -1,5 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
@@ -8,13 +7,13 @@ 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 Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
 const {
-  badge,
+  depth = 2,
   tagline,
   heading,
   paragraph,
@@ -31,15 +30,15 @@ const {
   {...rest}
 >
   <Container>
-    <Writeup>
+    <Prose>
       <Tagline
         size="sm"
         text={tagline}
       />
       <Heading
-        as="h1"
         size="3xl"
         text={heading}
+        {depth}
       />
       <Paragraph text={paragraph} />
       <Fragment set:html={content} />
@@ -50,7 +49,7 @@ const {
           {buttons}
         />
       </Group>
-    </Writeup>
+    </Prose>
     <Image {...image} />
   </Container>
 </Section>

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,92 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import { getCollection, getEntries } 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)
+  )
+)
+
+const pageEntries = pages && (await getEntries(pages))
+---
+
+<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">
+      {
+        pageEntries?.map(({ slug, data: { title, image } }) => (
+          <Card
+            class="grid grid-cols-3 items-center bg-transparent p-0"
+            href={getHref(slug)}
+          >
+            <Image
+              class="h-auto w-full 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 {