Hero 06

1import { ExternalLink, Play } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5 
6interface Hero06Props {
7  badge?: {
8    tag?: string;
9    text: string;
10    url?: string;
11  };
12  title?: string;
13  description?: string;
14  primaryButton?: { text: string; url?: string };
15  secondaryButton?: { text: string; url?: string };
16  backgroundImage?: string;
17  backgroundImageDark?: string;
18  className?: string;
19}
20 
21const Hero06 = ({
22  badge = {
23    tag: "New",
24    text: "See what's new in our latest release",
25    url: "#",
26  },
27  title = "Build Faster with Shadcn UI Blocks",
28  description = "Pre-built landing page components for React. Copy, paste, and customize to ship your product faster.",
29  primaryButton = { text: "Get started", url: "#" },
30  secondaryButton = { text: "Watch demo", url: "#" },
31  backgroundImage = "/images/backgrounds/background-1.webp",
32  backgroundImageDark = "/images/backgrounds/background-1-dark.webp",
33  className,
34}: Hero06Props) => {
35  return (
36    <section
37      className={cn(
38        "relative flex min-h-screen w-full items-center overflow-hidden py-16 md:py-24",
39        className,
40      )}
41    >
42      {backgroundImage && (
43        <div
44          className="absolute inset-0 bg-cover bg-center dark:hidden"
45          style={{ backgroundImage: `url(${backgroundImage})` }}
46        />
47      )}
48      {backgroundImageDark && (
49        <div
50          className="absolute inset-0 hidden bg-cover bg-center dark:block"
51          style={{ backgroundImage: `url(${backgroundImageDark})` }}
52        />
53      )}
54 
55      <div className="relative z-10 container mx-auto px-6">
56        <div className="flex flex-col items-center gap-4 text-center">
57          {badge && (
58            <Badge
59              variant="outline"
60              className="gap-2 border border-border py-1 pr-3 pl-1"
61              asChild
62            >
63              <a href={badge.url || "#"}>
64                {badge.tag && (
65                  <span className="rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground">
66                    {badge.tag}
67                  </span>
68                )}
69                <span>{badge.text}</span>
70                <ExternalLink className="size-3" />
71              </a>
72            </Badge>
73          )}
74 
75          <h1 className="max-w-5xl text-4xl leading-tight font-medium tracking-tight md:text-5xl lg:text-6xl">
76            {title}
77// … truncated