Hero 03

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