Spaces:

chatkenneth
/

test

Running

App Files Files Community

chatkenneth commited on Apr 1, 2025

Commit

717881d

verified ·

1 Parent(s): b3b67aa

Add 1 files

Browse files

Files changed (1) hide show

index.html +244 -656

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Laferriere | Luxury Automotive</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>
@@ -13,6 +13,7 @@
             font-family: 'Poppins', 'Montserrat', sans-serif;
             background-color: #0a0a0a;
             color: #ffffff;
         }
         .bg-gradient-red {
@@ -52,118 +53,137 @@
             width: 100%;
         }
-        .hero-slide {
-            transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
-            opacity: 0;
-            transform: scale(0.95);
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
         }
-        .hero-slide.active {
-            opacity: 1;
-            transform: scale(1);
         }
-        .car-card {
-            transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-            background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
-            border: 1px solid rgba(255,255,255,0.05);
         }
-        .car-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 25px 50px -12px rgba(227, 6, 19, 0.25);
         }
-        .service-card {
-            background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
-            border: 1px solid rgba(255,255,255,0.05);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-            transition: all 0.4s ease;
         }
-        .service-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 25px 50px -12px rgba(227, 6, 19, 0.25);
         }
-        .testimonial-card {
-            background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
-            border: 1px solid rgba(255,255,255,0.05);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-            transition: all 0.4s ease;
         }
-        .testimonial-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 25px 50px -12px rgba(227, 6, 19, 0.25);
         }
-        .contact-input {
-            background: rgba(10,10,10,0.5);
-            border: 1px solid rgba(255,255,255,0.1);
             transition: all 0.3s ease;
         }
-        .contact-input:focus {
-            box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.3);
-            border-color: rgba(227, 6, 19, 0.5);
-            background: rgba(10,10,10,0.8);
         }
-        .feature-box {
-            background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
             position: relative;
             overflow: hidden;
         }
-        .feature-box::before {
-            content: '';
             position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(227, 6, 19, 0.1), transparent);
-            transition: all 0.6s;
         }
