content-6

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