[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Dark theme inspired by Vercel design */ :root { --background: oklch(0.1 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.13 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.13 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.98 0 0); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.2 0 0); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.18 0 0); --ring: oklch(0.5 0 0); --chart-1: oklch(0.7 0.15 200); --chart-2: oklch(0.7 0.15 150); --chart-3: oklch(0.7 0.15 100); --chart-4: oklch(0.7 0.15 50); --chart-5: oklch(0.7 0.15 0); --radius: 0.5rem; --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.98 0 0); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.2 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.5 0 0); } .dark { --background: oklch(0.1 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.13 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.13 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.98 0 0); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.2 0 0); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.18 0 0); --ring: oklch(0.5 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]typescriptreact:file="app/page.tsx" isMerged="true" import { LaunchTimerFeature } from "@/components/launch-timer-feature" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/template-selector.tsx" isMerged="true" "use client" import type React from "react" import { cn } from "@/lib/utils" import type { TimerTemplate } from "./launch-timer-feature" import { Monitor, Clock, Minus, Zap, RotateCcw, Sparkles } from "lucide-react" interface TemplateSelectorProps { selected: TimerTemplate onSelect: (template: TimerTemplate) => void } const templates: { id: TimerTemplate; name: string; description: string; icon: React.ElementType }[] = [ { id: "digital", name: "Digital", description: "Modern LED display", icon: Monitor }, { id: "analog", name: "Analog", description: "Classic clock style", icon: Clock }, { id: "minimalist", name: "Minimalist", description: "Clean and simple", icon: Minus }, { id: "neon", name: "Neon", description: "Vibrant glow effect", icon: Zap }, { id: "flip", name: "Flip", description: "Retro flip clock", icon: RotateCcw }, { id: "gradient", name: "Gradient", description: "Colorful cards", icon: Sparkles }, ] export function TemplateSelector({ selected, onSelect }: TemplateSelectorProps) { return (

{templates.map((template) => { const Icon = template.icon const isSelected = selected === template.id return ( ) })}

) } [V0_FILE]typescriptreact:file="components/date-time-picker.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Calendar } from "lucide-react" interface DateTimePickerProps { date: Date onDateChange: (date: Date) => void } export function DateTimePicker({ date, onDateChange }: DateTimePickerProps) { const [showCalendar, setShowCalendar] = useState(false) const handleDateInput = (e: React.ChangeEvent) => { const newDate = new Date(e.target.value) if (!isNaN(newDate.getTime())) { newDate.setHours(date.getHours(), date.getMinutes()) onDateChange(newDate) } } const handleTimeInput = (e: React.ChangeEvent) => { const [hours, minutes] = e.target.value.split(":").map(Number) const newDate = new Date(date) newDate.setHours(hours, minutes) onDateChange(newDate) } const formatDateForInput = (d: Date) => { return d.toISOString().split("T")[0] } const formatTimeForInput = (d: Date) => { return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}` } // Quick presets const presets = [ { label: "1 Day", days: 1 }, { label: "1 Week", days: 7 }, { label: "30 Days", days: 30 }, { label: "90 Days", days: 90 }, ] const applyPreset = (days: number) => { const newDate = new Date() newDate.setDate(newDate.getDate() + days) newDate.setHours(date.getHours(), date.getMinutes()) onDateChange(newDate) } return (

{/* Quick Presets */}

Quick Set

{presets.map((preset) => ( ))}

{/* Date Input */}

Launch Date

{/* Time Input */}

Launch Time

{/* Preview */}

