content-3

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  title: string
12  description: string
13  buttons?: {
14    label: string
15    href: string
16    variant?: "default" | "outline" | "secondary" | "ghost"
17  }[]
18  image: {
19    src: ImageMetadata
20    alt: string
21  }
22}
23 
24const { class: className, title, description, buttons, image } = Astro.props
25---
26 
27<Section class={cn("", className)}>
28  <SectionContainer class="gap-8">
29    <div
30      class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
31    >
32      <div class="max-w-2xl">
33        <h2
34          class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
35        >
36          {title}
37        </h2>
38        <p
39          class="text-muted-foreground mt-4 text-lg leading-relaxed text-balance"
40        >
41          {description}
42        </p>
43      </div>
44      {
45        buttons?.length && (
46          <div class="flex flex-wrap gap-3">
47            {buttons.map(({ href, label, ...button }, index) => (
48              <Button
49                as="a"
50                href={href}
51                size="lg"
52                variant={
53                  button.variant ?? (index === 0 ? "default" : "secondary")
54                }
55                {...button}
56              >
57                {label}
58              </Button>
59            ))}
60          </div>
61        )
62      }
63    </div>
64  </SectionContainer>
65  <SectionContainer>
66    <Image
67      src={image.src}
68      alt={image.alt}
69      class="aspect-video w-full rounded-xl border object-cover"
70      widths={[640, 960, 1280, 1536]}
71      sizes="(min-width: 80rem) 80rem, 100vw"
72    />
73  </SectionContainer>
74</Section>