[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # AI website builder *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/tigers-projects-b8c63d23/v0-ai-website-builder-qp) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/cJEG67HgSEN) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/tigers-projects-b8c63d23/v0-ai-website-builder-qp](https://vercel.com/tigers-projects-b8c63d23/v0-ai-website-builder-qp)** ## Build your app Continue building your app on: **[https://v0.app/chat/cJEG67HgSEN](https://v0.app/chat/cJEG67HgSEN)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/api/auth/login/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function POST(request: Request) { try { const { email, password } = await request.json() // Validation if (!email || !password) { return NextResponse.json({ error: "Missing email or password" }, { status: 400 }) } // TODO: Query user from database // TODO: Compare password hash with bcrypt // TODO: Create session/JWT token // TODO: Set secure HTTP-only cookie return NextResponse.json( { success: true, message: "Login successful", user: { id: "user_123", email, }, }, { status: 200 }, ) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/signup/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function POST(request: Request) { try { const { fullName, email, password } = await request.json() // Validation if (!fullName || !email || !password) { return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } if (password.length < 8) { return NextResponse.json({ error: "Password must be at least 8 characters" }, { status: 400 }) } // TODO: Hash password with bcrypt // TODO: Save user to database // TODO: Create session/JWT token // TODO: Send verification email return NextResponse.json( { success: true, message: "Account created successfully", user: { id: "user_" + Math.random().toString(36).substr(2, 9), email, fullName, }, }, { status: 201 }, ) } catch (error) { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/health/route.ts" isMerged="true" import { NextResponse } from "next/server" // GET /api/health - Health check endpoint export async function GET() { return NextResponse.json( { status: "ok", timestamp: new Date().toISOString(), version: "1.0.0", }, { status: 200 }, ) } [V0_FILE]typescript:file="app/api/projects/[id]/route.ts" isMerged="true" import { NextResponse } from "next/server" // GET /api/projects/[id] - Fetch project details export async function GET(request: Request, { params }: { params: { id: string } }) { try { const { id } = params // TODO: Verify user owns this project // TODO: Query project from database return NextResponse.json( { success: true, project: { id, name: "Tech Startup Landing", description: "Modern landing page", status: "published", content: "...", cssCode: "/* styles */", jsCode: "/* scripts */", }, }, { status: 200 }, ) } catch (error) { return NextResponse.json({ error: "Failed to fetch project" }, { status: 500 }) } } // PUT /api/projects/[id] - Update project export async function PUT(request: Request, { params }: { params: { id: string } }) { try { const { id } = params const { name, description, content, status } = await request.json() // TODO: Verify user owns this project // TODO: Update project in database // TODO: Invalidate cache if needed return NextResponse.json( { success: true, message: "Project updated successfully", }, { status: 200 }, ) } catch (error) { return NextResponse.json({ error: "Failed to update project" }, { status: 500 }) } } // DELETE /api/projects/[id] - Delete project export async function DELETE(request: Request, { params }: { params: { id: string } }) { try { const { id } = params // TODO: Verify user owns this project // TODO: Delete project from database // TODO: Delete hosted files if applicable // TODO: Clean up associated resources return NextResponse.json( { success: true, message: "Project deleted successfully", }, { status: 200 }, ) } catch (error) { return NextResponse.json({ error: "Failed to delete project" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/projects/route.ts" isMerged="true" import { NextResponse } from "next/server" // GET /api/projects - Fetch user's projects export async function GET(request: Request) { try { // TODO: Get user ID from session/JWT // TODO: Query projects from database where userId matches const projects = [ { id: "project_1", name: "Tech Startup Landing", description: "Modern landing page for AI startup", status: "published", createdAt: "2026-01-01", updatedAt: "2026-01-03", }, { id: "project_2", name: "Portfolio Website", description: "Personal portfolio and showcase", status: "building", createdAt: "2026-01-02", updatedAt: "2026-01-03", }, ] return NextResponse.json({ success: true, projects }, { status: 200 }) } catch (error) { return NextResponse.json({ error: "Failed to fetch projects" }, { status: 500 }) } } // POST /api/projects - Create new project export async function POST(request: Request) { try { const { name, description, prompt } = await request.json() // Validation if (!name || !prompt) { return NextResponse.json({ error: "Name and prompt are required" }, { status: 400 }) } // TODO: Get user ID from session/JWT // TODO: Call AI model to generate website code // TODO: Save project to database // TODO: Store generated HTML/CSS/JS return NextResponse.json( { success: true, project: { id: "project_" + Math.random().toString(36).substr(2, 9), name, description, status: "draft", createdAt: new Date().toISOString(), }, }, { status: 201 }, ) } catch (error) { return NextResponse.json({ error: "Failed to create project" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/docs/page.tsx" isMerged="true" "use client" import Header from "@/components/header" import Footer from "@/components/footer" import { useState } from "react" export default function Docs() { const [activeSection, setActiveSection] = useState("getting-started") const sections = { "getting-started": { title: "Getting Started", content: ` ## Welcome to BuildAI BuildAI is an AI-powered website builder that lets you create production-ready websites in minutes. ### Quick Start 1. **Sign up** for a free account 2. **Describe your website** using our AI prompt interface 3. **Customize** using our visual builder 4. **Deploy** with one click ### Your First Website Follow these steps to build your first website: 1. Log in to your dashboard 2. Click "New Project" 3. Enter a description of your desired website 4. Review and customize the generated design 5. Click "Publish Website" to go live That's it! Your website is now live and can be accessed by anyone. `, }, "ai-builder": { title: "AI Builder", content: ` ## Using the AI Builder The AI Builder is where the magic happens. It uses advanced language models to understand your requirements and generate a complete website. ### Writing Effective Prompts The better your description, the better the generated website. Here are some tips: - **Be specific**: Instead of "a website", say "a SaaS landing page with pricing table and testimonials" - **Mention style**: "Modern minimal design with dark theme" - **Describe sections**: List the main sections you want (hero, features, pricing, etc.) - **Include details**: Font preferences, color themes, special features ### Example Prompts \`\`\` Modern e-commerce store for selling digital products. Dark theme with purple and pink accents. Include hero section, products grid, cart functionality, and checkout process. Mobile-first design. \`\`\` \`\`\` Professional SaaS landing page for a project management tool. Clean minimalist design with blue and white colors. Include hero section, 6-feature grid, pricing table, testimonials carousel, and footer newsletter signup. \`\`\` ### Advanced Options - **Design Style**: Modern Minimal, Bold & Vibrant, Professional Classic, Playful Fun - **Layout Type**: Single Page, Multi Page, Blog Site, E-commerce - **Customization**: After generation, use the visual editor to fine-tune everything `, }, "visual-editor": { title: "Visual Editor", content: ` ## Visual Editor After AI generation, use the visual editor to customize your website without coding. ### Components BuildAI includes pre-built components you can drag and drop: - **Sections**: Hero, Features, Testimonials, Pricing, CTA - **Elements**: Buttons, Cards, Forms, Images, Text - **Navigation**: Headers, Footers, Menus - **Advanced**: Custom HTML blocks, Code snippets ### Editing Content - Click any element to edit its content - Use the properties panel to change colors, fonts, spacing - Drag elements to rearrange layout - Duplicate or delete elements easily ### Styling - Change colors with the color picker - Adjust fonts from Google Fonts library - Set spacing, borders, shadows - Create animations and transitions `, }, deployment: { title: "Deployment & Hosting", content: ` ## Deploying Your Website BuildAI handles all the complexity of hosting your website. ### One-Click Deploy 1. Click "Publish Website" in the builder 2. Choose your deployment region 3. Set up your custom domain (optional) 4. Click "Deploy" Your website is now live! ### Custom Domains 1. Go to project settings 2. Click "Add Custom Domain" 3. Follow the DNS setup instructions 4. SSL certificate is automatically provisioned ### Performance All websites are hosted on our CDN for fast loading speeds worldwide. You get: - Automatic caching - Global distribution - 99.9% uptime SLA - Automatic SSL/TLS - DDoS protection `, }, api: { title: "API Reference", content: ` ## BuildAI API Integrate BuildAI with your applications using our REST API. ### Authentication All API requests require an API key in the Authorization header: \`\`\` Authorization: Bearer your_api_key_here \`\`\` ### Projects Endpoints \`\`\` GET /api/projects POST /api/projects GET /api/projects/[id] PUT /api/projects/[id] DELETE /api/projects/[id] \`\`\` ### Generate Endpoint \`\`\` POST /api/ai/generate \`\`\` Request body: \`\`\`json { "prompt": "Your website description", "style": "Modern Minimal", "layoutType": "Single Page" } \`\`\` ### Deploy Endpoint \`\`\` POST /api/deploy \`\`\` Request body: \`\`\`json { "projectId": "project_123", "customDomain": "mydomain.com" } \`\`\` See full API documentation at /api/docs `, }, } return (

{/* Sidebar Navigation */}

Documentation

{Object.entries(sections).map(([key, section]) => ( ))}

{/* Main Content */}

{sections[activeSection as keyof typeof sections].title}

{sections[activeSection as keyof typeof sections].content.split("\n").map((line, index) => { if (line.startsWith("## ")) { return (

{line.replace("## ", "")}

) } if (line.startsWith("### ")) { return (

{line.replace("### ", "")}

) } if (line.startsWith("- ")) { return (

{line.replace("- ", "")}

) } if (line.startsWith("`")) { return (


                      {line.replace(/`/g, "")}

) } if (line.trim() === "") { return
} return (

{line}

) })}

) } [V0_FILE]typescriptreact:file="app/features/page.tsx" isMerged="true" "use client" import Header from "@/components/header" import Footer from "@/components/footer" import { Button } from "@/components/ui/button" import Link from "next/link" export default function Features() { const features = [ { title: "AI-Powered Generation", description: "Describe your vision in natural language and our AI generates fully functional websites instantly.", icon: "⚡", color: "from-primary/20 to-primary/5", }, { title: "Visual Editor", description: "Fine-tune every detail with our intuitive visual builder. No coding knowledge required.", icon: "🎨", description: "Refine colors, fonts, layouts, and components with a drag-and-drop interface.", color: "from-secondary/20 to-secondary/5", }, { title: "One-Click Deploy", description: "Deploy to production with a single click. We handle hosting, SSL, and maintenance.", icon: "🚀", color: "from-accent/20 to-accent/5", }, { title: "Responsive Design", description: "Every website is automatically optimized for mobile, tablet, and desktop screens.", icon: "📱", color: "from-primary/20 to-primary/5", }, { title: "SEO Optimized", description: "Built-in SEO best practices help your site rank higher in search results.", icon: "🔍", color: "from-secondary/20 to-secondary/5", }, { title: "Custom Domain", description: "Connect your own domain or use our free subdomain with automatic SSL certificates.", icon: "🌐", color: "from-accent/20 to-accent/5", }, { title: "API Integration", description: "Connect to popular services like Stripe, Slack, and more with pre-built integrations.", icon: "⚙️", color: "from-primary/20 to-primary/5", }, { title: "Analytics Dashboard", description: "Track visitors, conversions, and performance metrics with detailed analytics.", icon: "📊", color: "from-secondary/20 to-secondary/5", }, { title: "Version Control", description: "Rollback to previous versions anytime. Keep a complete history of all changes.", icon: "⏱️", color: "from-accent/20 to-accent/5", }, ] return (

{/* Hero */}

Powerful Features for Creators

Everything you need to build professional websites without limitations.

{/* Features Grid */}

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

{feature.icon}

{feature.title}

{feature.description}

))}

{/* CTA */}

Ready to experience the power?

Start building amazing websites today. No credit card required.

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Futuristic & Minimal Color System */ --background: oklch(0.98 0 0); --foreground: oklch(0.15 0 0); --card: oklch(0.99 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(0.99 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.3 0.15 280); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.5 0.18 200); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.92 0 0); --muted-foreground: oklch(0.55 0 0); --accent: oklch(0.55 0.2 50); --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.92 0 0); --input: oklch(0.95 0 0); --ring: oklch(0.3 0.15 280); --chart-1: oklch(0.55 0.2 200); --chart-2: oklch(0.55 0.2 280); --chart-3: oklch(0.55 0.2 50); --chart-4: oklch(0.55 0.2 150); --chart-5: oklch(0.55 0.2 100); --radius: 0.75rem; --sidebar: oklch(0.98 0 0); --sidebar-foreground: oklch(0.15 0 0); --sidebar-primary: oklch(0.3 0.15 280); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.55 0.2 50); --sidebar-accent-foreground: oklch(0.15 0 0); --sidebar-border: oklch(0.92 0 0); --sidebar-ring: oklch(0.3 0.15 280); } .dark { --background: oklch(0.1 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.13 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.13 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.2 280); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.6 0.2 200); --secondary-foreground: oklch(0.1 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.7 0.22 50); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.22 0 0); --input: oklch(0.18 0 0); --ring: oklch(0.65 0.2 280); --chart-1: oklch(0.65 0.2 200); --chart-2: oklch(0.65 0.2 280); --chart-3: oklch(0.7 0.22 50); --chart-4: oklch(0.65 0.2 150); --chart-5: oklch(0.65 0.2 100); --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.65 0.2 280); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.7 0.22 50); --sidebar-accent-foreground: oklch(0.1 0 0); --sidebar-border: oklch(0.22 0 0); --sidebar-ring: oklch(0.65 0.2 280); } @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) + 8px); --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; } /* Custom gradient classes for glassmorphism */ .bg-gradient-soft { @apply bg-gradient-to-br from-primary/5 via-secondary/3 to-accent/5; } .glass-effect { @apply backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl; } .glass-effect.dark { @apply bg-white/5 border border-white/10; } } /* Smooth animations */ @layer utilities { .animate-fade-in { @apply animate-in fade-in duration-500; } .animate-fade-in-up { @apply animate-in fade-in slide-in-from-bottom-4 duration-700; } .animate-slide-in { @apply animate-in slide-in-from-left duration-700; } } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useRouter } from "next/navigation" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import Link from "next/link" import Header from "@/components/header" export default function Login() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [rememberMe, setRememberMe] = useState(false) const router = useRouter() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Get users from localStorage const users = JSON.parse(localStorage.getItem("users") || "[]") // Find user with matching email and password const user = users.find((u: any) => u.email === email && u.password === password) if (!user) { alert("Invalid email or password") setIsLoading(false) return } // Save current user session localStorage.setItem( "currentUser", JSON.stringify({ id: user.id, name: user.name, email: user.email, company: user.company, }), ) setIsLoading(false) router.push("/dashboard") } return (

{/* Decorative background */}

{/* Header */}

Welcome Back

{/* Form */}

{/* Email */}

Email Address setEmail(e.target.value)} className="bg-input border-border/50 text-foreground placeholder:text-muted-foreground" required />

{/* Password */}

Password Forgot password?

setPassword(e.target.value)} className="bg-input border-border/50 text-foreground placeholder:text-muted-foreground" required />

{/* Remember Me */}

setRememberMe(e.target.checked)} className="w-4 h-4 rounded border-border/50 bg-input cursor-pointer" /> Remember me

{/* Submit Button */}

{/* Divider */}

{/* Social Login */}

{/* Sign Up Link */}

Don't have an account?{" "} Sign up here

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Header from "@/components/header" import Hero from "@/components/hero" import CTA from "@/components/cta" import Footer from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/pricing/page.tsx" isMerged="true" "use client" import Header from "@/components/header" import Footer from "@/components/footer" import { Button } from "@/components/ui/button" import Link from "next/link" export default function Pricing() { const plans = [ { name: "Starter", price: "Free", description: "Perfect for trying out BuildAI", features: ["5 websites", "Basic AI generation", "Custom domain", "Community support", "Monthly deployments: 50"], cta: "Start Free", highlighted: false, }, { name: "Professional", price: "$29", period: "/month", description: "For active creators and small teams", features: [ "Unlimited websites", "Advanced AI generation", "Custom domains", "Priority email support", "Monthly deployments: 1000", "Advanced analytics", "API access", "Team collaboration", ], cta: "Start Free Trial", highlighted: true, }, { name: "Enterprise", price: "Custom", description: "For teams and agencies", features: [ "Everything in Professional", "Dedicated support", "Custom integrations", "White-label options", "Advanced security", "SLA guarantee", "Priority AI queue", ], cta: "Contact Sales", highlighted: false, }, ] return (

{/* Hero */}

Simple, Transparent Pricing

Choose the plan that's right for you. No hidden fees. Cancel anytime.

{/* Pricing Cards */}

{plans.map((plan, index) => (

{plan.highlighted && (

{plan.name}

{plan.description}

{plan.price} {plan.period && {plan.period}}

FEATURES

{feature}

))}

{/* FAQ Section */}

Frequently Asked Questions

{[ { q: "Can I cancel my subscription anytime?", a: "Yes, you can cancel anytime without penalties. Your access continues until the end of your billing cycle.", }, { q: "What payment methods do you accept?", a: "We accept all major credit cards, PayPal, and bank transfers for enterprise plans.", }, { q: "Is there a free trial?", a: "Yes! Our Starter plan is completely free. Upgrade anytime if you need more features.", }, { q: "Can I change plans later?", a: "Absolutely. You can upgrade or downgrade your plan at any time with changes taking effect immediately.", }, ].map((faq, index) => (

{faq.q}

{faq.a}

))}

) } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import Link from "next/link" import { useRouter } from "next/navigation" import Header from "@/components/header" export default function SignUp() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [fullName, setFullName] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() if (password !== confirmPassword) { alert("Passwords do not match") return } if (fullName.trim() === "" || email.trim() === "") { alert("Please fill in all fields") return } setIsLoading(true) const users = JSON.parse(localStorage.getItem("users") || "[]") // Check if user already exists if (users.some((user: any) => user.email === email)) { alert("User already exists with this email") setIsLoading(false) return } // Add new user users.push({ id: Date.now().toString(), name: fullName, email: email, password: password, // In production, this should be hashed company: "", createdAt: new Date().toISOString(), }) localStorage.setItem("users", JSON.stringify(users)) localStorage.setItem( "currentUser", JSON.stringify({ id: users[users.length - 1].id, name: fullName, email: email, company: "", }), ) setIsLoading(false) router.push("/builder") } return (

{/* Decorative background */}

{/* Header */}

Create Account

Join thousands building with AI

{/* Form */}

{/* Full Name */}

Full Name setFullName(e.target.value)} className="bg-input border-border/50 text-foreground placeholder:text-muted-foreground" required />

{/* Email */}

Email Address setEmail(e.target.value)} className="bg-input border-border/50 text-foreground placeholder:text-muted-foreground" required />

{/* Password */}

Password setPassword(e.target.value)} className="bg-input border-border/50 text-foreground placeholder:text-muted-foreground" required />

{/* Confirm Password */}

Confirm Password setConfirmPassword(e.target.value)} className="bg-input border-border/50 text-foreground placeholder:text-muted-foreground" required />

{/* Terms */}

By signing up, you agree to our{" "} Terms of Service {" "} and{" "} Privacy Policy .

{/* Submit Button */}

{/* Divider */}

{/* Social Sign Up */}

{/* Login Link */}

Already have an account?{" "} Sign in here

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/builder-layout.tsx" isMerged="true" "use client" import type React from "react" import Link from "next/link" import { Button } from "@/components/ui/button" export default function BuilderLayout({ children }: { children: React.ReactNode }) { return (

{/* Minimal Sidebar */}

{/* Main Content */}

{/* Top Bar */}

AI Website Builder

{/* Content */}

{children}

) } [V0_FILE]typescriptreact:file="components/cta.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import Link from "next/link" export default function CTA() { return (

{/* Background accent */}

Ready to Build?

Join thousands of creators building production-ready websites in minutes, not weeks.

No credit card required. No setup fees. Start instantly.

) } [V0_FILE]typescriptreact:file="components/features.tsx" isMerged="true" "use client" export default function Features() { const features = [ { icon: "⚡", title: "AI-Powered Generation", description: "Describe your vision in plain text. Our AI generates beautiful, functional websites instantly.", }, { icon: "🎨", title: "Smart Design System", description: "Automatically adapts colors, layouts, and typography based on your brand and content.", }, { icon: "🚀", title: "One-Click Deploy", description: "Deploy your website to production with a single click. No DevOps knowledge needed.", }, { icon: "🔧", title: "Full Customization", description: "Edit, refine, and customize every element through an intuitive visual builder.", }, { icon: "📱", title: "Fully Responsive", description: "Your site looks perfect on mobile, tablet, and desktop. Mobile-first by default.", }, { icon: "⚙️", title: "Backend Ready", description: "Includes API structure, authentication, and database integration support.", }, ] return (

{/* Section Header */}

Powerful Features

Everything you need to build, customize, and deploy professional websites without any technical limitations.

{/* Features Grid */}

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

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" "use client" import Link from "next/link" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true" "use client" export default function Testimonials() { const testimonials = [ { name: "Sarah Chen", role: "Founder, TechStartup", content: "BuildAI saved us weeks of development time. We went from idea to live website in under an hour.", avatar: "👩‍💼", }, { name: "Marcus Johnson", role: "Product Designer", content: "The AI understands design principles better than any tool I've used. Absolutely game-changing.", avatar: "👨‍💼", }, { name: "Elena Rodriguez", role: "E-commerce Owner", content: "Finally, a tool that lets non-technical people build professional websites. Game changer.", avatar: "👩‍🔬", }, ] return (

{/* Section Header */}

Loved by Creators

Join thousands of entrepreneurs and creators building their dreams with BuildAI.

{/* Testimonials Grid */}

{testimonials.map((testimonial, index) => (

"{testimonial.content}"

{testimonial.avatar}

{testimonial.name}

{testimonial.role}

))}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [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 gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "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", "ai": "6.0.6", "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.10", "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]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]typescript:file="proxy.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export function proxy(request: NextRequest) { // Add protected routes logic here if needed return NextResponse.next() } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"], } [V0_FILE]css:file="styles/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 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.145 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]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true" [V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aWemuADq9WoJjZq9RygciVIvod6M/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true" [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import DashboardLayout from "@/components/dashboard-layout" import { Button } from "@/components/ui/button" import Link from "next/link" interface Project { id: string name: string description: string status: "draft" | "published" | "building" createdAt: string updatedAt: string url?: string thumbnail?: string } export default function Dashboard() { const [projects, setProjects] = useState([]) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const savedProjects = localStorage.getItem("userProjects") if (savedProjects) { setProjects(JSON.parse(savedProjects)) } setIsLoading(false) }, []) const getStatusColor = (status: Project["status"]) => { switch (status) { case "published": return "bg-accent/20 text-accent" case "building": return "bg-secondary/20 text-secondary" case "draft": return "bg-muted/50 text-muted-foreground" } } return ( {/* Header */}

Projects

Manage and create your AI-powered websites

{/* Stats */}

Total Projects

{projects.length}

Published

{projects.filter((p) => p.status === "published").length}

This Month

{projects.length}

{/* Projects Table or Empty State */} {isLoading ? (

Loading projects...

) : projects.length === 0 ? (

No projects yet

Create your first AI-powered website using the builder

) : (

{projects.map((project) => ( ))}

Project Name	Status	Created	Updated	Actions
{project.name} {project.description}	{project.status.charAt(0).toUpperCase() + project.status.slice(1)}	{project.createdAt}	{project.updatedAt}	{project.status === "published" && project.url && ( )}

)} ) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import DashboardLayout from "@/components/dashboard-layout" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function Settings() { const [fullName, setFullName] = useState("") const [email, setEmail] = useState("") const [company, setCompany] = useState("") const [isSaving, setIsSaving] = useState(false) const [isLoading, setIsLoading] = useState(true) const router = useRouter() useEffect(() => { const savedUser = localStorage.getItem("currentUser") if (savedUser) { const user = JSON.parse(savedUser) setFullName(user.name) setEmail(user.email) setCompany(user.company || "") } setIsLoading(false) }, []) const handleSave = async () => { setIsSaving(true) const updatedUser = { name: fullName, email, company } localStorage.setItem("currentUser", JSON.stringify(updatedUser)) const users = JSON.parse(localStorage.getItem("users") || "[]") const userIndex = users.findIndex((u: any) => u.email === email) if (userIndex !== -1) { users[userIndex] = { ...users[userIndex], name: fullName, company } localStorage.setItem("users", JSON.stringify(users)) } setTimeout(() => { setIsSaving(false) alert("Settings saved successfully!") }, 1000) } const handleSignOut = () => { localStorage.removeItem("currentUser") localStorage.removeItem("builder_state") router.push("/") } if (isLoading) { return (

) } return (

{/* Header */}

Settings

Manage your account and preferences

{/* Profile Section */}

Profile Information

{/* Avatar */}

Profile Picture

{fullName.charAt(0).toUpperCase()}

{/* Full Name */}

Full Name setFullName(e.target.value)} className="bg-input border-border/50 text-foreground placeholder:text-muted-foreground" />

{/* Email */}

Email Address setEmail(e.target.value)} className="bg-input border-border/50 text-foreground placeholder:text-muted-foreground" disabled />

{/* Security Section */}

Security

Password

Last changed 2 months ago

Two-Factor Authentication

Add an extra layer of security

Connected Devices

Manage your active sessions

{/* Danger Zone */}

Danger Zone

Deleting your account is permanent and cannot be undone. All your projects will be deleted.

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

{/* Background gradient decorations */}

{/* Badge */}

✨ Powered by AI

{/* Main Heading */}

Build Stunning Websites in Seconds

{/* Subheading */}

Transform your ideas into production-ready websites using cutting-edge AI. No coding required. Deploy instantly.

{/* CTA Buttons */}

{/* Hero Preview Card - Enhanced styling to match mockup design */}

{/* Icon */}

Your AI-generated website preview

{/* Stats - Improved spacing and styling */}

10K+

Sites Created

99.9%

Uptime

5min

Deploy Time

) } [V0_FILE]typescriptreact:file="app/ClientLayout.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { Analytics } from "@vercel/analytics/next" import { useEffect, useState } from "react" export default function ClientLayout({ children, }: Readonly<{ children: React.ReactNode }>) { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const savedTheme = localStorage.getItem("theme") const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches if (savedTheme === "light") { document.documentElement.classList.remove("dark") } else { document.documentElement.classList.add("dark") localStorage.setItem("theme", "dark") } }, []) if (!mounted) return null return ( <> {children} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import "./globals.css" import ClientLayout from "./ClientLayout" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "BuildAI - AI-Powered Website Builder", description: "Generate and deploy beautiful websites in seconds using AI. No coding required.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import Link from "next/link" import { useState, useEffect } from "react" export default function Header() { const [isOpen, setIsOpen] = useState(false) const [isDark, setIsDark] = useState(true) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const isDarkMode = document.documentElement.classList.contains("dark") setIsDark(isDarkMode) }, []) const toggleTheme = () => { const html = document.documentElement const newIsDark = !isDark if (newIsDark) { html.classList.add("dark") } else { html.classList.remove("dark") } setIsDark(newIsDark) localStorage.setItem("theme", newIsDark ? "dark" : "light") } if (!mounted) return null return (

{/* Logo */}

Team Ten

{/* Desktop Navigation */} {/* CTA Buttons */}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isOpen && (

Features Pricing Docs

)}

) } [V0_FILE]typescriptreact:file="components/ai-chatbot.tsx" isMerged="true" "use client" import { useState } from "react" import { MessageCircle, X, Send } from "lucide-react" interface Message { role: "user" | "assistant" content: string } export function AIChatbot() { const [isOpen, setIsOpen] = useState(false) const [messages, setMessages] = useState([]) const [inputValue, setInputValue] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSendMessage = async () => { if (!inputValue.trim()) return const userMessage: Message = { role: "user", content: inputValue } setMessages((prev) => [...prev, userMessage]) setInputValue("") setIsLoading(true) try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [...messages, userMessage], }), }) if (!response.ok) throw new Error("Failed to get response") const data = await response.json() const assistantMessage: Message = { role: "assistant", content: data.message } setMessages((prev) => [...prev, assistantMessage]) } catch (error) { console.error("[v0] Chat error:", error) } finally { setIsLoading(false) } } return ( <> {isOpen && (

Website Builder Assistant

{messages.length === 0 && (

Hello! 👋

I'm here to help you write better website descriptions.

Ask me anything about your website idea!

)} {messages.map((msg, idx) => (

{msg.content}

))} {isLoading && (

)}

setInputValue(e.target.value)} onKeyPress={(e) => { if (e.key === "Enter" && !isLoading) handleSendMessage() }} placeholder="Ask for website ideas..." className="flex-1 bg-input border border-border/50 rounded-lg px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary/50" disabled={isLoading} />

)} ) } [V0_FILE]typescript:file="app/api/chat/route.ts" isMerged="true" import { generateText } from "ai" export async function POST(request: Request) { try { const { messages } = await request.json() if (!messages || messages.length === 0) { return Response.json({ error: "Messages required" }, { status: 400 }) } const systemPrompt = `You are a helpful website builder assistant. Help users refine their website ideas and write better prompts for AI website generation. When users describe what they want, provide: 1. Suggestions to improve their idea 2. Questions to clarify their vision 3. Design recommendations 4. Feature suggestions that would work well Be concise, friendly, and practical. Focus on helping them create better websites.` const lastMessage = messages[messages.length - 1] const { text } = await generateText({ model: "openai/gpt-4o-mini", system: systemPrompt, prompt: lastMessage.content, maxTokens: 500, temperature: 0.7, }) return Response.json({ success: true, message: text, }) } catch (error) { console.error("[v0] Chat error:", error) return Response.json({ error: "Failed to process chat message" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { MessageCircle } from "lucide-react" interface User { name: string email: string } export default function DashboardLayout({ children }: { children: React.ReactNode }) { const [sidebarOpen, setSidebarOpen] = useState(true) const [user, setUser] = useState({ name: "User", email: "user@example.com" }) const [chatOpen, setChatOpen] = useState(false) useEffect(() => { const savedUser = localStorage.getItem("currentUser") if (savedUser) { setUser(JSON.parse(savedUser)) } // Close sidebar on mobile by default if (window.innerWidth < 768) { setSidebarOpen(false) } }, []) const handleNavClick = () => { if (window.innerWidth < 768) { setSidebarOpen(false) } } const handleSignOut = () => { localStorage.removeItem("currentUser") localStorage.removeItem("userProjects") window.location.href = "/" } return (

{/* Sidebar */}

{/* Logo */}

TeamTan

{/* Navigation */}

{/* User Profile */}

{user.name.charAt(0).toUpperCase()}

{user.name}

{user.email}

{/* Main Content */}

{/* Top Bar */}

{/* Scrollable Content */}

{children}

) } [V0_FILE]typescript:file="app/api/deploy/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" export async function POST(request: Request) { try { const { projectId, projectName, html } = await request.json() if (!projectId || !html) { return NextResponse.json({ error: "Project ID and HTML are required" }, { status: 400 }) } const deploymentId = "site_" + Math.random().toString(36).substr(2, 9) const sanitizedName = projectName .toLowerCase() .replace(/[^a-z0-9]/g, "-") .replace(/-+/g, "-") .substring(0, 20) const deployUrl = `${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"}/published/${deploymentId}` const deploymentRecord = { id: deploymentId, projectId, url: deployUrl, name: projectName, html: html, status: "live", deployedAt: new Date().toISOString(), } try { if (typeof window === "undefined") { // Server-side: store in a simple in-memory cache (for demo) // In production, use a database } } catch (e) { // Silently fail if localStorage not available } console.log("[v0] Deployment created:", deployUrl) return NextResponse.json( { success: true, deployment: { id: deploymentId, projectId, url: deployUrl, status: "live", deployedAt: new Date().toISOString(), }, }, { status: 201 }, ) } catch (error) { console.error("[v0] Deployment error:", error) return NextResponse.json({ error: "Failed to deploy project" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/published/[id]/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useParams } from "next/navigation" export default function PublishedSitePage() { const params = useParams() const id = params.id as string const [htmlContent, setHtmlContent] = useState("") const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState("") useEffect(() => { const loadDeployment = async () => { try { // Check multiple storage locations let deployment = sessionStorage.getItem(`deployment_${id}`) || localStorage.getItem(`deployment_${id}`) if (!deployment) { // Try to fetch from API as backup const response = await fetch(`/api/deployment/${id}`) if (response.ok) { const data = await response.json() deployment = JSON.stringify(data) } } if (deployment) { const parsed = JSON.parse(deployment) setHtmlContent(parsed.html) } else { setError("Website not found. Please publish again.") } } catch (err) { console.error("[v0] Load deployment error:", err) setError("Failed to load website. Please try again.") } finally { setIsLoading(false) } } // Load immediately with minimal delay setTimeout(loadDeployment, 100) }, [id]) if (isLoading) { return (

Loading your website...

) } if (error || !htmlContent) { return (

{error || "Website not found"}

The website data could not be loaded.

Return to Builder

) } return

} [V0_FILE]typescript:file="app/api/deploy/github/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function POST(request: Request) { try { const { projectId, projectName, html, code } = await request.json() if (!projectId || !html) { return NextResponse.json({ error: "Project ID and HTML are required" }, { status: 400 }) } // This provides users with step-by-step instructions for GitHub Pages deployment const sanitizedName = projectName .toLowerCase() .replace(/[^a-z0-9]/g, "-") .replace(/-+/g, "-") .substring(0, 20) const githubInstructions = { step1: "Create a new repository on GitHub named: " + sanitizedName, step2: "Clone the repository to your computer", step3: "Add the generated HTML file to your repository", step4: "Enable GitHub Pages in repository settings (Settings > Pages > Source: main branch)", githubPagesUrl: `https://{your-username}.github.io/${sanitizedName}`, cliCommand: ` # 1. Initialize git repository git init # 2. Add all files git add . # 3. Commit changes git commit -m "Initial website commit" # 4. Add remote origin git remote add origin https://github.com/{your-username}/${sanitizedName}.git # 5. Push to GitHub git branch -M main git push -u origin main `.trim(), } return NextResponse.json( { success: true, deployment: { id: projectId, type: "github", projectName: sanitizedName, instructions: githubInstructions, htmlContent: html, deployedAt: new Date().toISOString(), }, }, { status: 201 }, ) } catch (error) { console.error("[v0] GitHub deployment error:", error) return NextResponse.json({ error: "Failed to prepare GitHub deployment" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/github-deploy-modal.tsx" isMerged="true" "use client" import { X, Copy, Check } from "lucide-react" import { useState } from "react" interface GitHubDeployModalProps { projectName: string html: string instructions: any onClose: () => void } export default function GitHubDeployModal({ projectName, html, instructions, onClose }: GitHubDeployModalProps) { const [copiedSection, setCopiedSection] = useState(null) const copyToClipboard = (text: string, section: string) => { navigator.clipboard.writeText(text) setCopiedSection(section) setTimeout(() => setCopiedSection(null), 2000) } const downloadHTML = () => { const element = document.createElement("a") const file = new Blob([html], { type: "text/html" }) element.href = URL.createObjectURL(file) element.download = `${projectName}.html` document.body.appendChild(element) element.click() document.body.removeChild(element) } return (

Deploy to GitHub Pages

Option 1: Download & Deploy

Download the HTML file and push it to GitHub manually.

Option 2: Manual CLI Steps

Follow these steps in your terminal to create and deploy to GitHub:

{instructions.step1}

CLI Commands:

{instructions.cliCommand}

Your GitHub Pages URL

{instructions.githubPagesUrl}

Replace {"{your-username}"} with your GitHub username

Important Notes:

• GitHub Pages takes 1-5 minutes to deploy after pushing code
• Your repository must be public for GitHub Pages to work (free tier)
• The HTML file should be named index.html for GitHub Pages
• Custom domains are supported in repository settings

GitHub Pages Docs

) } [V0_FILE]typescript:file="app/api/ai/generate/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { generateText } from "ai" export const maxDuration = 30 export async function POST(request: Request) { try { const { prompt, language = "html", framework = "vanilla" } = await request.json() if (!prompt) { return Response.json({ error: "Prompt is required" }, { status: 400 }) } const systemPrompt = `You are an expert web developer and UI/UX designer. Generate a complete, production-ready, BEAUTIFUL website based on the user's description. LANGUAGE: ${language.toUpperCase()} FRAMEWORK: ${framework} CRITICAL REQUIREMENTS: 1. Generate a COMPLETE, FUNCTIONAL website - NOT documentation or code structure 2. Include ALL HTML, CSS, and JavaScript to make it work immediately 3. Create STUNNING, modern, professional designs with beautiful aesthetics 4. Use modern color schemes with gradients, vibrant colors, or sophisticated palettes 5. Implement smooth animations, transitions, and hover effects throughout 6. Include glassmorphism, shadows, and depth for visual appeal 7. Use proper typography hierarchy with large headings and readable body text 8. Create responsive designs that work perfectly on mobile, tablet, and desktop 9. Add interactive buttons with full JavaScript event handlers and functionality 10. Use generous spacing and whitespace - never cramped layouts JAVASCRIPT FUNCTIONALITY: 1. ALL buttons, links, and interactive elements must work 2. Include smooth scrolling and page transitions 3. Add hover effects, active states, and form validation 4. Mobile menu toggles and dropdowns must be functional 5. Any accordions, modals, or carousels must work perfectly IMPORTANT - OUTPUT FORMAT: - Return ONLY valid HTML code wrapped in tags - Include ALL CSS in