Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Laferriere | Luxury Classic Cars</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', 'Montserrat', sans-serif; | |
| background-color: #0a0a0a; | |
| color: #ffffff; | |
| scroll-behavior: smooth; | |
| } | |
| .bg-gradient-red { | |
| background: linear-gradient(135deg, #e30613 0%, #ff4141 100%); | |
| } | |
| .text-gradient-red { | |
| background: linear-gradient(135deg, #e30613 0%, #ff4141 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .border-gradient-red { | |
| border-width: 2px; | |
| border-style: solid; | |
| border-image: linear-gradient(135deg, #e30613 0%, #ff4141 100%) 1; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -4px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: linear-gradient(90deg, rgba(227,6,19,1) 0%, rgba(255,65,65,1) 100%); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .car-carousel { | |
| display: flex; | |
| overflow-x: auto; | |
| scroll-snap-type: x mandatory; | |
| scroll-behavior: smooth; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; | |
| padding: 10px 0; | |
| } | |
| .car-carousel::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .car-carousel-item { | |
| flex: 0 0 calc(20% - 16px); | |
| scroll-snap-align: start; | |
| padding: 0 8px; | |
| box-sizing: border-box; | |
| transition: transform 0.3s ease; | |
| } | |
| .car-carousel-item:hover { | |
| transform: translateY(-5px); | |
| } | |
| .car-carousel-btn { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: rgba(0,0,0,0.7); | |
| color: white; | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .car-carousel-btn:hover { | |
| background: rgba(227,6,19,0.9); | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .testimonial-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| } | |
| .contact-form input, | |
| .contact-form textarea { | |
| background: transparent; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .contact-form input:focus, | |
| .contact-form textarea:focus { | |
| border-bottom-color: #e30613; | |
| outline: none; | |
| } | |
| /* New hero background styles */ | |
| .hero-container { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-bg-image { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| width: 50%; | |
| height: 80%; | |
| background-image: url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1283&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| opacity: 0.3; | |
| z-index: 0; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| @media (max-width: 1024px) { | |
| .car-carousel-item { | |
| flex: 0 0 calc(25% - 16px); | |
| } | |
| .parallax { | |
| background-attachment: scroll; | |
| } | |
| .hero-bg-image { | |
| width: 70%; | |
| opacity: 0.2; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .car-carousel-item { | |
| flex: 0 0 calc(33.33% - 16px); | |
| } | |
| .hero-bg-image { | |
| width: 100%; | |
| opacity: 0.15; | |
| height: 60%; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .car-carousel-item { | |
| flex: 0 0 calc(50% - 16px); | |
| } | |
| .hero-bg-image { | |
| opacity: 0.1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-black bg-opacity-90 backdrop-blur-md z-50 border-b border-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-white">LAFERRIERE <span class="text-gradient-red">AUTO</span></a> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#home" class="nav-link font-medium text-white">Home</a> | |
| <a href="#inventory" class="nav-link font-medium text-white">Inventory</a> | |
| <a href="#services" class="nav-link font-medium text-white">Services</a> | |
| <a href="#about" class="nav-link font-medium text-white">About</a> | |
| <a href="#testimonials" class="nav-link font-medium text-white">Testimonials</a> | |
| <a href="#contact" class="nav-link font-medium text-white">Contact</a> | |
| </div> | |
| </div> | |
| <div class="lg:hidden"> | |
| <button id="mobile-menu-button" class="text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden lg:hidden bg-black bg-opacity-95 backdrop-blur-md border-t border-gray-800"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Home</a> | |
| <a href="#inventory" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Inventory</a> | |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Services</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">About</a> | |
| <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Testimonials</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Banner --> | |
| <section id="home" class="hero-container relative pt-32 pb-20 bg-gradient-to-b from-gray-900 to-black"> | |
| <!-- Car Background Image --> | |
| <div class="hero-bg-image"></div> | |
| <div class="hero-content max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10"> | |
| <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight"> | |
| EXQUISITE <span class="text-gradient-red">CLASSIC CARS</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-300"> | |
| Curated selection of the world's most prestigious and rare automobiles | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <a href="#inventory" class="px-8 py-4 bg-gradient-red text-white rounded-md font-bold hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300 uppercase tracking-wider"> | |
| View Collection | |
| </a> | |
| <a href="#contact" class="px-8 py-4 border border-white text-white rounded-md font-bold hover:bg-white hover:text-black transition-all duration-300 uppercase tracking-wider"> | |
| Contact Us | |
| </a> | |
| </div> | |
| <!-- Featured Cars Carousel --> | |
| <div class="relative mt-16"> | |
| <h3 class="text-lg font-bold mb-6 text-left uppercase tracking-wider text-gray-400">FEATURED CLASSICS</h3> | |
| <div class="relative"> | |
| <button class="car-carousel-btn left-4" id="car-prev-btn"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <div class="car-carousel"> | |
| <!-- Car Items --> | |
| <div class="car-carousel-item"> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <img src="https://images.unsplash.com/photo-1593941707882-a91b5a8d2f9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1957 Chevrolet Bel Air" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-sm uppercase">1957 Chevrolet Bel Air</h4> | |
| <p class="text-xs text-gray-400">From $85,000</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Classic</span> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Convertible</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="car-carousel-item"> | |
| <div class="bg-gray-80800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <img src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" | |
| alt="1969 Ford Mustang" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-sm uppercase">1969 Ford Mustang</h4> | |
| <p class="text-xs text-gray-400">From $120,000</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Muscle</span> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Fastback</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="car-carousel-item"> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <img src="https://images.unsplash.com/photo-1523913507744-3e09116b380b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1963 Jaguar E-Type" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-sm uppercase">1963 Jaguar E-Type</h4> | |
| <p class="text-xs text-gray-400">From $175,000</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Sports</span> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Roadster</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="car-carousel-item"> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <img src="https://images.unsplash.com/photo-1580273916550-e52803fe8c14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1955 Porsche 356 Speedster" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-sm uppercase">1955 Porsche 356</h4> | |
| <p class="text-xs text-gray-400">From $250,000</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Sports</span> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Convertible</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="car-carousel-item"> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <img src="https://images.unsplash.com/photo-1625398407796-82650a8c135f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1968 Mercedes-Benz 280SL" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-sm uppercase">1968 Mercedes 280SL</h4> | |
| <p class="text-xs text-gray-400">From $145,000</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Luxury</span> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Convertible</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="car-carousel-item"> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <img src="https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1959 Cadillac Coupe de Ville" | |
| class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-sm uppercase">1959 Cadillac de Ville</h4> | |
| <p class="text-xs text-gray-400">From $95,000</p> | |
| <div class="mt-2"> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Luxury</span> | |
| <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Coupe</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="car-carousel-btn right-4" id="car-next-btn"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Inventory Section --> | |
| <section id="inventory" class="py-20 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Our <span class="text-gradient-red">Inventory</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">Discover our curated collection of the world's finest classic automobiles</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Car 1 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1970 Dodge Challenger" | |
| class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full"> | |
| <span class="text-xs font-semibold text-white">RARE FIND</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2">1970 Dodge Challenger</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-gray-400 text-sm">Mileage: 12,345 mi</span> | |
| <span class="mx-2 text-gray-600">·</span> | |
| <span class="text-gray-400 text-sm">Condition: Concours</span> | |
| </div> | |
| <p class="text-gray-300 mb-6">Numbers matching 440ci V8 with 4-speed manual transmission. Award-winning rotisserie restoration.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">$225,000</span> | |
| <button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Car 2 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1963 Corvette Sting Ray" | |
| class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full"> | |
| <span class="text-xs font-semibold text-white">NEW ARRIVAL</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2">1963 Corvette Sting Ray</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-gray-400 text-sm">Mileage: 28,765 mi</span> | |
| <span class="mx-2 text-gray-600">·</span> | |
| <span class="text-gray-400 text-sm">Condition: Excellent</span> | |
| </div> | |
| <p class="text-gray-300 mb-6">Split window coupe with original 327/340hp fuel injected engine and 4-speed transmission.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">$195,000</span> | |
| <button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Car 3 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1964 Aston Martin DB5" | |
| class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2">1964 Aston Martin DB5</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-gray-400 text-sm">Mileage: 35,210 mi</span> | |
| <span class="mx-2 text-gray-600">·</span> | |
| <span class="text-gray-400 text-sm">Condition: Excellent</span> | |
| </div> | |
| <p class="text-gray-300 mb-6">Originally delivered in Dubonnet Rosso with Beige Connolly hides. Matching numbers 4.0L inline-6.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">$1,250,000</span> | |
| <button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Car 4 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1558980664-10e7170b5df1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1961 Ferrari 250 GT" | |
| class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full"> | |
| <span class="text-xs font-semibold text-white">SOLD</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2">1961 Ferrari 250 GT</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-gray-400 text-sm">Mileage: 52,890 mi</span> | |
| <span class="mx-2 text-gray-600">·</span> | |
| <span class="text-gray-400 text-sm">Condition: Concours</span> | |
| </div> | |
| <p class="text-gray-300 mb-6">One of only 950 examples built, 3.0L Colombo V12, matching numbers with excellent provenance.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-gray-500 line-through">$3,750,000</span> | |
| <button class="bg-gray-600 text-white px-6 py-2 rounded cursor-not-allowed"> | |
| Sold | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Car 5 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1616422285623-13ff0162193c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="1954 Mercedes-Benz 300 SL Gullwing" | |
| class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full"> | |
| <span class="text-xs font-semibold text-white">INQUIRE</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2">1954 Mercedes 300 SL</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-gray-400 text-sm">Mileage: 42,310 mi</span> | |
| <span class="mx-2 text-gray-600">·</span> | |
| <span class="text-gray-400 text-sm">Condition: Excellent</span> | |
| </div> | |
| <p class="text-gray-300 mb-6">Iconic gullwing doors, matching numbers 3.0L inline-6 with mechanical fuel injection.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">POA</span> | |
| <button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300"> | |
| Inquire | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Car 6 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" | |
| alt="1969 Ford Mustang Boss 429" | |
| class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full"> | |
| <span class="text-xs font-semibold text-white">RESTORED</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2">1969 Mustang Boss 429</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-gray-400 text-sm">Mileage: 9,876 mi</span> | |
| <span class="mx-2 text-gray-600">·</span> | |
| <span class="text-gray-400 text-sm">Condition: Concours</span> | |
| </div> | |
| <p class="text-gray-300 mb-6">Factory-correct Grabber Blue, one of only 859 built in 1969, nut-and-bolt rotisserie restoration.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">$385,000</span> | |
| <button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="border-gradient-red px-8 py-3 text-white rounded-md font-bold hover:bg-gradient-to-r from-red-900/20 to-red-700/20 transition-all duration-300 uppercase tracking-wider"> | |
| View Full Inventory | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-950"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Our <span class="text-gradient-red">Services</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">Comprehensive care for your prized automobile</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition-all duration-300"> | |
| <div class="w-16 h-16 bg-gradient-red rounded-full flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-search text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Curated Acquisition</h3> | |
| <p class="text-gray-400">Let our experts locate and acquire the perfect classic car based on your specifications, provenance requirements, and budget.</p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition-all duration-300"> | |
| <div class="w-16 h-16 bg-gradient-red rounded-full flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-wrench text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Restoration</h3> | |
| <p class="text-gray-400">Our master craftsmen provide concours-quality restorations with obsessive attention to authenticity and detail.</p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition-all duration-300"> | |
| <div class="w-16 h-16 bg-gradient-red rounded-full flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-leaf text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Preservation</h3> | |
| <p class="text-gray-400">Specialized care for unrestored original vehicles including climate-controlled storage and maintenance.</p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition-all duration-300"> | |
| <div class="w-16 h-16 bg-gradient-red rounded-full flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Investment Advisory</h3> | |
| <p class="text-gray-400">Market analysis and strategic acquisition guidance for collectors seeking automotive assets with appreciation potential.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-black"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> | |
| <div> | |
| <h2 class="text-4xl font-bold mb-6">About <span class="text-gradient-red">Laferriere Auto</span></h2> | |
| <p class="text-gray-400 mb-6 leading-relaxed"> | |
| Founded in 1985, Laferriere Auto has established itself as one of the world's premier classic automobile dealers, specializing in rare, investment-quality vehicles from the Brass Era through the 1980s. | |
| </p> | |
| <p class="text-gray-400 mb-6 leading-relaxed"> | |
| Our team of experts combines decades of experience in classic car restoration, sales, and market analysis to provide unparalleled service to discerning collectors worldwide. | |
| </p> | |
| <p class="text-gray-400 mb-8 leading-relaxed"> | |
| Whether you're seeking to acquire your first classic or add to an established collection, we offer a personalized approach that considers aesthetic preference, historical significance, mechanical condition, and long-term value. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">350+</h4> | |
| <p class="text-xs text-gray-500">Cars Restored</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">42</h4> | |
| <p class="text-xs text-gray-500">Concours Awards</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">650+</h4> | |
| <p class="text-xs text-gray-500">Satisfied Clients</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1619468129361-1e0cf7eb1699?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" | |
| alt="Our workshop" | |
| class="rounded-lg shadow-2xl w-full h-auto"> | |
| <div class="absolute -bottom-6 -left-6 w-32 h-32 border-4 border-red-600 z-10 hidden lg:block"></div> | |
| <div class="absolute -top-6 -right-6 w-32 h-32 border-4 border-red-600 z-10 hidden lg:block"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1493238792000-8115dc68c873?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4 text-white">Client <span class="text-gradient-red">Testimonials</span></h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto">What our clients say about their experience with Laferriere Auto</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card rounded-lg p-8 border border-gray-700"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="James Wilson" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">James Wilson</h4> | |
| <p class="text-sm text-gray-400">Collector Since 1992</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-6 italic"> | |
| "Laferriere Auto sourced my dream car - a 1967 Shelby GT500 - with the exact provenance and condition specs I requested. Their attention to detail is unmatched in this industry." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card rounded-lg p-8 border border-gray-700"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sophia Chen" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sophia Chen</h4> | |
| <p class="text-sm text-gray-400">First-time Buyer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-6 italic"> | |
| "As a first-time buyer, I was nervous about entering the classic car market. The team guided me through every step and found me a beautiful '71 Datsun 240Z that's exceeded all expectations." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card rounded-lg p-8 border border-gray-700"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Richard Müller" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Richard Müller</h4> | |
| <p class="text-sm text-gray-400">Investment Client</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-6 italic"> | |
| "Their market insight helped me build a portfolio of classic cars that has outperformed traditional investments. The Ferrari 250 GT they sourced has appreciated 40% in three years." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> | |
| <div> | |
| <h2 class="text-4xl font-bold mb-6">Contact <span class="text-gradient-red">Us</span></h2> | |
| <p class="text-gray-400 mb-8 max-w-lg"> | |
| Ready to begin your classic car journey? Complete the form or contact us directly to speak with one of our specialists about your goals. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Location</h4> | |
| <p class="text-gray-400">123 Classic Avenue, Beverly Hills, CA 90210</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Phone</h4> | |
| <p class="text-gray-400">+1 (310) 555-1967</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p class="text-gray-400">info@laferriereauto.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4 mt-1"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Hours</h4> | |
| <p class="text-gray-400">Monday - Friday: 9:00 AM - 6:00 PM <br> | |
| Saturday: By Appointment<br> | |
| Sunday: Closed</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="contact-form space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="first-name" class="block text-sm font-medium text-gray-400 mb-1">First Name</label> | |
| <input type="text" id="first-name" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500"> | |
| </div> | |
| <div> | |
| <label for="last-name" class="block text-sm font-medium text-gray-400 mb-1">Last Name</label> | |
| <input type="text" id="last-name" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-400 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-400 mb-1">Phone</label> | |
| <input type="tel" id="phone" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500"> | |
| </div> | |
| <div> | |
| <label for="interest" class="block text-sm font-medium text-gray-400 mb-1">Vehicle of Interest</label> | |
| <select id="interest" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white border-gray-600 focus:ring-0 focus:border-red-500"> | |
| <option class="bg-gray-900">General Inquiry</option> | |
| <option class="bg-gray-900">1957 Chevrolet Bel Air</option> | |
| <option class="bg-gray-900">1969 Ford Mustang</option> | |
| <option class="bg-gray-900">1963 Jaguar E-Type</option> | |
| <option class="bg-gray-900">1955 Porsche 356</option> | |
| <option class="bg-gray-900">1968 Mercedes 280SL</option> | |
| <option class="bg-gray-900">Other Specific Model</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-400 mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-red text-white py-4 rounded-md font-bold hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300 uppercase tracking-wider"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 border-t border-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-6">LAFERRIERE <span class="text-gradient-red">AUTO</span></h3> | |
| <p class="text-gray-400 mb-6"> | |
| The world's premier destination for investment-grade classic automobiles since 1985. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-6">Quick Links</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition-colors duration-300">Home</a></li> | |
| <li><a href="#inventory" class="text-gray-400 hover:text-white transition-colors duration-300">Inventory</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition-colors duration-300">Services</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition-colors duration-300">About Us</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-6">Services</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Acquisition</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Restoration</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Preservation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Investment Advisory</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Consignment</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-6">Newsletter</h4> | |
| <p class="text-gray-400 mb-6"> | |
| Subscribe to receive updates on new arrivals, upcoming auctions, and market insights. | |
| </p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your Email" class="px-4 py-3 bg-gray-900 text-white rounded-l focus:outline-none focus:ring-1 focus:ring-red-500 w-full"> | |
| <button type="submit" class="bg-gradient-red text-white px-4 rounded-r hover:bg-red-700 transition-colors duration-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-900 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 Laferriere Auto. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Car Carousel | |
| const carCarousel = document.querySelector('.car-carousel'); | |
| const carItems = document.querySelectorAll('.car-carousel-item'); | |
| const carPrevBtn = document.getElementById('car-prev-btn'); | |
| const carNextBtn = document.getElementById('car-next-btn'); | |
| let currentCarIndex = 0; | |
| const itemWidth = carItems[0].offsetWidth + 16; // Width + margin | |
| carNextBtn.addEventListener('click', () => { | |
| currentCarIndex = Math.min(currentCarIndex + 1, carItems.length - 5); | |
| carCarousel.scrollTo({ | |
| left: currentCarIndex * itemWidth, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| carPrevBtn.addEventListener('click', () => { | |
| currentCarIndex = Math.max(currentCarIndex - 1, 0); | |
| carCarousel.scrollTo({ | |
| left: currentCarIndex * itemWidth, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| // Scroll to target | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 90, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |