fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,59 +1,67 @@
 ---
+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 {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    text?: string
-    href?: string
-    icon?: 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, links, image } = Astro.props
+const { class: className, title, description, buttons, image } = Astro.props
 ---
 
-<Section class={className} id={id} size="lg">
-  <SectionContent class="items-center">
-    <SectionProse class="text-center text-balance" size="lg">
-      <slot />
-    </SectionProse>
-    <SectionActions class="justify-center">
+<Section
+  class={cn("dark bg-background min-h-[80vh] justify-center", className)}
+>
+  <SectionContainer class="relative z-10 items-center gap-8 text-center">
+    <h1
+      class="text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl"
+    >
+      {title}
+    </h1>
+    <p
+      class="text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance"
+    >
+      {description}
+    </p>
+    <div class="flex flex-wrap justify-center gap-3">
       {
-        links?.map(({ icon, text, ...link }, i) => (
+        buttons.map(({ href, label, ...button }, index) => (
           <Button
-            variant={i === 0 ? "default" : "secondary"}
+            as="a"
+            href={href}
             size="lg"
-            {...link}
+            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
+            {...button}
           >
-            {icon && <Icon name={icon} />}
-            {text}
+            {label}
           </Button>
         ))
       }
-    </SectionActions>
-  </SectionContent>
-  <SectionMedia class="absolute inset-0 rounded-none bg-white dark:bg-black">
+    </div>
+  </SectionContainer>
+  <div class="bg-background pointer-events-none absolute inset-0">
     <Image
-      class="opacity-50"
-      sizes="(min-width: 1536px) 1536px, 100vw"
-      priority
-      {...image}
+      src={image.src}
+      alt={image.alt}
+      class="size-full object-cover opacity-50"
+      widths={[640, 960, 1280, 1920]}
+      sizes="100vw"
+      loading="eager"
     />
-  </SectionMedia>
+  </div>
 </Section>

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

@@ -1,64 +1,86 @@
 ---
+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 {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    text?: string
-    href?: string
-    icon?: 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, links, image } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  features,
+  buttons,
+  image,
+} = Astro.props
 ---
 
 <Section
-  class={cn("justify-center py-[36cqw] @5xl:py-[18cqw]", className)}
-  id={id}
-  size="lg"
+  class={cn("dark bg-background min-h-screen justify-center", className)}
 >
-  <SectionContent class="items-center">
-    <SectionProse class="text-center text-balance" size="lg">
-      <slot />
-    </SectionProse>
-    <SectionActions class="justify-center">
+  <SectionContainer class="relative z-10 items-center gap-8 text-center">
+    <h1
+      class="text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl"
+    >
+      {title}
+    </h1>
+    <p
+      class="text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance"
+    >
+      {description}
+    </p>
+    <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
+      {
+        features.map((feature) => (
+          <li class="flex items-center gap-2 text-sm">
+            <Icon name="check" class="text-primary size-4 shrink-0" />
+            {feature}
+          </li>
+        ))
+      }
+    </ul>
+    <div class="flex flex-wrap justify-center gap-3">
       {
-        links?.map(({ icon, text, ...link }, i) => (
+        buttons.map(({ href, label, ...button }, index) => (
           <Button
-            variant={i === 0 ? "default" : "secondary"}
+            as="a"
+            href={href}
             size="lg"
-            {...link}
+            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
+            {...button}
           >
-            {icon && <Icon name={icon} />}
-            {text}
+            {label}
           </Button>
         ))
       }
-    </SectionActions>
-  </SectionContent>
-  <SectionMedia class="absolute inset-0 rounded-none bg-white dark:bg-black">
+    </div>
+  </SectionContainer>
+  <div class="bg-background pointer-events-none absolute inset-0">
     <Image
-      class="opacity-50"
-      sizes="(min-width: 1536px) 1536px, 100vw"
-      priority
-      {...image}
+      src={image.src}
+      alt={image.alt}
+      class="size-full object-cover opacity-50"
+      widths={[640, 960, 1280, 1920]}
+      sizes="100vw"
+      loading="eager"
     />
-  </SectionMedia>
+  </div>
 </Section>

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

@@ -1,99 +1,122 @@
 ---
-import { Avatar, AvatarImage } from "@/components/ui/avatar"
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Image } from "@/components/ui/image"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-} from "@/components/ui/item"
-import { List, ListItem } from "@/components/ui/list"
 import { Rating } from "@/components/ui/rating"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-} 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"
   }[]
