Update templates/base.html

templates/base.html

@@ -21,6 +21,59 @@
             font-family: 'Poppins', sans-serif;
             background-color: #f8fafc;
             overflow-x: hidden;
+            position: relative;
+        }
+        
+        /* Animated background elements */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+        }
+        
+        .bg-circle {
+            position: absolute;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 70%);
+            animation: float 20s infinite linear;
+        }
+        
+        .bg-tire {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%233b82f6' stroke-width='2' opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='15' fill='none' stroke='%233b82f6' stroke-width='2' opacity='0.1'/%3E%3C/g%3E");
+            animation: spin 40s infinite linear;
+        }
+        
+        .bg-car {
+            position: absolute;
+            width: 80px;
+            height: 40px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M10,20 L70,20 L75,30 L5,30 Z' fill='%233b82f6' fill-opacity='0.05'/%3E%3Ccircle cx='20' cy='35' r='5' fill='%233b82f6' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='35' r='5' fill='%233b82f6' fill-opacity='0.05'/%3E%3C/svg%3E");
+            animation: drive 60s infinite linear;
+        }
+        
+        @keyframes float {
+            0% { transform: translateY(0px) translateX(0px); }
+            25% { transform: translateY(-100px) translateX(100px); }
+            50% { transform: translateY(-50px) translateX(200px); }
+            75% { transform: translateY(-100px) translateX(300px); }
+            100% { transform: translateY(0px) translateX(0px); }
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        @keyframes drive {
+            0% { transform: translateX(-100px) translateY(0px); }
+            100% { transform: translateX(calc(100vw + 100px)) translateY(calc(100vh * var(--y-pos))); }
         }
         
         .hero-bg {
@@ -214,46 +267,87 @@
         .nav-link:hover:after {
             width: 100%;
         }
+        
+        .search-box {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+        }
+        
+        .search-box:hover {
+            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
+            transform: translateY(-5px);
+        }
+        
+        .car-filter-card {
+            transition: all 0.3s ease;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        
+        .car-filter-card:hover, .car-filter-card.active {
+            border-color: #3b82f6;
+            background-color: rgba(59, 130, 246, 0.05);
+        }
+        
+        .price-range {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 8px;
+            border-radius: 5px;
+            background: #e5e7eb;
+            outline: none;
+        }
+        
+        .price-range::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+            border: 3px solid white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        }
+        
+        .main-content-bg {
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            position: relative;
+            z-index: 1;
+        }
+        
+        .feature-section {
+            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+            border-radius: 20px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
+        }
     </style>
 </head>
 <body>
+    <!-- Animated Background Elements -->
+    <div class="bg-animation" id="bgAnimation"></div>
+    
     <!-- Navigation -->
     <nav class="nav-transparent text-white shadow-lg fixed w-full z-50 transition-all duration-300">
         <div class="container mx-auto px-4">
             <div class="flex justify-between items-center py-4">
-                <a href="{{ url_for('index') }}" class="text-2xl font-bold flex items-center">
+                <a href="/" class="text-2xl font-bold flex items-center">
                     <i class="fas fa-car text-blue-400 mr-2"></i>
                     <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">Carwala</span>
                 </a>
                 
                 <div class="flex space-x-6 items-center">
-                    {% if session.get('user_id') %}
-                        {% if session.get('role') == 'admin' %}
-                            <a href="{{ url_for('admin_dashboard') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
-                                <i class="fas fa-cog mr-1"></i>Admin Dashboard
-                            </a>
-                        {% elif session.get('role') == 'seller' %}
-                            <a href="{{ url_for('seller_dashboard') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
-                                <i class="fas fa-store mr-1"></i>Seller Dashboard
-                            </a>
-                        {% endif %}
-                        <a href="{{ url_for('index') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
-                            <i class="fas fa-home mr-1"></i>Home
-                        </a>
-                        <a href="{{ url_for('logout') }}" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg transition-all duration-300 btn-glow">
-                            <i class="fas fa-sign-out-alt mr-1"></i>Logout
-                        </a>
-                    {% else %}
-                        <a href="{{ url_for('index') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
-                            <i class="fas fa-home mr-1"></i>Home
-                        </a>
-                        <a href="{{ url_for('login') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
-                            <i class="fas fa-sign-in-alt mr-1"></i>Login
-                        </a>
-                        <a href="{{ url_for('register') }}" class="bg-gradient-to-r from-blue-500 to-cyan-400 hover:from-blue-600 hover:to-cyan-500 px-5 py-2 rounded-lg font-medium transition-all duration-300 btn-glow">
-                            <i class="fas fa-user-plus mr-1"></i>Register
-                        </a>
-                    {% endif %}
+                    <a href="/" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
+                        <i class="fas fa-home mr-1"></i>Home
+                    </a>
+                    <a href="/login" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
+                        <i class="fas fa-sign-in-alt mr-1"></i>Login
+                    </a>
+                    <a href="/register" class="bg-gradient-to-r from-blue-500 to-cyan-400 hover:from-blue-600 hover:to-cyan-500 px-5 py-2 rounded-lg font-medium transition-all duration-300 btn-glow">
+                        <i class="fas fa-user-plus mr-1"></i>Register
+                    </a>
                 </div>
             </div>
         </div>
@@ -273,10 +367,10 @@
                         Carwala is your premier marketplace for buying and selling cars. With thousands of verified listings and trusted sellers, find the car of your dreams today.
                     </p>
                     <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                        <a href="#featured" class="bg-gradient-to-r from-blue-500 to-cyan-400 hover:from-blue-600 hover:to-cyan-500 px-6 py-3 rounded-lg font-medium text-lg transition-all duration-300 text-center btn-glow pulse">
+                        <a href="#search-section" class="bg-gradient-to-r from-blue-500 to-cyan-400 hover:from-blue-600 hover:to-cyan-500 px-6 py-3 rounded-lg font-medium text-lg transition-all duration-300 text-center btn-glow pulse">
                             <i class="fas fa-search mr-2"></i>Browse Cars
                         </a>
-                        <a href="{{ url_for('register') }}" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 px-6 py-3 rounded-lg font-medium text-lg transition-all duration-300 text-center">
+                        <a href="/register" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 px-6 py-3 rounded-lg font-medium text-lg transition-all duration-300 text-center">
                             <i class="fas fa-plus mr-2"></i>Sell Your Car
                         </a>
                     </div>
@@ -302,24 +396,8 @@
         <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-cyan-500 opacity-10 floating" style="animation-delay: 1s;"></div>
     </section>
 
-    <!-- Flash Messages -->
-    {% with messages = get_flashed_messages() %}
-        {% if messages %}
-            <div class="container mx-auto mt-24 px-4">
-                {% for message in messages %}
-                    <div class="bg-gradient-to-r from-green-100 to-green-50 border-l-4 border-green-500 text-green-700 px-4 py-3 rounded-r shadow-lg mb-4 fade-in" role="alert">
-                        <div class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-3"></i>
-                            <span class="block sm:inline">{{ message }}</span>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-        {% endif %}
-    {% endwith %}
-
     <!-- Stats Section -->
-    <section class="py-12 stats-bg text-white">
+    <section class="py-12 stats-bg text-white relative z-10">
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
                 <div class="fade-in">
@@ -343,191 +421,323 @@
     </section>
 
     <!-- Main Content -->
-    <main class="container mx-auto px-4 py-12">
-        {% block content %}
-        <!-- Default content if not overridden -->
-        <div class="text-center py-12">
-            <h2 class="text-3xl font-bold mb-6 text-gray-800">Featured Cars</h2>
-            <p class="text-gray-600 mb-12 max-w-2xl mx-auto">Explore our handpicked selection of premium vehicles. Each car is thoroughly inspected to ensure quality and reliability.</p>
+    <main class="container mx-auto px-4 py-12 main-content-bg relative z-10">
+        <!-- Search Section -->
+        <section id="search-section" class="mb-16 fade-in">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4 text-gray-800">Find Your Dream Car</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Use our advanced search to filter through thousands of cars and find exactly what you're looking for.</p>
+            </div>
             
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+            <div class="search-box p-6 md:p-8 mb-12">
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                    <!-- Search Input -->
+                    <div class="md:col-span-2">
+                        <label class="block text-gray-700 font-medium mb-2">Search Cars</label>
+                        <div class="relative">
+                            <input type="text" id="car-search" placeholder="Search by make, model, or keyword..." 
+                                   class="w-full p-4 pl-12 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all duration-300">
+                            <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                        </div>
+                    </div>
+                    
+                    <!-- Price Range -->
+                    <div>
+                        <label class="block text-gray-700 font-medium mb-2">Max Price: <span id="price-value">$50,000</span></label>
+                        <input type="range" min="5000" max="100000" value="50000" step="1000" class="price-range" id="price-range">
+                    </div>
+                    
+                    <!-- Year Filter -->
+                    <div>
+                        <label class="block text-gray-700 font-medium mb-2">Year</label>
+                        <select id="year-filter" class="w-full p-4 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all duration-300">
+                            <option value="all">All Years</option>
+                            <option value="2023">2023 & Above</option>
+                            <option value="2020">2020 - 2022</option>
+                            <option value="2017">2017 - 2019</option>
+                            <option value="2014">2014 - 2016</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <!-- Car Type Filters -->
+                <div class="mt-8">
+                    <label class="block text-gray-700 font-medium mb-4">Car Type</label>
+                    <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-4">
+                        <div class="car-filter-card active p-4 rounded-lg text-center border-2 border-blue-500 bg-blue-50" data-type="all">
+                            <i class="fas fa-car text-blue-600 text-2xl mb-2"></i>
+                            <p class="font-medium">All Cars</p>
+                        </div>
+                        <div class="car-filter-card p-4 rounded-lg text-center border border-gray-200 bg-white hover:border-blue-300" data-type="sedan">
+                            <i class="fas fa-car text-gray-600 text-2xl mb-2"></i>
+                            <p class="font-medium">Sedan</p>
+                        </div>
+                        <div class="car-filter-card p-4 rounded-lg text-center border border-gray-200 bg-white hover:border-blue-300" data-type="suv">
+                            <i class="fas fa-car text-gray-600 text-2xl mb-2"></i>
+                            <p class="font-medium">SUV</p>
+                        </div>
+                        <div class="car-filter-card p-4 rounded-lg text-center border border-gray-200 bg-white hover:border-blue-300" data-type="sports">
+                            <i class="fas fa-bolt text-gray-600 text-2xl mb-2"></i>
+                            <p class="font-medium">Sports</p>
+                        </div>
+                        <div class="car-filter-card p-4 rounded-lg text-center border border-gray-200 bg-white hover:border-blue-300" data-type="electric">
+                            <i class="fas fa-charging-station text-gray-600 text-2xl mb-2"></i>
+                            <p class="font-medium">Electric</p>
+                        </div>
+                        <div class="car-filter-card p-4 rounded-lg text-center border border-gray-200 bg-white hover:border-blue-300" data-type="luxury">
+                            <i class="fas fa-gem text-gray-600 text-2xl mb-2"></i>
+                            <p class="font-medium">Luxury</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Search Button -->
+                <div class="mt-8 text-center">
+                    <button id="search-button" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-8 py-4 rounded-lg font-medium text-lg transition-all duration-300 btn-glow">
+                        <i class="fas fa-search mr-2"></i>Search Cars
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Search Results Count -->
+            <div class="flex justify-between items-center mb-8">
+                <h3 class="text-2xl font-bold text-gray-800">Available Cars <span id="result-count" class="text-blue-600">(5)</span></h3>
+                <div class="flex items-center space-x-4">
+                    <span class="text-gray-600">Sort by:</span>
+                    <select class="p-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none">
+                        <option>Newest First</option>
+                        <option>Price: Low to High</option>
+                        <option>Price: High to Low</option>
+                        <option>Year: New to Old</option>
+                    </select>
+                </div>
+            </div>
+        </section>
+        
+        <!-- How It Works Section -->
+        <section class="feature-section p-8 md:p-12 mb-16 fade-in">
+            <h2 class="text-3xl font-bold mb-8 text-gray-800 text-center">How It Works</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center">
+                    <div class="relative mx-auto mb-6">
+                        <div class="bg-gradient-to-r from-blue-500 to-cyan-400 w-20 h-20 rounded-full flex items-center justify-center mx-auto text-white text-2xl font-bold">
+                            1
+                        </div>
+                        <div class="absolute -right-10 top-1/2 transform -translate-y-1/2 hidden md:block">
+                            <i class="fas fa-arrow-right text-3xl text-gray-300"></i>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Search & Filter</h3>
+                    <p class="text-gray-600">Use our advanced search to find cars that match your preferences. Filter by price, year, make, model, and more.</p>
+                </div>
+                <div class="text-center">
+                    <div class="relative mx-auto mb-6">
+                        <div class="bg-gradient-to-r from-blue-500 to-cyan-400 w-20 h-20 rounded-full flex items-center justify-center mx-auto text-white text-2xl font-bold">
+                            2
+                        </div>
+                        <div class="absolute -right-10 top-1/2 transform -translate-y-1/2 hidden md:block">
+                            <i class="fas fa-arrow-right text-3xl text-gray-300"></i>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">View Details & Contact</h3>
+                    <p class="text-gray-600">Check detailed specifications, photos, and seller information. Contact sellers directly through our secure platform.</p>
+                </div>
+                <div class="text-center">
+                    <div class="bg-gradient-to-r from-blue-500 to-cyan-400 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 text-white text-2xl font-bold">
+                        3
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Test Drive & Purchase</h3>
+                    <p class="text-gray-600">Schedule a test drive and finalize your purchase with our secure payment and documentation assistance.</p>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Cars Section -->
+        <section id="cars" class="mb-16">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Car Card 1 -->
-                <div class="bg-white rounded-2xl shadow-lg overflow-hidden car-card card-hover">
+                <div class="car-card bg-white rounded-xl shadow-lg overflow-hidden card-hover fade-in" data-type="sedan" data-price="25000" data-year="2020">
                     <div class="relative overflow-hidden">
-                        <img src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
-                             alt="Tesla Model S" 
+                        <img src="https://images.unsplash.com/photo-1549399542-7e3f8b79c341?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" 
+                             alt="Toyota Camry" 
                              class="w-full h-56 object-cover car-card-image">
-                        <div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium">
-                            Hot Deal
+                        <div class="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            Sedan
                         </div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Tesla Model S</h3>
-                        <p class="text-gray-600 mb-4">2022 • Electric • 12,000 miles</p>
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold">Toyota Camry</h3>
+                            <span class="text-blue-600 font-bold text-lg">$25,000</span>
+                        </div>
+                        <div class="flex items-center text-gray-600 mb-4">
+                            <i class="fas fa-calendar-alt mr-2"></i>
+                            <span class="mr-4">2020</span>
+                            <i class="fas fa-tachometer-alt mr-2"></i>
+                            <span>Low Mileage</span>
+                        </div>
+                        <p class="text-gray-700 mb-4">Excellent condition, low mileage, fuel efficient. Well-maintained with full service history.</p>
                         <div class="flex justify-between items-center">
-                            <span class="text-2xl font-bold text-blue-600">$89,999</span>
-                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 btn-glow">
-                                <i class="fas fa-eye mr-1"></i> View Details
-                            </button>
+                            <span class="text-gray-600">Condition: <span class="font-medium text-green-600">Excellent</span></span>
+                            <div class="text-red-500">
+                                <i class="fas fa-lock mr-1"></i>
+                                <span class="text-sm">Login to Book</span>
+                            </div>
                         </div>
                     </div>
                 </div>
                 
                 <!-- Car Card 2 -->
-                <div class="bg-white rounded-2xl shadow-lg overflow-hidden car-card card-hover">
+                <div class="car-card bg-white rounded-xl shadow-lg overflow-hidden card-hover fade-in" data-type="sports" data-price="35000" data-year="2021">
                     <div class="relative overflow-hidden">
-                        <img src="https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2025&q=80" 
-                             alt="BMW X5" 
+                        <img src="https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80" 
+                             alt="Ford Mustang" 
                              class="w-full h-56 object-cover car-card-image">
+                        <div class="absolute top-4 left-4 bg-red-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            Sports
+                        </div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">BMW X5</h3>
-                        <p class="text-gray-600 mb-4">2021 • SUV • 18,500 miles</p>
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold">Ford Mustang</h3>
+                            <span class="text-blue-600 font-bold text-lg">$35,000</span>
+                        </div>
+                        <div class="flex items-center text-gray-600 mb-4">
+                            <i class="fas fa-calendar-alt mr-2"></i>
+                            <span class="mr-4">2021</span>
+                            <i class="fas fa-horse-head mr-2"></i>
+                            <span>450 HP</span>
+                        </div>
+                        <p class="text-gray-700 mb-4">Powerful engine, sporty look, premium features. Recently serviced with new tires installed.</p>
                         <div class="flex justify-between items-center">
-                            <span class="text-2xl font-bold text-blue-600">$65,500</span>
-                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 btn-glow">
-                                <i class="fas fa-eye mr-1"></i> View Details
-                            </button>
+                            <span class="text-gray-600">Condition: <span class="font-medium text-green-600">Like New</span></span>
+                            <div class="text-red-500">
+                                <i class="fas fa-lock mr-1"></i>
+                                <span class="text-sm">Login to Book</span>
+                            </div>
                         </div>
                     </div>
                 </div>
                 
                 <!-- Car Card 3 -->
-                <div class="bg-white rounded-2xl shadow-lg overflow-hidden car-card card-hover">
+                <div class="car-card bg-white rounded-xl shadow-lg overflow-hidden card-hover fade-in" data-type="sedan" data-price="22000" data-year="2019">
                     <div class="relative overflow-hidden">
-                        <img src="https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
-                             alt="Ford Mustang" 
+                        <img src="https://images.unsplash.com/photo-1544636331-e26879cd4d9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" 
+                             alt="Honda Civic" 
                              class="w-full h-56 object-cover car-card-image">
-                        <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium">
-                            Just Added
+                        <div class="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            Sedan
                         </div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Ford Mustang GT</h3>
-                        <p class="text-gray-600 mb-4">2023 • Sports • 5,200 miles</p>
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold">Honda Civic</h3>
+                            <span class="text-blue-600 font-bold text-lg">$22,000</span>
+                        </div>
+                        <div class="flex items-center text-gray-600 mb-4">
+                            <i class="fas fa-calendar-alt mr-2"></i>
+                            <span class="mr-4">2019</span>
+                            <i class="fas fa-user mr-2"></i>
+                            <span>Single Owner</span>
+                        </div>
+                        <p class="text-gray-700 mb-4">Well maintained, single owner, all services done. Excellent fuel economy and reliability.</p>
                         <div class="flex justify-between items-center">
-                            <span class="text-2xl font-bold text-blue-600">$52,800</span>
-                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 btn-glow">
-                                <i class="fas fa-eye mr-1"></i> View Details
-                            </button>
+                            <span class="text-gray-600">Condition: <span class="font-medium text-green-600">Very Good</span></span>
+                            <div class="text-red-500">
+                                <i class="fas fa-lock mr-1"></i>
+                                <span class="text-sm">Login to Book</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            
-            <!-- Brands Section -->
-            <div class="mb-16">
-                <h2 class="text-3xl font-bold mb-8 text-gray-800">Trusted Brands</h2>
-                <div class="grid grid-cols-2 md:grid-cols-6 gap-8">
-                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
-                        <i class="fas fa-car text-4xl text-gray-700"></i>
-                        <span class="ml-2 text-xl font-bold">Toyota</span>
-                    </div>
-                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
-                        <i class="fas fa-car text-4xl text-gray-700"></i>
-                        <span class="ml-2 text-xl font-bold">BMW</span>
-                    </div>
-                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
-                        <i class="fas fa-car text-4xl text-gray-700"></i>
-                        <span class="ml-2 text-xl font-bold">Mercedes</span>
-                    </div>
-                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
-                        <i class="fas fa-car text-4xl text-gray-700"></i>
-                        <span class="ml-2 text-xl font-bold">Tesla</span>
-                    </div>
-                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
-                        <i class="fas fa-car text-4xl text-gray-700"></i>
-                        <span class="ml-2 text-xl font-bold">Ford</span>
-                    </div>
-                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
-                        <i class="fas fa-car text-4xl text-gray-700"></i>
-                        <span class="ml-2 text-xl font-bold">Audi</span>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- How It Works -->
-            <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-2xl p-8 md:p-12 mb-16">
-                <h2 class="text-3xl font-bold mb-8 text-gray-800 text-center">How It Works</h2>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div class="text-center fade-in">
-                        <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
-                            1
+                
+                <!-- Car Card 4 -->
+                <div class="car-card bg-white rounded-xl shadow-lg overflow-hidden card-hover fade-in" data-type="sedan" data-price="300000" data-year="2020">
+                    <div class="relative overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
+                             alt="Swift" 
+                             class="w-full h-56 object-cover car-card-image">
+                        <div class="absolute top-4 left-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            Hatchback
                         </div>
-                        <h3 class="text-xl font-bold mb-4">Browse or List</h3>
-                        <p class="text-gray-600">Browse thousands of verified car listings or easily list your car for sale with our step-by-step process.</p>
                     </div>
-                    <div class="text-center fade-in">
-                        <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
-                            2
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold">Maruti Suzuki Swift</h3>
+                            <span class="text-blue-600 font-bold text-lg">$3,000</span>
                         </div>
-                        <h3 class="text-xl font-bold mb-4">Connect & Inspect</h3>
-                        <p class="text-gray-600">Connect with buyers or sellers and schedule inspections at your convenience.</p>
-                    </div>
-                    <div class="text-center fade-in">
-                        <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl">
-                            3
+                        <div class="flex items-center text-gray-600 mb-4">
+                            <i class="fas fa-calendar-alt mr-2"></i>
+                            <span class="mr-4">2020</span>
+                            <i class="fas fa-road mr-2"></i>
+                            <span>10,000 km</span>
                         </div>
-                        <h3 class="text-xl font-bold mb-4">Complete Transaction</h3>
-                        <p class="text-gray-600">Complete your purchase or sale with our secure payment and documentation support.</p>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Testimonials -->
-            <div class="mb-16">
-                <h2 class="text-3xl font-bold mb-8 text-gray-800 text-center">What Our Users Say</h2>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div class="testimonial-card fade-in">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
-                                <i class="fas fa-user text-blue-600 text-xl"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold">Alex Johnson</h4>
-                                <p class="text-gray-600 text-sm">Car Buyer</p>
+                        <p class="text-gray-700 mb-4">10,000 km, regularly serviced, no denting and painting, PPF done. Excellent city car.</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-600">Condition: <span class="font-medium text-green-600">Excellent</span></span>
+                            <div class="text-red-500">
+                                <i class="fas fa-lock mr-1"></i>
+                                <span class="text-sm">Login to Book</span>
                             </div>
                         </div>
-                        <p class="text-gray-700">"Found my dream car at an amazing price! The verification process gave me confidence in the purchase."</p>
                     </div>
-                    
-                    <div class="testimonial-card fade-in">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
-                                <i class="fas fa-user text-blue-600 text-xl"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold">Sarah Williams</h4>
-                                <p class="text-gray-600 text-sm">Car Seller</p>
-                            </div>
+                </div>
+                
+                <!-- Car Card 5 -->
+                <div class="car-card bg-white rounded-xl shadow-lg overflow-hidden card-hover fade-in" data-type="electric" data-price="40000" data-year="2025">
+                    <div class="relative overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1560958089-b8a1929cea89?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" 
+                             alt="Tesla" 
+                             class="w-full h-56 object-cover car-card-image">
+                        <div class="absolute top-4 left-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            Electric
                         </div>
-                        <p class="text-gray-700">"Sold my car within 3 days of listing! The platform made everything so simple and secure."</p>
                     </div>
-                    
-                    <div class="testimonial-card fade-in">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
-                                <i class="fas fa-user text-blue-600 text-xl"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold">Michael Chen</h4>
-                                <p class="text-gray-600 text-sm">Dealership Owner</p>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold">Tesla Model 3</h3>
+                            <span class="text-blue-600 font-bold text-lg">$40,000</span>
+                        </div>
+                        <div class="flex items-center text-gray-600 mb-4">
+                            <i class="fas fa-calendar-alt mr-2"></i>
+                            <span class="mr-4">2025</span>
+                            <i class="fas fa-bolt mr-2"></i>
+                            <span>Electric</span>
+                        </div>
+                        <p class="text-gray-700 mb-4">Tesla is a very good car with autopilot features. Long range battery and premium interior.</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-600">Condition: <span class="font-medium text-green-600">Brand New</span></span>
+                            <div class="text-red-500">
+                                <i class="fas fa-lock mr-1"></i>
+                                <span class="text-sm">Login to Book</span>
                             </div>
                         </div>
-                        <p class="text-gray-700">"Carwala has increased our sales by 40%. The quality of leads is far better than other platforms."</p>
                     </div>
                 </div>
             </div>
-        </div>
-        {% endblock %}
+        </section>
+        
+        <!-- Call to Action -->
+        <section class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white rounded-2xl p-8 md:p-12 text-center mb-16 fade-in">
+            <h2 class="text-3xl font-bold mb-4">Ready to Find Your Dream Car?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of satisfied customers who found their perfect vehicle through Carwala.</p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
+                <a href="/register" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300">
+                    <i class="fas fa-user-plus mr-2"></i>Register Now
+                </a>
+                <a href="/login" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300">
+                    <i class="fas fa-sign-in-alt mr-2"></i>Login to Browse
+                </a>
+            </div>
+        </section>
     </main>
 
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
+    <footer class="bg-gray-900 text-white py-12 relative z-10">
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
-                    <a href="{{ url_for('index') }}" class="text-2xl font-bold flex items-center mb-6">
+                    <a href="/" class="text-2xl font-bold flex items-center mb-6">
                         <i class="fas fa-car text-blue-400 mr-2"></i>
                         <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">Carwala</span>
                     </a>
@@ -551,9 +761,9 @@
                 <div>
                     <h3 class="text-lg font-bold mb-6">Quick Links</h3>
                     <ul class="space-y-3">
-                        <li><a href="{{ url_for('index') }}" class="text-gray-400 hover:text-white transition-all duration-300">Home</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">Browse Cars</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">Sell Your Car</a></li>
+                        <li><a href="/" class="text-gray-400 hover:text-white transition-all duration-300">Home</a></li>
+                        <li><a href="#search-section" class="text-gray-400 hover:text-white transition-all duration-300">Browse Cars</a></li>
+                        <li><a href="/register" class="text-gray-400 hover:text-white transition-all duration-300">Sell Your Car</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">About Us</a></li>
                     </ul>
                 </div>
@@ -561,12 +771,8 @@
                 <div>
                     <h3 class="text-lg font-bold mb-6">Account</h3>
                     <ul class="space-y-3">
-                        {% if session.get('user_id') %}
-                            <li><a href="{{ url_for('logout') }}" class="text-gray-400 hover:text-white transition-all duration-300">Logout</a></li>
-                        {% else %}
-                            <li><a href="{{ url_for('login') }}" class="text-gray-400 hover:text-white transition-all duration-300">Login</a></li>
-                            <li><a href="{{ url_for('register') }}" class="text-gray-400 hover:text-white transition-all duration-300">Register</a></li>
-                        {% endif %}
+                        <li><a href="/login" class="text-gray-400 hover:text-white transition-all duration-300">Login</a></li>
+                        <li><a href="/register" class="text-gray-400 hover:text-white transition-all duration-300">Register</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">My Profile</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">My Listings</a></li>
                     </ul>
@@ -602,10 +808,12 @@
     <script>
         // Animation on scroll
         document.addEventListener('DOMContentLoaded', function() {
+            // Create animated background elements
+            createBackgroundAnimations();
+            
             // Fade in elements on scroll
             const fadeElements = document.querySelectorAll('.fade-in');
             const slideLeftElements = document.querySelectorAll('.slide-in-left');
-            const slideRightElements = document.querySelectorAll('.slide-in-right');
             
             const observer = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
@@ -617,7 +825,6 @@
             
             fadeElements.forEach(el => observer.observe(el));
             slideLeftElements.forEach(el => observer.observe(el));
-            slideRightElements.forEach(el => observer.observe(el));
             
             // Animated counters
             const counters = document.querySelectorAll('.counter');
@@ -667,7 +874,163 @@
                     this.style.transform = 'translateY(0)';
                 });
             });
