[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Header from "./components/Header" import Hero from "./components/Hero" import Features from "./components/Features" import Countdown from "./components/Countdown" import EmailSignup from "./components/EmailSignup" import Footer from "./components/Footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/Hero.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" export default function Hero() { return (

Your Instant Website Marketplace

Get your professional website in just 3 days!

) } [V0_FILE]typescriptreact:file="app/components/Features.tsx" isEdit="true" isMerged="true" import { Clock, Zap, Award } from "lucide-react" const features = [ { icon: , title: "Quick Turnaround", description: "Get your website up and running in just 3 days.", }, { icon: , title: "Instant Results", description: "No waiting for weeks. Your online presence starts now.", }, { icon: , title: "Quality Assured", description: "Professional designs tailored to your needs.", }, ] export default function Features() { return (

Why Choose Infotech Clinic?

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

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="app/components/Countdown.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" export default function Countdown() { const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, }) useEffect(() => { const countdownDate = new Date("2025-06-05T00:15:11").getTime() const timer = setInterval(() => { const now = new Date().getTime() const distance = countdownDate - now setTimeLeft({ days: Math.floor(distance / (1000 * 60 * 60 * 24)), hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), seconds: Math.floor((distance % (1000 * 60)) / 1000), }) if (distance < 0) { clearInterval(timer) } }, 1000) return () => clearInterval(timer) }, []) return (

Launching Soon

{Object.entries(timeLeft).map(([unit, value]) => (

{value}

{unit}

))}

) } [V0_FILE]typescriptreact:file="app/components/EmailSignup.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function EmailSignup() { const [email, setEmail] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically send the email to your backend console.log("Submitted email:", email) setEmail("") alert("Thank you for signing up!") } return (

Stay Updated

Be the first to know when we launch. Sign up for updates!

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" isEdit="true" isMerged="true" export default function Footer() { return ( ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescript: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="app/opengraph-image.tsx" isMerged="true" import { ImageResponse } from "next/server" import Logo from "./components/Logo" // Route segment config export const runtime = "edge" // Image metadata export const alt = "Infotech Clinic" export const size = { width: 1200, height: 630, } export const contentType = "image/png" // Image generation export default async function Image() { return new ImageResponse( // ImageResponse JSX element

Infotech Clinic

, // ImageResponse options { ...size, }, ) } [V0_FILE]typescriptreact:file="app/components/Logo.tsx" isEdit="true" isQuickEdit="true" export default function Logo() { return ( ) } [V0_FILE]typescriptreact:file="app/components/Header.tsx" isEdit="true" isQuickEdit="true" import Logo from "./Logo" export default function Header() { return (

Infotech Clinic

) } [V0_FILE]typescriptreact:file="app/icon.tsx" isEdit="true" import { ImageResponse } from "next/server" // Route segment config export const runtime = "edge" // Image metadata export const size = { width: 32, height: 32, } export const contentType = "image/png" // Image generation export default function Icon() { return new ImageResponse( // ImageResponse JSX element

, // ImageResponse options { ...size, }, ) } [V0_FILE]typescriptreact:file="app/apple-icon.tsx" import { ImageResponse } from "next/server" // Route segment config export const runtime = "edge" // Image metadata export const size = { width: 180, height: 180, } export const contentType = "image/png" // Image generation export default function Icon() { return new ImageResponse( // ImageResponse JSX element

, // ImageResponse options { ...size, }, ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Infotech Clinic - Coming Soon", description: "Get your professional website in just 3 days!", icons: { icon: [{ url: "/icon.png", sizes: "32x32", type: "image/png" }], apple: [{ url: "/apple-icon.png", sizes: "180x180", type: "image/png" }], }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }