fulldev-ui 0.6.0-beta.12 → 0.6.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.0-beta.12",
+  "version": "0.6.0-beta.14",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Cta1.astro

@@ -35,12 +35,12 @@ const {
       <Writeup align="center">
         <Tagline text={tagline} />
         <Heading
-          size="4xl"
+          size="5xl"
           as="h2"
           text={heading}
         />
         <Paragraph
-          size="lg"
+          size="xl"
           text={paragraph}
         />
         <Fragment set:html={content} />

package/src/blocks/Hero1.astro

@@ -2,17 +2,33 @@
 import type { ComponentProps } from 'astro/types'
 import Badge from 'fulldev-ui/components/Badge.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 Label from 'fulldev-ui/components/Label.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Rating from 'fulldev-ui/components/Rating.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 {
+  depth?: 1 | 2 | undefined
+  badge?: ComponentProps<typeof Badge> | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  proof?: {
+    rating?: number | undefined
+    images?: ComponentProps<typeof Image>[] | undefined
+    text?: string | undefined
+  }
+}
 
 const {
   badge,
@@ -20,9 +36,9 @@ const {
   heading,
   paragraph,
   content,
-  button,
   buttons,
   image,
+  proof,
   ...rest
 } = Astro.props
 ---
@@ -32,7 +48,27 @@ const {
   {...rest}
 >
   <Container>
-    <Writeup align="center">
+    <Prose class="flex flex-col items-center text-center">
+      <Element class="flex items-center">
+        {
+          proof?.images?.map((image) => (
+            <Image
+              class="-mr-5 h-11 w-11 rounded-full object-cover last-of-type:mr-2"
+              {...image}
+            />
+          ))
+        }
+        <Element class="flex flex-col gap-1">
+          <Rating
+            score={proof?.rating}
+            size="sm"
+          />
+          <Label
+            size="md"
+            text={proof?.text}
+          />
+        </Element>
+      </Element>
       <Badge
         size="lg"
         {...badge}
@@ -54,11 +90,10 @@ const {
       <Group>
         <Buttons
           size="lg"
-          {button}
           {buttons}
         />
       </Group>
-    </Writeup>
+    </Prose>
     <Image {...image} />
   </Container>
 </Section>

package/src/blocks/Logos1.astro

@@ -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/Pricings1.astro

@@ -0,0 +1,72 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 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 {
+  depth?: 1 | 2 | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  cards?: {
+    tagline?: string | undefined
+    heading?: string | undefined
+    paragraph?: string | undefined
+    list?: string[] | undefined
+    button?: ComponentProps<typeof Button> | undefined
+  }[]
+}
+
+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
+                as={`h${(depth + 1) as 1 | 2 | 3}`}
+                size="3xl"
+                text={heading}
+              />
+              <Paragraph
+                muted
+                text={paragraph}
+              />
+              <List
+                size="sm"
+                items={list}
+              />
+            </Prose>
+            <Button
+              class=""
+              {...button}
+            />
+          </Card>
+        ))
+      }
+    </Stack>
+  </Container>
+</Section>

package/src/schemas/block.ts

@@ -53,6 +53,13 @@ export const blockSchema = z
       .strict()
       .array()
       .optional(),
+    proof: z
+      .object({
+        rating: z.number().optional(),
+        images: imageSchema.array().optional(),
+        text: z.string().optional(),
+      })
+      .optional(),
   })
   .strict()
 

package/src/structures/Prose.astro

@@ -85,7 +85,7 @@ const { ...rest } = Astro.props
       }
 
       > img,
-      > * > img {
+      > p > img {
         @apply my-12 rounded-md;
       }