fulldev-ui 0.7.0 → 0.9.1

package/src/components/blocks/content-3.astro

@@ -1,67 +1,74 @@
 ---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import { Image } from "@/components/ui/image"
-import { List, ListItem } from "@/components/ui/list"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-  SectionSpread,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  list?: string[]
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image?: {
-    src: string
+  image: {
+    src: ImageMetadata
     alt: string
   }
 }
 
-const { class: className, id, list, links, image } = Astro.props
+const { class: className, title, description, buttons, image } = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSpread class="@5xl:items-end">
-    <SectionContent>
-      <SectionProse>
-        <slot />
-      </SectionProse>
-      <List>
-        {
-          list?.map((item) => (
-            <ListItem>
-              <Icon name="check" />
-              {item}
-            </ListItem>
-          ))
-        }
-      </List>
-    </SectionContent>
-    <SectionContent>
-      <SectionActions>
-        {
-          links?.map(({ icon, text, ...link }, i) => (
-            <Button variant={i === 0 ? "default" : "outline"} {...link}>
-              {icon && <Icon name={icon} />}
-              {text}
-            </Button>
-          ))
-        }
-      </SectionActions>
-    </SectionContent>
-  </SectionSpread>
-  <SectionMedia>
-    <Image sizes="(min-width: 1536px) 1536px, 100vw" {...image} />
-  </SectionMedia>
+<Section class={cn("", className)}>
+  <SectionContainer class="gap-8">
+    <div
+      class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
+    >
+      <div class="max-w-2xl">
+        <h2
+          class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+        >
+          {title}
+        </h2>
+        <p
+          class="text-muted-foreground mt-4 text-lg leading-relaxed text-balance"
+        >
+          {description}
+        </p>
+      </div>
+      {
+        buttons?.length && (
+          <div class="flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }, index) => (
+              <Button
+                as="a"
+                href={href}
+                size="lg"
+                variant={
+                  button.variant ?? (index === 0 ? "default" : "secondary")
+                }
+                {...button}
+              >
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+  </SectionContainer>
+  <SectionContainer>
+    <Image
+      src={image.src}
+      alt={image.alt}
+      class="aspect-video w-full rounded-xl border object-cover"
+      widths={[640, 960, 1280, 1536]}
+      sizes="(min-width: 80rem) 80rem, 100vw"
+    />
+  </SectionContainer>
 </Section>

package/src/components/blocks/content-4.astro

@@ -1,68 +1,91 @@
 ---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Image } from "@/components/ui/image"
-import { List, ListItem } from "@/components/ui/list"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  list?: string[]
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
+  title: string
+  description: string
+  features?: string[]
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image?: {
-    src: string
+  image: {
+    src: ImageMetadata
     alt: string
   }
 }
 
-const { class: className, id, list, links, image } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  features,
+  buttons,
+  image,
+} = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSplit class="@5xl:grid-cols-[1fr_2fr] @5xl:items-center">
-    <SectionContent>
-      <SectionProse>
-        <slot />
-      </SectionProse>
-      <List>
+<Section class={cn("", className)}>
+  <SectionContainer>
+    <div class="grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center">
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-4">
+          <h2
+            class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+          >
+            {title}
+          </h2>
+          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        </div>
         {
-          list?.map((item) => (
-            <ListItem>
-              <Icon name="check" />
-              {item}
-            </ListItem>
-          ))
+          features?.length && (
+            <ul class="flex flex-col gap-3">
+              {features.map((feature) => (
+                <li class="flex items-center gap-3 text-sm">
+                  <Icon name="check" class="text-primary size-4 shrink-0" />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+          )
         }
-      </List>
-      <SectionActions>
         {
-          links?.map(({ icon, text, ...link }, i) => (
-            <Button variant={i === 0 ? "default" : "outline"} {...link}>
-              {icon && <Icon name={icon} />}
-              {text}
-            </Button>
-          ))
+          buttons?.length && (
+            <div class="flex flex-wrap gap-3">
+              {buttons.map(({ href, label, ...button }, index) => (
+                <Button
+                  as="a"
+                  href={href}
+                  size="lg"
+                  variant={
+                    button.variant ?? (index === 0 ? "default" : "secondary")
+                  }
+                  {...button}
+                >
+                  {label}
+                </Button>
+              ))}
+            </div>
+          )
         }
-      </SectionActions>
-    </SectionContent>
-    <SectionMedia>
+      </div>
       <Image
-        sizes="(min-width: 1536px) 1024px, (min-width: 1024px) 66vw, 100vw"
-        {...image}
+        src={image.src}
+        alt={image.alt}
+        class="aspect-4/3 w-full rounded-xl border object-cover"
+        widths={[640, 960, 1280]}
+        sizes="(min-width: 1024px) 66vw, 100vw"
       />
-    </SectionMedia>
-  </SectionSplit>
+    </div>
+  </SectionContainer>
 </Section>

package/src/components/blocks/content-5.astro

@@ -1,76 +1,115 @@
 ---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import { Image } from "@/components/ui/image"
-import { List, ListItem } from "@/components/ui/list"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  list?: string[]
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
+  eyebrow?: string
+  title: string
+  description: string
+  features?: string[]
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image?: {
-    src: string
+  image: {
+    src: ImageMetadata
     alt: string
   }
 }
 
-const { class: className, id, list, links, image } = Astro.props
+const {
+  class: className,
+  eyebrow,
+  title,
+  description,
+  features,
+  buttons,
+  image,
+} = Astro.props
 ---
 
-<Section
-  class={cn(
-    "border-primary/20 my-0 -mt-px rounded-none shadow-none",
-    className
-  )}
-  id={id}
-  variant="floating"
->
-  <SectionSplit class="@5xl:items-center">
-    <SectionContent class="max-w-xl">
-      <SectionProse>
-        <slot />
-      </SectionProse>
-      <List>
+<Section class={cn("", className)}>
+  <SectionContainer>
+    <div
+      class="bg-muted/40 grid overflow-hidden rounded-xl border lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]"
+    >
+      <div class="flex flex-col justify-between gap-10 p-6 sm:p-8 lg:p-10">
+        <div class="flex flex-col gap-5">
+          {
+            eyebrow && (
+              <p class="text-primary text-sm leading-none font-medium">
+                {eyebrow}
+              </p>
+            )
+          }
+          <div class="flex flex-col gap-4">
+            <h2
+              class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+            >
+              {title}
+            </h2>
+            <p
+              class="text-muted-foreground max-w-xl text-lg leading-relaxed text-balance"
+            >
+              {description}
+            </p>
+          </div>
+        </div>
         {
-          list?.map((item) => (
-            <ListItem>
-              <Icon name="check" />
-              {item}
-            </ListItem>
-          ))
+          features?.length && (
+            <ol class="grid gap-3">
+              {features.map((feature, index) => (
+                <li class="flex items-start gap-3 text-sm leading-6">
+                  <span class="bg-background text-foreground flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium">
+                    {index + 1}
+                  </span>
+                  {feature}
+                </li>
+              ))}
+            </ol>
+          )
         }
-      </List>
-      <SectionActions>
         {
-          links?.map(({ icon, text, ...link }, i) => (
-            <Button variant={i === 0 ? "outline" : "ghost"} {...link}>
-              {icon && <Icon name={icon} />}
-              {text}
-            </Button>
-          ))
+          buttons?.length && (
+            <div class="flex flex-wrap gap-3">
+              {buttons.map(({ href, label, ...button }, index) => (
+                <Button
+                  as="a"
+                  href={href}
+                  size="lg"
+                  variant={
+                    button.variant ?? (index === 0 ? "default" : "secondary")
+                  }
+                  {...button}
+                >
+                  {label}
+                </Button>
+              ))}
+            </div>
+          )
         }
-      </SectionActions>
-    </SectionContent>
-    <SectionMedia>
-      <Image
-        sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
-        {...image}
-      />
-    </SectionMedia>
-  </SectionSplit>
+      </div>
+      <div
+        class="bg-background relative min-h-72 overflow-hidden border-t lg:border-t-0 lg:border-l"
+      >
+        <div
+          class="bg-primary/8 absolute inset-x-8 top-8 h-24 rounded-full blur-3xl"
+        >
+        </div>
+        <Image
+          src={image.src}
+          alt={image.alt}
+          class="relative h-full min-h-72 w-full object-cover lg:translate-x-6 lg:scale-105"
+          widths={[640, 960, 1280]}
+          sizes="(min-width: 1024px) 55vw, 100vw"
+        />
+      </div>
+    </div>
+  </SectionContainer>
 </Section>

package/src/components/blocks/content-6.astro

@@ -1,76 +1,91 @@
 ---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Image } from "@/components/ui/image"
-import { List, ListItem } from "@/components/ui/list"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  list?: string[]
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
+  title: string
+  description: string
+  features?: string[]
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image?: {
-    src: string
+  image: {
+    src: ImageMetadata
     alt: string
   }
 }
 
-const { class: className, id, list, links, image } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  features,
+  buttons,
+  image,
+} = Astro.props
 ---
 
-<Section
-  class={cn(
-    "border-primary/20 my-0 -mt-px rounded-none shadow-none",
-    className
-  )}
-  id={id}
-  variant="floating"
->
-  <SectionSplit class="@5xl:items-center">
-    <SectionContent class="max-w-xl">
-      <SectionProse>
-        <slot />
-      </SectionProse>
-      <List>
+<Section class={cn("", className)}>
+  <SectionContainer>
+    <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
+      <Image
+        src={image.src}
+        alt={image.alt}
+        class="aspect-4/3 w-full rounded-xl border object-cover"
+        widths={[640, 960, 1280]}
+        sizes="(min-width: 1024px) 50vw, 100vw"
+      />
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-4">
+          <h2
+            class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+          >
+            {title}
+          </h2>
+          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        </div>
         {
-          list?.map((item) => (
-            <ListItem>
-              <Icon name="check" />
-              {item}
-            </ListItem>
-          ))
+          features?.length && (
+            <ul class="flex flex-col gap-3">
+              {features.map((feature) => (
+                <li class="flex items-center gap-3 text-sm">
+                  <Icon name="check" class="text-primary size-4 shrink-0" />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+          )
         }
-      </List>
-      <SectionActions>
         {
-          links?.map(({ icon, text, ...link }, i) => (
-            <Button variant={i === 0 ? "outline" : "ghost"} {...link}>
-              {icon && <Icon name={icon} />}
-              {text}
-            </Button>
-          ))
+          buttons?.length && (
+            <div class="flex flex-wrap gap-3">
+              {buttons.map(({ href, label, ...button }, index) => (
+                <Button
+                  as="a"
+                  href={href}
+                  size="lg"
+                  variant={
+                    button.variant ?? (index === 0 ? "default" : "secondary")
+                  }
+                  {...button}
+                >
+                  {label}
+                </Button>
+              ))}
+            </div>
+          )
         }
-      </SectionActions>
-    </SectionContent>
-    <SectionMedia class="@5xl:order-first">
-      <Image
-        sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
-        {...image}
-      />
-    </SectionMedia>
-  </SectionSplit>
+      </div>
+    </div>
+  </SectionContainer>
 </Section>