fulldev-ui 0.7.0-beta.9 → 0.9.0

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

@@ -0,0 +1,93 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  badge: string
+  title: string
+  buttons: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+  products: {
+    image: {
+      src: ImageMetadata
+      alt: string
+    }
+    title: string
+    description: string
+    price: {
+      value: number
+      currency: string
+      unit: string
+    }
+  }[]
+}
+
+const { class: className, badge, title, buttons, products } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer class="gap-8">
+    <div class="mx-auto max-w-2xl text-center">
+      <Badge variant="secondary">{badge}</Badge>
+      <h2
+        class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <div class="mt-4 flex flex-wrap justify-center gap-3">
+        {
+          buttons.map(({ href, label, ...button }) => (
+            <Button as="a" href={href} variant={button.variant}>
+              {label}
+            </Button>
+          ))
+        }
+      </div>
+    </div>
+    <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">
+            <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"
+              />
+            </div>
+            <CardHeader class="pt-6">
+              <CardTitle>{product.title}</CardTitle>
+              <CardDescription>{product.description}</CardDescription>
+            </CardHeader>
+            <CardContent class="pt-4 pb-6">
+              <Price>
+                <PriceValue
+                  price={product.price.value}
+                  currency={product.price.currency}
+                />
+                <PriceUnit>{product.price.unit}</PriceUnit>
+              </Price>
+            </CardContent>
+          </Card>
+        ))
+      }
+    </div>
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,74 @@
+---
+import type { ImageMetadata } from "astro"
+
+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"
+
+type Props = {
+  class?: string
+  title?: string
+  description?: string
+  reviews: {
+    rating: number
+    quote: string
+    image?: ImageMetadata
+    initials: string
+    name: string
+    role: string
+  }[]
+}
+
+const { class: className, title, description, reviews } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  {
+    (title || description) && (
+      <SectionContainer class="items-center gap-4 text-center">
+        {title && (
+          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+            {title}
+          </h2>
+        )}
+        {description && (
+          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )}
+      </SectionContainer>
+    )
+  }
+  <SectionContainer>
+    <div class="grid gap-6 md:grid-cols-3">
+      {
+        reviews.map((item) => (
+          <Card>
+            <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" />
+              </div>
+              <p class="text-muted-foreground text-sm leading-relaxed">
+                {item.quote}
+              </p>
+              <div class="flex items-center gap-3 pt-2">
+                <Avatar size="lg">
+                  <AvatarImage src={item.image} alt={item.name} />
+                  <AvatarFallback>{item.initials}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p class="text-foreground text-sm font-medium">{item.name}</p>
+                  <p class="text-muted-foreground text-xs">{item.role}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))
+      }
+    </div>
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,81 @@
+---
+import type { ImageMetadata } from "astro"
+
+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"
+
+type Props = {
+  class?: string
+  featured: {
+    quote: string
+    image?: ImageMetadata
+    initials: string
+    name: string
+    role: string
+  }
+  reviews: {
+    rating: number
+    quote: string
+    image?: ImageMetadata
+    initials: string
+    name: string
+    role: string
+  }[]
+}
+
+const { class: className, featured, reviews } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer
+    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" />
+      <blockquote
+        class="text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl"
+      >
+        {featured.quote}
+      </blockquote>
+      <div class="flex items-center gap-3 pt-2">
+        <Avatar size="lg">
+          <AvatarImage src={featured.image} alt={featured.name} />
+          <AvatarFallback>{featured.initials}</AvatarFallback>
+        </Avatar>
+        <div>
+          <p class="text-foreground text-sm font-medium">{featured.name}</p>
+          <p class="text-muted-foreground text-xs">{featured.role}</p>
+        </div>
+      </div>
+    </article>
+    <div class="grid gap-6">
+      {
+        reviews.map((item) => (
+          <article class="flex flex-col">
+            <Separator />
+            <div class="flex flex-col gap-3 pt-6">
+              <Rating value={item.rating} />
+              <p class="text-muted-foreground text-sm leading-relaxed">
+                {item.quote}
+              </p>
+              <div class="flex items-center gap-3 pt-1">
+                <Avatar>
+                  <AvatarImage src={item.image} alt={item.name} />
+                  <AvatarFallback>{item.initials}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p class="text-foreground text-sm font-medium">{item.name}</p>
+                  <p class="text-muted-foreground text-xs">{item.role}</p>
+                </div>
+              </div>
+            </div>
+          </article>
+        ))
+      }
+    </div>
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,84 @@
+---
+import type { ImageMetadata } from "astro"
+
+import { cn } from "@/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  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"
+
+type Props = {
+  class?: string
+  title?: string
+  description?: string
+  reviews: {
+    rating: number
+    quote: string
+    image?: ImageMetadata
+    initials: string
+    name: string
+    role: string
+  }[]
+}
+
+const { class: className, title, description, reviews } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  {
+    (title || description) && (
+      <SectionContainer class="items-center gap-4 text-center">
+        {title && (
+          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+            {title}
+          </h2>
+        )}
+        {description && (
+          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )}
+      </SectionContainer>
+    )
+  }
+  <SectionContainer>
+    <Carousel opts={{ loop: true, align: "center" }} class="mx-auto max-w-3xl">
+      <CarouselContent>
+        {
+          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" />
+                <Rating value={item.rating} />
+                <blockquote class="text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl">
+                  {item.quote}
+                </blockquote>
+                <div class="flex items-center gap-3 pt-2">
+                  <Avatar size="lg">
+                    <AvatarImage src={item.image} alt={item.name} />
+                    <AvatarFallback>{item.initials}</AvatarFallback>
+                  </Avatar>
+                  <div class="text-left">
+                    <p class="text-foreground text-sm font-medium">
+                      {item.name}
+                    </p>
+                    <p class="text-muted-foreground text-xs">{item.role}</p>
+                  </div>
+                </div>
+              </div>
+            </CarouselItem>
+          ))
+        }
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,111 @@
+---
+import type { ImageMetadata } from "astro"
+
+import { cn } from "@/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Card, CardContent } from "@/components/ui/card"
+import { Marquee } from "@/components/ui/marquee"
+import { Rating } from "@/components/ui/rating"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  title?: string
+  description?: string
+  reviews: {
+    rating: number
+    quote: string
+    image?: ImageMetadata
+    initials: string
+    name: string
+    role: string
+  }[]
+}
+
+const { class: className, title, description, reviews } = Astro.props
+
+const half = Math.ceil(reviews.length / 2)
+const topRow = reviews.slice(0, half)
+const bottomRow = reviews.slice(half)
+---
+
+<Section class={cn("", className)}>
+  {
+    (title || description) && (
+      <SectionContainer class="items-center gap-4 text-center">
+        {title && (
+          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+            {title}
+          </h2>
+        )}
+        {description && (
+          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )}
+      </SectionContainer>
+    )
+  }
+  <div class="flex flex-col gap-6 overflow-x-hidden py-1">
+    <Marquee
+      direction="left"
+      pauseOnHover
+      infinite
+      gap="1rem"
+      class="py-1 [&>div]:items-stretch"
+    >
+      {
+        topRow.map((item) => (
+          <Card class="flex w-[22rem] shrink-0 self-stretch">
+            <CardContent class="flex min-w-0 flex-1 flex-col gap-3">
+              <Rating value={item.rating} />
+              <p class="text-muted-foreground min-w-0 text-sm leading-relaxed">
+                {item.quote}
+              </p>
+              <div class="mt-auto flex items-center gap-3 pt-1">
+                <Avatar>
+                  <AvatarImage src={item.image} alt={item.name} />
+                  <AvatarFallback>{item.initials}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p class="text-foreground text-sm font-medium">{item.name}</p>
+                  <p class="text-muted-foreground text-xs">{item.role}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))
+      }
+    </Marquee>
+    <Marquee
+      direction="right"
+      pauseOnHover
+      infinite
+      gap="1rem"
+      class="py-1 [&>div]:items-stretch"
+    >
+      {
+        bottomRow.map((item) => (
+          <Card class="flex w-[22rem] shrink-0 self-stretch">
+            <CardContent class="flex min-w-0 flex-1 flex-col gap-3">
+              <Rating value={item.rating} />
+              <p class="text-muted-foreground min-w-0 text-sm leading-relaxed">
+                {item.quote}
+              </p>
+              <div class="mt-auto flex items-center gap-3 pt-1">
+                <Avatar>
+                  <AvatarImage src={item.image} alt={item.name} />
+                  <AvatarFallback>{item.initials}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p class="text-foreground text-sm font-medium">{item.name}</p>
+                  <p class="text-muted-foreground text-xs">{item.role}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))
+      }
+    </Marquee>
+  </div>
+</Section>

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

