[V0_FILE]typescriptreact:file="components/flip-counter.tsx" isMerged="true" "use client" import { FlipDigit } from "./flip-digit" import { cn } from "@/lib/utils" interface FlipCounterProps { value: number className?: string } export function FlipCounter({ value, className }: FlipCounterProps) { // Format number with commas and split into characters const formattedValue = value.toLocaleString() const characters = formattedValue.split("") return (

{characters.map((char, index) => { if (char === ",") { return ( , ) } return })}

) } [V0_FILE]typescriptreact:file="components/waitlist-counter.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { FlipCounter } from "./flip-counter" interface WaitlistCounterProps { initialCount?: number className?: string } export function WaitlistCounter({ initialCount = 15344, className }: WaitlistCounterProps) { const [count, setCount] = useState(initialCount) // Simulate real-time updates for demo useEffect(() => { const interval = setInterval(() => { setCount((prev) => prev + 1) }, 3000) // Increment every 3 seconds for demo return () => clearInterval(interval) }, []) return (

people on the waitlist

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/flip-digit.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { cn } from "@/lib/utils" interface FlipDigitProps { digit: string className?: string } export function FlipDigit({ digit, className }: FlipDigitProps) { const [currentDigit, setCurrentDigit] = useState(digit) const [previousDigit, setPreviousDigit] = useState(digit) const [isFlipping, setIsFlipping] = useState(false) const flipTimeoutRef = useRef(null) useEffect(() => { if (digit !== currentDigit) { // Clear any pending timeout if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } // Store the old digit before updating setPreviousDigit(currentDigit) setIsFlipping(true) // Update to new digit immediately so base layer shows new value setCurrentDigit(digit) // End flip animation after duration flipTimeoutRef.current = setTimeout(() => { setIsFlipping(false) setPreviousDigit(digit) }, 800) } return () => { if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [digit, currentDigit]) return (

{/* Base card - always shows current digit */}

{/* Top half - current digit */}

{currentDigit}

{/* Bottom half - current digit */}

{currentDigit}

{/* Divider line */}

{/* Animated flip overlay - only renders during flip */} {isFlipping && (

{/* Top flap - flips down, shows PREVIOUS digit */}

{previousDigit}

{/* Bottom flap - flips up, shows CURRENT digit */}

{currentDigit}

)}

) } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState, useCallback } from "react" import { FlipDigit } from "./flip-digit" interface CountdownTimerProps { targetDate: Date onComplete?: () => void } interface TimeLeft { days: number hours: number minutes: number seconds: number } function padNumber(num: number): string[] { return num.toString().padStart(2, "0").split("") } export function CountdownTimer({ targetDate, onComplete }: CountdownTimerProps) { const calculateTimeLeft = useCallback((): TimeLeft => { const difference = targetDate.getTime() - new Date().getTime() if (difference <= 0) { return { days: 0, hours: 0, minutes: 0, seconds: 0 } } const totalSeconds = Math.floor(difference / 1000) const days = Math.floor(totalSeconds / 86400) const hours = Math.floor((totalSeconds % 86400) / 3600) const minutes = Math.floor((totalSeconds % 3600) / 60) const seconds = totalSeconds % 60 return { days, hours, minutes, seconds } }, [targetDate]) const [timeLeft, setTimeLeft] = useState(calculateTimeLeft) const [isComplete, setIsComplete] = useState(false) useEffect(() => { const timer = setInterval(() => { const newTimeLeft = calculateTimeLeft() setTimeLeft(newTimeLeft) if (newTimeLeft.days === 0 && newTimeLeft.hours === 0 && newTimeLeft.minutes === 0 && newTimeLeft.seconds === 0) { setIsComplete(true) clearInterval(timer) onComplete?.() } }, 1000) return () => clearInterval(timer) }, [calculateTimeLeft, onComplete]) const [d1, d2] = padNumber(timeLeft.days) const [h1, h2] = padNumber(timeLeft.hours) const [m1, m2] = padNumber(timeLeft.minutes) const [s1, s2] = padNumber(timeLeft.seconds) return (

Days

: {/* Hours */}

Hours

: {/* Minutes */}

Minutes

: {/* Seconds */}

Seconds

{isComplete &&

Launch time!

}

) } [V0_FILE]typescriptreact:file="components/launch-countdown.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { CountdownTimer } from "./countdown-timer" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function LaunchCountdown() { const [targetDate, setTargetDate] = useState(() => { const date = new Date() date.setDate(date.getDate() + 7) return date }) const [days, setDays] = useState("7") const [hours, setHours] = useState("0") const [minutes, setMinutes] = useState("0") const [seconds, setSeconds] = useState("0") const [isLaunched, setIsLaunched] = useState(false) const handleSetTimer = () => { const newTarget = new Date() newTarget.setDate(newTarget.getDate() + Number.parseInt(days || "0")) newTarget.setHours(newTarget.getHours() + Number.parseInt(hours || "0")) newTarget.setMinutes(newTarget.getMinutes() + Number.parseInt(minutes || "0")) newTarget.setSeconds(newTarget.getSeconds() + Number.parseInt(seconds || "0")) setTargetDate(newTarget) setIsLaunched(false) } const handleComplete = () => { setIsLaunched(true) } return (

Product Launch

Set your countdown and watch the magic happen

{/* Timer Settings */}

Set countdown duration

Days setDays(e.target.value)} className="w-16 text-center" />

Hours setHours(e.target.value)} className="w-16 text-center" />

Minutes setMinutes(e.target.value)} className="w-16 text-center" />

Seconds setSeconds(e.target.value)} className="w-16 text-center" />

) } [V0_FILE]typescriptreact:file="lib/themes.ts" isMerged="true" export type ThemeMode = "minimal-light" | "dark" | "retro" | "neon" | "monochrome" | "glass" | "terminal" | "luxury" export interface ThemeConfig { name: string description: string background: string foreground: string card: string cardForeground: string muted: string mutedForeground: string accent: string accentForeground: string border: string shadow: string fontClass?: string } export const themes: Record = { "minimal-light": { name: "Minimal Light", description: "Clean & modern", background: "bg-gray-50", foreground: "text-gray-900", card: "bg-white", cardForeground: "text-gray-900", muted: "bg-gray-100", mutedForeground: "text-gray-500", accent: "bg-gray-900", accentForeground: "text-white", border: "border-gray-200", shadow: "shadow-sm", }, dark: { name: "Dark Mode", description: "Sleek & focused", background: "bg-zinc-950", foreground: "text-zinc-50", card: "bg-zinc-900", cardForeground: "text-zinc-50", muted: "bg-zinc-800", mutedForeground: "text-zinc-400", accent: "bg-white", accentForeground: "text-zinc-900", border: "border-zinc-800", shadow: "shadow-lg shadow-black/20", }, retro: { name: "Retro Split-Flap", description: "Nostalgic vibes", background: "bg-amber-50", foreground: "text-amber-950", card: "bg-amber-100", cardForeground: "text-amber-950", muted: "bg-amber-100/50", mutedForeground: "text-amber-800", accent: "bg-amber-900", accentForeground: "text-amber-50", border: "border-amber-200", shadow: "shadow-md shadow-amber-900/10", }, neon: { name: "Neon Glow", description: "Cyberpunk energy", background: "bg-slate-950", foreground: "text-cyan-400", card: "bg-slate-900", cardForeground: "text-cyan-300", muted: "bg-slate-800", mutedForeground: "text-cyan-500/70", accent: "bg-cyan-500", accentForeground: "text-slate-950", border: "border-cyan-500/30", shadow: "shadow-lg shadow-cyan-500/20", }, monochrome: { name: "Monochrome", description: "Sophisticated tones", background: "bg-slate-100", foreground: "text-slate-800", card: "bg-slate-200", cardForeground: "text-slate-900", muted: "bg-slate-300/50", mutedForeground: "text-slate-600", accent: "bg-slate-700", accentForeground: "text-slate-50", border: "border-slate-300", shadow: "shadow-md shadow-slate-400/20", }, glass: { name: "Frosted Glass", description: "Modern & premium", background: "bg-gradient-to-br from-indigo-100 via-purple-50 to-pink-100", foreground: "text-slate-800", card: "bg-white/60 backdrop-blur-xl", cardForeground: "text-slate-900", muted: "bg-white/40 backdrop-blur-md", mutedForeground: "text-slate-600", accent: "bg-indigo-500", accentForeground: "text-white", border: "border-white/50", shadow: "shadow-xl shadow-indigo-500/10", }, terminal: { name: "Terminal", description: "Hacker aesthetic", background: "bg-black", foreground: "text-green-400", card: "bg-green-950/30", cardForeground: "text-green-400", muted: "bg-green-950/20", mutedForeground: "text-green-600", accent: "bg-green-500", accentForeground: "text-black", border: "border-green-900/50", shadow: "shadow-lg shadow-green-500/10", fontClass: "font-mono", }, luxury: { name: "Luxury Gold", description: "Premium elegance", background: "bg-stone-950", foreground: "text-amber-100", card: "bg-stone-900", cardForeground: "text-amber-200", muted: "bg-stone-800", mutedForeground: "text-amber-200/60", accent: "bg-gradient-to-r from-amber-400 to-yellow-500", accentForeground: "text-stone-950", border: "border-amber-500/30", shadow: "shadow-xl shadow-amber-500/10", }, } [V0_FILE]typescriptreact:file="components/theme-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" import type { ThemeMode } from "@/lib/themes" interface ThemeContextType { theme: ThemeMode setTheme: (theme: ThemeMode) => void } const ThemeContext = createContext(undefined) export function ThemeProvider({ children }: { children: ReactNode }) { const [theme, setTheme] = useState("minimal-light") return {children} } export function useTheme() { const context = useContext(ThemeContext) if (!context) { throw new Error("useTheme must be used within a ThemeProvider") } return context } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { ThemeProvider } from "@/components/theme-context" import { LandingPage } from "@/components/landing-page" export default function Home() { return ( ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* ============================================ FLIP CLOCK - Smooth Animation System ============================================ */ /* Keyframe animations */ @keyframes flapDown { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-180deg); } } @keyframes flapUp { 0% { transform: rotateX(180deg); } 100% { transform: rotateX(0deg); } } /* ============================================ THEME TOKENS ============================================ */ :root { --background: oklch(0.985 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(0.97 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]png:file="public/professional-woman-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-headshot-oeWONwTZBy5Zy36DN3TqchWC4Xo6BO.png" isMerged="true" [V0_FILE]jpg:file="public/young-man-portrait-smiling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-man-portrait-smiling-VowHddDzgCjBewsZ3oEFsv74ISBXjo.jpg" isMerged="true" [V0_FILE]jpg:file="public/asian-woman-professional-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/asian-woman-professional-photo-pCCEKIBHneQwzQEtoMkJFcrx6CR6mx.jpg" isMerged="true" [V0_FILE]png:file="public/bearded-man-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bearded-man-headshot-cKQE0wdPIscNOv0edHKuhSqbVa5JrR.png" isMerged="true" [V0_FILE]png:file="public/smiling-black-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smiling-black-woman-portrait-oAqD31cBy9Af0hGqiFiidR8kXMOmYG.png" isMerged="true" [V0_FILE]typescriptreact:file="components/themed-flip-digit.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { useTheme } from "./theme-context" import { themes } from "@/lib/themes" import { cn } from "@/lib/utils" interface ThemedFlipDigitProps { digit: string } export function ThemedFlipDigit({ digit }: ThemedFlipDigitProps) { const { theme } = useTheme() const themeConfig = themes[theme] const [currentDigit, setCurrentDigit] = useState(digit) const [previousDigit, setPreviousDigit] = useState(digit) const [isFlipping, setIsFlipping] = useState(false) const flipTimeoutRef = useRef(null) useEffect(() => { if (digit !== currentDigit) { if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } setPreviousDigit(currentDigit) setIsFlipping(true) setCurrentDigit(digit) flipTimeoutRef.current = setTimeout(() => { setIsFlipping(false) setPreviousDigit(digit) }, 800) } return () => { if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [digit, currentDigit]) // Neon glow effect const neonGlow = theme === "neon" ? "shadow-[0_0_20px_rgba(34,211,238,0.4),inset_0_0_20px_rgba(34,211,238,0.1)]" : "" const neonTextGlow = theme === "neon" ? "[text-shadow:0_0_10px_rgba(34,211,238,0.8),0_0_20px_rgba(34,211,238,0.5)]" : "" // Terminal scanline effect const terminalEffect = theme === "terminal" ? "after:absolute after:inset-0 after:bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.1)_50%)] after:bg-[length:100%_4px] after:pointer-events-none" : "" // Luxury gold border const luxuryBorder = theme === "luxury" ? "ring-1 ring-amber-500/30" : "" // Retro texture const retroTexture = theme === "retro" ? "bg-[linear-gradient(to_bottom,transparent_0%,rgba(0,0,0,0.02)_100%)]" : "" const digitFontSize = "text-3xl sm:text-5xl md:text-6xl lg:text-7xl" return (

