// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 11 * @description A split hero with content on the left and a visual logo showcase * on the right. Features a decorative grid layout for partner/client logos with * floating accent elements. * * @slots hero, hero-container, hero-grid, hero-content, hero-badge, * hero-heading, hero-description, hero-cta-group, hero-primary-cta, * hero-secondary-cta, hero-logo-showcase, hero-logo-grid, hero-logo-cell, * hero-logo, hero-logos-label * @variant logo-showcase * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Sparkles } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface LogoConfig { /** Unique identifier for list key */ id: string /** Logo name for accessibility */ name: string /** Logo image source */ src: string /** Optional link */ href?: string } interface Hero11Props { /** Optional badge displayed above heading */ badge?: string /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Label for logo showcase */ logosLabel?: string /** Partner/client logos */ logos?: LogoConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PRIMARY_CTA: CtaConfig = { text: "Get Started", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { text: "Learn More", href: "#", } const DEFAULT_LOGOS: LogoConfig[] = [ { id: "logo-1", name: "Company 1", src: "/assets/placeholders/placeholder-1x1.svg" }, { id: "logo-2", name: "Company 2", src: "/assets/placeholders/placeholder-1x1.svg" }, { id: "logo-3", name: "Company 3", src: "/assets/placeholders/placeholder-1x1.svg" }, { id: "logo-4", name: "Company 4", src: "/assets/placeholders/placeholder-1x1.svg" }, { id: "logo-5", name: "Company 5", src: "/assets/placeholders/placeholder-1x1.svg" }, { id: "logo-6", name: "Company 6", src: "/assets/placeholders/placeholder-1x1.svg" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero11({ badge = "Trusted Worldwide", heading = "Trusted by Industry Leaders", description = "Join 500+ companies who rely on our platform to power their business. From startups to enterprises, teams choose us for reliability and scale.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, logosLabel = "Powering the best teams", logos = DEFAULT_LOGOS, className, idBase, }: Hero11Props) { const headingId = `${idBase ?? "hero-11"}-heading` return (

{/* Content Column */}

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

{heading}

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

{description}

)} {/* CTAs */}

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

{/* Logo Showcase Column */}

{/* Label */} {logosLabel && (

{logosLabel}

)} {/* Logo Grid */}

{logos.slice(0, 6).map((logo, i) => (

))}

{/* Decorative accent */}

) } export default Hero11 export { Hero11, type Hero11Props, type CtaConfig, type LogoConfig }