import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Sparkles, Zap, Gauge, Wind, Timer, ChevronDown, ArrowRight, Shield, Star, Quote, CircleDot, Palette, Settings2, Check, Fuel, Cog, Trophy } from 'lucide-react'; export default function App() { const [selectedColor, setSelectedColor] = useState(0); const [selectedTrim, setSelectedTrim] = useState(0); const [selectedWheels, setSelectedWheels] = useState(0); const colors = [ { name: 'Crimson Fury', value: '#ef4444', gradient: 'from-red-500 to-red-700' }, { name: 'Obsidian Black', value: '#1a1a1a', gradient: 'from-zinc-800 to-zinc-950' }, { name: 'Arctic Silver', value: '#c0c0c0', gradient: 'from-zinc-300 to-zinc-500' }, { name: 'Deep Violet', value: '#7c3aed', gradient: 'from-violet-600 to-violet-900' }, { name: 'Emerald Storm', value: '#10b981', gradient: 'from-emerald-500 to-emerald-800' } ]; const trims = [ { name: 'Base', price: 145000, features: ['19" Alloy Wheels', 'Leather Sport Seats', 'LED Headlights', '8-Speed Dual-Clutch', 'Carbon Fiber Trim'], power: 480, speed: '3.9s', topSpeed: '180 mph' }, { name: 'Sport', price: 168500, features: ['20" Forged Wheels', 'Alcantara Interior', 'Active Aero Package', 'Launch Control', 'Brembo Carbon Brakes'], power: 580, speed: '3.4s', topSpeed: '195 mph' }, { name: 'Performance', price: 195000, features: ['21" Carbon Wheels', 'Full Carbon Bucket Seats', 'Track Suspension', 'Torque Vectoring', 'Titanium Exhaust'], power: 650, speed: '2.8s', topSpeed: '210 mph' } ]; const wheels = [ { name: 'Aero', spokes: 10, style: 'spoke' }, { name: 'Forged', spokes: 12, style: 'spoke' }, { name: 'Turbine', spokes: 8, style: 'turbine' } ]; const stats = [ { label: '0-60 MPH', value: trims[selectedTrim].speed, icon: Timer, desc: 'With launch control' }, { label: 'Top Speed', value: trims[selectedTrim].topSpeed, icon: Gauge, desc: 'Electronically limited' }, { label: 'Horsepower', value: trims[selectedTrim].power, icon: Zap, desc: 'Twin-turbo V8' }, { label: 'Range', value: '450 mi', icon: Fuel, desc: 'On a single tank' } ]; const quotes = [ { quote: 'The Vantera is nothing short of automotive perfection. A masterpiece of engineering and design.', author: 'AutoWeek', role: 'Editor\'s Choice Award' }, { quote: 'This car redefines what a supercar can be. Every detail is meticulously crafted.', author: 'MotorTrend', role: 'Car of the Year Finalist' }, { quote: 'A symphony of power and elegance. The Vantera is a true icon in the making.', author: 'TopGear', role: 'Performance Review' } ]; const CarSilhouette = ({ color, wheelStyle }) => ( ); return (

{/* Background effects */}

{/* Navbar */} {/* Hero */}

2025 CONCEPT SUPERCOUPE

UNLEASH THE BEAST WITHIN

The Vantera is a masterpiece of engineering, blending raw power with breathtaking design. Configure yours today and experience the future of performance.

document.getElementById('configurator')?.scrollIntoView({ behavior: 'smooth' })} className="px-8 py-4 bg-red-600 hover:bg-red-500 transition-colors font-bold text-lg flex items-center gap-2 group" > Configure Yours document.getElementById('specs')?.scrollIntoView({ behavior: 'smooth' })} className="px-8 py-4 border border-white/20 hover:border-red-500 hover:text-red-400 transition-all font-bold text-lg" > View Specs

{/* Configurator */}

{/* Car Display */}

{/* Controls */} {/* Color Selection */}

Exterior Color

{colors.map((color, index) => ( setSelectedColor(index)} className={`w-10 h-10 rounded-sm border-2 transition-all ${selectedColor === index ? 'border-red-500 scale-110' : 'border-white/20'}`} style={{ backgroundColor: color.value }} title={color.name} > {selectedColor === index && } ))}

{colors[selectedColor].name}

{/* Trim Selection */}

Trim Level

{trims.map((trim, index) => ( setSelectedTrim(index)} className={`p-4 border transition-all ${selectedTrim === index ? 'border-red-500 bg-red-600/10' : 'border-white/10 hover:border-white/30'}`} >

{trim.name}

{trim.power} HP

))}

{/* Wheel Selection */}

Wheel Style

{wheels.map((wheel, index) => ( setSelectedWheels(index)} className={`p-4 border transition-all ${selectedWheels === index ? 'border-red-500 bg-red-600/10' : 'border-white/10 hover:border-white/30'}`} >

{wheel.name}

))}

{/* Price & Features */}

Starting Price

${trims[selectedTrim].price.toLocaleString()}

Reserve Now

{trims[selectedTrim].features.map((feature, index) => ( {feature} ))}

{/* Specs */}

PERFORMANCE PERSONIFIED

{stats.map((stat, index) => (

{stat.value}

{stat.label}

{stat.desc}

))}

{/* Press Quotes */}

THE PRESS SPEAKS

{quotes.map((item, index) => (

{item.quote}

{item.author}

{item.role}

))}

{/* Footer */}

); }

Luxury Car Configurator