features-6

1---
2import { cn } from "@/lib/utils"
3import { Button } from "@/components/ui/button"
4import { Section, SectionContainer } from "@/components/ui/section"
5import { Separator } from "@/components/ui/separator"
6 
7type Props = {
8  class?: string
9  title: string
10  description: string
11  buttons?: {
12    label: string
13    href: string
14    variant?: "default" | "outline" | "secondary" | "ghost"
15  }[]
16  features: {
17    title: string
18    description: string
19  }[]
20}
21 
22const { class: className, title, description, buttons, features } = Astro.props
23---
24 
25<Section class={cn("", className)}>
26  <SectionContainer>
27    <div class="flex max-w-2xl flex-col gap-4">
28      <h2
29        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
30      >
31        {title}
32      </h2>
33      <p class="text-muted-foreground text-base leading-relaxed text-balance">
34        {description}
35      </p>
36      {
37        buttons?.length && (
38          <div class="mt-2 flex flex-wrap gap-3">
39            {buttons.map(({ href, label, ...button }, index) => (
40              <Button
41                as="a"
42                href={href}
43                variant={
44                  button.variant ?? (index === 0 ? "default" : "outline")
45                }
46                {...button}
47              >
48                {label}
49              </Button>
50            ))}
51          </div>
52        )
53      }
54    </div>
55  </SectionContainer>
56  <SectionContainer>
57    <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-3">
58      {
59        features.map((feature) => (
60          <div>
61            <Separator />
62            <div class="pt-6">
63              <h3 class="text-foreground text-lg font-medium">
64                {feature.title}
65              </h3>
66              <p class="text-muted-foreground mt-2 text-sm leading-relaxed">
67                {feature.description}
68              </p>
69            </div>
70          </div>
71        ))
72      }
73    </div>
74  </SectionContainer>
75</Section>