content-5

1---
2import type { ImageMetadata } from "astro"
3import { Image } from "astro:assets"
4 
5import { cn } from "@/lib/utils"
6import { Button } from "@/components/ui/button"
7import { Section, SectionContainer } from "@/components/ui/section"
8 
9type Props = {
10  class?: string
11  eyebrow?: string
12  title: string
13  description: string
14  features?: string[]
15  buttons?: {
16    label: string
17    href: string
18    variant?: "default" | "outline" | "secondary" | "ghost"
19  }[]
20  image: {
21    src: ImageMetadata
22    alt: string
23  }
24}
25 
26const {
27  class: className,
28  eyebrow,
29  title,
30  description,
31  features,
32  buttons,
33  image,
34} = Astro.props
35---
36 
37<Section class={cn("", className)}>
38  <SectionContainer>
39    <div
40      class="bg-muted/40 grid overflow-hidden rounded-xl border lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]"
41    >
42      <div class="flex flex-col justify-between gap-10 p-6 sm:p-8 lg:p-10">
43        <div class="flex flex-col gap-5">
44          {
45            eyebrow && (
46              <p class="text-primary text-sm leading-none font-medium">
47                {eyebrow}
48              </p>
49            )
50          }
51          <div class="flex flex-col gap-4">
52            <h2
53              class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
54            >
55              {title}
56            </h2>
57            <p
58              class="text-muted-foreground max-w-xl text-lg leading-relaxed text-balance"
59            >
60              {description}
61            </p>
62          </div>
63        </div>
64        {
65          features?.length && (
66            <ol class="grid gap-3">
67              {features.map((feature, index) => (
68                <li class="flex items-start gap-3 text-sm leading-6">
69                  <span class="bg-background text-foreground flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium">
70                    {index + 1}
71                  </span>
72                  {feature}
73                </li>
74              ))}
75            </ol>
76          )
77        }
78        {
79          buttons?.length && (
80            <div class="flex flex-wrap gap-3">
81              {buttons.map(({ href, label, ...button }, index) => (
82                <Button
83                  as="a"
84                  href={href}
85                  size="lg"
86                  variant={
87                    button.variant ?? (index === 0 ? "default" : "secondary")
88                  }
89                  {...button}
90                >
91// … truncated