[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color theme for professional auto hub aesthetic */ --background: oklch(0.08 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.35 0.15 30); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.55 0.2 45); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.22 0 0); --input: oklch(0.22 0 0); --ring: oklch(0.35 0.15 30); --chart-1: oklch(0.35 0.15 30); --chart-2: oklch(0.55 0.2 45); --chart-3: oklch(0.35 0.15 120); --chart-4: oklch(0.6 0.2 280); --chart-5: oklch(0.5 0.18 40); --radius: 0.625rem; --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.35 0.15 30); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.25 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.22 0 0); --sidebar-ring: oklch(0.35 0.15 30); } .dark { --background: oklch(0.08 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.35 0.15 30); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.55 0.2 45); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.22 0 0); --input: oklch(0.22 0 0); --ring: oklch(0.35 0.15 30); --chart-1: oklch(0.35 0.15 30); --chart-2: oklch(0.55 0.2 45); --chart-3: oklch(0.35 0.15 120); --chart-4: oklch(0.6 0.2 280); --chart-5: oklch(0.5 0.18 40); --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.35 0.15 30); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.25 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.22 0 0); --sidebar-ring: oklch(0.35 0.15 30); } @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/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } 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: "Tao Meng Auto Hub | Export Quality Cars & Restoration", description: "Premium car exports, affordable vehicles, and expert restoration. Transform damaged cars into dream vehicles.", 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="app/page.tsx" isMerged="true" import Header from "@/components/header" import Hero from "@/components/hero" import About from "@/components/about" import Showcase from "@/components/showcase" import Features from "@/components/features" import CallToAction from "@/components/cta" import Footer from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" import { ArrowRight, Zap } from "lucide-react" export default function Hero() { return (

{/* Background Elements */}

Your Dream Car Awaits

Quality Cars, Affordable Prices

Transform your automotive dreams into reality. From premium exports to full restoration services, we specialize in delivering exceptional vehicles at prices that won't break the bank.

Get Started Browse Inventory

{/* Stats */}

500+

Cars Exported

100%

Satisfaction Rate

10+

