\n {/* Logo */}\n \n Drive\n Luxe\n \n\n {/* Desktop Navigation */}\n

\n {navLinks.map((link) => (\n \n {link.name}\n \n ))}\n \n Book Now\n \n

\n\n {/* Mobile menu button */}\n setIsMenuOpen(!isMenuOpen)}\n className=\"md:hidden text-gray-500 focus:outline-none\"\n aria-label=\"Toggle menu\"\n >\n \n {isMenuOpen ? (\n \n ) : (\n \n )}\n \n \n

\n\n {/* Mobile Navigation */}\n {isMenuOpen && (\n

\n {navLinks.map((link) => (\n \n {link.name}\n \n ))}\n \n Book Now\n \n

\n )}\n

\n );\n};\n\nexport default Navbar;",[],[173,179,186,202],[173,179,186],{"_103":210,"_95":211,"_144":212,"_146":180,"_147":133,"_148":213,"_150":151,"_105":214,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":215,"_98":233},"a0b4ccb2-3162-11f0-8494-569c3dd06744","ui","1eccf179-d455-48d6-9b90-80104d9afb75",9,["D",1747296012116],[216,225],{"_103":217,"_95":218,"_144":219,"_146":212,"_147":133,"_148":220,"_150":151,"_105":221,"_100":31,"_153":196,"_155":222,"_156":27,"_157":-5,"_158":223,"_98":224},"a7fbc08e-3162-11f0-b5ef-569c3dd06744","Button.jsx","a7fbc174-3162-11f0-b5ef-569c3dd06744",10,["D",1747296024328],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { Link } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';\n\nconst Button = ({ \n children, \n variant = 'primary', \n size = 'md', \n className = '', \n to, \n href,\n onClick,\n type = 'button',\n disabled = false,\n fullWidth = false,\n ...props \n}) => {\n // Base classes\n const baseClasses = 'inline-flex items-center justify-center font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2';\n \n // Size classes\n const sizeClasses = {\n sm: 'px-3 py-1.5 text-sm rounded',\n md: 'px-4 py-2 rounded-md',\n lg: 'px-6 py-3 text-lg rounded-lg',\n };\n \n // Variant classes\n const variantClasses = {\n primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm hover:shadow transform hover:-translate-y-0.5',\n secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500',\n outline: 'bg-transparent border border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',\n ghost: 'bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-blue-500',\n danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',\n };\n \n // Combine classes\n const classes = `\n ${baseClasses} \n ${sizeClasses[size]} \n ${variantClasses[variant]}\n ${fullWidth ? 'w-full' : ''}\n ${disabled ? 'opacity-60 cursor-not-allowed' : ''}\n ${className}\n `;\n \n // Render as Link if 'to' prop is provided (internal link)\n if (to) {\n return (\n \n {children}\n \n );\n }\n \n // Render as anchor if 'href' prop is provided (external link)\n if (href) {\n return (\n \n {children}\n \n );\n }\n \n // Otherwise render as button\n return (\n \n );\n};\n\nexport default Button;",[],[173,179,211,218],{"_103":226,"_95":227,"_144":228,"_146":212,"_147":133,"_148":213,"_150":151,"_105":229,"_100":31,"_153":196,"_155":230,"_156":27,"_157":-5,"_158":231,"_98":232},"a0b4a714-3162-11f0-8494-569c3dd06744","CarCard.jsx","a0b4a7be-3162-11f0-8494-569c3dd06744",["D",1747296012116],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { Link } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';\n\nconst CarCard = ({ car }) => {\n const { id, name, image, price, category, transmission, fuelType, seats } = car;\n\n return (\n

\n \n Book Now\n \n

\n {category}\n

\n \n

{name}

\n ${price}/day\n

\n \n

\n \n {transmission}\n

\n \n {fuelType}\n

\n \n {seats} Seats\n

\n \n

\n \n View Details\n \n \n \n

\n \n 4.8\n