Launching on{" "} {date.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })} at{" "} {date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })}

) } [V0_FILE]typescriptreact:file="components/timer-preview.tsx" isMerged="true" "use client" import type { TimerConfig } from "./launch-timer-feature" import { DigitalTimer } from "./timers/digital-timer" import { AnalogTimer } from "./timers/analog-timer" import { MinimalistTimer } from "./timers/minimalist-timer" import { NeonTimer } from "./timers/neon-timer" import { FlipTimer } from "./timers/flip-timer" import { GradientTimer } from "./timers/gradient-timer" interface TimerPreviewProps { config: TimerConfig } export function TimerPreview({ config }: TimerPreviewProps) { const timerComponents = { digital: DigitalTimer, analog: AnalogTimer, minimalist: MinimalistTimer, neon: NeonTimer, flip: FlipTimer, gradient: GradientTimer, } const TimerComponent = timerComponents[config.template] return (

) } [V0_FILE]typescriptreact:file="components/timers/use-countdown.ts" isMerged="true" "use client" import { useState, useEffect } from "react" export interface TimeLeft { days: number hours: number minutes: number seconds: number total: number } export function useCountdown(targetDate: Date): TimeLeft { const calculateTimeLeft = (): TimeLeft => { const difference = targetDate.getTime() - Date.now() if (difference <= 0) { return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 } } return { days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), total: difference, } } const [timeLeft, setTimeLeft] = useState(calculateTimeLeft()) useEffect(() => { const timer = setInterval(() => { setTimeLeft(calculateTimeLeft()) }, 1000) return () => clearInterval(timer) }, [targetDate]) return timeLeft } [V0_FILE]typescriptreact:file="components/timers/digital-timer.tsx" isMerged="true" "use client" import { useCountdown } from "./use-countdown" interface DigitalTimerProps { targetDate: Date title: string subtitle: string } export function DigitalTimer({ targetDate, title, subtitle }: DigitalTimerProps) { const timeLeft = useCountdown(targetDate) const formatNumber = (num: number) => String(num).padStart(2, "0") const timeBlocks = [ { value: timeLeft.days, label: "Days" }, { value: timeLeft.hours, label: "Hours" }, { value: timeLeft.minutes, label: "Minutes" }, { value: timeLeft.seconds, label: "Seconds" }, ] return (

{title}

{subtitle}

{timeBlocks.map((block, index) => (

{formatNumber(block.value)}

{block.label}

{index < timeBlocks.length - 1 && ( : )}

))}

{timeLeft.total <= 0 && (

🎉 Launched!

)}

) } [V0_FILE]typescriptreact:file="components/timers/analog-timer.tsx" isMerged="true" "use client" import { useCountdown } from "./use-countdown" interface AnalogTimerProps { targetDate: Date title: string subtitle: string } export function AnalogTimer({ targetDate, title, subtitle }: AnalogTimerProps) { const timeLeft = useCountdown(targetDate) const CircularProgress = ({ value, max, label, size = 120, }: { value: number; max: number; label: string; size?: number }) => { const strokeWidth = 6 const radius = (size - strokeWidth) / 2 const circumference = radius * 2 * Math.PI const progress = ((max - value) / max) * circumference return (

{value}

{label}

) } return (

{title}

{subtitle}

{timeLeft.total <= 0 && (

🎉 Launched!

)}

) } [V0_FILE]typescriptreact:file="components/timers/minimalist-timer.tsx" isMerged="true" "use client" import { useCountdown } from "./use-countdown" interface MinimalistTimerProps { targetDate: Date title: string subtitle: string } export function MinimalistTimer({ targetDate, title, subtitle }: MinimalistTimerProps) { const timeLeft = useCountdown(targetDate) const formatNumber = (num: number) => String(num).padStart(2, "0") return (

{title}

{subtitle}

{formatNumber(timeLeft.days)} d {formatNumber(timeLeft.hours)} h {formatNumber(timeLeft.minutes)} m {formatNumber(timeLeft.seconds)} s

{timeLeft.total <= 0 && (

Now Live

)}

) } [V0_FILE]typescriptreact:file="components/timers/neon-timer.tsx" isMerged="true" "use client" import { useCountdown } from "./use-countdown" interface NeonTimerProps { targetDate: Date title: string subtitle: string } export function NeonTimer({ targetDate, title, subtitle }: NeonTimerProps) { const timeLeft = useCountdown(targetDate) const formatNumber = (num: number) => String(num).padStart(2, "0") const timeBlocks = [ { value: timeLeft.days, label: "DAYS" }, { value: timeLeft.hours, label: "HRS" }, { value: timeLeft.minutes, label: "MIN" }, { value: timeLeft.seconds, label: "SEC" }, ] return (

{title}

{subtitle}

{timeBlocks.map((block, index) => (

{formatNumber(block.value)}

{block.label}

{index < timeBlocks.length - 1 && ( : )}

))}

{timeLeft.total <= 0 && (

⚡ LIVE NOW

)}

) } [V0_FILE]typescriptreact:file="components/timers/flip-timer.tsx" isMerged="true" "use client" import { useCountdown } from "./use-countdown" import { useState, useEffect, useRef } from "react" interface FlipTimerProps { targetDate: Date title: string subtitle: string } function FlipCard({ value, label }: { value: number; label: string }) { const [displayValue, setDisplayValue] = useState(value) const [isFlipping, setIsFlipping] = useState(false) const prevValue = useRef(value) useEffect(() => { if (prevValue.current !== value) { setIsFlipping(true) const timer = setTimeout(() => { setDisplayValue(value) setIsFlipping(false) }, 300) prevValue.current = value return () => clearTimeout(timer) } }, [value]) const formatNumber = (num: number) => String(num).padStart(2, "0") return (

{/* Card container */}

{/* Top half */}

{formatNumber(displayValue)}

{/* Bottom half */}

{formatNumber(displayValue)}

{/* Divider line */}

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

{formatNumber(prevValue.current)}

)}