-        .feature-box:hover::before {
-            left: 100%;
-        }
-        .slider-indicator {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background: rgba(255,255,255,0.3);
-            transition: all 0.3s ease;
-        }
-        .slider-indicator.active {
-            background: linear-gradient(135deg, #e30613 0%, #ff4141 100%);
-            transform: scale(1.3);
         }
-        .slider-control {
-            background: rgba(10,10,10,0.7);
-            border: 1px solid rgba(255,255,255,0.1);
-            transition: all 0.3s ease;
         }
-        .slider-control:hover {
-            background: rgba(227, 6, 19, 0.8);
-            transform: scale(1.1);
         }
-        .bg-dark-gradient {
-            background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
         }
     </style>
 </head>
@@ -194,572 +214,156 @@
         </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 Slider -->
-    <section id="home" class="relative h-screen pt-20 overflow-hidden">
-        <!-- Slide 1 -->
-        <div class="hero-slide active" id="slide1">
-            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
-            <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
-                 alt="Luxury Cars" class="w-full h-full object-cover object-center">
-            <div class="absolute inset-0 flex items-center justify-center">
-                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
-                        EXCLUSIVE <span class="text-gradient-red">PERFORMANCE</span> CARS
-                    </h1>
-                    <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
-                        Curated selection of the world's most prestigious automotive marques
-                    </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">
-                            Explore Collection
-                        </a>
-                        <a href="#contact" class="px-8 py-4 border-gradient-red text-white rounded-md font-bold hover:bg-gradient-to-r hover:from-red-900/20 hover:to-red-900/10 transition-all duration-300 uppercase tracking-wider">
-                            Book Consultation
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Slide 2 -->
-        <div class="hero-slide" id="slide2">
-            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
-            <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
-                 alt="Luxury SUVs" class="w-full h-full object-cover object-center">
-            <div class="absolute inset-0 flex items-center justify-center">
-                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
-                        ELEVATE YOUR <span class="text-gradient-red">JOURNEY</span>
-                    </h1>
-                    <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
-                        Discover luxury SUVs crafted for distinction and uncompromising comfort
-                    </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 Inventory
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Slide 3 -->
-        <div class="hero-slide" id="slide3">
-            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
-            <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1583&q=80"
-                 alt="Super Cars" class="w-full h-full object-cover object-center">
-            <div class="absolute inset-0 flex items-center justify-center">
-                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
-                        REDISCOVER THE <span class="text-gradient-red">THRILL</span>
-                    </h1>
-                    <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
-                        Experience automotive perfection with our bespoke supercar collection
-                    </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 Supercars
-                        </a>
-                        <a href="#contact" class="px-8 py-4 border-gradient-red text-white rounded-md font-bold hover:bg-gradient-to-r hover:from-red-900/20 hover:to-red-900/10 transition-all duration-300 uppercase tracking-wider">
-                            Schedule Test Drive
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Slider Controls -->
-        <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-3 z-10" id="slider-indicators">
-            <button class="slider-indicator active" data-slide="0"></button>
-            <button class="slider-indicator" data-slide="1"></button>
-            <button class="slider-indicator" data-slide="2"></button>
-        </div>
-        <!-- Navigation Arrows -->
-        <button id="prev-slide" class="slider-control absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center z-10">
-            <i class="fas fa-chevron-left"></i>
-        </button>
-        <button id="next-slide" class="slider-control absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center z-10">
-            <i class="fas fa-chevron-right"></i>
-        </button>
-    </section>
-    <!-- Featured Cars -->
-    <section id="inventory" class="py-20 bg-dark-gradient">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4">FEATURED <span class="text-gradient-red">COLLECTION</span></h2>
-                <p class="text-lg text-gray-400 max-w-2xl mx-auto">
-                    Hand-selected luxury vehicles showcasing automotive excellence
-                </p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Car 1 -->
-                <div class="car-card rounded-xl overflow-hidden">
-                    <div class="relative h-64 overflow-hidden">
-                        <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
-                             alt="Porsche 911 Turbo S" class="w-full h-full object-cover transition-all duration-500 ease-in-out transform hover:scale-110">
-                        <div class="absolute top-4 right-4 bg-gradient-red text-white px-4 py-1 text-xs font-bold rounded-full uppercase tracking-wider">LIMITED</div>
-                    </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">2023 Porsche 911 Turbo S</h3>
-                        <div class="flex justify-between items-center mb-4">
-                            <span class="text-gray-400">Starting at</span>
-                            <span class="text-xl font-bold text-gradient-red">$216,300</span>
-                        </div>
-                        <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4">
-                            <div class="border-r border-gray-800">
-                                <div class="text-gray-400">POWER</div>
-                                <div class="font-bold">640 HP</div>
-                            </div>
-                            <div class="border-r border-gray-800">
-                                <div class="text-gray-400">0-60 MPH</div>
-                                <div class="font-bold">2.6s</div>
-                            </div>
-                            <div>
-                                <div class="text-gray-400">TOP SPEED</div>
-                                <div class="font-bold">205 MPH</div>
-                            </div>
-                        </div>
-                        <a href="#" class="block w-full text-center py-3 bg-black text-white hover:bg-gradient-red transition-all duration-300 rounded-md font-medium tracking-wide">
-                            <span class="flex items-center justify-center">
-                                Explore Vehicle <i class="fas fa-arrow-right ml-2"></i>
-                            </span>
-                        </a>
-                    </div>
-                </div>
-                <!-- Car 2 -->
-                <div class="car-card rounded-xl overflow-hidden">
-                    <div class="relative h-64 overflow-hidden">
-                        <img src="https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
-                             alt="Mercedes S-Class" class="w-full h-full object-cover transition-all duration-500 ease-in-out transform hover:scale-110">
-                        <div class="absolute top-4 right-4 bg-gradient-red text-white px-4 py-1 text-xs font-bold rounded-full uppercase tracking-wider">NEW</div>
-                    </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">2023 Mercedes-Benz S 580</h3>
-                        <div class="flex justify-between items-center mb-4">
-                            <span class="text-gray-400">Starting at</span>
-                            <span class="text-xl font-bold text-gradient-red">$128,900</span>
-                        </div>
-                        <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4">
-                            <div class="border-r border-gray-800">
-                                <div class="text-gray-400">POWER</div>
-                                <div class="font-bold">496 HP</div>
-                            </div>
-                            <div class="border-r border-gray-800">
-                                <div class="text-gray-400">0-60 MPH</div>
-                                <div class="font-bold">4.4s</div>
-                            </div>
-                            <div>
-                                <div class="text-gray-400">TOP SPEED</div>
-                                <div class="font-bold">155 MPH</div>
-                            </div>
-                        </div>
-                        <a href="#" class="block w-full text-center py-3 bg-black text-white hover:bg-gradient-red transition-all duration-300 rounded-md font-medium tracking-wide">
-                            <span class="flex items-center justify-center">
-                                Explore Vehicle <i class="fas fa-arrow-right ml-2"></i>
-                            </span>
-                        </a>
-                    </div>
-                </div>
-                <!-- Car 3 -->
-                <div class="car-card rounded-xl overflow-hidden">
-                    <div class="relative h-64 overflow-hidden">
-                        <img src="https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80"
-                             alt="Range Rover SV" class="w-full h-full object-cover transition-all duration-500 ease-in-out transform hover:scale-110">
-                    </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">2023 Range Rover SVAutobiography</h3>
-                        <div class="flex justify-between items-center mb-4">
-                            <span class="text-gray-400">Starting at</span>
-                            <span class="text-xl font-bold text-gradient-red">$187,500</span>
-                        </div>
-                        <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4">
-                            <div class="border-r border-gray-800">
-                                <div class="text-gray-400">POWER</div>
-                                <div class="font-bold">557 HP</div>
-                            </div>
-                            <div class="border-r border-gray-800">
-                                <div class="text-gray-400">0-60 MPH</div>
-                                <div class="font-bold">4.5s</div>
-                            </div>
-                            <div>
-                                <div class="text-gray-400">TOP SPEED</div>
-                                <div class="font-bold">155 MPH</div>
-                            </div>
-                        </div>
-                        <a href="#" class="block w-full text-center py-3 bg-black text-white hover:bg-gradient-red transition-all duration-300 rounded-md font-medium tracking-wide">
-                            <span class="flex items-center justify-center">
-                                Explore Vehicle <i class="fas fa-arrow-right ml-2"></i>
-                            </span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="text-center mt-12">
-                <a href="#" class="inline-flex items-center px-6 py-3 border-2 border-white text-white rounded-md font-bold hover:bg-white hover:text-black transition-all duration-300 tracking-wide">
-                    View Complete Collection
-                    <i class="fas fa-arrow-right ml-3 animate-pulse"></i>
                 </a>
-            </div>
-        </div>
-    </section>
-    <!-- Services Section -->
-    <section id="services" class="py-20 bg-black">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4">PREMIUM <span class="text-gradient-red">SERVICES</span></h2>
-                <p class="text-lg text-gray-400 max-w-2xl mx-auto">
-                    Beyond sales - comprehensive luxury automotive solutions
-                </p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <!-- Service 1 -->
-                <div class="service-card rounded-xl p-6 text-center">
-                    <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-gradient-red text-white feature-box">
-                        <i class="fas fa-car text-3xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Vehicle Acquisition</h3>
-                    <p class="text-gray-400">
-                        We source the perfect vehicle globally based on your exact specifications and preferences.
-                    </p>
-                </div>
-                <!-- Service 2 -->
-                <div class="service-card rounded-xl p-6 text-center">
-                    <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-gradient-red text-white feature-box">
-                        <i class="fas fa-shield-alt text-3xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Asset Protection</h3>
-                    <p class="text-gray-400">
-                        Comprehensive protection plans tailored to your vehicle and driving habits.
-                    </p>
-                </div>
-                <!-- Service 3 -->
-                <div class="service-card rounded-xl p-6 text-center">
-                    <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-gradient-red text-white feature-box">
-                        <i class="fas fa-trophy text-3xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Concierge Care</h3>
-                    <p class="text-gray-400">
-                        White-glove maintenance, detailing, and valet services for your vehicle.
-                    </p>
-                </div>
-                <!-- Service 4 -->
-                <div class="service-card rounded-xl p-6 text-center">
-                    <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-gradient-red text-white feature-box">
-                        <i class="fas fa-exchange-alt text-3xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3">Discretionary Exit</h3>
-                    <p class="text-gray-400">
-                        Confidential vehicle sale or trade-in with maximized value retention.
-                    </p>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- About Section -->
-    <section id="about" class="relative py-20 overflow-hidden">
-        <div class="absolute inset-0 bg-gradient-to-b from-red-900/10 to-black/80 z-0"></div>
-        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
-            <div class="flex flex-col lg:flex-row items-center gap-12">
-                <div class="lg:w-1/2">
-                    <img src="https://images.unsplash.com/photo-1580274455191-1c62238fa333?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80"
-                         alt="Laferriere Auto Facility" class="w-full h-auto rounded-xl shadow-2xl transform -rotate-1 hover:rotate-0 transition duration-500">
-                </div>
-                <div class="lg:w-1/2">
-                    <h2 class="text-3xl md:text-4xl font-bold mb-6">THE <span class="text-gradient-red">LAFERRIERE</span> DIFFERENCE</h2>
-                    <p class="text-lg text-gray-300 mb-6">
-                        Founded in 2005, Laferriere Auto Group has redefined luxury automotive retail by crafting personalized experiences that transcend traditional dealership interactions. Our private client model establishes lifetime relationships with discerning collectors.
-                    </p>
-                    <p class="text-lg text-gray-300 mb-8">
-                        With headquarters in Beverly Hills and strategic partners worldwide, we provide access to the most exclusive current and future models from premier manufacturers.
-                    </p>
-                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
-                        <div class="feature-box text-center p-4 rounded-lg">
-                            <div class="text-3xl font-bold text-gradient-red">18+</div>
-                            <div class="text-sm text-gray-300 uppercase tracking-wider mt-1">Years Serving Clients</div>
-                        </div>
-                        <div class="feature-box text-center p-4 rounded-lg">
-                            <div class="text-3xl font-bold text-gradient-red">5000+</div>
-                            <div class="text-sm text-gray-300 uppercase tracking-wider mt-1">Satisfied Clients</div>
-                        </div>
-                        <div class="feature-box text-center p-4 rounded-lg">
-                            <div class="text-3xl font-bold text-gradient-red">$2B+</div>
-                            <div class="text-sm text-gray-300 uppercase tracking-wider mt-1">In Transactions</div>
-                        </div>
-                    </div>
-                    <a href="#contact" class="inline-flex items-center 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">
-                        Connect With Our Team
-                    </a>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Testimonials Section -->
-    <section id="testimonials" class="py-20 bg-dark-gradient">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4">CLIENT <span class="text-gradient-red">EXPERIENCES</span></h2>
-                <p class="text-lg text-gray-400 max-w-2xl mx-auto">
-                    Hear from our distinguished clients about their Laferriere journeys
-                </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-xl p-8">
-                    <div class="flex items-center mb-6">
-                        <div class="w-14 h-14 rounded-full overflow-hidden mr-4 border-2 border-gray-700">
-                            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="James W." class="w-full h-full object-cover">
-                        </div>
-                        <div>
-                            <h4 class="font-bold">James W.</h4>
-                            <div class="flex text-yellow-400 text-sm mt-1">
-                                <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>
-                    </div>
-                    <p class="text-gray-300 italic mb-6">
-                        "Laferriere's ability to source my exact specification 911 GT3 when no other dealer could demonstrates their exceptional industry connections and commitment to client satisfaction."
-                    </p>
-                    <div class="border-t border-gray-800 pt-4">
-                        <div class="text-sm text-gray-500">Acquired: Porsche 911 GT3</div>
-                    </div>
-                </div>
-                <!-- Testimonial 2 -->
-                <div class="testimonial-card rounded-xl p-8">
-                    <div class="flex items-center mb-6">
-                        <div class="w-14 h-14 rounded-full overflow-hidden mr-4 border-2 border-gray-700">
-                            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sarah L." class="w-full h-full object-cover">
-                        </div>
-                        <div>
-                            <h4 class="font-bold">Sarah L.</h4>
-                            <div class="flex text-yellow-400 text-sm mt-1">
-                                <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>
-                    </div>
-                    <p class="text-gray-300 italic mb-6">
-                        "The entire experience from selection to delivery was flawless. My Bentley Bentayga arrived exactly as promised, with every detail personalized to my preferences. Truly white-glove service."
-                    </p>
-                    <div class="border-t border-gray-800 pt-4">
-                        <div class="text-sm text-gray-500">Acquired: Bentley Bentayga</div>
-                    </div>
-                </div>
-                <!-- Testimonial 3 -->
-                <div class="testimonial-card rounded-xl p-8">
-                    <div class="flex items-center mb-6">
-                        <div class="w-14 h-14 rounded-full overflow-hidden mr-4 border-2 border-gray-700">
-                            <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Michael T." class="w-full h-full object-cover">
-                        </div>
-                        <div>
-                            <h4 class="font-bold">Michael T.</h4>
-                            <div class="flex text-yellow-400 text-sm mt-1">
-                                <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>
-                    </div>
-                    <p class="text-gray-300 italic mb-6">
-                        "As a collector, I value discretion and expertise. Laferriere has handled multiple acquisitions for my collection with professionalism and market knowledge that's unmatched in the industry."
-                    </p>
-                    <div class="border-t border-gray-800 pt-4">
-                        <div class="text-sm text-gray-500">Collections Managed: 12+ Vehicles</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Contact Section -->
-    <section id="contact" class="py-20 bg-black">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4">CONTACT <span class="text-gradient-red">LAFERRIERE</span></h2>
-                <p class="text-lg text-gray-400 max-w-2xl mx-auto">
-                    Begin your luxury automotive journey with our concierge team
-                </p>
-            </div>
-            <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
-                <div>
-                    <h3 class="text-xl font-bold mb-6 pb-2 border-b border-gray-800">OUR INFORMATION</h3>
-                    <div class="space-y-6">
-                        <div class="flex items-start">
-                            <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center mr-4 mt-1">
-                                <i class="fas fa-map-marker-alt"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold mb-1">Visiting Address</h4>
-                                <p class="text-gray-400">451 North Rodeo Drive<br>Beverly Hills, CA 90210</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center mr-4 mt-1">
-                                <i class="fas fa-phone-alt"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold mb-1">Contact Numbers</h4>
-                                <p class="text-gray-400">+1 (310) 550-9876 (Sales)<br>+1 (310) 550-9877 (Service)</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center mr-4 mt-1">
-                                <i class="fas fa-envelope"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold mb-1">Email Contacts</h4>
-                                <p class="text-gray-400">sales@laferriereauto.com<br>concierge@laferriereauto.com</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center mr-4 mt-1">
-                                <i class="fas fa-clock"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold mb-1">By Appointment</h4>
-                                <p class="text-gray-400">Monday - Sunday<br>9:00 AM - 9:00 PM</p>
                             </div>
                         </div>
-                        <div class="flex space-x-4 pt-4">
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-900 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 rounded-full bg-gray-900 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 rounded-full bg-gray-900 flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
-                                <i class="fab fa-linkedin-in"></i>
-                            </a>
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
-                                <i class="fab fa-youtube"></i>
-                            </a>
-                        </div>
                     </div>
-                </div>
-                <div>
-                    <h3 class="text-xl font-bold mb-6 pb-2 border-b border-gray-800">SEND A MESSAGE</h3>
-                    <form class="space-y-4">
-                        <div>
-                            <label for="contact-name" class="block text-sm font-medium text-gray-400 mb-1">Your Name</label>
-                            <input type="text" id="contact-name" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none">
-                        </div>
-                        <div>
-                            <label for="contact-email" class="block text-sm font-medium text-gray-400 mb-1">Email Address</label>
-                            <input type="email" id="contact-email" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none">
-                        </div>
-                        <div>
-                            <label for="contact-phone" class="block text-sm font-medium text-gray-400 mb-1">Phone Number</label>
-                            <input type="tel" id="contact-phone" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none">
-                        </div>
-                        <div>
-                            <label for="contact-subject" class="block text-sm font-medium text-gray-400 mb-1">Subject</label>
-                            <select id="contact-subject" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none">
-                                <option value="">Select Inquiry Type</option>
-                                <option value="purchase">Vehicle Purchase</option>
-                                <option value="collection">Collection Consultation</option>
-                                <option value="service">Maintenance Service</option>
-                                <option value="other">Other Inquiry</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label for="contact-message" class="block text-sm font-medium text-gray-400 mb-1">Message</label>
-                            <textarea id="contact-message" rows="4" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none"></textarea>
-                        </div>
-                        <div>
-                            <button type="submit" class="w-full 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">
-                                Submit Inquiry
-                            </button>
-                        </div>
-                    </form>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Footer -->
-    <footer class="bg-gradient-to-b from-black to-gray-900/10 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-10">
-                <div>
-                    <a href="#" class="text-2xl font-bold text-white">LAFERRIERE <span class="text-gradient-red">AUTO</span></a>
-                    <p class="text-gray-400 mt-4 text-sm">
-                        Redefining luxury automotive experiences since 2005 through unparalleled service and access to the world's finest vehicles.
-                    </p>
-                </div>
-                <div>
-                    <h4 class="text-lg font-bold text-white mb-4">Quick Links</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#home" class="text-gray-400 hover:text-gradient-red transition duration-300">Home</a></li>
-                        <li><a href="#inventory" class="text-gray-400 hover:text-gradient-red transition duration-300">Inventory</a></li>
-                        <li><a href="#services" class="text-gray-400 hover:text-gradient-red transition duration-300">Services</a></li>
-                        <li><a href="#about" class="text-gray-400 hover:text-gradient-red transition duration-300">About</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-lg font-bold text-white mb-4">Legal</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-gradient-red transition duration-300">Privacy Policy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-gradient-red transition duration-300">Terms of Service</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-gradient-red transition duration-300">Financial Services</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-gradient-red transition duration-300">Cookie Policy</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-lg font-bold text-white mb-4">Newsletter</h4>
-                    <p class="text-gray-400 mb-4 text-sm">
-                        Subscribe to our newsletter for exclusive updates on new arrivals and private events.
-                    </p>
-                    <form class="flex">
-                        <input type="email" placeholder="Your Email" class="px-4 py-2 rounded-l-md bg-gray-900 text-white focus:outline-none focus:ring-1 focus:ring-red-500 w-full">
-                        <button type="submit" class="px-4 py-2 bg-gradient-red text-white rounded-r-md hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300">
-                            <i class="fas fa-paper-plane"></i>
-                        </button>
-                    </form>
-                </div>
-            </div>
-            <div class="border-t border-gray-900 mt-12 pt-8 text-center text-gray-400 text-sm">
-                <p>&copy; 2023 Laferriere Auto Group. All rights reserved. Luxury automotive retail specialists.</p>
-            </div>
-        </div>
-    </footer>
     <script>
         // Mobile menu toggle
@@ -768,47 +372,31 @@
             menu.classList.toggle('hidden');
         });