{/* Base card */}

{/* Top half */}

{currentDigit}

{/* Bottom half */}

{currentDigit}

{/* Divider line */}

{/* Flip animation overlay */} {isFlipping && (

{/* Top flap flipping down */}

{previousDigit}

{/* Bottom flap flipping up */}

{currentDigit}

)}

) } [V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isEdit="true" isMerged="true" "use client" import { useTheme } from "./theme-context" import { themes, type ThemeMode } from "@/lib/themes" import { cn } from "@/lib/utils" const themeOrder: ThemeMode[] = ["minimal-light", "dark", "retro", "neon", "monochrome", "glass", "terminal", "luxury"] export function ThemeSwitcher() { const { theme, setTheme } = useTheme() return (

{themeOrder.map((themeKey) => { const themeConfig = themes[themeKey] const isActive = theme === themeKey return ( ) })}

) } [V0_FILE]typescriptreact:file="components/landing-page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ThemedCountdown } from "./themed-countdown" import { ThemeSwitcher } from "./theme-switcher" import { useTheme } from "./theme-context" import { themes, type ThemeMode } from "@/lib/themes" import { cn } from "@/lib/utils" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { ArrowRight, Bell, Sparkles, Zap, Shield, Star } from "lucide-react" export function LandingPage() { const { theme } = useTheme() const themeConfig = themes[theme] const [targetDate, setTargetDate] = useState(() => { const date = new Date() date.setDate(date.getDate() + 7) return date }) const [days, setDays] = useState("7") const [hours, setHours] = useState("0") const [minutes, setMinutes] = useState("0") const [seconds, setSeconds] = useState("0") const [email, setEmail] = useState("") const [showSettings, setShowSettings] = useState(false) const handleSetTimer = () => { const newTarget = new Date() newTarget.setDate(newTarget.getDate() + Number.parseInt(days || "0")) newTarget.setHours(newTarget.getHours() + Number.parseInt(hours || "0")) newTarget.setMinutes(newTarget.getMinutes() + Number.parseInt(minutes || "0")) newTarget.setSeconds(newTarget.getSeconds() + Number.parseInt(seconds || "0")) setTargetDate(newTarget) setShowSettings(false) } // Theme-specific content const content: Record< ThemeMode, { badge: string title: string highlight: string subtitle: string cta: string features: { icon: typeof Sparkles; text: string }[] } > = { "minimal-light": { badge: "Coming Soon", title: "The future of", highlight: "productivity", subtitle: "We're building something that will transform how you work. Simple, powerful, and designed for the modern era.", cta: "Get Early Access", features: [ { icon: Sparkles, text: "AI-Powered" }, { icon: Zap, text: "Lightning Fast" }, { icon: Shield, text: "Privacy First" }, ], }, dark: { badge: "Launching Soon", title: "Experience the next", highlight: "evolution", subtitle: "A new standard in digital experience. Built for those who demand excellence.", cta: "Join the Waitlist", features: [ { icon: Sparkles, text: "Next-Gen Tech" }, { icon: Zap, text: "Blazing Speed" }, { icon: Shield, text: "Enterprise Ready" }, ], }, retro: { badge: "Departing Soon", title: "Your journey", highlight: "begins here", subtitle: "Step into a world where classic meets innovation. Timeless design, modern functionality.", cta: "Reserve Your Seat", features: [ { icon: Sparkles, text: "Timeless Design" }, { icon: Zap, text: "Instant Access" }, { icon: Shield, text: "Built to Last" }, ], }, neon: { badge: "[ INITIALIZING ]", title: "SYSTEM", highlight: "OVERRIDE", subtitle: "Next-generation interface protocol. Breaking barriers. Redefining limits.", cta: "INITIALIZE ACCESS", features: [ { icon: Sparkles, text: "QUANTUM CORE" }, { icon: Zap, text: "HYPERSPEED" }, { icon: Shield, text: "ENCRYPTED" }, ], }, monochrome: { badge: "Announcing", title: "Refined", highlight: "simplicity", subtitle: "Where form meets function. Crafted with intention, designed for impact.", cta: "Get Notified", features: [ { icon: Sparkles, text: "Thoughtful" }, { icon: Zap, text: "Efficient" }, { icon: Shield, text: "Reliable" }, ], }, glass: { badge: "Preview", title: "Beyond", highlight: "boundaries", subtitle: "A fluid experience that adapts to you. Seamless, beautiful, and intuitive.", cta: "Request Access", features: [ { icon: Sparkles, text: "Adaptive" }, { icon: Zap, text: "Seamless" }, { icon: Shield, text: "Secure" }, ], }, terminal: { badge: "> status: pending", title: "$ sudo launch", highlight: "--force", subtitle: "// root access required. awaiting deployment confirmation...", cta: "$ subscribe --notify", features: [ { icon: Sparkles, text: "--optimized" }, { icon: Zap, text: "--async" }, { icon: Shield, text: "--secure" }, ], }, luxury: { badge: "Exclusive Preview", title: "Unveiling", highlight: "excellence", subtitle: "For the discerning few. An experience crafted for those who settle for nothing less than extraordinary.", cta: "Request Invitation", features: [ { icon: Sparkles, text: "Bespoke" }, { icon: Zap, text: "Premium" }, { icon: Shield, text: "Exclusive" }, ], }, } const currentContent = content[theme] return (

{/* Subtle background decoration */} {theme === "neon" && (

)} {theme === "glass" && (

)} {theme === "luxury" && (

)} {/* Header with Theme Switcher */}

{/* Main Content */}

{/* Badge */}

{currentContent.badge}

{/* Main Headline */}

{currentContent.title}{" "} {currentContent.highlight}

{currentContent.subtitle}

{/* Countdown Timer */}

{theme === "terminal" ? "// time_remaining:" : "Launching in"}

{/* Timer Settings (Collapsible) */} {showSettings && (

Days setDays(e.target.value)} className={cn( "w-full sm:w-16 text-center text-sm", themeConfig.card, themeConfig.cardForeground, themeConfig.border, themeConfig.fontClass, )} />

Hours setHours(e.target.value)} className={cn( "w-full sm:w-16 text-center text-sm", themeConfig.card, themeConfig.cardForeground, themeConfig.border, themeConfig.fontClass, )} />

Min setMinutes(e.target.value)} className={cn( "w-full sm:w-16 text-center text-sm", themeConfig.card, themeConfig.cardForeground, themeConfig.border, themeConfig.fontClass, )} />

