content-1

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