// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 14 * @description A split hero with tablet and phone mockups showcasing multi-device support. * Perfect for SaaS products and responsive web applications. * * @slots hero, hero-container, hero-content, hero-badge, hero-heading, * hero-description, hero-cta-group, hero-primary-cta, hero-secondary-cta, * hero-stats, hero-stat, hero-stat-value, hero-stat-label, * hero-mockups, hero-tablet, hero-phone * @variant device-mockups * * @registryDependencies badge button-link * @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 StatConfig { /** Unique identifier for list key */ id: string /** Stat value */ value: string /** Stat label */ label: string } interface Hero14Props { /** Badge text */ badge?: string /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Stats displayed below CTAs */ stats?: StatConfig[] /** Screen image for tablet mockup */ tabletImage?: string /** Screen image for phone mockup */ phoneImage?: string /** 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: "Get Started", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { id: "secondary", text: "Learn More", href: "#", } const DEFAULT_STATS: StatConfig[] = [ { id: "stat-users", value: "50K+", label: "Active Users" }, { id: "stat-uptime", value: "99.9%", label: "Uptime" }, { id: "stat-rating", value: "4.9", label: "Rating" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero14({ badge = "Now Available", heading = "Your workflow, everywhere", description = "Access your work seamlessly across all devices. Our responsive platform adapts to how you work, whether at your desk or on the go.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, stats = DEFAULT_STATS, tabletImage = "/assets/placeholders/placeholder-4x3.svg", phoneImage = "/assets/placeholders/placeholder-9x16.svg", className, idBase, }: Hero14Props) { const headingId = `${idBase ?? "hero-14"}-heading` return (

{/* Content */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)} {/* CTAs */}

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

{/* Stats */} {stats && stats.length > 0 && (

{stats.map((stat) => (

{stat.value}

{stat.label}

))}

)}

{/* Device Mockups */}

{/* Tablet Mockup - Background */}

{/* Tablet Camera */} {/* Phone Mockup - Overlapping */}

{/* Phone Notch */}

) } export default Hero14 export { Hero14, type Hero14Props, type CtaConfig, type StatConfig }