// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Waitlist 02 * @description A waitlist section with product preview and launch countdown. * Split layout with visual emphasis on the upcoming product. * * @slots waitlist, waitlist-container, waitlist-content, waitlist-badge, * waitlist-heading, waitlist-description, waitlist-form, * waitlist-form-input, waitlist-form-submit, waitlist-perks, * waitlist-perk-item, waitlist-perk-icon, waitlist-preview, * waitlist-preview-image, waitlist-preview-status * @variant split * * @registryDependencies button input badge * @dependencies lucide-react */ import * as React from "react" import { Rocket, Bell, Lock, Zap } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface Perk { /** Unique identifier */ id: string /** Perk icon type */ icon: "rocket" | "bell" | "lock" | "zap" /** Perk title */ title: string /** Perk description */ description: string } interface ImageConfig { /** Image source URL */ src: string /** Image alt text */ alt: string } interface Waitlist02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Launch date text */ launchDate?: string /** Waitlist perks */ perks?: Perk[] /** Placeholder text */ placeholder?: string /** Button text */ buttonText?: string /** Product preview image */ previewImage?: ImageConfig /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultPerks: Perk[] = [ { id: "perk-1", icon: "rocket", title: "Early Access", description: "Be first to try new features", }, { id: "perk-2", icon: "lock", title: "Locked-in Pricing", description: "Keep your founding rate forever", }, { id: "perk-3", icon: "bell", title: "Priority Updates", description: "Get notified before anyone else", }, { id: "perk-4", icon: "zap", title: "VIP Support", description: "Direct access to our team", }, ] const iconMap = { rocket: Rocket, bell: Bell, lock: Lock, zap: Zap, } const defaultPreviewImage: ImageConfig = { src: "/assets/placeholders/placeholder-4x3.svg", alt: "Product preview", } // ============================================================================ // COMPONENT // ============================================================================ function Waitlist02({ heading = "Something big is coming", description = "We're building the next generation of productivity tools. Join the waitlist to be part of the journey from day one.", launchDate = "Q1 2025", perks = defaultPerks, placeholder = "you@example.com", buttonText = "Get early access", previewImage = defaultPreviewImage, className, }: Waitlist02Props) { return (

{/* Content */}

Launching {launchDate}

{heading}

{description && (

{description}

)} {/* Form */} {/* Perks Grid */}

{perks.map((perk) => { const Icon = iconMap[perk.icon] return (

{perk.title}

{perk.description}

) })}

{/* Preview */}

{/* Overlay */}

) } export default Waitlist02 export { Waitlist02, type Waitlist02Props, type Perk, type ImageConfig }