features-1

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