\n );\n};\n\nexport default CarCard;",[],[173,179,211,227],[173,179,211],[173,179],{"_103":236,"_95":237,"_144":238,"_146":174,"_147":133,"_148":239,"_150":151,"_105":240,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":241,"_98":250},"c526b290-3162-11f0-ad07-569c3dd06744","data","825c452e-4ab2-4a2b-8cce-412250dba6c0",11,["D",1747296073257],[242],{"_103":243,"_95":244,"_144":245,"_146":238,"_147":133,"_148":239,"_150":151,"_105":246,"_100":31,"_153":196,"_155":247,"_156":27,"_157":-5,"_158":248,"_98":249},"c52657be-3162-11f0-ad07-569c3dd06744","cars.js","c52658a4-3162-11f0-ad07-569c3dd06744",["D",1747296073257],"// Mock data for cars\nexport const cars = [\n {\n id: 1,\n name: 'Tesla Model S',\n category: 'Electric',\n price: 150,\n image: 'https://images.unsplash.com/photo-1617788138017-80ad40651399?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',\n transmission: 'Automatic',\n fuelType: 'Electric',\n seats: 5,\n description: 'Experience the future of driving with the Tesla Model S. This all-electric luxury sedan offers exceptional performance, cutting-edge technology, and zero emissions.',\n features: [\n 'Autopilot capability',\n '0-60 mph in 3.1 seconds',\n 'Up to 405 miles of range',\n '17-inch touchscreen display',\n 'Premium sound system',\n 'Wireless charging',\n 'Panoramic glass roof',\n 'Heated seats and steering wheel'\n ],\n specifications: {\n engine: 'Dual Motor All-Wheel Drive',\n power: '670 hp',\n acceleration: '3.1 sec 0-60 mph',\n topSpeed: '155 mph',\n range: '405 miles',\n seating: '5 adults',\n cargo: '28 cubic feet'\n },\n rating: 4.9,\n reviews: 124\n },\n {\n id: 2,\n name: 'BMW 5 Series',\n category: 'Luxury',\n price: 120,\n image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',\n transmission: 'Automatic',\n fuelType: 'Hybrid',\n seats: 5,\n description: 'The BMW 5 Series combines luxury, performance, and technology in a sophisticated package. This executive sedan offers a refined driving experience with premium comfort.',\n features: [\n 'Live Cockpit Professional',\n 'Gesture Control',\n 'Harman Kardon surround sound',\n 'Ambient lighting',\n 'Leather upholstery',\n 'Parking Assistant Plus',\n 'Heated front seats',\n 'Wireless charging'\n ],\n specifications: {\n engine: '2.0L TwinPower Turbo',\n power: '248 hp',\n acceleration: '5.9 sec 0-60 mph',\n topSpeed: '130 mph',\n fuelEconomy: '25 city / 33 highway',\n seating: '5 adults',\n cargo: '14 cubic feet'\n },\n rating: 4.7,\n reviews: 98\n },\n {\n id: 3,\n name: 'Range Rover Sport',\n category: 'SUV',\n price: 200,\n image: 'https://images.unsplash.com/photo-1606016159991-dfe4f2746ad5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',\n transmission: 'Automatic',\n fuelType: 'Diesel',\n seats: 7,\n description: 'The Range Rover Sport delivers exceptional on-road dynamics, genuine Land Rover capability, and sophisticated design. It\\'s the ultimate luxury SUV for both urban driving and off-road adventures.',\n features: [\n 'Terrain Response 2',\n 'Touch Pro Duo infotainment',\n 'Meridian™ sound system',\n 'Adaptive Dynamics',\n 'Windsor leather seats',\n 'Panoramic roof',\n 'Configurable ambient lighting',\n 'Head-up display'\n ],\n specifications: {\n engine: '3.0L Turbocharged V6',\n power: '355 hp',\n acceleration: '6.2 sec 0-60 mph',\n topSpeed: '140 mph',\n fuelEconomy: '19 city / 24 highway',\n seating: '5-7 adults',\n cargo: '27.5-59.5 cubic feet'\n },\n rating: 4.8,\n reviews: 112\n },\n {\n id: 4,\n name: 'Mercedes-Benz S-Class',\n category: 'Luxury',\n price: 250,\n image: 'https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',\n transmission: 'Automatic',\n fuelType: 'Petrol',\n seats: 5,\n description: 'The Mercedes-Benz S-Class represents the pinnacle of luxury motoring. This flagship sedan combines cutting-edge technology with unparalleled comfort and sophistication.',\n features: [\n 'MBUX infotainment system',\n 'Burmester® 4D surround sound',\n 'Augmented reality navigation',\n 'Active ambient lighting',\n 'Nappa leather upholstery',\n 'Energizing Comfort Control',\n 'Executive rear seats',\n 'OLED central display'\n ],\n specifications: {\n engine: '3.0L Inline-6 Turbo',\n power: '429 hp',\n acceleration: '4.9 sec 0-60 mph',\n topSpeed: '130 mph',\n fuelEconomy: '22 city / 29 highway',\n seating: '5 adults',\n cargo: '12.9 cubic feet'\n },\n rating: 4.9,\n reviews: 87\n },\n {\n id: 5,\n name: 'Porsche 911',\n category: 'Sports',\n price: 300,\n image: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',\n transmission: 'Automatic',\n fuelType: 'Petrol',\n seats: 4,\n description: 'The iconic Porsche 911 continues to set the standard for sports cars. With its distinctive design, exceptional performance, and everyday usability, it\\'s the perfect blend of form and function.',\n features: [\n 'Sport Chrono Package',\n 'Porsche Communication Management',\n 'BOSE® surround sound system',\n 'Adaptive sport seats',\n 'Sport exhaust system',\n 'LED headlights with PDLS+',\n 'Porsche Active Suspension Management',\n 'Rear-axle steering'\n ],\n specifications: {\n engine: '3.0L Twin-Turbo Flat-6',\n power: '443 hp',\n acceleration: '3.5 sec 0-60 mph',\n topSpeed: '191 mph',\n fuelEconomy: '18 city / 24 highway',\n seating: '2+2',\n cargo: '4.6 cubic feet (front)'\n },\n rating: 4.9,\n reviews: 156\n },\n {\n id: 6,\n name: 'Audi Q7',\n category: 'SUV',\n price: 180,\n image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',\n transmission: 'Automatic',\n fuelType: 'Petrol',\n seats: 7,\n description: 'The Audi Q7 combines versatility, technology, and luxury in a sophisticated SUV package. With its spacious interior and advanced features, it\\'s perfect for family adventures or executive transport.',\n features: [\n 'MMI Navigation plus',\n 'Virtual cockpit',\n 'Bang & Olufsen 3D sound',\n 'Panoramic sunroof',\n 'Valcona leather seats',\n 'Adaptive air suspension',\n 'Matrix LED headlights',\n 'Four-zone climate control'\n ],\n specifications: {\n engine: '3.0L V6 TFSI',\n power: '335 hp',\n acceleration: '5.7 sec 0-60 mph',\n topSpeed: '130 mph',\n fuelEconomy: '18 city / 23 highway',\n seating: '7 adults',\n cargo: '14.2-69.6 cubic feet'\n },\n rating: 4.7,\n reviews: 92\n },\n {\n id: 7,\n name: 'Lamborghini Huracán',\n category: 'Supercar',\n price: 1200,\n image: 'https://images.unsplash.com/photo-1580414057403-c5f451f30e1c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',\n transmission: 'Automatic',\n fuelType: 'Petrol',\n seats: 2,\n description: 'The Lamborghini Huracán delivers breathtaking performance and unmistakable Italian design. This exotic supercar offers an unforgettable driving experience with its powerful V10 engine and advanced aerodynamics.',\n features: [\n 'Lamborghini Dinamica Veicolo Integrata',\n 'Carbon-ceramic brakes',\n 'Magneto-rheological suspension',\n 'Alcantara and leather interior',\n 'Lamborghini Infotainment System II',\n 'Drive mode selector',\n 'Carbon fiber components',\n 'Lifting system'\n ],\n specifications: {\n engine: '5.2L V10',\n power: '630 hp',\n acceleration: '2.9 sec 0-60 mph',\n topSpeed: '202 mph',\n fuelEconomy: '13 city / 18 highway',\n seating: '2 adults',\n cargo: '3.5 cubic feet'\n },\n rating: 5.0,\n reviews: 48\n },\n {\n id: 8,\n name: 'Rolls-Royce Ghost',\n category: 'Ultra Luxury',\n price: 1500,\n image: 'https://images.unsplash.com/photo-1631295868223-63265b40d9cc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',\n transmission: 'Automatic',\n fuelType: 'Petrol',\n seats: 5,\n description: 'The Rolls-Royce Ghost represents the pinnacle of automotive luxury. This handcrafted masterpiece offers unparalleled comfort, whisper-quiet operation, and a presence that commands attention.',\n features: [\n 'Planar Suspension System',\n 'Starlight Headliner',\n 'Bespoke Audio',\n 'Illuminated Fascia',\n 'Lambswool floor mats',\n 'Rear-hinged coach doors',\n 'Champagne cooler',\n 'Bespoke interior options'\n ],\n specifications: {\n engine: '6.75L Twin-Turbo V12',\n power: '563 hp',\n acceleration: '4.8 sec 0-60 mph',\n topSpeed: '155 mph (limited)',\n fuelEconomy: '12 city / 19 highway',\n seating: '5 adults',\n cargo: '17.3 cubic feet'\n },\n rating: 4.9,\n reviews: 32\n }\n];\n\n// Function to get car by ID\nexport const getCarById = (id) => {\n return cars.find(car => car.id === parseInt(id));\n};\n\n// Function to filter cars by category\nexport const getCarsByCategory = (category) => {\n if (!category || category === 'All') return cars;\n return cars.filter(car => car.category === category);\n};\n\n// Get all unique categories\nexport const getCategories = () => {\n const categories = cars.map(car => car.category);\n return ['All', ...new Set(categories)];\n};\n\n// Function to search cars\nexport const searchCars = (query) => {\n if (!query) return cars;\n \n const lowercaseQuery = query.toLowerCase();\n return cars.filter(car => \n car.name.toLowerCase().includes(lowercaseQuery) || \n car.category.toLowerCase().includes(lowercaseQuery) ||\n car.description.toLowerCase().includes(lowercaseQuery)\n );\n};",[],[173,237,244],[173,237],{"_103":252,"_95":253,"_144":254,"_146":174,"_147":133,"_148":255,"_150":151,"_105":256,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":257,"_98":302},"e7a4442c-3162-11f0-aad1-569c3dd06744","pages","0ccdf384-d7b9-42e0-b784-23fe57aab89f",12,["D",1747296131126],[258,267,276,285,294],{"_103":259,"_95":260,"_144":261,"_146":254,"_147":133,"_148":262,"_150":151,"_105":263,"_100":31,"_153":196,"_155":264,"_156":27,"_157":-5,"_158":265,"_98":266},"ab0f3ca0-3163-11f0-a0af-569c3dd06744","About.jsx","ab0f3d72-3163-11f0-a0af-569c3dd06744",16,["D",1747296458985],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport Button from '../components/ui/Button.jsx';\n\nconst About = () => {\n return (\n

\n {/* Hero Section */}\n

\n $\"Luxury$ \n

\n \n

About DriveLuxe

\n Redefining the luxury car rental experience since 2010\n

\n \n

\n {/* Our Story Section */}\n

Our Story

\n DriveLuxe was founded in 2010 with a simple mission: to provide an exceptional luxury car rental experience that goes beyond just handing over keys. We believed that renting a premium vehicle should be as memorable as driving it.\n

\n What began as a small collection of high-end vehicles in Beverly Hills has grown into one of the most prestigious luxury car rental services in the country, with a fleet of over 200 premium vehicles across multiple locations.\n

\n Our commitment to excellence, attention to detail, and personalized service has earned us the trust of celebrities, executives, and discerning clients who expect nothing but the best. At DriveLuxe, we don't just rent cars – we deliver experiences.\n

\n \n

\n $\"Luxury$ \n \n

\n \n {/* Our Values Section */}\n

Our Core Values

\n These principles guide everything we do at DriveLuxe, from selecting our vehicles to training our staff.\n

\n \n

\n {[\n {\n icon: (\n \n ),\n title: 'Excellence',\n description: 'We strive for perfection in every aspect of our service, from the condition of our vehicles to the professionalism of our staff.'\n },\n {\n icon: (\n \n ),\n title: 'Personalization',\n description: 'We believe in tailoring our service to meet the unique needs and preferences of each client.'\n },\n {\n icon: (\n \n ),\n title: 'Innovation',\n description: 'We continuously seek new ways to enhance our service, fleet, and the overall customer experience.'\n },\n {\n icon: (\n \n ),\n title: 'Reliability',\n description: 'Our clients can count on us to deliver on our promises, every time, with no exceptions.'\n }\n ].map((value, index) => (\n

\n {value.icon}\n

{value.title}

{value.description}

\n ))}\n

\n \n {/* Team Section */}\n

Meet Our Leadership Team

\n The passionate individuals behind DriveLuxe who work tirelessly to deliver exceptional experiences.\n

\n \n

\n {[\n {\n name: 'Alexander Mitchell',\n role: 'Founder & CEO',\n image: 'https://randomuser.me/api/portraits/men/32.jpg',\n bio: 'With over 20 years in the luxury automotive industry, Alex founded DriveLuxe to redefine the premium car rental experience.'\n },\n {\n name: 'Sophia Reynolds',\n role: 'Chief Operating Officer',\n image: 'https://randomuser.me/api/portraits/women/44.jpg',\n bio: 'Sophia oversees all operations, ensuring that every client interaction meets our high standards of excellence.'\n },\n {\n name: 'James Wilson',\n role: 'Fleet Director',\n image: 'https://randomuser.me/api/portraits/men/67.jpg',\n bio: 'James curates our vehicle collection, bringing his expertise as a former luxury car dealer and racing enthusiast.'\n },\n {\n name: 'Emily Chen',\n role: 'Customer Experience Director',\n image: 'https://randomuser.me/api/portraits/women/63.jpg',\n bio: 'Emily leads our concierge team, drawing from her background in luxury hospitality to create memorable client experiences.'\n },\n {\n name: 'Michael Rodriguez',\n role: 'Technology Director',\n image: 'https://randomuser.me/api/portraits/men/22.jpg',\n bio: 'Michael drives our digital innovation, ensuring a seamless booking experience and implementing cutting-edge vehicle technologies.'\n },\n {\n name: 'Olivia Thompson',\n role: 'Marketing Director',\n image: 'https://randomuser.me/api/portraits/women/29.jpg',\n bio: 'Olivia crafts our brand story and develops partnerships with luxury hotels, events, and exclusive venues.'\n }\n ].map((member, index) => (\n

{member.name}

{member.role}

{member.bio}

\n ))}\n

\n \n {/* Stats Section */}\n

DriveLuxe by the Numbers

\n Our growth and achievements over the years\n

\n \n

\n {[\n { number: '200+', label: 'Luxury Vehicles' },\n { number: '15,000+', label: 'Happy Clients' },\n { number: '5', label: 'Locations Nationwide' },\n { number: '98%', label: 'Client Satisfaction' }\n ].map((stat, index) => (\n

{stat.number}

{stat.label}

\n ))}\n

\n \n {/* Locations Section */}\n

Our Locations

\n Find us in these premium locations across the country\n

\n \n

\n {[\n {\n city: 'Beverly Hills',\n address: '123 Luxury Drive, Beverly Hills, CA 90210',\n phone: '+1 (800) 123-4567',\n hours: 'Mon-Sat: 8AM-8PM, Sun: 10AM-6PM',\n image: 'https://images.unsplash.com/photo-1619994121345-b61cd21e9866?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'\n },\n {\n city: 'Miami',\n address: '456 Ocean Boulevard, Miami, FL 33139',\n phone: '+1 (800) 123-4568',\n hours: 'Mon-Sat: 8AM-8PM, Sun: 10AM-6PM',\n image: 'https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'\n },\n {\n city: 'New York',\n address: '789 Fifth Avenue, New York, NY 10022',\n phone: '+1 (800) 123-4569',\n hours: 'Mon-Sat: 8AM-8PM, Sun: 10AM-6PM',\n image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'\n },\n {\n city: 'Las Vegas',\n address: '321 Strip Avenue, Las Vegas, NV 89109',\n phone: '+1 (800) 123-4570',\n hours: 'Mon-Sun: 8AM-10PM',\n image: 'https://images.unsplash.com/photo-1605833556294-ea5c7a74f57d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'\n },\n {\n city: 'San Francisco',\n address: '654 Bay Street, San Francisco, CA 94133',\n phone: '+1 (800) 123-4571',\n hours: 'Mon-Sat: 8AM-8PM, Sun: 10AM-6PM',\n image: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'\n }\n ].map((location, index) => (\n

{location.city}

\n \n {location.address}\n

\n \n {location.phone}\n

\n \n {location.hours}\n

\n ))}\n

\n \n {/* CTA Section */}\n

Ready to Experience DriveLuxe?

\n Book your premium vehicle today and discover why we're the preferred choice for luxury car rentals.\n

\n \n \n

\n );\n};\n\nexport default About;",[],[173,253,260],{"_103":268,"_95":269,"_144":270,"_146":254,"_147":133,"_148":271,"_150":151,"_105":272,"_100":31,"_153":196,"_155":273,"_156":27,"_157":-5,"_158":274,"_98":275},"7ed76428-3163-11f0-8215-569c3dd06744","Booking.jsx","7ed764dc-3163-11f0-8215-569c3dd06744",15,["D",1747296384796],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { useParams, useNavigate } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';\nimport Button from '../components/ui/Button.jsx';\nimport { getCarById, cars } from '../data/cars.js';\n\nconst Booking = () => {\n const { id } = useParams();\n const navigate = useNavigate();\n const [selectedCar, setSelectedCar] = useState(null);\n const [availableCars, setAvailableCars] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [currentStep, setCurrentStep] = useState(1);\n const [bookingData, setBookingData] = useState({\n pickupDate: '',\n returnDate: '',\n pickupLocation: '',\n returnLocation: '',\n firstName: '',\n lastName: '',\n email: '',\n phone: '',\n address: '',\n city: '',\n zipCode: '',\n country: '',\n specialRequests: '',\n agreeToTerms: false,\n });\n const [errors, setErrors] = useState({});\n const [bookingComplete, setBookingComplete] = useState(false);\n const [bookingReference, setBookingReference] = useState('');\n\n // Set minimum dates for pickup and return\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(tomorrow.getDate() + 1);\n \n const formatDate = (date) => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const day = String(date.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n };\n\n const minPickupDate = formatDate(today);\n const minReturnDate = formatDate(tomorrow);\n\n useEffect(() => {\n // Scroll to top when component mounts\n window.scrollTo(0, 0);\n \n setIsLoading(true);\n \n setTimeout(() => {\n // If ID is provided, set the selected car\n if (id) {\n const car = getCarById(parseInt(id));\n if (car) {\n setSelectedCar(car);\n }\n }\n \n // Set available cars (all cars for now)\n setAvailableCars(cars);\n setIsLoading(false);\n }, 500);\n }, [id]);\n\n const handleInputChange = (e) => {\n const { name, value, type, checked } = e.target;\n setBookingData({\n ...bookingData,\n [name]: type === 'checkbox' ? checked : value\n });\n \n // Clear error when field is edited\n if (errors[name]) {\n setErrors({\n ...errors,\n [name]: null\n });\n }\n };\n\n const handleCarSelect = (car) => {\n setSelectedCar(car);\n };\n\n const validateStep = (step) => {\n const newErrors = {};\n \n if (step === 1) {\n if (!selectedCar) {\n newErrors.car = 'Please select a car';\n }\n if (!bookingData.pickupDate) {\n newErrors.pickupDate = 'Pickup date is required';\n }\n if (!bookingData.returnDate) {\n newErrors.returnDate = 'Return date is required';\n } else if (bookingData.returnDate <= bookingData.pickupDate) {\n newErrors.returnDate = 'Return date must be after pickup date';\n }\n if (!bookingData.pickupLocation) {\n newErrors.pickupLocation = 'Pickup location is required';\n }\n if (!bookingData.returnLocation) {\n newErrors.returnLocation = 'Return location is required';\n }\n } else if (step === 2) {\n if (!bookingData.firstName) {\n newErrors.firstName = 'First name is required';\n }\n if (!bookingData.lastName) {\n newErrors.lastName = 'Last name is required';\n }\n if (!bookingData.email) {\n newErrors.email = 'Email is required';\n } else if (!/\\S+@\\S+\\.\\S+/.test(bookingData.email)) {\n newErrors.email = 'Email is invalid';\n }\n if (!bookingData.phone) {\n newErrors.phone = 'Phone number is required';\n }\n if (!bookingData.address) {\n newErrors.address = 'Address is required';\n }\n if (!bookingData.city) {\n newErrors.city = 'City is required';\n }\n if (!bookingData.zipCode) {\n newErrors.zipCode = 'ZIP code is required';\n }\n if (!bookingData.country) {\n newErrors.country = 'Country is required';\n }\n } else if (step === 3) {\n if (!bookingData.agreeToTerms) {\n newErrors.agreeToTerms = 'You must agree to the terms and conditions';\n }\n }\n \n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const handleNextStep = () => {\n if (validateStep(currentStep)) {\n setCurrentStep(currentStep + 1);\n window.scrollTo(0, 0);\n }\n };\n\n const handlePrevStep = () => {\n setCurrentStep(currentStep - 1);\n window.scrollTo(0, 0);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n \n if (validateStep(currentStep)) {\n // Simulate booking submission\n setIsLoading(true);\n \n setTimeout(() => {\n // Generate a random booking reference\n const reference = 'DL' + Math.floor(100000 + Math.random() * 900000);\n setBookingReference(reference);\n setBookingComplete(true);\n setIsLoading(false);\n }, 1500);\n }\n };\n\n // Calculate rental duration and total price\n const calculateRentalDetails = () => {\n if (!selectedCar || !bookingData.pickupDate || !bookingData.returnDate) {\n return { days: 0, totalPrice: 0 };\n }\n \n const pickup = new Date(bookingData.pickupDate);\n const returnDate = new Date(bookingData.returnDate);\n const diffTime = Math.abs(returnDate - pickup);\n const days = Math.ceil(diffTime / (1000 * 60 * 60 * 24));\n \n return {\n days,\n totalPrice: days * selectedCar.price\n };\n };\n\n const { days, totalPrice } = calculateRentalDetails();\n\n if (isLoading) {\n return (\n