Years Experience

) } [V0_FILE]typescriptreact:file="components/features.tsx" isMerged="true" import { Wrench, TrendingUp, DollarSign, Shield } from "lucide-react" const features = [ { icon: Wrench, title: "Expert Restoration", description: "Transform damaged vehicles into showroom-ready cars with our expert technicians and state-of-the-art equipment.", }, { icon: TrendingUp, title: "Quality Assurance", description: "Every vehicle undergoes rigorous inspection to ensure it meets our high standards before delivery.", }, { icon: DollarSign, title: "Affordable Pricing", description: "We believe quality vehicles should be accessible to everyone. Competitive pricing without compromising quality.", }, { icon: Shield, title: "Trusted Service", description: "10+ years of experience exporting vehicles worldwide. Your satisfaction is our priority.", }, ] export default function Features() { return (

What We Offer

Why Choose Tao Meng Auto Hub

{features.map((feature, index) => { const Icon = feature.icon return (

{feature.title}

{feature.description}

) })}

) } [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.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]typescriptreact:file="components/showcase.tsx" isEdit="true" "use client" import { useState } from "react" import { ChevronLeft, ChevronRight } from "lucide-react" const vehicles = [ { id: 1, title: "Premium SUV Export", image: "/images/1680-20-2831-29.jpeg", category: "SUV", condition: "Like New", }, { id: 2, title: "Performance Sedan", image: "/images/1680.jpeg", category: "Sedan", condition: "Excellent", }, { id: 3, title: "Luxury Supercar", image: "/images/1680-20-2821-29.jpeg", category: "Sports", condition: "Premium", }, { id: 4, title: "Restoration Project Complete", image: "/images/1680-20-2819-29.jpeg", category: "Restored", condition: "Transformed", }, { id: 5, title: "Performance Muscle Car", image: "/images/1680-20-2812-29.jpeg", category: "Sedan", condition: "Excellent", }, { id: 6, title: "Luxury Interior Details", image: "/images/1680-20-2824-29.jpeg", category: "Premium", condition: "Showroom Ready", }, { id: 7, title: "Damaged to Perfect", image: "/images/1680-20-2820-29.jpeg", category: "Restored", condition: "Transformed", }, { id: 8, title: "Premium Car Key", image: "/images/1680-20-2810-29.jpeg", category: "Luxury", condition: "Premium", }, ] export default function Showcase() { const [current, setCurrent] = useState(0) const next = () => setCurrent((current + 1) % vehicles.length) const prev = () => setCurrent((current - 1 + vehicles.length) % vehicles.length) return (

Featured Inventory

Explore Our Collection

{/* Main Showcase */}

{vehicles[current].category}

{vehicles[current].title}

{vehicles[current].condition}

{/* Navigation Buttons */} {/* Thumbnail Grid */}

{vehicles.map((vehicle, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/about.tsx" isEdit="true" "use client" export default function About() { return (

About Tao Meng Auto Hub

Transforming Vehicles, Realizing Dreams

At Tao Meng Auto Hub, we specialize in exporting premium quality vehicles at affordable prices. Whether you're looking for a reliable daily driver or a luxury export, we have the perfect vehicle for you.

Our expertise lies in transforming damaged vehicles into showroom-ready masterpieces. With our dedicated team of expert technicians and over a decade of experience, we turn automotive challenges into dream cars.

{[ "Wide selection of domestic and international models", "Expert damage restoration and repair services", "Competitive pricing and flexible payment options", "Rigorous quality assurance on every vehicle", ].map((item, i) => (

{item}

))}

) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" "use client" import Link from "next/link" import { Menu, X } from "lucide-react" import { useState } from "react" export default function Header() { const [isOpen, setIsOpen] = useState(false) return (

🚗

Tao Meng

Auto Hub

{/* Desktop Menu */}

About Inventory Services Contact Us

{/* Mobile Menu Button */}

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

setIsOpen(false)} > About setIsOpen(false)} > Inventory setIsOpen(false)} > Services Contact Us

)}

) } [V0_FILE]typescriptreact:file="components/cta.tsx" isEdit="true" import { MessageSquare, Phone, MapPin } from "lucide-react" export default function CallToAction() { return (

Ready to Find Your Perfect Vehicle?

Connect with our team today and let us help you find the car of your dreams at a price you can afford.

WhatsApp Facebook Instagram

WhatsApp: +852-2421-1269

Global Exports

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" import Link from "next/link" import { Facebook, Instagram, Music } from "lucide-react" export default function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]jpeg:file="public/images/1680.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1680-fmTtD89xLMobfhzDeadi1yEpJVrmX5.jpeg" [V0_FILE]jpeg:file="public/images/1680-20-2819-29.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1680%20%2819%29-VMO1BARCT7oHkD0SykH6fhJdgCLZ05.jpeg" [V0_FILE]jpeg:file="public/images/1680-20-2820-29.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1680%20%2820%29-qfaG0YQ1NFWlpCmfXSzK8PsweJ7seb.jpeg" [V0_FILE]jpeg:file="public/images/1680-20-2810-29.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1680%20%2810%29-T38vPKbgh2atYcMZJOv2RMl2CD7TOD.jpeg" [V0_FILE]jpeg:file="public/images/1680-20-2831-29.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1680%20%2831%29-anNOoa1uvdi3hkqaPaGYCEUIkKnn4b.jpeg" [V0_FILE]jpeg:file="public/images/1680-20-2812-29.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1680%20%2812%29-4CwHeMTJsqP2ODSRDpmLzfI79xi0gi.jpeg" [V0_FILE]jpeg:file="public/images/1680-20-2821-29.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1680%20%2821%29-K0MqfuCmxVKXyJ7zisloP5AF6uHu73.jpeg" [V0_FILE]jpeg:file="public/images/1680-20-2824-29.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1680%20%2824%29-UzATiVGLXvJ0MVKtWXgn7HyNwHYSpN.jpeg"