{label}

) } export function FlipTimer({ targetDate, title, subtitle }: FlipTimerProps) { const timeLeft = useCountdown(targetDate) return (

{title}

{subtitle}

{timeLeft.total <= 0 && (

🎉 Launched!

)}

) } [V0_FILE]typescriptreact:file="components/timers/gradient-timer.tsx" isMerged="true" "use client" import { useCountdown } from "./use-countdown" interface GradientTimerProps { targetDate: Date title: string subtitle: string } export function GradientTimer({ targetDate, title, subtitle }: GradientTimerProps) { const timeLeft = useCountdown(targetDate) const formatNumber = (num: number) => String(num).padStart(2, "0") const gradients = [ "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)", ] const timeBlocks = [ { value: timeLeft.days, label: "Days", gradient: gradients[0] }, { value: timeLeft.hours, label: "Hours", gradient: gradients[1] }, { value: timeLeft.minutes, label: "Minutes", gradient: gradients[2] }, { value: timeLeft.seconds, label: "Seconds", gradient: gradients[3] }, ] return (

{title}

{subtitle}

{timeBlocks.map((block) => (

{formatNumber(block.value)}

{block.label}

))}

{timeLeft.total <= 0 && (

🎉 Launched!

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Launch Timer - Product Countdown Templates", description: "Create beautiful countdown timers for your product launches with multiple customizable design templates.", generator: "v0.app", } export const viewport: Viewport = { themeColor: "#0a0a0a", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [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/social-share.tsx" "use client" import { Twitter, Linkedin, Facebook, Link2, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { useState } from "react" interface SocialShareProps { title: string subtitle: string targetDate: Date } export function SocialShare({ title, subtitle, targetDate }: SocialShareProps) { const [copied, setCopied] = useState(false) const launchDateFormatted = targetDate.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", }) const shareText = `${title} - ${subtitle}. Launching on ${launchDateFormatted}!` const shareUrl = typeof window !== "undefined" ? window.location.href : "" const shareLinks = { twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`, linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`, facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}"e=${encodeURIComponent(shareText)}`, } const handleCopyLink = async () => { try { await navigator.clipboard.writeText(shareUrl) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Failed to copy link") } } const handleShare = (platform: keyof typeof shareLinks) => { window.open(shareLinks[platform], "_blank", "width=600,height=400") } return (

Share your countdown

) } [V0_FILE]typescriptreact:file="components/launch-timer-feature.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useCallback } from "react" import { TemplateSelector } from "./template-selector" import { TimerPreview } from "./timer-preview" import { DateTimePicker } from "./date-time-picker" import { SocialShare } from "./social-share" import { Button } from "@/components/ui/button" import { Check, Settings2 } from "lucide-react" export type TimerTemplate = "digital" | "analog" | "minimalist" | "neon" | "flip" | "gradient" export interface TimerConfig { template: TimerTemplate targetDate: Date title: string subtitle: string } const defaultConfig: TimerConfig = { template: "digital", targetDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days from now title: "Product Launch", subtitle: "Get ready for something amazing", } export function LaunchTimerFeature() { const [config, setConfig] = useState(defaultConfig) const [savedConfig, setSavedConfig] = useState(null) const [showSettings, setShowSettings] = useState(true) const handleTemplateChange = useCallback((template: TimerTemplate) => { setConfig((prev) => ({ ...prev, template })) }, []) const handleDateChange = useCallback((date: Date) => { setConfig((prev) => ({ ...prev, targetDate: date })) }, []) const handleTitleChange = useCallback((title: string) => { setConfig((prev) => ({ ...prev, title })) }, []) const handleSubtitleChange = useCallback((subtitle: string) => { setConfig((prev) => ({ ...prev, subtitle })) }, []) const handleSave = useCallback(() => { setSavedConfig(config) }, [config]) const handleApply = useCallback(() => { if (savedConfig) { setConfig(savedConfig) } }, [savedConfig]) return (

{/* Header */}

Launch Timer

{/* Page Title */}

Create Your Launch Timer

Choose from multiple design templates to create a countdown timer that matches your brand identity.

{/* Main Content */}

{/* Preview Area */}

Live Preview

{/* Social Share section */}

{/* Saved Configuration */} {savedConfig && (

Saved Configuration

Template: {savedConfig.template} • {savedConfig.targetDate.toLocaleDateString()}

)}

{/* Settings Panel */} {showSettings && (

{/* Template Selection */}

1 Choose Template

{/* Date & Time */}

2 Set Launch Date

{/* Content */}

3 Customize Content

Title handleTitleChange(e.target.value)} className="w-full bg-input border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Product Launch" />

Subtitle handleSubtitleChange(e.target.value)} className="w-full bg-input border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Get ready for something amazing" />

)}

) }

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This