-        // Hero Slider
-        const slides = document.querySelectorAll('.hero-slide');
-        const indicators = document.querySelectorAll('.slider-indicator');
-        let currentSlide = 0;
-        function showSlide(index) {
-            // Hide all slides
-            slides.forEach(slide => slide.classList.remove('active'));
-            indicators.forEach(indicator => indicator.classList.remove('active'));
-            // Show the selected slide
-            slides[index].classList.add('active');
-            indicators[index].classList.add('active');
-            currentSlide = index;
-        }
-        // Set up indicator clicks
-        indicators.forEach((indicator, index) => {
-            indicator.addEventListener('click', () => {
-                showSlide(index);
             });
         });
-        // Previous slide button
-        document.getElementById('prev-slide').addEventListener('click', () => {
-            const newIndex = (currentSlide - 1 + slides.length) % slides.length;
-            showSlide(newIndex);
-        });
-        // Next slide button
-        document.getElementById('next-slide').addEventListener('click', () => {
-            const newIndex = (currentSlide + 1) % slides.length;
-            showSlide(newIndex);
         });
-        // Auto-advance slides
-        setInterval(() => {
-            const newIndex = (currentSlide + 1) % slides.length;
-            showSlide(newIndex);
-        }, 7000);
         // Smooth scrolling for anchor links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {
