cta-8

1---
2import { cn } from "@/lib/utils"
3import { Button } from "@/components/ui/button"
4import { Section, SectionContainer } from "@/components/ui/section"
5 
6type Props = {
7  class?: string
8  title: string
9  description: string
10  buttons?: {
11    label: string
12    href: string
13    variant?: "default" | "outline" | "secondary" | "ghost"
14  }[]
15}
16 
17const { class: className, title, description, buttons } = Astro.props
18---
19 
20<Section
21  variant="floating"
22  class={cn("border-primary/20 shadow-none", className)}
23>
24  <SectionContainer
25    class="before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl"
26  >
27    <div class="flex max-w-2xl flex-col items-center gap-5 text-center">
28      <h2
29        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
30      >
31        {title}
32      </h2>
33      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
34        {description}
35      </p>
36    </div>
37    {
38      buttons?.length && (
39        <div class="flex flex-wrap justify-center gap-3">
40          {buttons.map(({ href, label, ...button }, index) => (
41            <Button
42              as="a"
43              href={href}
44              size="lg"
45              variant={button.variant ?? (index === 0 ? "default" : "outline")}
46              {...button}
47            >
48              {label}
49            </Button>
50          ))}
51        </div>
52      )
53    }
54  </SectionContainer>
55</Section>