@@ -0,0 +1,172 @@
+---
+import type { ImageMetadata } from "astro"
+
+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"
+
+type Props = {
+  class?: string
+  title?: string
+  description?: string
+  reviews: {
+    quote: string
+    image?: ImageMetadata
+    initials: string
+    name: string
+    role: string
+    rating: number
+  }[]
+}
+
+const { class: className, title, description, reviews } = Astro.props
+
+const third = Math.ceil(reviews.length / 3)
+const row1 = reviews.slice(0, third)
+const row2 = reviews.slice(third, third * 2)
+const row3 = reviews.slice(third * 2)
+---
+
+<Section class={cn("", className)}>
+  {
+    (title || description) && (
+      <SectionContainer class="items-center gap-4 text-center">
+        {title && (
+          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+            {title}
+          </h2>
+        )}
+        {description && (
+          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )}
+      </SectionContainer>
+    )
+  }
+  <div class="flex flex-col gap-5">
+    <Marquee
+      direction="left"
+      pauseOnHover
+      infinite
+      gap="1.25rem"
+      class="[&>div]:items-stretch"
+    >
+      {
+        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="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <Avatar size="lg">
+                    <AvatarImage src={item.image} alt={item.name} />
+                    <AvatarFallback>{item.initials}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p class="text-foreground text-sm font-semibold">
+                      {item.name}
+                    </p>
+                    <p class="text-muted-foreground text-xs">{item.role}</p>
+                  </div>
+                </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">
+                  {item.quote}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))
+      }
+    </Marquee>
+    <Marquee
+      direction="right"
+      pauseOnHover
+      infinite
+      gap="1.25rem"
+      class="[&>div]:items-stretch"
+    >
+      {
+        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="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <Avatar size="lg">
+                    <AvatarImage src={item.image} alt={item.name} />
+                    <AvatarFallback>{item.initials}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p class="text-foreground text-sm font-semibold">
+                      {item.name}
+                    </p>
+                    <p class="text-muted-foreground text-xs">{item.role}</p>
+                  </div>
+                </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">
+                  {item.quote}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))
+      }
+    </Marquee>
+    <Marquee
+      direction="left"
+      pauseOnHover
+      infinite
+      gap="1.25rem"
+      class="[&>div]:items-stretch"
+    >
+      {
+        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="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <Avatar size="lg">
+                    <AvatarImage src={item.image} alt={item.name} />
+                    <AvatarFallback>{item.initials}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p class="text-foreground text-sm font-semibold">
+                      {item.name}
+                    </p>
+                    <p class="text-muted-foreground text-xs">{item.role}</p>
+                  </div>
+                </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">
+                  {item.quote}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))
+      }
+    </Marquee>
+  </div>
+</Section>