// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Hero 13 * @description A split hero with content on the left and stacked testimonial * cards on the right. Emphasizes social proof through customer voices. * * @slots hero, hero-container, hero-grid, hero-content, hero-badge, * hero-heading, hero-description, hero-cta-group, hero-primary-cta, * hero-secondary-cta, hero-testimonials, hero-testimonial-card, * hero-testimonial-quote, hero-testimonial-author, hero-testimonial-avatar, * hero-testimonial-name, hero-testimonial-role * @variant testimonials * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Quote } 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 TestimonialConfig { /** Unique identifier for list key */ id: string /** Testimonial quote */ quote: string /** Author name */ name: string /** Author role/company */ role: string /** Author avatar URL */ avatar: string } interface Hero13Props { /** 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 /** Testimonial cards */ testimonials?: TestimonialConfig[] /** 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_TESTIMONIALS: TestimonialConfig[] = [ { id: "testimonial-1", quote: "This is an example testimonial quote that highlights the value of the product.", name: "Sarah Johnson", role: "CEO at TechCorp", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "testimonial-2", quote: "Another testimonial showcasing a different perspective and use case.", name: "Michael Chen", role: "Product Lead at StartupXYZ", avatar: "/assets/placeholders/avatar-placeholder.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Hero13({ badge = "Customer Stories", heading = "Loved by Teams Everywhere", description = "See why thousands of teams trust us to streamline their workflows. Real results from real customers who transformed how they work.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, testimonials = DEFAULT_TESTIMONIALS, className, idBase, }: Hero13Props) { const headingId = `${idBase ?? "hero-13"}-heading` return (

{/* Content Column */}

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

{heading}

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

{description}

)} {/* CTAs */}

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

{/* Testimonials Column */}

{testimonials.slice(0, 2).map((testimonial, i) => (

{/* Quote Icon */} {/* Quote */}

“{testimonial.quote}”

{/* Author */}

{testimonial.name}

{testimonial.role}

))}

) } export default Hero13 export { Hero13, type Hero13Props, type CtaConfig, type TestimonialConfig }