content-2

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