// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Testimonial 07 * @description A horizontal marquee/ticker of testimonials that auto-scrolls. * Creates an infinite scrolling effect for continuous social proof. * * @slots testimonial, testimonial-container, testimonial-header, * testimonial-heading, testimonial-description, testimonial-marquee, * testimonial-track, testimonial-card, testimonial-quote, * testimonial-author, testimonial-avatar, testimonial-info * @variant marquee * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Quote } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TestimonialItemConfig { /** Unique identifier for list key */ id: string /** Quote text */ quote: string /** Author name */ name: string /** Author role/title */ role: string /** Author company */ company: string /** Avatar image URL */ avatar?: string } interface Testimonial07Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of testimonials */ testimonials?: TestimonialItemConfig[] /** Animation duration in seconds */ duration?: number /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_TESTIMONIALS: TestimonialItemConfig[] = [ { id: "marquee-sarah", quote: "This platform has completely transformed how we build products. Highly recommended!", name: "Sarah Chen", role: "CTO", company: "TechFlow", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "marquee-marcus", quote: "We cut our development time in half. The components are production-ready.", name: "Marcus Johnson", role: "Lead Developer", company: "Startup Labs", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "marquee-emily", quote: "The best investment we made for our engineering team this year.", name: "Emily Rodriguez", role: "Engineering Manager", company: "DataSync", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "marquee-michael", quote: "Seamless integration with our existing workflow. Love it!", name: "Michael Park", role: "Product Manager", company: "InnovateCo", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "marquee-lisa", quote: "Outstanding documentation and incredible support team.", name: "Lisa Wang", role: "Senior Engineer", company: "CloudBase", avatar: "/assets/placeholders/avatar-placeholder.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Testimonial07({ heading = "Trusted by thousands", description = "Join the companies already using our platform.", testimonials = DEFAULT_TESTIMONIALS, duration = 30, className, idBase, }: Testimonial07Props) { const headingId = `${idBase ?? "testimonial-07"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Marquee */}

{/* Gradient overlays */}

{/* Scrolling Track */}

{/* Duplicate testimonials for seamless loop */} {[...testimonials, ...testimonials].map((testimonial, index) => (

{/* Quote */}

{/* Author */}

{testimonial.avatar ? (

) : (

{testimonial.name.split(" ").map((n) => n[0]).join("")}

)}

{testimonial.name}

{testimonial.role}, {testimonial.company}

))}

) } export default Testimonial07 export { Testimonial07, type Testimonial07Props, type TestimonialItemConfig }