hero-1

1---
2import type { ImageMetadata } from "astro"
3import { Image } from "astro:assets"
4 
5import { cn } from "@/lib/utils"
6import { Badge } from "@/components/ui/badge"
7import { Button } from "@/components/ui/button"
8import { Section, SectionContainer } from "@/components/ui/section"
9 
10type Props = {
11  class?: string
12  title: string
13  description: string
14  badge?: {
15    label: string
16    href: string
17  }
18  buttons: {
19    label: string
20    href: string
21    variant?: "default" | "outline" | "secondary" | "ghost"
22  }[]
23  image: {
24    src: ImageMetadata
25    alt: string
26  }
27}
28 
29const {
30  class: className,
31  title,
32  description,
33  badge,
34  buttons,
35  image,
36} = Astro.props
37---
38 
39<Section class={cn("", className)}>
40  <SectionContainer class="items-center gap-8 text-center">
41    {
42      badge && (
43        <Badge as="a" href={badge.href} variant="secondary">
44          {badge.label}
45        </Badge>
46      )
47    }
48    <h1
49      class="text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl"
50    >
51      {title}
52    </h1>
53    <p
54      class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
55    >
56      {description}
57    </p>
58    <div class="flex flex-wrap justify-center gap-3">
59      {
60        buttons.map(({ href, label, ...button }, index) => (
61          <Button
62            as="a"
63            href={href}
64            size="lg"
65            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
66            {...button}
67          >
68            {label}
69          </Button>
70        ))
71      }
72    </div>
73  </SectionContainer>
74  <SectionContainer>
75    <Image
76      src={image.src}
77      alt={image.alt}
78      class="aspect-video w-full rounded-xl border object-cover"
79      widths={[640, 960, 1280, 1536]}
80      sizes="(min-width: 80rem) 80rem, 100vw"
81      loading="eager"
82    />
83  </SectionContainer>
84</Section>