fulldev-ui 0.6.0-beta.6 → 0.6.0-beta.8

package/src/blocks/Content5.astro

@@ -0,0 +1,72 @@
+---
+// Content in 2 columns
+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'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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'
+
+interface Props extends ComponentProps<typeof Section> {
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+}
+
+const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="content-5"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Tagline text={tagline} />
+      <Heading
+        as="h2"
+        size="5xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+    </Prose>
+    <Prose class:list="content-5-main">
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Group>
+      <Buttons {buttons} />
+    </Group>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-5 {
+      .container {
+        @apply flex flex-col items-start gap-8;
+      }
+
+      .content-5-main {
+        @apply max-w-none break-inside-avoid gap-x-gutter lg:columns-2;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>

package/src/blocks/Cta1.astro

@@ -1,16 +1,16 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Group from 'fulldev-ui/components/Group.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
-import Panel from 'fulldev-ui/components/Panel.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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 Panel from 'fulldev-ui/structures/Panel.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
 interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 

package/src/blocks/Features1.astro

@@ -1,14 +1,14 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Container from 'fulldev-ui/components/Container.astro'
 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 Section from 'fulldev-ui/components/Section.astro'
-import Stack from 'fulldev-ui/components/Stack.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.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 {}
 
@@ -58,6 +58,10 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .features-1 {
+      .container {
+        @apply flex flex-col gap-12;
+      }
+
       .icon {
         @apply text-primary;
       }

package/src/blocks/Footer.astro

@@ -1,15 +1,15 @@
 ---
 import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Channels from 'fulldev-ui/components/Channels.astro'
-import Container from 'fulldev-ui/components/Container.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Group from 'fulldev-ui/components/Group.astro'
 import Logo from 'fulldev-ui/components/Logo.astro'
 import Menus from 'fulldev-ui/components/Menus.astro'
 import { default as Paragraph } from 'fulldev-ui/components/Paragraph.astro'
 import Socials from 'fulldev-ui/components/Socials.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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 Writeup from 'fulldev-ui/structures/Writeup.astro'
 
 interface Props extends HTMLAttributes<'footer'>, BlockSchema {
   as?: HTMLTag
@@ -46,8 +46,8 @@ const {
       />
       <Group>
         <Socials
-          variant="secondary"
           size="sm"
+          {socials}
         />
       </Group>
     </Writeup>
@@ -74,6 +74,14 @@ const {
       .footer-channels {
         @apply max-w-xs;
       }
+
+      .writeup .group {
+        @apply mt-2;
+      }
+
+      .footer-channels {
+        @apply flex flex-col gap-y-2;
+      }
     }
   }
 </style>

package/src/blocks/Header.astro

@@ -1,10 +1,8 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
+// import Button from 'fulldev-ui/components/Button.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 // import Cart from 'fulldev-ui/components/Cart.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Drawer from 'fulldev-ui/components/Drawer.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Links from 'fulldev-ui/components/Links.astro'
 import Logo from 'fulldev-ui/components/Logo.astro'
@@ -12,7 +10,9 @@ import Menus from 'fulldev-ui/components/Menus.astro'
 import Search from 'fulldev-ui/components/Search.astro'
 import Socials from 'fulldev-ui/components/Socials.astro'
 import Themer from 'fulldev-ui/components/Themer.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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 {}
 
@@ -47,16 +47,12 @@ const {
       {
         search && (
           <Search
-            if={search}
+            show={search}
             variant="ghost"
             size="sm"
           />
         )
       }
-      <Buttons
-        size="sm"
-        {buttons}
-      />
 
       <!-- {
         cart && (
@@ -66,17 +62,25 @@ const {
           />
         )
       } -->
-      <Themer
-        if={themer}
-        variant="ghost"
-        size="sm"
-      />
+      {
+        themer && (
+          <Themer
+            show={themer}
+            variant="ghost"
+            size="sm"
+          />
+        )
+      }
       <Socials
         size="sm"
-        variant="ghost"
         {socials}
       />
 
+      <Buttons
+        size="sm"
+        {buttons}
+      />
+
       <!-- <Button
         class:list="menu-button"
         as="label"

package/src/blocks/Hero1.astro

@@ -2,15 +2,15 @@
 import type { ComponentProps } from 'astro/types'
 import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Group from 'fulldev-ui/components/Group.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 Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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 Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
 interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
@@ -66,6 +66,9 @@ const {
 <style is:global>
   @layer fulldev {
     .hero-1 {
+      .container {
+        @apply flex flex-col items-center gap-16;
+      }
       .image {
         @apply rounded-lg;
       }

package/src/blocks/Industries1.astro

@@ -0,0 +1,86 @@
+---
+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'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.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 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'>[]
+}
+
+const { heading, button, pages, ...rest } = Astro.props
+---
+
+<Section
+  class:list="industries-1"
+  {...rest}
+>
+  <Container>
+    <Element class:list="industries-1-segment">
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Button
+        size="sm"
+        variant="ghost"
+        {...button}
+      />
+    </Element>
+    <Matrix size="lg">
+      {
+        pages?.map(({ slug, data: { title, list, image } }) => (
+          <Card
+            class="industries-1-card"
+            href={getHref(slug)}
+          >
+            <Image {...image} />
+            <Writeup>
+              <Heading
+                as="h2"
+                size="lg"
+                text={title}
+              />
+              <List
+                size="sm"
+                items={list}
+              />
+            </Writeup>
+          </Card>
+        ))
+      }
+    </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/Intro1.astro

@@ -1,15 +1,15 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Group from 'fulldev-ui/components/Group.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 Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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 Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
 interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
@@ -41,13 +41,11 @@ const {
         size="3xl"
         text={heading}
       />
-      <Paragraph
-        size="lg"
-        text={paragraph}
-      />
+      <Paragraph text={paragraph} />
       <Fragment set:html={content} />
       <Group>
         <Buttons
+          size="sm"
           {button}
           {buttons}
         />

package/src/blocks/Jobs1.astro

@@ -1,23 +1,22 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import { getEntries } from 'astro:content'
-import Card from 'fulldev-ui/components/Card.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Grid from 'fulldev-ui/components/Grid.astro'
+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'
 import List from 'fulldev-ui/components/List.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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 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 {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  pages: CollectionEntry<'pages'>[]
+}
 
-const { tagline, heading, paragraph, pages, ...rest } = Astro.props
-
-const entries = pages && (await getEntries(pages))
+const { heading, button, pages, ...rest } = Astro.props
 ---
 
 <Section
@@ -25,20 +24,20 @@ const entries = pages && (await getEntries(pages))
   {...rest}
 >
   <Container>
-    <Writeup align="center">
-      <Tagline
-        size="sm"
-        text={tagline}
-      />
+    <Element class:list="jobs-1-segment">
       <Heading
         size="3xl"
         text={heading}
       />
-      <Paragraph text={paragraph} />
-    </Writeup>
-    <Grid>
+      <Button
+        size="sm"
+        variant="ghost"
+        {...button}
+      />
+    </Element>
+    <Matrix>
       {
-        entries?.map(({ slug, data: { title, list } }) => (
+        pages?.map(({ slug, data: { title, list } }) => (
           <Card
             class="jobs-1-card"
             href={getHref(slug)}
@@ -55,7 +54,7 @@ const entries = pages && (await getEntries(pages))
           </Card>
         ))
       }
-    </Grid>
+    </Matrix>
   </Container>
 </Section>
 
@@ -63,8 +62,13 @@ const entries = pages && (await getEntries(pages))
   @layer fulldev {
     .jobs-1 {
       .container {
-        @apply flex flex-col items-center gap-16;
+        @apply flex flex-col gap-12;
+      }
+
+      .jobs-1-segment {
+        @apply flex items-center justify-between gap-8;
       }
+
       .card {
         @apply flex flex-col gap-3;
       }

package/src/blocks/Logos1.astro

@@ -1,13 +1,13 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Container from 'fulldev-ui/components/Container.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 Section from 'fulldev-ui/components/Section.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block.ts'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+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 {}
 

package/src/blocks/Products1.astro

@@ -2,14 +2,14 @@
 import type { ComponentProps } from 'astro/types'
 import { getEntries } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
-import Card from 'fulldev-ui/components/Card.astro'
-import Container from 'fulldev-ui/components/Container.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 Price from 'fulldev-ui/components/Price.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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 {}

package/src/blocks/Projects1.astro

@@ -0,0 +1,103 @@
+---
+// 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'
+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 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'
+
+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
+  }[]
+}
+
+const { tagline, heading, paragraph, buttons, content, cards, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="projects-1"
+  {...rest}
+>
+  <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}
+              />
+            </Group>
+            <Heading
+              as="h3"
+              size="xl"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Element>
+        ))
+      }
+    </Element>
+  </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,15 +1,16 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Card from 'fulldev-ui/components/Card.astro'
-import Container from 'fulldev-ui/components/Container.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import Masonry from 'fulldev-ui/components/Masonry.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 Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Writeup from 'fulldev-ui/components/Writeup.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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 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 {}
 
@@ -34,8 +35,9 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
     </Writeup>
     <Masonry>
       {
-        cards?.map(({ rating, heading, paragraph }) => (
+        cards?.map(({ rating, heading, paragraph, image }) => (
           <Card class="reviews-1-card">
+            <Image {...image} />
             <Rating
               size="sm"
               score={rating}