// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 04 * @description A hero section with headline and a grid of value propositions. * Features a centered header with supporting grid cards below for key benefits. * * @slots hero, hero-container, hero-header, hero-badge, hero-heading, * hero-description, hero-grid, hero-card, hero-card-icon, * hero-card-title, hero-card-description, hero-cta-group, hero-primary-cta * @variant grid * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Zap, Shield, Globe, Sparkles } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface ValuePropConfig { /** Unique identifier for list key */ id: string /** Icon component */ icon: React.ComponentType<{ className?: string }> /** Card title */ title: string /** Card description */ description: string } interface CtaConfig { /** Unique identifier for list key */ id: string /** Button text */ text: string /** Link destination */ href: string } interface Hero04Props { /** Optional badge displayed above the heading */ badge?: string /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** Grid of value proposition cards */ valueProps?: ValuePropConfig[] /** Primary CTA button */ primaryCta?: CtaConfig /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_VALUE_PROPS: ValuePropConfig[] = [ { id: "fast", icon: Zap, title: "Lightning Fast", description: "Optimized for speed with instant load times.", }, { id: "secure", icon: Shield, title: "Secure by Default", description: "Enterprise-grade security built into every layer.", }, { id: "global", icon: Globe, title: "Global Scale", description: "Deploy worldwide with edge locations everywhere.", }, { id: "modern", icon: Sparkles, title: "Modern Stack", description: "Built with the latest technologies and best practices.", }, ] const DEFAULT_PRIMARY_CTA: CtaConfig = { id: "primary", text: "Get Started", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function Hero04({ badge = "New Release", heading = "Everything you need to ship faster", description = "A complete platform with all the tools and infrastructure you need to build, deploy, and scale your applications.", valueProps = DEFAULT_VALUE_PROPS, primaryCta = DEFAULT_PRIMARY_CTA, className, idBase, }: Hero04Props) { const headingId = `${idBase ?? "hero-04"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Value Props Grid */}

{valueProps.map((prop) => (

{prop.title}

{prop.description}

))}

{/* CTA */} {primaryCta && (

{primaryCta.text}

)}

) } export default Hero04 export { Hero04, type Hero04Props, type ValuePropConfig, type CtaConfig }