import React, { useState, useRef, useEffect } from 'react'; import { motion, useScroll, useTransform, AnimatePresence } from 'framer-motion'; import { ArrowRight, Gauge, Timer, Fuel } from 'lucide-react'; const CARS = [ { id: 1, trim: 'Signature', tagline: 'The flagship trim. Twin-turbo, full presence, zero compromise.', image: 'https://images.unsplash.com/photo-1771261799195-466eb30d9669?q=80&w=1800&auto=format&fit=crop', power: '440 hp', accel: '4.6s', efficiency: '21 mpg', hotspots: [ { top: '54%', left: '30%', label: 'Powertrain', value: '3.5L twin-turbo V6 — 440 hp / 470 lb-ft' }, { top: '80%', left: '23%', label: 'Wheels', value: '22" forged alloy, adaptive air suspension' }, { top: '68%', left: '70%', label: 'Chassis', value: 'Aluminum-reinforced platform, torque-vectoring AWD' }, ], }, { id: 2, trim: 'Reserve', tagline: 'Quiet luxury, tuned for the way you actually drive at night.', image: 'https://images.unsplash.com/photo-1683778547049-8d969766b441?q=80&w=1800&auto=format&fit=crop', power: '400 hp', accel: '5.0s', efficiency: '24 mpg', hotspots: [ { top: '52%', left: '32%', label: 'Powertrain', value: '3.5L twin-turbo V6 — 400 hp, tuned for refinement' }, { top: '80%', left: '24%', label: 'Wheels', value: '21" polished alloy, adaptive dampers' }, { top: '65%', left: '68%', label: 'Chassis', value: 'Active noise cancellation, acoustic glass' }, ], }, { id: 3, trim: 'Sport', tagline: "Torque-vectoring AWD, tuned for the road that isn't paved.", image: 'https://images.unsplash.com/photo-1627490600394-107fdb69fb71?q=80&w=1800&auto=format&fit=crop', power: '460 hp', accel: '4.3s', efficiency: '19 mpg', hotspots: [ { top: '50%', left: '34%', label: 'Powertrain', value: '3.5L twin-turbo V6 — 460 hp, sport exhaust' }, { top: '78%', left: '26%', label: 'Wheels', value: '20" off-road alloy, all-terrain tires' }, { top: '62%', left: '66%', label: 'Chassis', value: 'Reinforced skid plates, 11.2" ground clearance' }, ], }, { id: 4, trim: 'Hybrid', tagline: 'Electric off the line, twin-turbo the moment you need it.', image: 'https://images.unsplash.com/photo-1758411898167-89f2a99db105?q=80&w=1800&auto=format&fit=crop', power: '410 hp', accel: '4.9s', efficiency: '34 mpg', hotspots: [ { top: '56%', left: '31%', label: 'Powertrain', value: 'Twin-turbo V6 + electric motor — 410 hp combined' }, { top: '81%', left: '25%', label: 'Wheels', value: '21" low-rolling-resistance alloy' }, { top: '69%', left: '69%', label: 'Chassis', value: 'Regenerative braking, 34mi electric-only range' }, ], }, ]; function useReducedMotionPref() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); setReduced(mq.matches); const handler = (e) => setReduced(e.matches); if (mq.addEventListener) mq.addEventListener('change', handler); else mq.addListener(handler); return () => { if (mq.removeEventListener) mq.removeEventListener('change', handler); else mq.removeListener(handler); }; }, []); return reduced; } function Nav() { return (

ONYX Reserve

); } function Hero() { const reduceMotion = useReducedMotionPref(); const iv = (hidden) => (reduceMotion ? false : hidden); return (

{/* headlight orbs, left */} {/* headlight orbs, right */}

Engineered in silence ONYX The Meridian. 440 horsepower, zero noise, every metric where you can see it. Enter the showroom

); } function Hotspot({ spot }) { const [open, setOpen] = useState(false); return (

setOpen(true)} onMouseLeave={() => setOpen(false)} > {open && (

{spot.label}

{spot.value}

)}

); } function VehicleCard({ car, imageX, isStatic }) { return (

{car.hotspots.map((spot, i) => ( ))}

Onyx Meridian — {car.trim}

{car.tagline}

{car.power}

Power

{car.accel}

0–60

{car.efficiency}

Efficiency

); } function HorizontalShowroom() { const targetRef = useRef(null); const reduceMotion = useReducedMotionPref(); const { scrollYProgress } = useScroll({ target: targetRef, offset: ['start start', 'end end'] }); // translateX percentages resolve against the TRACK's own width (N*100vw), not the // viewport — so moving (N-1) card-widths needs -((N-1)/N)*100%, not -((N-1)*100)%. const trackX = useTransform(scrollYProgress, [0, 1], ['0%', `-${((CARS.length - 1) / CARS.length) * 100}%`]); const imageX = useTransform(scrollYProgress, [0, 1], ['-12%', '12%']); if (reduceMotion) { return (

The showroom

Four ways to drive it.

{CARS.map((car) => ( ))}

); } return (

{CARS.map((car) => ( ))}

); } function Specs() { const stats = [ { value: '440', unit: 'hp', label: 'peak output' }, { value: '4.6', unit: 's', label: '0–60 mph' }, { value: '21', unit: 'mpg', label: 'combined efficiency' }, { value: '5,900', unit: 'lb', label: 'towing capacity' }, ]; return (

{stats.map((s) => (

{s.value} {s.unit}

{s.label}

))}

); } function ReserveCTA() { return (

Limited production

Configure your Meridian.

Reserve with a fully refundable deposit. Delivery begins this winter.

); } function Footer() { return ( ); } export default function App() { return (

); }