fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/blocks/CategoryGroup1.astro

@@ -0,0 +1,43 @@
+---
+import Abstract from 'fulldev-ui/components/Abstract.astro'
+import Box from 'fulldev-ui/components/Box.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Grid from 'fulldev-ui/components/Grid.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { CategoryGroupSchema } from 'fulldev-ui/schemas/blocks/categoryGroup'
+
+interface Props extends CategoryGroupSchema {}
+
+const { title, description, categories } = Astro.props
+---
+
+<Section class="categories categories-1">
+  <Container class="flex flex-col gap-8">
+    <Box class="flex w-full items-center justify-between gap-8">
+      <Writeup size="sm">
+        <Box as="h1">{title}</Box>
+        <Box as="p">{description}</Box>
+      </Writeup>
+    </Box>
+    <Grid length={categories?.length}>
+      {
+        categories?.map(({ href, image, title }) => (
+          <Box
+            class="group flex flex-col gap-4"
+            {href}
+          >
+            <Image
+              class="aspect-square rounded-lg transition-opacity group-hover:opacity-75"
+              {...image}
+            />
+            <Abstract>
+              <Box as="h3">{title}</Box>
+            </Abstract>
+          </Box>
+        ))
+      }
+    </Grid>
+  </Container>
+</Section>

package/src/blocks/CategoryList1.astro

@@ -0,0 +1,55 @@
+---
+import Abstract from 'fulldev-ui/components/Abstract.astro'
+import Box from 'fulldev-ui/components/Box.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Grid from 'fulldev-ui/components/Grid.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { CategoryListSchema } from 'fulldev-ui/schemas/blocks/categoryList'
+
+interface Props extends CategoryListSchema {}
+
+const { writeup, button, categories } = Astro.props
+---
+
+<Section class="categories categories-1">
+  <Container class="flex flex-col gap-8">
+    <Box class="flex w-full items-center justify-between gap-8">
+      <Writeup size="sm">
+        <Fragment set:html={writeup} />
+        <slot />
+      </Writeup>
+      <Button
+        class="max-lg:hidden"
+        variant="link"
+        reverse
+        {...button}
+      />
+    </Box>
+    <Grid length={categories?.length}>
+      {
+        categories?.map(({ href, image, title }) => (
+          <Box
+            class="group flex flex-col gap-4"
+            {href}
+          >
+            <Image
+              class="aspect-square rounded-lg transition-opacity group-hover:opacity-75"
+              {...image}
+            />
+            <Abstract>
+              <Box as="h3">{title}</Box>
+            </Abstract>
+          </Box>
+        ))
+      }
+    </Grid>
+    <Button
+      class="lg:hidden"
+      variant="secondary"
+      {...button}
+    />
+  </Container>
+</Section>

package/src/blocks/Contact1.astro

@@ -1,88 +1,45 @@
 ---
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Form from 'fulldev-ui/components/Form.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 Box from 'fulldev-ui/components/Box.astro'
+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 Form from 'fulldev-ui/components/Form.vue'
+import Section from 'fulldev-ui/components/Section.astro'
 import Socials from 'fulldev-ui/components/Socials.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/components/Writeup.astro'
+import type { ContactSchema } from 'fulldev-ui/schemas/blocks/contact'
 
-interface Props extends BlockSchema {}
+interface Props extends ContactSchema {}
 
-const {
-  depth = 2,
-  tagline,
-  heading,
-  paragraph,
-  content,
-  channels,
-  socials,
-  form,
-  image,
-  ...rest
-} = Astro.props
+const { writeup, channels, socials, form } = Astro.props
 ---
 