-  item?: {
-    images?: {
-      src: string
-      alt: string
+  socialProof: {
+    avatars: {
+      image?: ImageMetadata
+      initials: string
+      name?: string
     }[]
-    rating?: number
-    description?: string
+    rating: number
+    text: string
   }
-  image?: {
-    src: string
+  image: {
+    src: ImageMetadata
     alt: string
   }
 }
 
-const { class: className, id, list, links, item, image } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  features,
+  buttons,
+  socialProof,
+  image,
+} = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionContent>
-    <SectionProse size="lg">
-      <slot />
-    </SectionProse>
-    <List>
-      {
-        list?.map((item) => (
-          <ListItem>
-            <Icon name="check" />
-            {item}
-          </ListItem>
-        ))
-      }
-    </List>
-    <SectionActions>
-      {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button
-            variant={i === 0 ? "default" : "secondary"}
-            size="lg"
-            {...link}
-          >
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
-        ))
-      }
-    </SectionActions>
-    <Item class="p-0">
-      <ItemMedia class="-space-x-5">
+<Section class={cn("", className)}>
+  <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-4">
+        <h1
+          class="text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl"
+        >
+          {title}
+        </h1>
+        <p class="text-muted-foreground text-lg leading-relaxed">
+          {description}
+        </p>
+      </div>
+      <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>
+      <div class="flex flex-wrap gap-3">
         {
-          item?.images?.map((image) => (
-            <Avatar class="ring-background size-11 ring">
-              <AvatarImage {...image} />
-            </Avatar>
+          buttons.map(({ href, label, ...button }, index) => (
+            <Button
+              as="a"
+              href={href}
+              size="lg"
+              variant={
+                button.variant ?? (index === 0 ? "default" : "secondary")
+              }
+              {...button}
+            >
+              {label}
+            </Button>
           ))
         }
-      </ItemMedia>
-      <ItemContent class="mt-1">
-        <Rating rating={item?.rating} />
-        <ItemDescription>
-          {item?.description}
-        </ItemDescription>
-      </ItemContent>
-    </Item>
-  </SectionContent>
-  <SectionMedia>
-    <Image sizes="(min-width: 1536px) 1536px, 100vw" priority {...image} />
-  </SectionMedia>
+      </div>
+      <div class="flex items-center gap-3">
+        <AvatarGroup>
+          {
+            socialProof.avatars.map((avatar) => (
+              <Avatar class="ring-background size-11 ring">
+                <AvatarImage
+                  src={avatar.image}
+                  alt={avatar.name ?? avatar.initials}
+                />
+                <AvatarFallback>{avatar.initials}</AvatarFallback>
+              </Avatar>
+            ))
+          }
+        </AvatarGroup>
+        <div class="flex flex-col gap-0.5">
+          <Rating value={socialProof.rating} />
+          <span class="text-muted-foreground text-xs">{socialProof.text}</span>
+        </div>
+      </div>
+    </div>
+    <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"
+      loading="eager"
+    />
+  </SectionContainer>
 </Section>

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

@@ -1,106 +1,122 @@
 ---
-import { Avatar, AvatarImage } from "@/components/ui/avatar"
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Image } from "@/components/ui/image"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-} from "@/components/ui/item"
-import { List, ListItem } from "@/components/ui/list"
 import { Rating } from "@/components/ui/rating"
-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"
   }[]
-  item?: {
-    images?: {
-      src: string
-      alt: string
+  socialProof: {
+    avatars: {
+      image?: ImageMetadata
+      initials: string
+      name?: string
     }[]
-    rating?: number
-    description?: string
+    rating: number
+    text: string
   }
-  image?: {
-    src: string
+  image: {
+    src: ImageMetadata
     alt: string
   }
 }
 
-const { class: className, id, list, links, item, image } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  features,
+  buttons,
+  socialProof,
+  image,
+} = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSplit class="@5xl:items-center">
-    <SectionContent>
-      <SectionProse class="text-balance" size="lg">
-        <slot />
-      </SectionProse>
-      <List>
+<Section class={cn("", className)}>
+  <SectionContainer 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"
+      loading="eager"
+    />
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-4">
+        <h1
+          class="text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl"
+        >
+          {title}
+        </h1>
+        <p class="text-muted-foreground text-lg leading-relaxed">
+          {description}
+        </p>
+      </div>
+      <ul class="flex flex-col gap-3">
         {
-          list?.map((item) => (
-            <ListItem>
-              <Icon name="check" />
-              {item}
-            </ListItem>
+          features.map((feature) => (
+            <li class="flex items-center gap-3 text-sm">
+              <Icon name="check" class="text-primary size-4 shrink-0" />
+              {feature}
+            </li>
           ))
         }
-      </List>
-      <SectionActions>
+      </ul>
+      <div class="flex flex-wrap gap-3">
         {
-          links?.map(({ icon, text, ...link }, i) => (
+          buttons.map(({ href, label, ...button }, index) => (
             <Button
-              variant={i === 0 ? "default" : "secondary"}
+              as="a"
+              href={href}
               size="lg"
-              {...link}
+              variant={
+                button.variant ?? (index === 0 ? "default" : "secondary")
+              }
+              {...button}
             >
-              {icon && <Icon name={icon} />}
-              {text}
+              {label}
             </Button>
           ))
         }
-      </SectionActions>
-      <Item class="p-0">
-        <ItemMedia class="-space-x-5">
+      </div>
+      <div class="flex items-center gap-3">
+        <AvatarGroup>
           {
-            item?.images?.map((image) => (
+            socialProof.avatars.map((avatar) => (
               <Avatar class="ring-background size-11 ring">
-                <AvatarImage {...image} />
+                <AvatarImage
+                  src={avatar.image}
+                  alt={avatar.name ?? avatar.initials}
+                />
+                <AvatarFallback>{avatar.initials}</AvatarFallback>
               </Avatar>
             ))
           }
-        </ItemMedia>
-        <ItemContent class="mt-1">
-          <Rating rating={item?.rating} />
-          <ItemDescription>
-            {item?.description}
-          </ItemDescription>
-        </ItemContent>
-      </Item>
-    </SectionContent>
-    <SectionMedia>
-      <Image
-        sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
-        priority
-        {...image}
-      />
-    </SectionMedia>
-  </SectionSplit>
+        </AvatarGroup>
+        <div class="flex flex-col gap-0.5">
+          <Rating value={socialProof.rating} />
+          <span class="text-muted-foreground text-xs">{socialProof.text}</span>
+        </div>
+      </div>
+    </div>
+  </SectionContainer>
 </Section>