hero-11

1---
2import type { ImageMetadata } from "astro"
3import { Image } from "astro:assets"
4 
5import { cn } from "@/lib/utils"
6import {
7  Avatar,
8  AvatarFallback,
9  AvatarGroup,
10  AvatarImage,
11} from "@/components/ui/avatar"
12import { Button } from "@/components/ui/button"
13import { Rating } from "@/components/ui/rating"
14import { Section, SectionContainer } from "@/components/ui/section"
15 
16type Props = {
17  class?: string
18  title: string
19  description: string
20  buttons: {
21    label: string
22    href: string
23    variant?: "default" | "outline" | "secondary" | "ghost"
24  }[]
25  socialProof: {
26    avatars: {
27      image?: ImageMetadata
28      initials: string
29      name?: string
30    }[]
31    rating: number
32    text: string
33  }
34  image: {
35    src: ImageMetadata
36    alt: string
37  }
38}
39 
40const {
41  class: className,
42  title,
43  description,
44  buttons,
45  socialProof,
46  image,
47} = Astro.props
48---
49 
50<Section
51  class={cn("dark bg-background min-h-screen justify-center", className)}
52>
53  <SectionContainer class="relative z-10 items-center gap-8 text-center">
54    <h1
55      class="text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl"
56    >
57      {title}
58    </h1>
59    <p
60      class="text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance"
61    >
62      {description}
63    </p>
64    <div class="flex flex-wrap justify-center gap-3">
65      {
66        buttons.map(({ href, label, ...button }, index) => (
67          <Button
68            as="a"
69            href={href}
70            size="lg"
71            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
72            {...button}
73          >
74            {label}
75          </Button>
76        ))
77      }
78    </div>
79    <div class="flex items-center gap-3">
80      <AvatarGroup>
81        {
82          socialProof.avatars.map((avatar) => (
83            <Avatar class="ring-background size-11 ring">
84              <AvatarImage
85                src={avatar.image}
86                alt={avatar.name ?? avatar.initials}
87              />
88              <AvatarFallback>{avatar.initials}</AvatarFallback>
89            </Avatar>
90          ))
91        }
92      </AvatarGroup>
93      <div class="flex flex-col gap-0.5">
94        <Rating value={socialProof.rating} />
95        <span class="text-muted-foreground text-xs">{socialProof.text}</span>
96      </div>
97    </div>
98  </SectionContainer>
99  <div
100    class="bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%"
101  >
102    <Image
103// … truncated