cta-3

1---
2import type { ImageMetadata } from "astro"
3 
4import { cn } from "@/lib/utils"
5import {
6  Avatar,
7  AvatarFallback,
8  AvatarGroup,
9  AvatarImage,
10} from "@/components/ui/avatar"
11import { Button } from "@/components/ui/button"
12import { Rating } from "@/components/ui/rating"
13import { Section, SectionContainer } from "@/components/ui/section"
14 
15type Props = {
16  class?: string
17  title: string
18  description: string
19  buttons?: {
20    label: string
21    href: string
22    variant?: "default" | "outline" | "secondary" | "ghost"
23  }[]
24  socialProof?: {
25    avatars: {
26      image?: ImageMetadata
27      initials: string
28      name?: string
29    }[]
30    rating: number
31    text: string
32  }
33}
34 
35const {
36  class: className,
37  title,
38  description,
39  buttons,
40  socialProof,
41} = Astro.props
42---
43 
44<Section variant="floating" class={cn("bg-accent/50 shadow-none", className)}>
45  <SectionContainer
46    class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"
47  >
48    <div class="flex flex-col gap-5">
49      <h2
50        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
51      >
52        {title}
53      </h2>
54      <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed">
55        {description}
56      </p>
57    </div>
58    <div class="flex flex-col gap-6 lg:items-end">
59      {
60        buttons?.length && (
61          <div class="flex flex-wrap gap-3">
62            {buttons.map(({ href, label, ...button }, index) => (
63              <Button
64                as="a"
65                href={href}
66                size="lg"
67                variant={
68                  button.variant ?? (index === 0 ? "default" : "secondary")
69                }
70                {...button}
71              >
72                {label}
73              </Button>
74            ))}
75          </div>
76        )
77      }
78      {
79        socialProof && (
80          <div class="flex items-center gap-3">
81            <AvatarGroup>
82              {socialProof.avatars.map((avatar) => (
83                <Avatar class="ring-background size-11 ring">
84                  <AvatarImage
85                    src={avatar.image}
86                    alt={avatar.name ?? avatar.initials}
87                  />
88                  <AvatarFallback>{avatar.initials}</AvatarFallback>
89                </Avatar>
90              ))}
91            </AvatarGroup>
92            <div class="flex flex-col gap-0.5">
93              <Rating value={socialProof.rating} />
94// … truncated