Hero 05

1import { ArrowUpRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
6 
7interface Hero05Props {
8  badge?: {
9    text: string;
10    avatars?: string[];
11  };
12  title?: string;
13  description?: string;
14  buttons?: {
15    text: string;
16    url?: string;
17    icon?: React.ReactNode;
18    variant?: "default" | "outline" | "ghost" | "secondary" | "link";
19  }[];
20  className?: string;
21}
22 
23const Hero05 = ({
24  badge = {
25    text: "Trusted by developers",
26    avatars: [
27      "https://www.shadcnship.com/images/avatars/avatar-1.webp",
28      "https://www.shadcnship.com/images/avatars/avatar-2.webp",
29      "https://www.shadcnship.com/images/avatars/avatar-3.webp",
30    ],
31  },
32  title = "Shadcn UI Blocks, Copy & Customize",
33  description = "Pre-built landing page components for React. Just copy the code and focus on what matters — your product.",
34  buttons = [
35    {
36      text: "Browse Components",
37      url: "#",
38      icon: <ArrowUpRight className="size-4" />,
39    },
40    { text: "View Docs", url: "#", variant: "outline" },
41  ],
42  className,
43}: Hero05Props) => {
44  return (
45    <section
46      className={cn(
47        "relative w-full overflow-hidden py-16 md:py-24",
48        className,
49      )}
50    >
51      <div className="container mx-auto px-6">
52        <div className="flex flex-col items-center gap-4 text-center">
53          {badge && (
54            <Badge
55              variant="secondary"
56              className="gap-2 border border-border px-4 py-1"
57            >
58              {badge.avatars && badge.avatars.length > 0 && (
59                <div className="flex -space-x-2">
60                  {badge.avatars.map((avatar, i) => (
61                    <Avatar
62                      key={`avatar-${i}`}
63                      className="size-5 border-2 border-background"
64                    >
65                      <AvatarImage src={avatar} />
66                      <AvatarFallback>U</AvatarFallback>
67                    </Avatar>
68                  ))}
69                </div>
70              )}
71              <span>{badge.text}</span>
72            </Badge>
73          )}
74 
75          <h1 className="text-4xl leading-tight font-medium tracking-tight md:text-5xl lg:text-6xl">
76            {title}
77          </h1>
78 
79          <p className="max-w-2xl text-muted-foreground md:text-lg">
80            {description}
81          </p>
82 
83// … truncated