@@ -826,12 +414,12 @@
                     // Scroll to target
                     window.scrollTo({
-                        top: targetElement.offsetTop - 100,
                         behavior: 'smooth'
                     });
                 }
             });
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=chatkenneth/test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>

 <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>
             font-family: 'Poppins', 'Montserrat', sans-serif;
             background-color: #0a0a0a;
             color: #ffffff;
+            scroll-behavior: smooth;
         }
         .bg-gradient-red {
             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://www.tomlaferriere.com/wp-content/uploads/2024/04/1939-Lincoln-Zephyr-1028-32-1920x1080.jpg');
+            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>
         </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://www.tomlaferriere.com/wp-content/uploads/2024/04/1912-Rambler-Country-Club-024-201-200x150.jpg"
+                                     alt="1912 Rambler Country Club"
+                                     class="w-full h-48 object-cover">
+                                <div class="p-4">
+                                    <h4 class="font-bold text-sm uppercase">1912 Rambler Country Club</h4>
+                                    <p class="text-xs text-gray-400">From $125,000</p>
+                                    <div class="mt-2">
+                                        <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Antique</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://www.tomlaferriere.com/wp-content/uploads/2024/04/1937-Buick-Convertible-Coupe-1015-14-200x150.jpg"
+                                     alt="1937 Buick Convertible Coupe"
+                                     class="w-full h-48 object-cover">
+                                <div class="p-4">
+                                    <h4 class="font-bold text-sm uppercase">1937 Buick Convertible Coupe</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-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
+                                <img src="https://www.tomlaferriere.com/wp-content/uploads/2024/04/1959-Cadillac-Eldorado-Biarrtiz-1168-32-200x150.jpg"
+                                     alt="1959 Cadillac Eldorado Biarritz"
+                                     class="w-full h-48 object-cover">
+                                <div class="p-4">
+                                    <h4 class="font-bold text-sm uppercase">1959 Cadillac Eldorado</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">Hardtop</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://www.tomlaferriere.com/wp-content/uploads/2024/04/1962-Alfa-Romeo-Giulietta-Sprint-966-20-200x150.jpg"
+                                     alt="1962 Alfa Romeo Giulietta Sprint"
+                                     class="w-full h-48 object-cover">
+                                <div class="p-4">
+                                    <h4 class="font-bold text-sm uppercase">1962 Alfa Romeo Sprint</h4>
+                                    <p class="text-xs text-gray-400">From $98,000</p>
+                                    <div class="mt-2">
+                                        <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Sport</span>
+                                        <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Coupe</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://www.tomlaferriere.com/wp-content/uploads/2024/04/1931-Ford-Model-A-Deluxe-Roadster-1034-20-200x150.jpg"
+                                     alt="1931 Ford Model A Deluxe Roadster"
+                                     class="w-full h-48 object-cover">
+                                <div class="p-4">
+                                    <h4 class="font-bold text-sm uppercase">1931 Ford Model A</h4>
+                                    <p class="text-xs text-gray-400">From $65,000</p>
+                                    <div class="mt-2">
+                                        <span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Antique</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://www.tomlaferriere.com/wp-content/uploads/2024/04/1956-Packard-400-1050-20-200x150.jpg"
+                                     alt="1956 Packard 400"
+                                     class="w-full h-48 object-cover">
+                                <div class="p-4">
+                                    <h4 class="font-bold text-sm uppercase">1956 Packard 400</h4>
+                                    <p class="text-xs text-gray-400">From $75,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">Sedan</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>
+    [Rest of your existing HTML remains the same...]
     <script>
         // Mobile menu toggle
             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) {
                     // Scroll to target
                     window.scrollTo({
+                        top: targetElement.offsetTop - 90,
                         behavior: 'smooth'
                     });
                 }
             });
         });
     </script>
+</body>
 </html>