\n );\n }\n\n if (bookingComplete) {\n return (\n

\n \n

Booking Confirmed!

\n Thank you for your booking. We've sent a confirmation email to {bookingData.email}.\n

\n \n

Booking Details

Booking Reference

{bookingReference}

Vehicle

{selectedCar.name}

Pickup Date

{bookingData.pickupDate}

Return Date

{bookingData.returnDate}

Pickup Location

{bookingData.pickupLocation}

Return Location

{bookingData.returnLocation}

Total Amount

${totalPrice}

Status

Confirmed

\n \n

\n \n \n

\n );\n }\n\n return (\n

Book Your Luxury Car

Complete the form below to reserve your vehicle

\n \n {/* Progress Steps */}\n

\n {[\n { step: 1, label: 'Vehicle & Dates' },\n { step: 2, label: 'Personal Details' },\n { step: 3, label: 'Review & Payment' }\n ].map((item) => (\n

= item.step \n ? 'bg-blue-600 text-white' \n : 'bg-gray-200 text-gray-600'\n }`}\n >\n {currentStep > item.step ? (\n \n ) : (\n item.step\n )}\n

\n = item.step ? 'text-blue-600 font-medium' : 'text-gray-500'}`}>\n {item.label}\n \n

\n ))}\n

\n \n

