hero-10

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 class={cn("dark bg-background min-h-screen justify-start", className)}>
51  <SectionContainer
52    class="relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"
53  >
54    <div class="flex flex-col gap-5">
55      <h1
56        class="text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl"
57      >
58        {title}
59      </h1>
60      <p class="text-foreground/80 max-w-2xl text-lg leading-relaxed">
61        {description}
62      </p>
63    </div>
64    <div class="flex shrink-0 flex-col gap-5">
65      <div class="flex flex-wrap gap-3">
66        {
67          buttons.map(({ href, label, ...button }, index) => (
68            <Button
69              as="a"
70              href={href}
71              size="lg"
72              class="w-full"
73              variant={
74                button.variant ?? (index === 0 ? "default" : "secondary")
75              }
76              {...button}
77            >
78              {label}
79            </Button>
80          ))
81        }
82      </div>
83      <div class="flex items-center gap-3">
84        <AvatarGroup>
85          {
86            socialProof.avatars.map((avatar) => (
87              <Avatar class="ring-background size-11 ring">
88                <AvatarImage
89                  src={avatar.image}
90                  alt={avatar.name ?? avatar.initials}
91                />
92                <AvatarFallback>{avatar.initials}</AvatarFallback>
93              </Avatar>
94            ))
95          }
96        </AvatarGroup>
97        <div class="flex flex-col gap-0.5">
98          <Rating value={socialProof.rating} />
99// … truncated