Hero 04

1import { ArrowUpRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5 
6interface HeroCard {
7  img: string;
8  title: string;
9  description: string;
10}
11 
12interface Hero04Props {
13  badge?: { text: string; url?: string };
14  title?: string;
15  description?: string;
16  buttons?: {
17    text: string;
18    url?: string;
19    icon?: React.ReactNode;
20    variant?: "default" | "outline" | "ghost" | "secondary" | "link";
21  }[];
22  cards?: HeroCard[];
23  className?: string;
24}
25 
26const Hero04 = ({
27  badge = { text: "Production-ready components", url: "#" },
28  title = "Shadcn UI Blocks, Copy & Customize",
29  description = "Pre-built landing page components for React. Just copy the code and focus on what matters — your product.",
30  buttons = [],
31  cards = [
32    {
33      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
34      title: "50+ Ready-to-use Blocks",
35      description:
36        "Hero sections, feature grids, pricing tables and more. Everything you need to ship fast.",
37    },
38    {
39      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
40      title: "Built with shadcn/ui",
41      description:
42        "Every block uses shadcn/ui components and Tailwind CSS. Fully accessible and customizable.",
43    },
44    {
45      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp",
46      title: "Copy & Customize",
47      description:
48        "No lock-in. Copy the code directly into your project and make it your own.",
49    },
50    {
51      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-3.webp",
52      title: "Ship Faster",
53      description:
54        "Stop building from scratch. Go from idea to production-ready landing page in minutes.",
55    },
56  ],
57  className,
58}: Hero04Props) => {
59  return (
60    <section
61      className={cn(
62        "relative w-full overflow-hidden py-16 md:pt-42",
63        className,
64      )}
65    >
66      <div className="container mx-auto px-6">
67        {/* Header */}
68        <div className="relative z-10 flex flex-col items-center gap-4 text-center">
69          {badge && (
70            <Badge
71              variant="secondary"
72              className="border border-border py-1"
73              asChild
74            >
75              <a href={badge.url}>{badge.text}</a>
76            </Badge>
77          )}
78 
79// … truncated