\n {/* Step 1: Vehicle & Dates */}\n {currentStep === 1 && (\n

Select Vehicle

\n \n {selectedCar ? (\n

{selectedCar.name}

{selectedCar.category} • {selectedCar.transmission} • {selectedCar.seats} Seats

${selectedCar.price}/day

\n \n

\n ) : (\n

Please select a vehicle from our fleet:

\n {availableCars.map((car) => (\n handleCarSelect(car)}\n className=\"bg-gray-50 rounded-lg p-3 flex items-center hover:bg-gray-100 transition-colors text-left\"\n >\n

{car.name}

{car.category}

${car.price}/day

\n \n ))}\n

\n {errors.car &&

{errors.car}

}\n

\n )}\n

\n \n

Rental Details

\n \n

\n \n Pickup Date*\n \n \n {errors.pickupDate &&

{errors.pickupDate}

}\n

\n \n

\n \n Return Date*\n \n \n {errors.returnDate &&

{errors.returnDate}

}\n

\n \n

\n \n Pickup Location*\n \n \n \n \n \n \n \n \n {errors.pickupLocation &&

{errors.pickupLocation}

}\n

\n \n

\n \n Return Location*\n \n \n \n \n \n \n \n \n {errors.returnLocation &&

{errors.returnLocation}

}\n

\n \n

Booking Summary

\n \n {selectedCar ? (\n

{selectedCar.name}

{selectedCar.category}

\n \n

\n Daily Rate:\n ${selectedCar.price}/day\n

\n Rental Duration:\n {days} days\n

\n Insurance:\n Included\n

\n \n

\n Total:\n ${totalPrice}\n

\n ) : (\n

\n \n

Please select a vehicle to see the booking summary

\n )}\n \n \n

\n )}\n \n {/* Step 2: Personal Details */}\n {currentStep === 2 && (\n

Personal Information

\n \n

\n \n First Name*\n \n \n {errors.firstName &&

{errors.firstName}

}\n

\n \n

\n \n Last Name*\n \n \n {errors.lastName &&

{errors.lastName}

}\n

\n \n

\n \n Email Address*\n \n \n {errors.email &&

{errors.email}

}\n

\n \n

\n \n Phone Number*\n \n \n {errors.phone &&

{errors.phone}

}\n

\n \n

\n \n Address*\n \n \n {errors.address &&

{errors.address}

}\n

\n \n

\n \n City*\n \n \n {errors.city &&

{errors.city}

}\n

\n \n

\n \n ZIP Code*\n \n \n {errors.zipCode &&

{errors.zipCode}

}\n

\n \n

\n \n Country*\n \n \n \n \n \n \n \n \n \n \n \n \n \n {errors.country &&

{errors.country}

}\n

\n \n

\n \n Special Requests (Optional)\n \n \n

\n \n

Booking Summary

\n \n {selectedCar && (\n

{selectedCar.name}

{selectedCar.category}

\n \n

\n Pickup Date:\n {bookingData.pickupDate || 'Not selected'}\n

\n Return Date:\n {bookingData.returnDate || 'Not selected'}\n

\n Pickup Location:\n {bookingData.pickupLocation || 'Not selected'}\n

\n Return Location:\n {bookingData.returnLocation || 'Not selected'}\n

\n \n

\n Daily Rate:\n ${selectedCar.price}/day\n

\n Rental Duration:\n {days} days\n

\n Insurance:\n Included\n

\n \n

\n Total:\n ${totalPrice}\n

\n )}\n \n

\n \n \n

\n )}\n \n {/* Step 3: Review & Payment */}\n {currentStep === 3 && (\n

Review Your Booking

\n \n

Vehicle Details

{selectedCar.name}

{selectedCar.category}

\n Transmission:\n {selectedCar.transmission}\n

\n Fuel Type:\n {selectedCar.fuelType}\n

\n Seats:\n {selectedCar.seats}\n

\n Daily Rate:\n ${selectedCar.price}\n

\n \n

Rental Period

\n Pickup Date:\n {bookingData.pickupDate}\n

\n Return Date:\n {bookingData.returnDate}\n

\n Pickup Location:\n {bookingData.pickupLocation}\n

\n Return Location:\n {bookingData.returnLocation}\n

\n Duration:\n {days} days\n

\n \n

Personal Information

\n Name:\n {bookingData.firstName} {bookingData.lastName}\n

\n Email:\n {bookingData.email}\n

\n Phone:\n {bookingData.phone}\n

\n Country:\n {bookingData.country}\n

\n Address:\n \n {bookingData.address}, {bookingData.city}, {bookingData.zipCode}\n \n

\n {bookingData.specialRequests && (\n

\n Special Requests:\n {bookingData.specialRequests}\n

\n )}\n

\n \n

Payment Information

\n For demo purposes, no actual payment will be processed. In a real application, a secure payment form would be displayed here.\n

\n \n

\n {['visa', 'mastercard', 'amex', 'discover'].map((card) => (\n

\n \n {card === 'visa' && 'Visa'}\n {card === 'mastercard' && 'MC'}\n {card === 'amex' && 'Amex'}\n {card === 'discover' && 'Disc'}\n \n

\n ))}\n

\n All major credit cards accepted\n

\n \n

\n \n \n \n I agree to the Terms and Conditions and Privacy Policy\n \n \n {errors.agreeToTerms &&

{errors.agreeToTerms}

}\n

\n \n

Booking Summary

\n \n

{selectedCar.name}

{selectedCar.category}

\n \n

\n Pickup:\n {bookingData.pickupDate}\n

\n Return:\n {bookingData.returnDate}\n

\n Duration:\n {days} days\n

\n \n

\n Rental Charge:\n ${selectedCar.price} × {days} days\n

\n Subtotal:\n ${selectedCar.price * days}\n

\n Insurance:\n Included\n

\n Taxes & Fees:\n Included\n

\n \n

\n Total:\n ${totalPrice}\n

\n \n

\n \n \n

\n )}\n

