// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Waitlist 01 * @description A simple centered waitlist signup for pre-launch products. * Shows signup count and early access benefits. * * @slots waitlist, waitlist-container, waitlist-content, waitlist-badge, * waitlist-heading, waitlist-description, waitlist-form, * waitlist-form-input, waitlist-form-submit, waitlist-social-proof, * waitlist-avatars, waitlist-benefits, waitlist-benefit-item * @variant centered * * @registryDependencies button input * @dependencies lucide-react */ import * as React from "react" import { Sparkles, Check } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" // ============================================================================ // TYPES // ============================================================================ interface Benefit { /** Unique identifier */ id: string /** Benefit text */ text: string } interface Waitlist01Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Current waitlist count */ waitlistCount?: number /** Placeholder text */ placeholder?: string /** Button text */ buttonText?: string /** Benefits list */ benefits?: Benefit[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultBenefits: Benefit[] = [ { id: "benefit-1", text: "Early access before public launch" }, { id: "benefit-2", text: "Exclusive founding member pricing" }, { id: "benefit-3", text: "Direct input on product features" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Waitlist01({ heading = "Join the waitlist", description = "Be the first to know when we launch. Get early access and exclusive benefits.", waitlistCount = 2847, placeholder = "Enter your email", buttonText = "Join waitlist", benefits = defaultBenefits, className, }: Waitlist01Props) { return (

{/* Badge */}

{/* Header */}

{heading}

{description && (

{description}

)} {/* Form */} {/* Waitlist Count */}

{[1, 2, 3, 4].map((i) => (

Join{" "} {waitlistCount.toLocaleString()}+ {" "} others on the waitlist

{/* Benefits */}

{benefits.map((benefit) => (

))}

) } export default Waitlist01 export { Waitlist01, type Waitlist01Props, type Benefit }