cta-1

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("", className)}>
45  <SectionContainer class="items-center text-center">
46    {
47      socialProof && (
48        <div class="flex flex-col items-center gap-3">
49          <AvatarGroup>
50            {socialProof.avatars.map((avatar) => (
51              <Avatar class="ring-background size-11 ring">
52                <AvatarImage
53                  src={avatar.image}
54                  alt={avatar.name ?? avatar.initials}
55                />
56                <AvatarFallback>{avatar.initials}</AvatarFallback>
57              </Avatar>
58            ))}
59          </AvatarGroup>
60          <div class="flex items-center gap-2">
61            <Rating value={socialProof.rating} />
62            <span class="text-muted-foreground text-sm">
63              {socialProof.text}
64            </span>
65          </div>
66        </div>
67      )
68    }
69    <div class="flex max-w-2xl flex-col items-center gap-5">
70      <h2
71        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
72      >
73        {title}
74      </h2>
75      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
76        {description}
77      </p>
78    </div>
79    {
80      buttons?.length && (
81        <div class="flex flex-wrap justify-center gap-3">
82          {buttons.map(({ href, label, ...button }, index) => (
83            <Button
84              as="a"
85              href={href}
86              size="lg"
87              variant={
88                button.variant ?? (index === 0 ? "default" : "secondary")
89              }
90              {...button}
91            >
92              {label}
93            </Button>
94          ))}
95        </div>
96      )
97    }
98  </SectionContainer>
99</Section>