cta-6

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 class={cn("", className)}>
51  <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
52    <Image
53      src={image.src}
54      alt={image.alt}
55      class="aspect-4/3 w-full rounded-xl border object-cover"
56      widths={[640, 960, 1280]}
57      sizes="(min-width: 1024px) 50vw, 100vw"
58    />
59    <div class="flex flex-col gap-6">
60      <div class="flex flex-col gap-4">
61        <h2
62          class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
63        >
64          {title}
65        </h2>
66        <p class="text-muted-foreground text-lg leading-relaxed">
67          {description}
68        </p>
69      </div>
70      {
71        buttons?.length && (
72          <div class="flex flex-wrap gap-3">
73            {buttons.map(({ href, label, ...button }, index) => (
74              <Button
75                as="a"
76                href={href}
77                size="lg"
78                variant={
79                  button.variant ?? (index === 0 ? "default" : "outline")
80                }
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-10 ring">
95                  <AvatarImage
96                    src={avatar.image}
97                    alt={avatar.name ?? avatar.initials}
98                  />
99// … truncated