// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 06 * @description A centered hero with app mockup showcase cards floating below. * Features badge, headline, description, dual CTAs, and dashboard preview cards. * * @slots hero, hero-container, hero-badge, hero-heading, hero-description, * hero-cta-group, hero-primary-cta, hero-secondary-cta, * hero-showcase, hero-showcase-card, hero-showcase-card-title, * hero-showcase-card-value * @variant centered-app-showcase * * @registryDependencies button-link badge button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Check, Play } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface ShowcaseCard { /** Unique identifier for list key */ id: string /** Card title/label */ title: string /** Main value or content */ value: string /** Optional subtitle */ subtitle?: string /** Card size variant */ size?: "small" | "medium" | "large" } interface Hero06Props { /** Badge text displayed above the heading */ badge?: string /** Main headline text */ headline?: string /** Supporting description paragraph */ description?: string /** Primary CTA button text */ primaryCtaText?: string /** Primary CTA button link */ primaryCtaHref?: string /** Secondary CTA button text */ secondaryCtaText?: string /** Secondary CTA click handler or link */ secondaryCtaHref?: string /** Showcase cards to display below CTAs */ showcaseCards?: ShowcaseCard[] /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_SHOWCASE_CARDS: ShowcaseCard[] = [ { id: "card-1", title: "Deployments", value: "2,847", subtitle: "this month", size: "small", }, { id: "card-2", title: "Uptime", value: "99.9%", size: "large", }, { id: "card-3", title: "Response Time", value: "45ms", subtitle: "avg latency", size: "small", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero06({ badge = "Trusted Platform", headline = "Build Better Software, Faster", description = "The modern development platform for teams who want to build, ship, and scale their products with confidence.", primaryCtaText = "Get Started", primaryCtaHref = "#", secondaryCtaText = "Watch Demo", secondaryCtaHref = "#", showcaseCards = DEFAULT_SHOWCASE_CARDS, className, idBase, }: Hero06Props) { const headingId = `${idBase ?? "hero-06"}-heading` return (

{/* Center Content */}

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

{headline}

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

{description}

)} {/* CTA Group */}

{primaryCtaText}

{/* Showcase Cards */} {showcaseCards.length > 0 && (

{showcaseCards.map((card, index) => (

{card.size === "large" ? (

{card.title}

{card.value}

) : ( <>

{card.title}

{card.value}

{card.subtitle && (

{card.subtitle}

)} )}

))}

)}

) } export default Hero06 export { Hero06, type Hero06Props, type ShowcaseCard }