// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 01 * @description A clean, centered hero section with optional badge, heading, * description, and dual call-to-action buttons. Perfect for SaaS landing pages. * * @slots hero, hero-container, hero-content, hero-badge, hero-heading, * hero-description, hero-cta-group, hero-primary-cta, hero-secondary-cta * @variant centered * * @registryDependencies button-link button badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Unique identifier for list key */ id: string /** Button text */ text: string /** Link destination */ href: string } interface Hero01Props { /** Optional badge displayed above the heading */ badge?: string /** Main heading text - supports line breaks with \n */ heading?: string /** Supporting description paragraph */ description?: string /** Primary CTA button - filled style */ primaryCta?: CtaConfig /** Secondary CTA button - ghost/link style */ secondaryCta?: CtaConfig /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PRIMARY_CTA: CtaConfig = { id: "primary", text: "Get Started", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { id: "secondary", text: "Learn More", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function Hero01({ badge = "Introducing v2.0", heading = "Build modern apps\nwith speed", description = "Modern UI blocks built with Radix UI, Tailwind CSS and React. \nCopy, paste, and customize to match your brand.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, className, idBase, }: Hero01Props) { const headingId = `${idBase ?? "hero-01"}-heading` return (

{/* Background decoration */}

{/* Badge */} {badge && ( {badge} )} {/* Heading */}

{heading.split("\n").map((line, i) => ( {i > 0 &&
} {line} ))}

{/* Description */} {description && (

{description.split("\n").map((line, i) => ( {i > 0 &&
} {line} ))}

)} {/* CTAs */}

{primaryCta && ( {primaryCta.text} )} {secondaryCta && ( {secondaryCta.text} )}

) } export default Hero01 export { Hero01, type Hero01Props, type CtaConfig }