Hero 01

1import { ArrowUpRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5 
6interface Hero01Props {
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 Hero01 = ({
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-4.webp",
33  className,
34}: Hero01Props) => {
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="flex flex-col gap-8 lg:flex-row lg:items-center">
44          <div className="flex flex-1 flex-col items-center gap-4 text-center lg:items-start lg:text-left">
45            {badge && (
46              <Badge
47                variant="secondary"
48                className="border border-border py-1"
49                asChild
50              >
51                <a href={badge.url}>{badge.text}</a>
52              </Badge>
53            )}
54            <h1 className="text-4xl leading-tight font-medium tracking-tight md:text-5xl lg:text-6xl">
55              {title}
56            </h1>
57            <p className="max-w-md text-muted-foreground md:text-lg">
58              {description}
59            </p>
60            {buttons && buttons.length > 0 && (
61              <div className="grid w-full grid-cols-1 gap-4 sm:w-fit sm:grid-cols-2">
62                {buttons.map((btn) => (
63                  <Button
64                    key={btn.text}
65                    size="lg"
66                    variant={btn.variant ?? "default"}
67                    className="w-full"
68                    asChild
69                  >
70                    <a href={btn.url}>
71                      {btn.text}
72                      {btn.icon}
73                    </a>
74                  </Button>
75// … truncated