cta-2

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