+            
+            // Price range slider
+            const priceRange = document.getElementById('price-range');
+            const priceValue = document.getElementById('price-value');
+            
+            priceRange.addEventListener('input', function() {
+                const value = parseInt(this.value).toLocaleString();
+                priceValue.textContent = `$${value}`;
+                filterCars();
+            });
+            
+            // Car type filter cards
+            const filterCards = document.querySelectorAll('.car-filter-card');
+            filterCards.forEach(card => {
+                card.addEventListener('click', function() {
+                    // Remove active class from all cards
+                    filterCards.forEach(c => c.classList.remove('active', 'border-blue-500', 'bg-blue-50'));
+                    filterCards.forEach(c => c.classList.add('border-gray-200', 'bg-white'));
+                    
+                    // Add active class to clicked card
+                    this.classList.remove('border-gray-200', 'bg-white');
+                    this.classList.add('active', 'border-blue-500', 'bg-blue-50');
+                    
+                    filterCars();
+                });
+            });
+            
+            // Year filter
+            const yearFilter = document.getElementById('year-filter');
+            yearFilter.addEventListener('change', filterCars);
+            
+            // Search input
+            const carSearch = document.getElementById('car-search');
+            carSearch.addEventListener('keyup', filterCars);
+            
+            // Search button
+            const searchButton = document.getElementById('search-button');
+            searchButton.addEventListener('click', filterCars);
+            
+            // Filter cars function
+            function filterCars() {
+                const searchTerm = carSearch.value.toLowerCase();
+                const maxPrice = parseInt(priceRange.value);
+                const selectedYear = yearFilter.value;
+                const activeFilterCard = document.querySelector('.car-filter-card.active');
+                const selectedType = activeFilterCard ? activeFilterCard.getAttribute('data-type') : 'all';
+                
+                const carCards = document.querySelectorAll('.car-card');
+                let visibleCount = 0;
+                
+                carCards.forEach(card => {
+                    const carName = card.querySelector('h3').textContent.toLowerCase();
+                    const carPrice = parseInt(card.getAttribute('data-price'));
+                    const carYear = parseInt(card.getAttribute('data-year'));
+                    const carType = card.getAttribute('data-type');
+                    
+                    // Check search term
+                    const matchesSearch = carName.includes(searchTerm) || searchTerm === '';
+                    
+                    // Check price
+                    const matchesPrice = carPrice <= maxPrice;
+                    
+                    // Check year
+                    let matchesYear = true;
+                    if (selectedYear !== 'all') {
+                        const yearFilterValue = parseInt(selectedYear);
+                        if (selectedYear === '2023') {
+                            matchesYear = carYear >= 2023;
+                        } else if (selectedYear === '2020') {
+                            matchesYear = carYear >= 2020 && carYear <= 2022;
+                        } else if (selectedYear === '2017') {
+                            matchesYear = carYear >= 2017 && carYear <= 2019;
+                        } else if (selectedYear === '2014') {
+                            matchesYear = carYear >= 2014 && carYear <= 2016;
+                        }
+                    }
+                    
+                    // Check type
+                    const matchesType = selectedType === 'all' || carType === selectedType;
+                    
+                    // Show or hide card based on filters
+                    if (matchesSearch && matchesPrice && matchesYear && matchesType) {
+                        card.style.display = 'block';
+                        visibleCount++;
+                        
+                        // Add fade-in animation
+                        card.classList.add('fade-in');
+                        setTimeout(() => {
+                            card.classList.add('visible');
+                        }, 100);
+                    } else {
+                        card.style.display = 'none';
+                        card.classList.remove('visible');
+                    }
+                });
+                
+                // Update result count
+                document.getElementById('result-count').textContent = `(${visibleCount})`;
+            }
+            
+            // Initialize filter
+            filterCars();
         });
