"use client" /** * @name Waitlist 04 * @description Feature-focused waitlist with product preview cards. * Waitlist signup showcasing upcoming features. * * @slots waitlist, waitlist-container, waitlist-header, waitlist-badge, * waitlist-heading, waitlist-description, waitlist-features, * waitlist-feature, waitlist-feature-icon, waitlist-feature-title, * waitlist-feature-description, waitlist-form, waitlist-form-input, * waitlist-form-button, waitlist-footer * @variant feature-focused * * @registryDependencies button input badge card * @dependencies lucide-react */ import * as React from "react" import { Rocket, Zap, ShieldCheck, TrendingUp, Bell, } from "lucide-react" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { Badge } from "@/registry/ui/badge" import { Card, CardContent } from "@/registry/ui/card" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Feature { id: string /** Feature icon type */ icon: "zap" | "shield" | "chart" /** Feature title */ title: string /** Feature description */ description: string } interface Waitlist04Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Features list */ features?: Feature[] /** Form submit callback */ onSubmit?: (email: string) => void /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFeatures: Feature[] = [ { id: "feat-1", icon: "zap", title: "Lightning Fast", description: "Optimized for speed and efficiency", }, { id: "feat-2", icon: "shield", title: "Secure by Default", description: "Enterprise-grade security built in", }, { id: "feat-3", icon: "chart", title: "Powerful Analytics", description: "Deep insights into your data", }, ] const iconMap = { zap: Zap, shield: ShieldCheck, chart: TrendingUp, } // ============================================================================ // COMPONENT // ============================================================================ function Waitlist04({ heading = "Be the First to Experience", description = "Join our exclusive waitlist and get early access to features that will transform your workflow.", features = defaultFeatures, onSubmit, className, idBase = "waitlist-04", }: Waitlist04Props) { const [email, setEmail] = React.useState("") const headingId = `${idBase}-heading` const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit?.(email) } return (

{heading}

{description && (

{description}

)}

{features.map((feature) => { const Icon = iconMap[feature.icon] return (

{feature.title}

{feature.description}

) })}

Be among the first 1,000 users to get lifetime early adopter benefits.

) } export default Waitlist04 export { Waitlist04, type Waitlist04Props }