\n );\n};\n\nexport default Booking;",[],[173,253,269],{"_103":277,"_95":278,"_144":279,"_146":254,"_147":133,"_148":280,"_150":151,"_105":281,"_100":31,"_153":196,"_155":282,"_156":27,"_157":-5,"_158":283,"_98":284},"2995146a-3163-11f0-8bf2-569c3dd06744","CarDetail.jsx","29951500-3163-11f0-8bf2-569c3dd06744",14,["D",1747296241759],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { useParams, useNavigate } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';\nimport Button from '../components/ui/Button.jsx';\nimport { getCarById, cars } from '../data/cars.js';\n\nconst CarDetail = () => {\n const { id } = useParams();\n const navigate = useNavigate();\n const [car, setCar] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [activeTab, setActiveTab] = useState('overview');\n const [relatedCars, setRelatedCars] = useState([]);\n const [showGallery, setShowGallery] = useState(false);\n \n useEffect(() => {\n // Scroll to top when component mounts\n window.scrollTo(0, 0);\n \n // Simulate loading\n setIsLoading(true);\n \n setTimeout(() => {\n const foundCar = getCarById(parseInt(id));\n \n if (foundCar) {\n setCar(foundCar);\n \n // Get related cars (same category, excluding current)\n const related = cars\n .filter(c => c.category === foundCar.category && c.id !== foundCar.id)\n .slice(0, 3);\n setRelatedCars(related);\n } else {\n // Car not found, redirect to cars page\n navigate('/cars');\n }\n \n setIsLoading(false);\n }, 500);\n }, [id, navigate]);\n\n if (isLoading) {\n return (\n

\n \n

\n );\n }\n\n if (!car) {\n return null;\n }\n\n // Mock gallery images\n const galleryImages = [\n car.image,\n `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},interior`,\n `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},rear`,\n `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},wheel`,\n `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},dashboard`\n ];\n\n return (\n

\n {/* Breadcrumbs */}\n

\n Home\n \n Cars\n \n {car.name}\n

\n \n {/* Car Details */}\n

\n \n

\n {car.category}\n

\n \n

{car.name}

\n {[...Array(5)].map((_, i) => (\n \n ))}\n

\n {car.rating} ({car.reviews} reviews)\n

\n \n

\n ${car.price}/day\n

Includes insurance & taxes

\n \n \n

\n \n {/* Quick Info */}\n

\n {[\n { label: 'Transmission', value: car.transmission, icon: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' },\n { label: 'Fuel Type', value: car.fuelType, icon: 'M13 10V3L4 14h7v7l9-11h-7z' },\n { label: 'Seats', value: `${car.seats} Persons`, icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },\n { label: 'Category', value: car.category, icon: 'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z' }\n ].map((item, index) => (\n

\n \n {item.label}\n {item.value}\n

\n ))}\n

\n \n {/* Tabs */}\n

