content-4

1---
2import type { ImageMetadata } from "astro"
3import { Image } from "astro:assets"
4 
5import { cn } from "@/lib/utils"
6import { Button } from "@/components/ui/button"
7import { Icon } from "@/components/ui/icon"
8import { Section, SectionContainer } from "@/components/ui/section"
9 
10type Props = {
11  class?: 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  title,
29  description,
30  features,
31  buttons,
32  image,
33} = Astro.props
34---
35 
36<Section class={cn("", className)}>
37  <SectionContainer>
38    <div class="grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center">
39      <div class="flex flex-col gap-6">
40        <div class="flex flex-col gap-4">
41          <h2
42            class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
43          >
44            {title}
45          </h2>
46          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
47            {description}
48          </p>
49        </div>
50        {
51          features?.length && (
52            <ul class="flex flex-col gap-3">
53              {features.map((feature) => (
54                <li class="flex items-center gap-3 text-sm">
55                  <Icon name="check" class="text-primary size-4 shrink-0" />
56                  {feature}
57                </li>
58              ))}
59            </ul>
60          )
61        }
62        {
63          buttons?.length && (
64            <div class="flex flex-wrap gap-3">
65              {buttons.map(({ href, label, ...button }, index) => (
66                <Button
67                  as="a"
68                  href={href}
69                  size="lg"
70                  variant={
71                    button.variant ?? (index === 0 ? "default" : "secondary")
72                  }
73                  {...button}
74                >
75                  {label}
76                </Button>
77              ))}
78            </div>
79          )
80        }
81      </div>
82      <Image
83        src={image.src}
84        alt={image.alt}
85        class="aspect-4/3 w-full rounded-xl border object-cover"
86        widths={[640, 960, 1280]}
87        sizes="(min-width: 1024px) 66vw, 100vw"
88      />
89    </div>
90  </SectionContainer>
91</Section>