[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "COPYSTREET - Coming Soon", description: "The future of streetwear is coming soon.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 240 5% 10%; --foreground: 0 0% 100%; --card: 240 5% 14%; --card-foreground: 0 0% 100%; --popover: 240 5% 14%; --popover-foreground: 0 0% 100%; --primary: 0 0% 100%; --primary-foreground: 240 5% 10%; --secondary: 240 5% 20%; --secondary-foreground: 0 0% 100%; --muted: 240 5% 20%; --muted-foreground: 240 5% 75%; --accent: 240 5% 20%; --accent-foreground: 0 0% 100%; --destructive: 0 100% 50%; --destructive-foreground: 0 0% 100%; --border: 240 5% 25%; --input: 240 5% 25%; --ring: 0 0% 100%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import { CountdownTimer } from "@/components/countdown-timer" import { Logo } from "@/components/logo" export default function Home() { return (

{/* Background pattern */}

{/* Hero content */}

COPYSTREET

The future of streetwear is coming soon.

{/* Social media links */}

Instagram Twitter TikTok

) } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" export function CountdownTimer() { // Set launch date to 6 months from now const calculateLaunchDate = () => { const now = new Date() const launchDate = new Date(now) launchDate.setMonth(now.getMonth() + 6) return launchDate } const [launchDate] = useState(calculateLaunchDate()) const [timeLeft, setTimeLeft] = useState({ months: 0, days: 0, hours: 0, minutes: 0, seconds: 0, }) useEffect(() => { const calculateTimeLeft = () => { const now = new Date() const difference = launchDate.getTime() - now.getTime() if (difference <= 0) { return { months: 0, days: 0, hours: 0, minutes: 0, seconds: 0, } } // Calculate months (approximate) const months = Math.floor(difference / (1000 * 60 * 60 * 24 * 30.44)) // Calculate remaining days after months const daysInMs = difference - months * (1000 * 60 * 60 * 24 * 30.44) const days = Math.floor(daysInMs / (1000 * 60 * 60 * 24)) // Calculate remaining hours, minutes, seconds const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)) const seconds = Math.floor((difference % (1000 * 60)) / 1000) return { months, days, hours, minutes, seconds } } const timer = setInterval(() => { setTimeLeft(calculateTimeLeft()) }, 1000) return () => clearInterval(timer) }, [launchDate]) const timeUnits = [ { label: "Months", value: timeLeft.months }, { label: "Days", value: timeLeft.days }, { label: "Hours", value: timeLeft.hours }, { label: "Minutes", value: timeLeft.minutes }, { label: "Seconds", value: timeLeft.seconds }, ] return (

Launching In

{timeUnits.map((unit) => (

{unit.value.toString().padStart(2, "0")}

{unit.label}

))}

) } [V0_FILE]typescriptreact:file="components/logo.tsx" isEdit="true" isQuickEdit="true" import { cn } from "@/lib/utils" export function Logo({ className }: { className?: string }) { return (

) }