fulldev-ui 0.9.2 → 0.10.0

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

@@ -1,4 +1,6 @@
 ---
+import { CheckIcon } from "@lucide/astro"
+
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -10,7 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { Icon } from "@/components/ui/icon"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
@@ -70,7 +71,7 @@ const { class: className, badge, title, description, offer } = Astro.props
           {
             offer.features.map((feature) => (
               <li class="flex items-center gap-3 text-sm">
-                <Icon name="check" class="text-primary size-4 shrink-0" />
+                <CheckIcon class="text-primary size-4 shrink-0" />
                 {feature}
               </li>
             ))

package/src/components/blocks/products-1.astro

@@ -53,7 +53,7 @@ const { class: className, badge, title, products } = Astro.props
             <Image
               src={product.image.src}
               alt={product.image.alt}
-              class="aspect-4/3 w-full object-cover"
+              class="aspect-[4/3] w-full object-cover"
             />
             <CardHeader>
               <CardTitle>{product.title}</CardTitle>

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

@@ -56,7 +56,7 @@ const { class: className, title, description, buttons, products } = Astro.props
           {description}
         </p>
       </div>
-      <div class="flex shrink-0 flex-wrap gap-3">
+      <div class="flex flex-shrink-0 flex-wrap gap-3">
         {
           buttons.map(({ href, label, ...button }) => (
             <Button as="a" href={href} variant={button.variant}>
@@ -73,7 +73,7 @@ const { class: className, title, description, buttons, products } = Astro.props
             <Image
               src={product.image.src}
               alt={product.image.alt}
-              class="aspect-4/3 w-full object-cover"
+              class="aspect-[4/3] w-full object-cover"
             />
             <CardHeader>
               <CardTitle>{product.title}</CardTitle>

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

@@ -64,19 +64,19 @@ const { class: className, badge, title, buttons, products } = Astro.props
     <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
       {
         products.map((product) => (
-          <Card class="group/product gap-0 overflow-hidden py-0">
+          <Card class="group/product gap-0 overflow-hidden">
             <div class="overflow-hidden">
               <Image
                 src={product.image.src}
                 alt={product.image.alt}
-                class="aspect-3/4 w-full object-cover transition-transform duration-300 group-hover/product:scale-105"
+                class="aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105"
               />
             </div>
-            <CardHeader class="pt-6">
+            <CardHeader>
               <CardTitle>{product.title}</CardTitle>
               <CardDescription>{product.description}</CardDescription>
             </CardHeader>
-            <CardContent class="pt-4 pb-6">
+            <CardContent>
               <Price>
                 <PriceValue
                   price={product.price.value}

package/src/components/blocks/reviews-1.astro

@@ -1,10 +1,10 @@
 ---
 import type { ImageMetadata } from "astro"
+import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Card, CardContent } from "@/components/ui/card"
-import { Icon } from "@/components/ui/icon"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
@@ -50,7 +50,7 @@ const { class: className, title, description, reviews } = Astro.props
             <CardContent class="flex flex-col gap-4">
               <div class="flex items-center justify-between">
                 <Rating value={item.rating} />
-                <Icon name="quote" class="text-muted-foreground/20 size-6" />
+                <QuoteIcon class="text-muted-foreground/20 size-6" />
               </div>
               <p class="text-muted-foreground text-sm leading-relaxed">
                 {item.quote}

package/src/components/blocks/reviews-2.astro

@@ -1,9 +1,9 @@
 ---
 import type { ImageMetadata } from "astro"
+import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Icon } from "@/components/ui/icon"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
@@ -35,7 +35,7 @@ const { class: className, featured, reviews } = Astro.props
     class="grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start"
   >
     <article class="flex flex-col gap-6 rounded-xl border p-8">
-      <Icon name="quote" class="text-primary size-8" />
+      <QuoteIcon class="text-primary size-8" />
       <blockquote
         class="text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl"
       >

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

@@ -1,5 +1,6 @@
 ---
 import type { ImageMetadata } from "astro"
+import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@@ -10,7 +11,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel"
-import { Icon } from "@/components/ui/icon"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
@@ -55,7 +55,7 @@ const { class: className, title, description, reviews } = Astro.props
           reviews.map((item) => (
             <CarouselItem>
               <div class="flex flex-col items-center gap-6 px-4 py-8 text-center">
-                <Icon name="quote" class="text-primary size-10" />
+                <QuoteIcon class="text-primary size-10" />
                 <Rating value={item.rating} />
                 <blockquote class="text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl">
                   {item.quote}

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

@@ -57,9 +57,9 @@ const bottomRow = reviews.slice(half)
       {
         topRow.map((item) => (
           <Card class="flex w-[22rem] shrink-0 self-stretch">
-            <CardContent class="flex min-w-0 flex-1 flex-col gap-3">
+            <CardContent class="flex flex-1 flex-col gap-3">
               <Rating value={item.rating} />
-              <p class="text-muted-foreground min-w-0 text-sm leading-relaxed">
+              <p class="text-muted-foreground text-sm leading-relaxed">
                 {item.quote}
               </p>
               <div class="mt-auto flex items-center gap-3 pt-1">
@@ -87,9 +87,9 @@ const bottomRow = reviews.slice(half)
       {
         bottomRow.map((item) => (
           <Card class="flex w-[22rem] shrink-0 self-stretch">
-            <CardContent class="flex min-w-0 flex-1 flex-col gap-3">
+            <CardContent class="flex flex-1 flex-col gap-3">
               <Rating value={item.rating} />
-              <p class="text-muted-foreground min-w-0 text-sm leading-relaxed">
+              <p class="text-muted-foreground text-sm leading-relaxed">
                 {item.quote}
               </p>
               <div class="mt-auto flex items-center gap-3 pt-1">

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

@@ -1,9 +1,9 @@
 ---
 import type { ImageMetadata } from "astro"
+import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Icon } from "@/components/ui/icon"
 import { Marquee } from "@/components/ui/marquee"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
@@ -57,8 +57,8 @@ const row3 = reviews.slice(third * 2)
     >
       {
         row1.map((item) => (
-          <div class="bg-muted/50 flex w-104 shrink-0 rounded-2xl p-6">
-            <div class="flex min-w-0 flex-1 flex-col gap-4">
+          <div class="bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6">
+            <div class="flex flex-1 flex-col gap-4">
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-3">
                   <Avatar size="lg">
@@ -74,12 +74,9 @@ const row3 = reviews.slice(third * 2)
                 </div>
                 <Rating value={item.rating} />
               </div>
-              <div class="flex min-w-0 gap-2.5">
-                <Icon
-                  name="quote"
-                  class="text-primary/30 mt-0.5 size-5 shrink-0"
-                />
-                <p class="text-foreground/80 min-w-0 text-sm leading-relaxed">
+              <div class="flex gap-2.5">
+                <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
+                <p class="text-foreground/80 text-sm leading-relaxed">
                   {item.quote}
                 </p>
               </div>
@@ -97,8 +94,8 @@ const row3 = reviews.slice(third * 2)
     >
       {
         row2.map((item) => (
-          <div class="bg-muted/50 flex w-104 shrink-0 rounded-2xl p-6">
-            <div class="flex min-w-0 flex-1 flex-col gap-4">
+          <div class="bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6">
+            <div class="flex flex-1 flex-col gap-4">
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-3">
                   <Avatar size="lg">
@@ -114,12 +111,9 @@ const row3 = reviews.slice(third * 2)
                 </div>
                 <Rating value={item.rating} />
               </div>
-              <div class="flex min-w-0 gap-2.5">
-                <Icon
-                  name="quote"
-                  class="text-primary/30 mt-0.5 size-5 shrink-0"
-                />
-                <p class="text-foreground/80 min-w-0 text-sm leading-relaxed">
+              <div class="flex gap-2.5">
+                <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
+                <p class="text-foreground/80 text-sm leading-relaxed">
                   {item.quote}
                 </p>
               </div>
@@ -137,8 +131,8 @@ const row3 = reviews.slice(third * 2)
     >
       {
         row3.map((item) => (
-          <div class="bg-muted/50 flex w-104 shrink-0 rounded-2xl p-6">
-            <div class="flex min-w-0 flex-1 flex-col gap-4">
+          <div class="bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6">
+            <div class="flex flex-1 flex-col gap-4">
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-3">
                   <Avatar size="lg">
@@ -154,12 +148,9 @@ const row3 = reviews.slice(third * 2)
                 </div>
                 <Rating value={item.rating} />
               </div>
-              <div class="flex min-w-0 gap-2.5">
-                <Icon
-                  name="quote"
-                  class="text-primary/30 mt-0.5 size-5 shrink-0"
-                />
-                <p class="text-foreground/80 min-w-0 text-sm leading-relaxed">
+              <div class="flex gap-2.5">
+                <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
+                <p class="text-foreground/80 text-sm leading-relaxed">
                   {item.quote}
                 </p>
               </div>

package/src/components/blocks/services-1.astro

@@ -1,12 +1,13 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -18,7 +19,7 @@ type Props = {
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
-    image: {
+    image?: {
       src: ImageMetadata
       alt: string
     }
@@ -70,9 +71,9 @@ const { class: className, badge, title, buttons, services } = Astro.props
               )}
             >
               <Image
-                src={service.image.src}
-                alt={service.image.alt}
-                class="aspect-4/3 w-full object-cover"
+                src={service.image?.src ?? PlaceholderImage}
+                alt={service.image?.alt ?? service.title}
+                class="aspect-[4/3] w-full object-cover"
                 widths={[320, 480, 640]}
                 sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
               />
@@ -88,10 +89,7 @@ const { class: className, badge, title, buttons, services } = Astro.props
                 </p>
                 {service.href && (
                   <span class="mt-auto pt-2">
-                    <Icon
-                      name="arrow-right"
-                      class="text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1"
-                    />
+                    <ArrowRightIcon class="text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1" />
                   </span>
                 )}
               </div>

package/src/components/blocks/services-2.astro

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -18,7 +19,7 @@ type Props = {
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
-    image: {
+    image?: {
       src: ImageMetadata
       alt: string
     }
@@ -75,9 +76,9 @@ const {
         services.map((service) => (
           <div class="group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0">
             <Image
-              src={service.image.src}
-              alt={service.image.alt}
-              class="aspect-4/3 w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none"
+              src={service.image?.src ?? PlaceholderImage}
+              alt={service.image?.alt ?? service.title}
+              class="aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none"
               widths={[320, 480]}
               sizes="(min-width: 768px) 16rem, 100vw"
             />

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

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -18,7 +19,7 @@ type Props = {
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
-    image: {
+    image?: {
       src: ImageMetadata
       alt: string
     }
@@ -72,15 +73,15 @@ const {
     <div class="grid gap-6 sm:grid-cols-2">
       {
         services.map((service) => (
-          <div class="group/service relative isolate flex aspect-4/3 flex-col justify-end overflow-hidden rounded-xl">
+          <div class="group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl">
             <Image
-              src={service.image.src}
-              alt={service.image.alt}
+              src={service.image?.src ?? PlaceholderImage}
+              alt={service.image?.alt ?? service.title}
               class="absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105"
               widths={[480, 640, 960]}
               sizes="(min-width: 640px) 50vw, 100vw"
             />
-            <div class="absolute inset-0 -z-10 bg-linear-to-t from-black/80 via-black/40 to-transparent" />
+            <div class="absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
             <div class="flex flex-col gap-2 p-6 text-white">
               <h3 class="text-xl font-semibold">{service.title}</h3>
               <p class="text-sm leading-relaxed text-white/80">

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

@@ -1,11 +1,12 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -17,7 +18,7 @@ type Props = {
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
-    image: {
+    image?: {
       src: ImageMetadata
       alt: string
     }
@@ -66,9 +67,9 @@ const { class: className, title, description, buttons, services } = Astro.props
         services.map((service) => (
           <article class="group/service flex flex-col gap-4">
             <Image
-              src={service.image.src}
-              alt={service.image.alt}
-              class="aspect-16/10 w-full rounded-lg object-cover"
+              src={service.image?.src ?? PlaceholderImage}
+              alt={service.image?.alt ?? service.title}
+              class="aspect-[16/10] w-full rounded-lg object-cover"
               widths={[320, 480, 640]}
               sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
             />
@@ -84,10 +85,7 @@ const { class: className, title, description, buttons, services } = Astro.props
                 class="text-primary inline-flex items-center gap-1.5 text-sm font-medium"
               >
                 Learn more
-                <Icon
-                  name="arrow-right"
-                  class="size-3.5 transition-transform group-hover/service:translate-x-1"
-                />
+                <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
               </a>
             )}
           </article>

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

@@ -1,4 +1,6 @@
 ---
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
+
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -82,10 +84,7 @@ const {
                 class="text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium"
               >
                 Learn more
-                <Icon
-                  name="arrow-right"
-                  class="size-3.5 transition-transform group-hover/service:translate-x-1"
-                />
+                <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
               </a>
             )}
           </div>

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

@@ -1,12 +1,13 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -19,7 +20,7 @@ type Props = {
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
-    image: {
+    image?: {
       src: ImageMetadata
       alt: string
     }
@@ -72,13 +73,13 @@ const {
         services.map((service) => (
           <div class="group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black">
             <Image
-              src={service.image.src}
-              alt={service.image.alt}
+              src={service.image?.src ?? PlaceholderImage}
+              alt={service.image?.alt ?? service.title}
               class="absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105"
               widths={[320, 480, 640]}
               sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
             />
-            <div class="absolute inset-0 -z-10 bg-linear-to-t from-black/70 to-transparent" />
+            <div class="absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent" />
             <div class="flex items-end justify-between gap-4 p-5 text-white">
               <div class="flex flex-col gap-1">
                 <h3 class="text-lg font-semibold">{service.title}</h3>
@@ -91,7 +92,7 @@ const {
                   href={service.href}
                   class="shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25"
                 >
-                  <Icon name="arrow-right" class="size-4 text-white" />
+                  <ArrowRightIcon class="size-4 text-white" />
                 </a>
               )}
             </div>

package/src/components/blocks/services-7.astro

@@ -1,12 +1,13 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
+import PlaceholderImage from "@/assets/placeholder.webp"
 
 type Props = {
   class?: string
@@ -19,7 +20,7 @@ type Props = {
     variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
-    image: {
+    image?: {
       src: ImageMetadata
       alt: string
     }
@@ -83,11 +84,11 @@ const {
             )}
           >
             <Image
-              src={service.image.src}
-              alt={service.image.alt}
+              src={service.image?.src ?? PlaceholderImage}
+              alt={service.image?.alt ?? service.title}
               class={cn(
                 "w-full object-cover",
-                index === 0 ? "aspect-video" : "aspect-16/10"
+                index === 0 ? "aspect-[16/9]" : "aspect-[16/10]"
               )}
               widths={[320, 480, 640, 960]}
               sizes={
@@ -117,10 +118,7 @@ const {
                 )}
               >
                 Learn more
-                <Icon
-                  name="arrow-right"
-                  class="size-3.5 transition-transform group-hover/service:translate-x-1"
-                />
+                <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
               </div>
             </div>
           </a>