Hero 02

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