Sec setSeconds(e.target.value)} className={cn( "w-full sm:w-16 text-center text-sm", themeConfig.card, themeConfig.cardForeground, themeConfig.border, themeConfig.fontClass, )} />

)} {/* Email Signup */}

setEmail(e.target.value)} className={cn( "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none text-sm sm:text-base", themeConfig.cardForeground, themeConfig.fontClass, "placeholder:opacity-50", )} />

{/* Features */}

{currentContent.features.map((feature, index) => (

{feature.text}

))}

{/* Social Proof */}

{[ "/professional-woman-headshot.png", "/young-man-portrait-smiling.jpg", "/asian-woman-professional-photo.jpg", "/bearded-man-headshot.png", "/smiling-black-woman-portrait.png", ].map((src, i) => ( {`User

))}

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

{theme === "terminal" ? "// 2,847 users_waiting" : "Join 2,847+ on the waitlist"}

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/themed-countdown.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState, useCallback } from "react" import { ThemedFlipDigit } from "./themed-flip-digit" import { useTheme } from "./theme-context" import { themes } from "@/lib/themes" import { cn } from "@/lib/utils" interface ThemedCountdownProps { targetDate: Date onComplete?: () => void } interface TimeLeft { days: number hours: number minutes: number seconds: number } function padNumber(num: number): string[] { return num.toString().padStart(2, "0").split("") } export function ThemedCountdown({ targetDate, onComplete }: ThemedCountdownProps) { const { theme } = useTheme() const themeConfig = themes[theme] const calculateTimeLeft = useCallback((): TimeLeft => { const difference = targetDate.getTime() - new Date().getTime() if (difference <= 0) { return { days: 0, hours: 0, minutes: 0, seconds: 0 } } const totalSeconds = Math.floor(difference / 1000) const days = Math.floor(totalSeconds / 86400) const hours = Math.floor((totalSeconds % 86400) / 3600) const minutes = Math.floor((totalSeconds % 3600) / 60) const seconds = totalSeconds % 60 return { days, hours, minutes, seconds } }, [targetDate]) const [timeLeft, setTimeLeft] = useState(calculateTimeLeft) const [isComplete, setIsComplete] = useState(false) useEffect(() => { const timer = setInterval(() => { const newTimeLeft = calculateTimeLeft() setTimeLeft(newTimeLeft) if (newTimeLeft.days === 0 && newTimeLeft.hours === 0 && newTimeLeft.minutes === 0 && newTimeLeft.seconds === 0) { setIsComplete(true) clearInterval(timer) onComplete?.() } }, 1000) return () => clearInterval(timer) }, [calculateTimeLeft, onComplete]) const [d1, d2] = padNumber(timeLeft.days) const [h1, h2] = padNumber(timeLeft.hours) const [m1, m2] = padNumber(timeLeft.minutes) const [s1, s2] = padNumber(timeLeft.seconds) const colonColor = theme === "neon" ? "text-cyan-500 [text-shadow:0_0_10px_rgba(34,211,238,0.8)]" : theme === "terminal" ? "text-green-500" : theme === "luxury" ? "text-amber-400" : themeConfig.mutedForeground return (

{/* Row 1: Days and Hours */}

{/* Days */}

Days

: {/* Hours */}

Hours

{/* Row 2: Minutes and Seconds */}

{/* Minutes */}

Minutes

: {/* Seconds */}

Seconds

{isComplete && (

Launch time!

)}

) }

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This