cta-7

1---
2import type { ImageMetadata } from "astro"
3 
4import { cn } from "@/lib/utils"
5import {
6  Avatar,
7  AvatarFallback,
8  AvatarGroup,
9  AvatarGroupCount,
10  AvatarImage,
11} from "@/components/ui/avatar"
12import { Button } from "@/components/ui/button"
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    count?: string | number
31    rating?: number
32    text: string
33  }
34}
35 
36const {
37  class: className,
38  title,
39  description,
40  buttons,
41  socialProof,
42} = Astro.props
43---
44 
45<Section class={cn("bg-primary/10 border-primary/15 border-y", className)}>
46  <SectionContainer class="items-center text-center">
47    <div class="flex max-w-2xl flex-col items-center gap-5">
48      <h2
49        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
50      >
51        {title}
52      </h2>
53      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
54        {description}
55      </p>
56    </div>
57    {
58      buttons?.length && (
59        <div class="flex flex-wrap justify-center gap-3">
60          {buttons.map(({ href, label, ...button }, index) => (
61            <Button
62              as="a"
63              href={href}
64              size="lg"
65              variant={
66                button.variant ?? (index === 0 ? "default" : "secondary")
67              }
68              {...button}
69            >
70              {label}
71            </Button>
72          ))}
73        </div>
74      )
75    }
76    {
77      socialProof && (
78        <div class="flex flex-col items-center gap-4">
79          <AvatarGroup>
80            {socialProof.avatars.map((avatar) => (
81              <Avatar class="ring-primary/10 bg-background size-11 ring">
82                <AvatarImage
83                  src={avatar.image}
84                  alt={avatar.name ?? avatar.initials}
85                />
86                <AvatarFallback>{avatar.initials}</AvatarFallback>
87              </Avatar>
88            ))}
89            {socialProof.count && (
90              <AvatarGroupCount class="bg-background text-foreground ring-primary/10 size-11 ring">
91                {socialProof.count}
92              </AvatarGroupCount>
93            )}
94          </AvatarGroup>
95// … truncated