// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Testimonial 01 * @description A testimonial section with a grid of customer quotes, * avatars, and company logos. Great for building social proof. * * @slots testimonial, testimonial-container, testimonial-header, testimonial-heading, * testimonial-description, testimonial-grid, testimonial-card, testimonial-quote-icon, * testimonial-quote, testimonial-author, testimonial-avatar, testimonial-author-info * @variant grid * * @registryDependencies card * @dependencies lucide-react */ import * as React from "react" import { Quote } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TestimonialItem { /** Unique identifier */ id: string /** Customer quote */ quote: string /** Customer name */ name: string /** Customer role/title */ role: string /** Company name */ company: string /** Avatar image URL */ avatar?: string } interface Testimonial01Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of testimonials */ testimonials?: TestimonialItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTestimonials: TestimonialItem[] = [ { id: "testimonial-1", quote: "This platform has completely transformed how we build products. The speed and quality improvements are remarkable.", name: "Sarah Chen", role: "CTO", company: "TechFlow", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "testimonial-2", quote: "We cut our development time in half. The pre-built components are production-ready and beautifully designed.", name: "Marcus Johnson", role: "Lead Developer", company: "Startup Labs", avatar: "/assets/placeholders/avatar-placeholder.svg", }, { id: "testimonial-3", quote: "The best investment we made for our engineering team. Support is incredible and the docs are comprehensive.", name: "Emily Rodriguez", role: "Engineering Manager", company: "DataSync", avatar: "/assets/placeholders/avatar-placeholder.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Testimonial01({ heading = "Loved by developers worldwide", description = "See what our customers have to say about their experience.", testimonials = defaultTestimonials, className, }: Testimonial01Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Testimonials Grid */}

{testimonials.map((testimonial) => (

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

“{testimonial.quote}”

{/* Author */}

{testimonial.avatar && (

)}

{testimonial.name}

{testimonial.role}, {testimonial.company}

))}

) } export default Testimonial01 export { Testimonial01, type Testimonial01Props, type TestimonialItem }