// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 05 * @description An immersive hero with centered content and floating overlay cards. * Features badge, headline, description, CTA, avatar group, and side cards. * * @slots hero, hero-container, hero-badge, hero-heading, hero-description, * hero-cta, hero-avatars, hero-avatar, hero-play-button, hero-tagline, * hero-cards, hero-card, hero-card-image, hero-card-title, * hero-card-footer, hero-card-badge, hero-card-cta * @variant immersive-floating-cards * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Play, 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 AvatarItem { /** Unique identifier for list key */ id: string /** Avatar image URL */ image: string /** Person name for alt text */ name: string } interface FloatingCardData { /** Unique identifier for list key */ id: string /** Card title */ title: string /** Card image URL */ image: string /** Card link */ href: string /** Footer left content (badge text or price) */ footerLeft: string /** Footer right content (CTA text) */ footerRight: string /** Whether footer left is a badge or plain text */ footerLeftIsBadge?: boolean } interface Hero05Props { /** Badge text displayed above the heading */ badge?: string /** Main headline text */ headline?: string /** Supporting description paragraph */ description?: string /** Primary CTA button text */ ctaText?: string /** Primary CTA button link */ ctaHref?: string /** Avatar images for social proof */ avatars?: AvatarItem[] /** Show play button next to avatars */ showPlayButton?: boolean /** Floating cards (displayed on sides on desktop, below on mobile) */ cards?: FloatingCardData[] /** Decorative tagline at bottom */ tagline?: string /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // SUB-COMPONENTS // ============================================================================ interface FloatingCardProps { card: FloatingCardData } function FloatingCard({ card }: FloatingCardProps) { return ( {/* Header */}

{/* Image - taller aspect ratio to fill card */}

{/* Footer */}

{card.footerLeftIsBadge ? ( {card.footerLeft} ) : ( {card.footerLeft} )} {card.footerRight}

) } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_AVATARS: AvatarItem[] = [ { id: "avatar-1", image: "/assets/placeholders/avatar-placeholder.svg", name: "Team member" }, { id: "avatar-2", image: "/assets/placeholders/avatar-placeholder.svg", name: "Team member" }, ] const DEFAULT_CARDS: FloatingCardData[] = [ { id: "card-1", title: "Starter Plan", image: "/assets/placeholders/placeholder-3x2.svg", href: "#", footerLeft: "$29/mo", footerRight: "Get Started", footerLeftIsBadge: false, }, { id: "card-2", title: "Pro Plan", image: "/assets/placeholders/placeholder-3x2.svg", href: "#", footerLeft: "$99/mo", footerRight: "Learn More", footerLeftIsBadge: false, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero05({ badge = "New Release", headline = "Ship Products\nUsers Love", description = "The modern platform for teams who want to build, ship, and scale their products with confidence.", ctaText = "Start Free Trial", ctaHref = "#", avatars = DEFAULT_AVATARS, showPlayButton = true, cards = DEFAULT_CARDS, tagline = "Trusted by thousands of teams worldwide", className, idBase, }: Hero05Props) { const headingId = `${idBase ?? "hero-05"}-heading` return (

{/* Main Layout: Content left, Cards right */}

{/* Left: Content */}

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

)} {/* Headline */}

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

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

{description}

)} {/* CTA */}

{ctaText}

{/* Avatar Group + Play Button */} {(avatars.length > 0 || showPlayButton) && (

{avatars.length > 0 && (

{avatars.map((avatar) => (

))}

)} {showPlayButton && ( )}

)} {/* Tagline */} {tagline && (

{tagline}

)}

{/* Right: Cards - stack on mobile, side by side on sm+ */} {cards.length > 0 && (

{cards.map((card) => ( ))}

)}

) } export default Hero05 export { Hero05, type Hero05Props, type AvatarItem, type FloatingCardData, FloatingCard, }

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

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