cta-4

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