features-4

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