-<Section
-  class:list="contact-1"
-  {...rest}
->
-  <Container>
-    <Prose
-      align="middle"
-      class="max-w-xl"
-    >
-      <Tagline text={tagline} />
-      <Heading
-        size="4xl"
-        text={heading}
-        {depth}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Fragment set:html={content} />
-      <Channels {channels} />
-      <Group>
-        <Socials {socials} />
-      </Group>
+<Section class="contact contact-1">
+  <Container
+    class="flex flex-col"
+    size="sm"
+  >
+    <Writeup>
+      <Fragment set:html={writeup} />
+      <slot />
+      <Box class="flex flex-col items-start">
+        {
+          channels?.map((channel) => (
+            <Button
+              class="px-0"
+              variant="link"
+              {...channel}
+            />
+          ))
+        }
+      </Box>
+      <Socials {socials} />
+    </Writeup>
+    <Card>
       <Form
-        action="/thank-you"
-        method="POST"
+        client:load
         {...form}
       />
-      <Image {...image} />
-    </Prose>
+    </Card>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .contact-1 {
-      @apply relative w-full;
-
-      .container {
-        @apply flex flex-col gap-16;
-      }
-
-      .contact-1-segment {
-        @apply flex flex-col items-start gap-8;
-      }
-
-      .contact-1-content {
-        @apply flex max-w-screen-md flex-col gap-4;
-      }
-
-      .image {
-        @apply rounded-md;
-      }
-    }
-  }
-</style>

package/src/blocks/Contact2.astro

@@ -1,91 +1,45 @@
 ---
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Form from 'fulldev-ui/components/Form.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 Box from 'fulldev-ui/components/Box.astro'
+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 Form from 'fulldev-ui/components/Form.vue'
+import Section from 'fulldev-ui/components/Section.astro'
 import Socials from 'fulldev-ui/components/Socials.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'
+import Split from 'fulldev-ui/components/Split.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { ContactSchema } from 'fulldev-ui/schemas/blocks/contact'
 
-interface Props extends BlockSchema {}
+interface Props extends ContactSchema {}
 
-const {
-  depth = 2,
-  tagline,
-  heading,
-  paragraph,
-  content,
-  channels,
-  socials,
-  form,
-  image,
-  ...rest
-} = Astro.props
+const { writeup, channels, socials, form } = Astro.props
 ---
 
-<Section
-  class:list="contact-2"
-  {...rest}
->
+<Section class="contact contact-2">
   <Container>
     <Split>
-      <Prose
-        align="middle"
-        class="max-w-xl"
-      >
-        <Tagline text={tagline} />
-        <Heading
-          size="4xl"
-          text={heading}
-          {depth}
-        />
-        <Paragraph
-          muted
-          size="lg"
-          text={paragraph}
-        />
-        <Fragment set:html={content} />
-        <Channels {channels} />
-        <Group>
-          <Socials {socials} />
-        </Group>
+      <Writeup>
+        <Fragment set:html={writeup} />
+        <slot />
+        <Box class="flex flex-col items-start">
+          {
+            channels?.map((channel) => (
+              <Button
+                class="px-0"
+                variant="link"
+                {...channel}
+              />
+            ))
+          }
+        </Box>
+        <Socials {socials} />
+      </Writeup>
+      <Card>
         <Form
-          action="/thank-you"
-          method="POST"
+          client:load
           {...form}
         />
-      </Prose>
-      <Image {...image} />
+      </Card>
     </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .contact-2 {
-      @apply relative w-full;
-
-      .container {
-        @apply flex flex-col gap-16;
-      }
-
-      .contact-2-segment {
-        @apply flex flex-col items-start gap-8;
-      }
-
-      .contact-2-content {
-        @apply flex max-w-screen-md flex-col gap-4;
-      }
-
-      .image {
-        @apply rounded-md;
-      }
-    }
-  }
-</style>

package/src/blocks/Content1.astro

@@ -1,41 +1,29 @@
 ---
 import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
+import Container from 'fulldev-ui/components/Container.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.ts'
-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 Section from 'fulldev-ui/components/Section.astro'
+import Split from 'fulldev-ui/components/Split.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { ContentSchema } from 'fulldev-ui/schemas/blocks/content'
 
-interface Props extends BlockSchema {}
+interface Props extends ContentSchema {}
 