\n {['overview', 'features', 'specifications'].map((tab) => (\n setActiveTab(tab)}\n className={`py-3 px-4 font-medium text-sm transition-colors ${\n activeTab === tab\n ? 'text-blue-600 border-b-2 border-blue-600'\n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n {tab.charAt(0).toUpperCase() + tab.slice(1)}\n \n ))}\n

\n \n

\n {activeTab === 'overview' && (\n

{car.description}

\n Experience the thrill of driving this exceptional vehicle, meticulously maintained and ready for your journey. Whether for a business trip, weekend getaway, or special occasion, this {car.name} delivers performance and style.\n

\n )}\n \n {activeTab === 'features' && (\n

\n \n {feature}\n

\n )}\n \n {activeTab === 'specifications' && (\n

\n {Object.entries(car.specifications).map(([key, value]) => (\n

\n {key.replace(/([A-Z])/g, ' $1').trim()}\n {value}\n

\n ))}\n

\n )}\n

\n \n {/* Related Cars */}\n {relatedCars.length > 0 && (\n

Similar Vehicles

\n {relatedCars.map((relatedCar) => (\n \n

\n {relatedCar.category}\n

{relatedCar.name}

\n ${relatedCar.price}/day\n

\n \n ))}\n

\n )}\n \n {/* CTA */}\n

Ready to Experience the {car.name}?

\n Book now to secure this premium vehicle for your upcoming journey. Our team is ready to provide you with an exceptional rental experience.\n

\n \n \n

\n \n {/* Image Gallery Modal */}\n {showGallery && (\n

\n \n \n

\n \n

\n {galleryImages.map((image, index) => (\n \n ))}\n

\n )}\n

\n );\n};\n\nexport default CarDetail;",[],[173,253,278],{"_103":286,"_95":287,"_144":288,"_146":254,"_147":133,"_148":289,"_150":151,"_105":290,"_100":31,"_153":196,"_155":291,"_156":27,"_157":-5,"_158":292,"_98":293},"ff15a664-3162-11f0-b168-569c3dd06744","Cars.jsx","ff15a736-3162-11f0-b168-569c3dd06744",13,["D",1747296170457],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { useSearchParams } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';\nimport CarCard from '../components/ui/CarCard.jsx';\nimport Button from '../components/ui/Button.jsx';\nimport { cars, getCategories, getCarsByCategory, searchCars } from '../data/cars.js';\n\nconst Cars = () => {\n const [searchParams, setSearchParams] = useSearchParams();\n const [filteredCars, setFilteredCars] = useState([]);\n const [categories, setCategories] = useState([]);\n const [selectedCategory, setSelectedCategory] = useState('All');\n const [searchQuery, setSearchQuery] = useState('');\n const [priceRange, setPriceRange] = useState([0, 1500]);\n const [sortBy, setSortBy] = useState('default');\n const [isLoading, setIsLoading] = useState(true);\n\n // Initialize from URL params\n useEffect(() => {\n const category = searchParams.get('category') || 'All';\n const query = searchParams.get('query') || '';\n \n setSelectedCategory(category);\n setSearchQuery(query);\n setCategories(getCategories());\n \n // Simulate loading\n setTimeout(() => {\n setIsLoading(false);\n }, 500);\n }, [searchParams]);\n\n // Filter cars based on all criteria\n useEffect(() => {\n let results = getCarsByCategory(selectedCategory === 'All' ? null : selectedCategory);\n \n // Apply search query\n if (searchQuery) {\n results = searchCars(searchQuery).filter(car => \n results.some(c => c.id === car.id)\n );\n }\n \n // Apply price filter\n results = results.filter(car => \n car.price >= priceRange[0] && car.price <= priceRange[1]\n );\n \n // Apply sorting\n if (sortBy === 'price-asc') {\n results.sort((a, b) => a.price - b.price);\n } else if (sortBy === 'price-desc') {\n results.sort((a, b) => b.price - a.price);\n } else if (sortBy === 'name') {\n results.sort((a, b) => a.name.localeCompare(b.name));\n } else if (sortBy === 'rating') {\n results.sort((a, b) => b.rating - a.rating);\n }\n \n setFilteredCars(results);\n }, [selectedCategory, searchQuery, priceRange, sortBy]);\n\n // Update URL when filters change\n useEffect(() => {\n const params = new URLSearchParams();\n if (selectedCategory !== 'All') {\n params.set('category', selectedCategory);\n }\n if (searchQuery) {\n params.set('query', searchQuery);\n }\n setSearchParams(params, { replace: true });\n }, [selectedCategory, searchQuery, setSearchParams]);\n\n const handleCategoryChange = (category) => {\n setSelectedCategory(category);\n };\n\n const handleSearchChange = (e) => {\n setSearchQuery(e.target.value);\n };\n\n const handlePriceChange = (e) => {\n setPriceRange([0, parseInt(e.target.value)]);\n };\n\n const handleSortChange = (e) => {\n setSortBy(e.target.value);\n };\n\n const handleReset = () => {\n setSelectedCategory('All');\n setSearchQuery('');\n setPriceRange([0, 1500]);\n setSortBy('default');\n setSearchParams({});\n };\n\n return (\n

\n {/* Page Header */}\n

Our Luxury Fleet

\n Discover our collection of premium vehicles for any occasion\n

\n \n

\n {/* Filters Sidebar */}\n

Search

\n \n \n

\n \n

Price Range

\n \n

\n ${priceRange[0]}\n ${priceRange[1]}\n

\n \n

Sort By

\n \n \n \n \n \n \n \n

\n \n \n

\n \n {/* Car Listings */}\n

\n {isLoading ? (\n // Loading skeleton\n

\n {[...Array(6)].map((_, index) => (\n

\n ))}\n

\n ) : filteredCars.length > 0 ? (\n <>\n

\n Showing {filteredCars.length} vehicles\n

\n {filteredCars.map((car, index) => (\n

\n \n

\n ))}\n

\n \n ) : (\n

\n \n

No cars found

\n We couldn't find any cars matching your criteria. Try adjusting your filters.\n

\n \n

\n )}\n

\n );\n};\n\nexport default Cars;",[],[173,253,287],{"_103":295,"_95":296,"_144":297,"_146":254,"_147":133,"_148":255,"_150":151,"_105":298,"_100":31,"_153":196,"_155":299,"_156":27,"_157":-5,"_158":300,"_98":301},"e7a41290-3162-11f0-aad1-569c3dd06744","Home.jsx","e7a4133a-3162-11f0-aad1-569c3dd06744",["D",1747296131126],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { Link } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';\nimport Button from '../components/ui/Button.jsx';\nimport CarCard from '../components/ui/CarCard.jsx';\nimport { cars, getCategories } from '../data/cars.js';\n\nconst Home = () => {\n const [featuredCars, setFeaturedCars] = useState([]);\n const [categories, setCategories] = useState([]);\n const [isVisible, setIsVisible] = useState(false);\n\n useEffect(() => {\n // Get featured cars (first 4)\n setFeaturedCars(cars.slice(0, 4));\n setCategories(getCategories().filter(cat => cat !== 'All'));\n \n // Animation on load\n const timer = setTimeout(() => {\n setIsVisible(true);\n }, 100);\n \n return () => clearTimeout(timer);\n }, []);\n\n return (\n

\n {/* Hero Section */}\n

\n $\"Luxury$ \n

\n \n

\n Experience Luxury on Wheels\n

\n Rent premium vehicles for any occasion. From sleek sports cars to elegant sedans, we offer the finest selection of luxury automobiles.\n

\n \n \n

\n \n

\n \n \n \n

\n\n {/* Features Section */}\n

Why Choose DriveLuxe

\n We offer a premium car rental experience with exceptional service and the finest vehicles.\n

\n \n

\n {[\n {\n icon: (\n \n ),\n title: 'Premium Selection',\n description: 'Choose from our curated collection of luxury and exotic vehicles from top manufacturers.'\n },\n {\n icon: (\n \n ),\n title: 'Flexible Rentals',\n description: 'Rent by the day, week, or month with convenient pickup and drop-off options.'\n },\n {\n icon: (\n \n ),\n title: 'Personalized Service',\n description: 'Our concierge team ensures a seamless experience from booking to return.'\n },\n {\n icon: (\n \n ),\n title: 'Transparent Pricing',\n description: 'No hidden fees or surprises. Our rates include insurance and premium features.'\n }\n ].map((feature, index) => (\n

\n {feature.icon}\n

{feature.title}

{feature.description}

\n ))}\n

\n\n {/* Featured Cars Section */}\n

Featured Vehicles

Explore our most popular luxury rentals

\n \n

\n {featuredCars.map((car) => (\n

\n \n

\n ))}\n

\n\n {/* Categories Section */}\n

Browse by Category

\n Find the perfect vehicle for any occasion, from business trips to weekend getaways.\n

\n \n

\n {categories.map((category, index) => (\n \n

{category}

\n {category === 'Luxury' && 'Experience ultimate comfort and elegance'}\n {category === 'Sports' && 'Feel the thrill of high performance'}\n {category === 'SUV' && 'Spacious vehicles for any adventure'}\n {category === 'Electric' && 'Eco-friendly with cutting-edge tech'}\n {category === 'Supercar' && 'Extraordinary power and design'}\n {category === 'Ultra Luxury' && 'The pinnacle of automotive excellence'}\n

\n \n ))}\n

\n\n {/* Testimonials Section */}\n

What Our Customers Say

\n Hear from clients who have experienced our premium rental service.\n

\n \n

\n {[\n {\n name: 'Michael Thompson',\n role: 'Business Executive',\n image: 'https://randomuser.me/api/portraits/men/32.jpg',\n quote: 'DriveLuxe provided an exceptional experience for my business trip. The BMW 5 Series was immaculate and the service was top-notch.'\n },\n {\n name: 'Sophia Rodriguez',\n role: 'Travel Blogger',\n image: 'https://randomuser.me/api/portraits/women/44.jpg',\n quote: 'I\\'ve rented luxury cars worldwide, and DriveLuxe stands out for their attention to detail and stunning vehicle selection. Highly recommended!'\n },\n {\n name: 'James Wilson',\n role: 'Photographer',\n image: 'https://randomuser.me/api/portraits/men/67.jpg',\n quote: 'The Porsche 911 I rented was the highlight of my California road trip. Easy booking process and fantastic customer service.'\n }\n ].map((testimonial, index) => (\n

{testimonial.name}

{testimonial.role}

\"{testimonial.quote}\"

\n {[...Array(5)].map((_, i) => (\n \n ))}\n

\n ))}\n

\n\n {/* CTA Section */}\n

Ready to Experience Luxury?

\n Book your premium vehicle today and elevate your journey with DriveLuxe.\n

\n \n \n

\n );\n};\n\nexport default Home;",[],[173,253,296],[173,253],{"_103":304,"_95":305,"_144":306,"_146":174,"_147":133,"_148":307,"_150":151,"_105":308,"_100":31,"_153":196,"_155":309,"_156":27,"_157":-5,"_158":310,"_98":311},"70751dc2-3162-11f0-a6a7-569c3dd06744","App.jsx","70751e8a-3162-11f0-a6a7-569c3dd06744",6,["D",1747295931170],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect } from 'https://esm.sh/react@18.2.0';\nimport { BrowserRouter, Routes, Route } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';\n\n// Pages\nimport Home from './pages/Home.jsx';\nimport Cars from './pages/Cars.jsx';\nimport CarDetail from './pages/CarDetail.jsx';\nimport Booking from './pages/Booking.jsx';\nimport About from './pages/About.jsx';\n\n// Layout components\nimport Navbar from './components/layout/Navbar.jsx';\nimport Footer from './components/layout/Footer.jsx';\n\nconst App = () => {\n // Scroll to top on page change\n useEffect(() => {\n window.scrollTo(0, 0);\n }, []);\n\n return (\n \n

\n \n

\n \n } />\n } />\n } />\n } />\n } />\n \n

\n \n );\n};\n\nexport default App;",[],[173,305],{"_103":313,"_95":314,"_144":315,"_146":174,"_147":133,"_148":165,"_150":151,"_105":316,"_100":31,"_153":317,"_155":318,"_156":27,"_157":-5,"_158":319,"_98":320},"68ff11b0-3162-11f0-a93f-569c3dd06744","index.html","68ff1278-3162-11f0-a93f-569c3dd06744",["D",1747295918651],"file","\n\n\n \n \n DriveLuxe - Premium Car Rental\n \n \n \n \n \n \n\n\n

\n \n\n",[],[173,314],{"_103":322,"_95":323,"_144":324,"_146":174,"_147":133,"_148":325,"_150":151,"_105":326,"_100":31,"_153":196,"_155":327,"_156":27,"_157":-5,"_158":328,"_98":329},"6beab71c-3162-11f0-b540-569c3dd06744","index.jsx","6beaba50-3162-11f0-b540-569c3dd06744",5,["D",1747295923553],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport App from './App.jsx';\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n);",[],[173,323],[173],{"_103":332,"_95":333,"_144":334,"_146":-5,"_147":133,"_148":335,"_150":151,"_105":336,"_100":31,"_153":317,"_155":337,"_156":27,"_157":-5,"_158":338,"_98":339},"bfde3cee-3163-11f0-97cf-569c3dd06744","README.md","bfde3d84-3163-11f0-97cf-569c3dd06744",19,["D",1747296493896],"# DriveLuxe - Modern Car Rental Website\n\nA responsive and modern car rental website built with React and TailwindCSS. This project showcases a luxury car rental service with smooth animations, responsive design, and a clean user interface.\n\n## Features\n\n- **Responsive Design**: Fully responsive layout that works on mobile, tablet, and desktop devices\n- **Modern UI**: Clean and elegant design with attention to detail\n- **Animations**: Subtle animations and transitions for enhanced user experience\n- **Multi-page Layout**: Complete website with multiple pages using React Router\n- **Car Listings**: Browse, filter, and search for available cars\n- **Booking System**: Multi-step booking process with form validation\n- **Interactive Components**: Reusable UI components with hover effects and transitions\n\n## Pages\n\n1. **Home**: Landing page with hero section, featured cars, and key benefits\n2. **Cars**: Browse all available cars with filtering and search functionality\n3. **Car Detail**: Detailed information about a specific car\n4. **Booking**: Multi-step booking process\n5. **About**: Information about the company, team, and locations\n\n## Technologies Used\n\n- **React**: Frontend library for building the user interface\n- **TailwindCSS**: Utility-first CSS framework for styling\n- **React Router**: For navigation between pages\n- **Hono**: Lightweight web framework for the backend\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.js # Backend HTTP handler\n├── frontend/\n│ ├── components/\n│ │ ├── layout/ # Layout components (Navbar, Footer)\n│ │ └── ui/ # UI components (Button, CarCard)\n│ ├── data/\n│ │ └── cars.js # Mock data for cars\n│ ├── pages/ # Page components\n│ ├── index.html # Main HTML template\n│ └── index.jsx # React entry point\n└── README.md\n```\n\n## Getting Started\n\n1. Visit the HTTP endpoint to view the website\n2. Navigate through the different pages using the navigation menu\n3. Browse cars, view details, and try the booking process\n\n## Animations and Transitions\n\n- Fade-in animations for content sections\n- Hover effects on cards and buttons\n- Smooth transitions for interactive elements\n- Slide-in animations for modal dialogs\n\n## Responsive Design\n\nThe website is fully responsive and optimized for:\n- Mobile devices (< 640px)\n- Tablets (640px - 1024px)\n- Desktops (> 1024px)\n\n## Credits\n\n- Car images from Unsplash\n- Icons from Heroicons\n- Fonts from Google Fonts (Inter)",[],[333],{"_103":341,"_95":342,"_144":343,"_146":-5,"_147":133,"_148":344,"_150":151,"_105":345,"_100":346,"_153":196,"_155":68,"_156":27,"_157":-5,"_158":347,"_98":348},"0a18369c-3160-11f0-8ebf-569c3dd06744","new-file-6788.tsx","066fb010-3160-11f0-9acf-569c3dd06744",3,["D",1747294900413],2,[],[342],"files",[141,160,171,177,184,190,200,209,216,225,235,242,251,258,267,276,285,294,303,312,321,331,340],"counts",{"_353":31,"_354":355,"_356":31,"_357":31},"pulls","branches",1,"forks","envVars","contents",[],{"_103":191,"_95":192,"_144":193,"_146":187,"_147":133,"_148":194,"_150":151,"_105":361,"_100":31,"_153":196,"_155":197,"_156":27,"_157":-5,"_98":362},["D",1747295989015],[173,179,186,192],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":41,"_100":-7,"_98":99,"_101":368,"_139":372,"_349":442,"_317":443,"_358":445,"_363":-5,"_446":27,"_447":-5},{"_103":104,"_95":96,"_105":369,"_107":-5,"_108":27,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":-5,"_115":27,"_116":-5,"_117":31,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":27,"_21":370,"_130":371},["D",1747294806181],{"_93":94,"_128":129},{"_100":132,"_95":41,"_103":133,"_134":104,"_135":-5,"_136":-5,"_137":-5,"_138":-5},[373,379,436,439],{"_103":142,"_95":143,"_144":145,"_146":-5,"_147":133,"_148":149,"_150":151,"_105":152,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":374,"_98":378},[375],{"_103":161,"_95":162,"_144":163,"_146":145,"_147":133,"_148":132,"_150":151,"_105":164,"_100":165,"_153":166,"_155":167,"_156":27,"_157":-5,"_158":376,"_98":377},[],[143,162],[143],{"_103":172,"_95":173,"_144":174,"_146":-5,"_147":133,"_148":165,"_150":151,"_105":175,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":380,"_98":435},[381,402,408,426,429,432],{"_103":178,"_95":179,"_144":180,"_146":174,"_147":133,"_148":181,"_150":151,"_105":182,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":382,"_98":401},[383,392],{"_103":185,"_95":186,"_144":187,"_146":180,"_147":133,"_148":181,"_150":151,"_105":188,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":384,"_98":391},[385,388],{"_103":191,"_95":192,"_144":193,"_146":187,"_147":133,"_148":194,"_150":151,"_105":195,"_100":31,"_153":196,"_155":197,"_156":27,"_157":-5,"_158":386,"_98":387},[],[173,179,186,192],{"_103":201,"_95":202,"_144":203,"_146":187,"_147":133,"_148":181,"_150":151,"_105":204,"_100":31,"_153":196,"_155":205,"_156":27,"_157":-5,"_158":389,"_98":390},[],[173,179,186,202],[173,179,186],{"_103":210,"_95":211,"_144":212,"_146":180,"_147":133,"_148":213,"_150":151,"_105":214,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":393,"_98":400},[394,397],{"_103":217,"_95":218,"_144":219,"_146":212,"_147":133,"_148":220,"_150":151,"_105":221,"_100":31,"_153":196,"_155":222,"_156":27,"_157":-5,"_158":395,"_98":396},[],[173,179,211,218],{"_103":226,"_95":227,"_144":228,"_146":212,"_147":133,"_148":213,"_150":151,"_105":229,"_100":31,"_153":196,"_155":230,"_156":27,"_157":-5,"_158":398,"_98":399},[],[173,179,211,227],[173,179,211],[173,179],{"_103":236,"_95":237,"_144":238,"_146":174,"_147":133,"_148":239,"_150":151,"_105":240,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":403,"_98":407},[404],{"_103":243,"_95":244,"_144":245,"_146":238,"_147":133,"_148":239,"_150":151,"_105":246,"_100":31,"_153":196,"_155":247,"_156":27,"_157":-5,"_158":405,"_98":406},[],[173,237,244],[173,237],{"_103":252,"_95":253,"_144":254,"_146":174,"_147":133,"_148":255,"_150":151,"_105":256,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":409,"_98":425},[410,413,416,419,422],{"_103":259,"_95":260,"_144":261,"_146":254,"_147":133,"_148":262,"_150":151,"_105":263,"_100":31,"_153":196,"_155":264,"_156":27,"_157":-5,"_158":411,"_98":412},[],[173,253,260],{"_103":268,"_95":269,"_144":270,"_146":254,"_147":133,"_148":271,"_150":151,"_105":272,"_100":31,"_153":196,"_155":273,"_156":27,"_157":-5,"_158":414,"_98":415},[],[173,253,269],{"_103":277,"_95":278,"_144":279,"_146":254,"_147":133,"_148":280,"_150":151,"_105":281,"_100":31,"_153":196,"_155":282,"_156":27,"_157":-5,"_158":417,"_98":418},[],[173,253,278],{"_103":286,"_95":287,"_144":288,"_146":254,"_147":133,"_148":289,"_150":151,"_105":290,"_100":31,"_153":196,"_155":291,"_156":27,"_157":-5,"_158":420,"_98":421},[],[173,253,287],{"_103":295,"_95":296,"_144":297,"_146":254,"_147":133,"_148":255,"_150":151,"_105":298,"_100":31,"_153":196,"_155":299,"_156":27,"_157":-5,"_158":423,"_98":424},[],[173,253,296],[173,253],{"_103":304,"_95":305,"_144":306,"_146":174,"_147":133,"_148":307,"_150":151,"_105":308,"_100":31,"_153":196,"_155":309,"_156":27,"_157":-5,"_158":427,"_98":428},[],[173,305],{"_103":313,"_95":314,"_144":315,"_146":174,"_147":133,"_148":165,"_150":151,"_105":316,"_100":31,"_153":317,"_155":318,"_156":27,"_157":-5,"_158":430,"_98":431},[],[173,314],{"_103":322,"_95":323,"_144":324,"_146":174,"_147":133,"_148":325,"_150":151,"_105":326,"_100":31,"_153":196,"_155":327,"_156":27,"_157":-5,"_158":433,"_98":434},[],[173,323],[173],{"_103":332,"_95":333,"_144":334,"_146":-5,"_147":133,"_148":335,"_150":151,"_105":336,"_100":31,"_153":317,"_155":337,"_156":27,"_157":-5,"_158":437,"_98":438},[],[333],{"_103":341,"_95":342,"_144":343,"_146":-5,"_147":133,"_148":344,"_150":151,"_105":345,"_100":346,"_153":196,"_155":68,"_156":27,"_157":-5,"_158":440,"_98":441},[],[342],[373,375,379,381,383,385,388,392,394,397,402,404,408,410,413,416,419,422,426,429,432,436,439],{"_103":191,"_95":192,"_144":193,"_146":187,"_147":133,"_148":194,"_150":151,"_105":361,"_100":31,"_153":196,"_155":197,"_156":27,"_157":-5,"_98":444},[173,179,186,192],[],"showCompareCallout","pull","routes/_app","actionData","errors"]