// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 02 * @description A split-layout hero with content on the left and an image/visual * on the right. Features social proof metrics and flexible media support. * * @slots hero, hero-container, hero-content, hero-badge, hero-heading, * hero-description, hero-cta-group, hero-primary-cta, hero-secondary-cta, * hero-rating, hero-metrics, hero-metric, hero-image-wrapper, hero-image * @variant split * * @registryDependencies button-link button badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Star } 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 ImageConfig { /** Image source URL */ src: string /** Alt text for accessibility */ alt: string } interface MetricConfig { /** Unique identifier for list key */ id: string /** Metric value (e.g., "10k+", "99%") */ value: string /** Metric label */ label: string } interface Hero02Props { /** Optional badge displayed above the heading */ badge?: string /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Hero image configuration */ image?: ImageConfig /** Social proof metrics displayed below CTAs */ metrics?: MetricConfig[] /** Star rating (0-5) for social proof */ rating?: number /** Review count text */ reviewCount?: string /** Reverse layout (image on left, content on right) */ reversed?: boolean /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PRIMARY_CTA: CtaConfig = { id: "primary", text: "Browse Components", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { id: "secondary", text: "View Documentation", href: "#", } const DEFAULT_IMAGE: ImageConfig = { src: "/assets/placeholders/placeholder-3x2.svg", alt: "Product screenshot", } const DEFAULT_METRICS: MetricConfig[] = [ { id: "developers", value: "10k+", label: "Developers" }, { id: "components", value: "500+", label: "Components" }, { id: "satisfaction", value: "99%", label: "Satisfaction" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero02({ badge = "New Release", heading = "Ship faster with production-ready components", description = "Stop rebuilding the same UI patterns. Our blocks are designed to integrate seamlessly with your existing codebase and design system.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, image = DEFAULT_IMAGE, metrics = DEFAULT_METRICS, rating = 5, reviewCount = "from 2,000+ reviews", reversed = false, className, idBase, }: Hero02Props) { const headingId = `${idBase ?? "hero-02"}-heading` return (

*:first-child]:order-2" )} > {/* Content Column */}

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

{heading}

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

{description}

)} {/* CTAs */}

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

{/* Social Proof - Rating */} {rating !== undefined && rating > 0 && (

{Array.from({ length: 5 }).map((_, i) => (

{reviewCount && ( {reviewCount} )}

)} {/* Metrics */} {metrics && metrics.length > 0 && (

{metrics.map((metric) => (

{metric.value} {metric.label}

))}

)}

{/* Image Column */}

{/* Decorative blur */}

) } export default Hero02 export { Hero02, type Hero02Props, type CtaConfig, type ImageConfig, type MetricConfig }