// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name CTA 05 * @description A CTA section with social proof elements. * Features customer avatars and ratings alongside CTA. * * @slots cta, cta-container, cta-grid, cta-social-proof, cta-avatars, cta-avatar, * cta-rating, cta-stars, cta-review-count, cta-social-text, * cta-content, cta-heading, cta-description, cta-button-group, * cta-primary-button, cta-secondary-button * @variant social-proof * * @registryDependencies button-link * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Star } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface AvatarItemConfig { /** Unique identifier for list key */ id: string /** Avatar initials */ initials: string } interface Cta05Props { /** Main heading */ heading?: string /** Supporting description */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Avatar items for social proof */ avatars?: AvatarItemConfig[] /** Social proof text */ socialText?: string /** Star rating (1-5) */ rating?: number /** Review count */ reviewCount?: string /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_AVATARS: AvatarItemConfig[] = [ { id: "avatar-1", initials: "JD" }, { id: "avatar-2", initials: "SM" }, { id: "avatar-3", initials: "AK" }, { id: "avatar-4", initials: "LR" }, { id: "avatar-5", initials: "MP" }, ] const DEFAULT_PRIMARY_CTA: CtaConfig = { text: "Get started free", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { text: "View case studies", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function Cta05({ heading = "Join thousands of happy customers", description = "Experience the difference that has made us the top-rated solution in the industry. Start your journey today.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, avatars = DEFAULT_AVATARS, socialText = "Loved by 10,000+ users", rating = 5, reviewCount = "2,500+ reviews", className, idBase, }: Cta05Props) { const headingId = `${idBase ?? "cta-05"}-heading` return (

{/* Social Proof */}

{/* Avatars */}

{avatars.slice(0, 5).map((avatar) => (

{avatar.initials}

))} {avatars.length > 5 && (

+{avatars.length - 5}

)}

{/* Rating */}

{Array.from({ length: 5 }).map((_, i) => (

{reviewCount}

{/* Social text */}

{socialText}

{/* Content */}

{heading}

{description && (

{description}

)}

{/* CTAs */}

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

) } export default Cta05 export { Cta05, type Cta05Props, type AvatarItemConfig, type CtaConfig }