features-2

1---
2import { cn } from "@/lib/utils"
3import { Button } from "@/components/ui/button"
4import { Icon } from "@/components/ui/icon"
5import { Section, SectionContainer } from "@/components/ui/section"
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    icon: string
20  }[]
21}
22 
23const { class: className, title, description, buttons, features } = Astro.props
24---
25 
26<Section class={cn("", className)}>
27  <SectionContainer class="items-center gap-6 text-center">
28    <div class="flex max-w-2xl flex-col items-center gap-4">
29      <h2
30        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
31      >
32        {title}
33      </h2>
34      <p
35        class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
36      >
37        {description}
38      </p>
39    </div>
40    {
41      buttons?.length && (
42        <div class="flex flex-wrap justify-center gap-3">
43          {buttons.map(({ href, label, ...button }, index) => (
44            <Button
45              as="a"
46              href={href}
47              variant={button.variant ?? (index === 0 ? "default" : "outline")}
48              {...button}
49            >
50              {label}
51            </Button>
52          ))}
53        </div>
54      )
55    }
56  </SectionContainer>
57  <SectionContainer>
58    <div class="grid overflow-hidden rounded-xl sm:grid-cols-2 lg:grid-cols-3">
59      {
60        features.map((feature) => (
61          <div class="group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 border-b p-7 text-center transition-colors sm:nth-last-[-n+2]:border-b-0 lg:nth-last-[-n+3]:border-b-0">
62            <div class="bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105">
63              <Icon name={feature.icon} class="size-5" />
64            </div>
65            <h3 class="text-foreground text-base font-medium tracking-tight text-balance">
66              {feature.title}
67            </h3>
68            <p class="text-muted-foreground text-sm leading-relaxed text-balance">
69              {feature.description}
70            </p>
71          </div>
72        ))
73      }
74    </div>
75  </SectionContainer>
76</Section>