-const { depth, tagline, heading, paragraph, buttons, image, content } =
-  Astro.props
+const { writeup, buttons, image } = Astro.props
 ---
 
-<Section class="content-1">
+<Section class="content content-1">
   <Container>
-    <Prose align="middle">
-      <Tagline text={tagline} />
-      <Heading
-        size="5xl"
-        text={heading}
-        {depth}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Image {...image} />
-      <Fragment set:html={content} />
-      <slot />
-      <Group>
+    <Split align="center">
+      <Writeup>
+        <Fragment set:html={writeup} />
+        <slot />
         <Buttons {buttons} />
-      </Group>
-    </Prose>
+      </Writeup>
+      <Image
+        class="rounded-lg"
+        {...image}
+      />
+    </Split>
   </Container>
 </Section>

package/src/blocks/Cta1.astro

@@ -1,70 +1,30 @@
 ---
 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 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 Prose from 'fulldev-ui/structures/Prose.astro'
-import Section from 'fulldev-ui/structures/Section.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Panel from 'fulldev-ui/components/Panel.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { CtaSchema } from 'fulldev-ui/schemas/blocks/cta'
 
-interface Props extends BlockSchema {}
+interface Props extends CtaSchema {}
 
-const {
-  depth = 2,
-  tagline,
-  heading,
-  paragraph,
-  content,
-  button,
-  buttons,
-  image,
-} = Astro.props
+const { writeup, buttons } = Astro.props
 ---
 
-<Section class:list="cta-1">
+<Section class="cta cta-1">
   <Container>
     <Panel>
-      <Prose align="center">
-        <Tagline text={tagline} />
-        <Heading
-          size="5xl"
-          as="h2"
-          text={heading}
-          {depth}
+      <Writeup
+        size="lg"
+        align="center"
+      >
+        <Fragment set:html={writeup} />
+        <slot />
+        <Buttons
+          size="lg"
+          {buttons}
         />
-        <Paragraph
-          size="xl"
-          text={paragraph}
-        />
-        <Fragment set:html={content} />
-        <Group>
-          <Buttons
-            variant="primary"
-            size="lg"
-            {button}
-            {buttons}
-          />
-        </Group>
-      </Prose>
-      <Image {...image} />
+      </Writeup>
     </Panel>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .cta-1 {
-      .text {
-        @apply text-pretty;
-      }
-
-      .image {
-        @apply rounded-lg;
-      }
-    }
-  }
-</style>

package/src/blocks/Faqs1.astro

@@ -0,0 +1,29 @@
+---
+import Accordion from 'fulldev-ui/components/Accordion.vue'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { FaqsSchema } from 'fulldev-ui/schemas/blocks/faqs'
+
+interface Props extends FaqsSchema {}
+
+const { writeup, buttons, faqs } = Astro.props
+---
+
+<Section class="faqs faqs-1">
+  <Container
+    class="flex flex-col gap-y-8"
+    size="sm"
+  >
+    <Writeup>
+      <Fragment set:html={writeup} />
+      <slot />
+      <Buttons {buttons} />
+    </Writeup>
+    <Accordion
+      client:load
+      items={faqs}
+    />
+  </Container>
+</Section>

package/src/blocks/Faqs2.astro

@@ -0,0 +1,29 @@
+---
+import Accordion from 'fulldev-ui/components/Accordion.vue'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Split from 'fulldev-ui/components/Split.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { FaqsSchema } from 'fulldev-ui/schemas/blocks/faqs'
+
+interface Props extends FaqsSchema {}
+
+const { writeup, buttons, faqs } = Astro.props
+---
+
+<Section class="faqs faqs-2">
+  <Container>
+    <Split>
+      <Writeup>
+        <Fragment set:html={writeup} />
+        <slot />
+        <Buttons {buttons} />
+      </Writeup>
+      <Accordion
+        client:load
+        items={faqs}
+      />
+    </Split>
+  </Container>
+</Section>