"use client" /** * @name Waitlist 06 * @description A waitlist section with social proof testimonials. * Shows quotes from early users or beta testers to build trust. * * @slots waitlist, waitlist-container, waitlist-content, waitlist-header, * waitlist-heading, waitlist-description, waitlist-form, * waitlist-form-input, waitlist-form-button, waitlist-testimonials, * waitlist-testimonial, waitlist-testimonial-quote, * waitlist-testimonial-author, waitlist-testimonial-avatar, * waitlist-testimonial-name, waitlist-testimonial-role * @variant testimonials * * @registryDependencies button input * @dependencies lucide-react */ import * as React from "react" import { Quote } from "lucide-react" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Testimonial { id: string /** Testimonial quote */ quote: string /** Author name */ name: string /** Author role/title */ role: string /** Author avatar URL */ avatar?: string } interface Waitlist06Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Testimonials list */ testimonials?: Testimonial[] /** Placeholder text */ placeholder?: string /** Button text */ buttonText?: string /** Form submit callback */ onSubmit?: (email: string) => void /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTestimonials: Testimonial[] = [ { id: "testimonial-1", quote: "I've been on the beta for 2 weeks and it's already transformed how I work. Can't wait for the full launch!", name: "Sarah Chen", role: "Product Designer", }, { id: "testimonial-2", quote: "The early access has been incredible. This is exactly what our team has been waiting for.", name: "Marcus Johnson", role: "Engineering Lead", }, { id: "testimonial-3", quote: "Finally, a tool that gets it right. Being part of the waitlist was the best decision.", name: "Emily Rodriguez", role: "Startup Founder", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Waitlist06({ heading = "Join thousands waiting", description = "See what early users are saying about their experience.", testimonials = defaultTestimonials, placeholder = "Enter your email", buttonText = "Join the waitlist", onSubmit, className, idBase = "waitlist-06", }: Waitlist06Props) { const [email, setEmail] = React.useState("") const headingId = `${idBase}-heading` const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit?.(email) } return (

{/* Header */}

{heading}

{description && (

{description}

)} {/* Form */}

{/* Testimonials */}

{testimonials.map((testimonial) => (

“{testimonial.quote}”

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

{testimonial.name}

{testimonial.role}

))}

) } export default Waitlist06 export { Waitlist06, type Waitlist06Props }