+        
+        // Create animated background elements
+        function createBackgroundAnimations() {
+            const bgAnimation = document.getElementById('bgAnimation');
+            
+            // Create circles
+            for (let i = 0; i < 15; i++) {
+                const circle = document.createElement('div');
+                circle.classList.add('bg-circle');
+                const size = Math.random() * 300 + 100;
+                const left = Math.random() * 100;
+                const top = Math.random() * 100;
+                const delay = Math.random() * 5;
+                
+                circle.style.width = `${size}px`;
+                circle.style.height = `${size}px`;
+                circle.style.left = `${left}%`;
+                circle.style.top = `${top}%`;
+                circle.style.animationDelay = `${delay}s`;
+                circle.style.opacity = Math.random() * 0.1 + 0.05;
+                
+                bgAnimation.appendChild(circle);
+            }
+            
+            // Create tires
+            for (let i = 0; i < 8; i++) {
+                const tire = document.createElement('div');
+                tire.classList.add('bg-tire');
+                const left = Math.random() * 100;
+                const top = Math.random() * 100;
+                const delay = Math.random() * 10;
+                
+                tire.style.left = `${left}%`;
+                tire.style.top = `${top}%`;
+                tire.style.animationDelay = `${delay}s`;
+                tire.style.opacity = Math.random() * 0.1 + 0.05;
+                
+                bgAnimation.appendChild(tire);
+            }
+            
+            // Create cars
+            for (let i = 0; i < 5; i++) {
+                const car = document.createElement('div');
+                car.classList.add('bg-car');
+                const yPos = Math.random() * 80 + 10;
+                const delay = Math.random() * 20;
+                
+                car.style.setProperty('--y-pos', `${yPos / 100}`);
+                car.style.animationDelay = `${delay}s`;
+                car.style.opacity = Math.random() * 0.08 + 0.05;
+                
+                bgAnimation.appendChild(car);
+            }
+        }
     </script>
 </body>
 </html>