// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name CTA 08 * @description A testimonial-driven CTA combining social proof with a call to action. * Features a prominent customer quote alongside conversion elements. * * @slots cta, cta-container, cta-grid, cta-testimonial, cta-quote, * cta-author, cta-avatar, cta-author-info, cta-author-name, * cta-author-role, cta-content, cta-heading, cta-description, * cta-cta-group, cta-primary-cta, cta-secondary-cta * @variant testimonial * * @registryDependencies button-link * @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" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface AuthorConfig { /** Author name */ name: string /** Author role/title */ role: string /** Author avatar URL */ avatar: string } interface TestimonialConfig { /** Quote text */ quote: string /** Author information */ author: AuthorConfig } interface Cta08Props { /** Testimonial configuration */ testimonial?: TestimonialConfig /** Main heading */ heading?: string /** Supporting description */ description?: string /** Primary CTA button */ primaryCta?: CtaConfig /** Secondary CTA button */ secondaryCta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_TESTIMONIAL: TestimonialConfig = { quote: "This platform transformed how our team works. We shipped twice as fast and our code quality improved dramatically.", author: { name: "Alex Thompson", role: "Engineering Lead at TechCorp", avatar: "/assets/placeholders/avatar-placeholder.svg", }, } const DEFAULT_PRIMARY_CTA: CtaConfig = { text: "Start Free Trial", href: "#", } const DEFAULT_SECONDARY_CTA: CtaConfig = { text: "Schedule Demo", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function Cta08({ testimonial = DEFAULT_TESTIMONIAL, heading = "Join thousands of satisfied teams", description = "Start your free trial today and see why teams love building with us.", primaryCta = DEFAULT_PRIMARY_CTA, secondaryCta = DEFAULT_SECONDARY_CTA, className, idBase, }: Cta08Props) { const headingId = `${idBase ?? "cta-08"}-heading` return (

{/* Testimonial Section */}

{/* Quote icon */}

{/* Content Section */}

{heading}

{description && (

{description}

)} {/* CTAs */}

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

) } export default Cta08 export { Cta08, type Cta08Props, type TestimonialConfig, type CtaConfig, type AuthorConfig }