Hugging Face's logo

Spaces:
arshtech
/
Carwala
Sleeping

App Files Community
arshtech commited on
Commit
d56c65c
·
verified ·
1 Parent(s): 85b8564

Update templates/base.html

Browse files
Files changed (1) hide show
  1. templates/base.html +629 -20
templates/base.html CHANGED
@@ -3,62 +3,671 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Carwala - Your Car Marketplace</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
- <body class="bg-gray-100">
12
  <!-- Navigation -->
13
- <nav class="bg-blue-600 text-white shadow-lg">
14
  <div class="container mx-auto px-4">
15
  <div class="flex justify-between items-center py-4">
16
- <a href="{{ url_for('index') }}" class="text-2xl font-bold">Carwala</a>
 
 
 
17
 
18
- <div class="flex space-x-4">
19
  {% if session.get('user_id') %}
20
  {% if session.get('role') == 'admin' %}
21
- <a href="{{ url_for('admin_dashboard') }}" class="hover:bg-blue-700 px-3 py-2 rounded">Admin Dashboard</a>
 
 
22
  {% elif session.get('role') == 'seller' %}
23
- <a href="{{ url_for('seller_dashboard') }}" class="hover:bg-blue-700 px-3 py-2 rounded">Seller Dashboard</a>
 
 
24
  {% endif %}
25
- <a href="{{ url_for('index') }}" class="hover:bg-blue-700 px-3 py-2 rounded">Home</a>
26
- <a href="{{ url_for('logout') }}" class="hover:bg-blue-700 px-3 py-2 rounded">Logout</a>
 
 
 
 
27
  {% else %}
28
- <a href="{{ url_for('index') }}" class="hover:bg-blue-700 px-3 py-2 rounded">Home</a>
29
- <a href="{{ url_for('login') }}" class="hover:bg-blue-700 px-3 py-2 rounded">Login</a>
30
- <a href="{{ url_for('register') }}" class="hover:bg-blue-700 px-3 py-2 rounded">Register</a>
 
 
 
 
 
 
31
  {% endif %}
32
  </div>
33
  </div>
34
  </div>
35
  </nav>
36
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  <!-- Flash Messages -->
38
  {% with messages = get_flashed_messages() %}
39
  {% if messages %}
40
- <div class="container mx-auto mt-4">
41
  {% for message in messages %}
42
- <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
43
- <span class="block sm:inline">{{ message }}</span>
 
 
 
44
  </div>
45
  {% endfor %}
46
  </div>
47
  {% endif %}
48
  {% endwith %}
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  <!-- Main Content -->
51
- <main class="container mx-auto px-4 py-8">
52
- {% block content %}{% endblock %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  </main>
54
 
55
  <!-- Footer -->
56
- <footer class="bg-gray-800 text-white py-8 mt-12">
57
- <div class="container mx-auto px-4 text-center">
58
- <p>&copy; 2024 Carwala. All rights reserved.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  </div>
60
  </footer>
61
 
62
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  </body>
64
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Carwala - Your Premium Car Marketplace</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ * {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: #f8fafc;
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ .hero-bg {
27
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
28
+ url('https://images.unsplash.com/photo-1549399542-7e3f8b79c341?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
29
+ background-size: cover;
30
+ background-position: center;
31
+ background-attachment: fixed;
32
+ }
33
+
34
+ .nav-transparent {
35
+ background-color: rgba(0, 0, 0, 0.8);
36
+ backdrop-filter: blur(10px);
37
+ }
38
+
39
+ .card-hover {
40
+ transition: all 0.3s ease;
41
+ border: none;
42
+ overflow: hidden;
43
+ }
44
+
45
+ .card-hover:hover {
46
+ transform: translateY(-10px);
47
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
48
+ }
49
+
50
+ .car-card-image {
51
+ height: 200px;
52
+ object-fit: cover;
53
+ transition: transform 0.5s ease;
54
+ }
55
+
56
+ .car-card:hover .car-card-image {
57
+ transform: scale(1.05);
58
+ }
59
+
60
+ .brand-logo {
61
+ filter: grayscale(100%);
62
+ transition: all 0.3s ease;
63
+ }
64
+
65
+ .brand-logo:hover {
66
+ filter: grayscale(0%);
67
+ transform: scale(1.1);
68
+ }
69
+
70
+ .btn-glow {
71
+ position: relative;
72
+ overflow: hidden;
73
+ z-index: 1;
74
+ }
75
+
76
+ .btn-glow:before {
77
+ content: '';
78
+ position: absolute;
79
+ top: 0;
80
+ left: -100%;
81
+ width: 100%;
82
+ height: 100%;
83
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
84
+ transition: left 0.7s ease;
85
+ z-index: -1;
86
+ }
87
+
88
+ .btn-glow:hover:before {
89
+ left: 100%;
90
+ }
91
+
92
+ .floating {
93
+ animation: floating 3s ease-in-out infinite;
94
+ }
95
+
96
+ @keyframes floating {
97
+ 0% { transform: translateY(0px); }
98
+ 50% { transform: translateY(-15px); }
99
+ 100% { transform: translateY(0px); }
100
+ }
101
+
102
+ .fade-in {
103
+ opacity: 0;
104
+ transform: translateY(30px);
105
+ transition: opacity 0.8s ease, transform 0.8s ease;
106
+ }
107
+
108
+ .fade-in.visible {
109
+ opacity: 1;
110
+ transform: translateY(0);
111
+ }
112
+
113
+ .counter {
114
+ font-family: 'Roboto Condensed', sans-serif;
115
+ font-weight: 700;
116
+ color: #1e40af;
117
+ }
118
+
119
+ .stats-bg {
120
+ background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
121
+ }
122
+
123
+ .typewriter h1 {
124
+ overflow: hidden;
125
+ border-right: .15em solid #3b82f6;
126
+ white-space: nowrap;
127
+ margin: 0 auto;
128
+ letter-spacing: .15em;
129
+ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
130
+ }
131
+
132
+ @keyframes typing {
133
+ from { width: 0 }
134
+ to { width: 100% }
135
+ }
136
+
137
+ @keyframes blink-caret {
138
+ from, to { border-color: transparent }
139
+ 50% { border-color: #3b82f6; }
140
+ }
141
+
142
+ .pulse {
143
+ animation: pulse 2s infinite;
144
+ }
145
+
146
+ @keyframes pulse {
147
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
148
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
149
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
150
+ }
151
+
152
+ .slide-in-left {
153
+ transform: translateX(-100%);
154
+ opacity: 0;
155
+ transition: transform 0.8s ease, opacity 0.8s ease;
156
+ }
157
+
158
+ .slide-in-left.visible {
159
+ transform: translateX(0);
160
+ opacity: 1;
161
+ }
162
+
163
+ .slide-in-right {
164
+ transform: translateX(100%);
165
+ opacity: 0;
166
+ transition: transform 0.8s ease, opacity 0.8s ease;
167
+ }
168
+
169
+ .slide-in-right.visible {
170
+ transform: translateX(0);
171
+ opacity: 1;
172
+ }
173
+
174
+ .testimonial-card {
175
+ background: white;
176
+ border-radius: 15px;
177
+ padding: 30px;
178
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
179
+ transition: all 0.3s ease;
180
+ position: relative;
181
+ }
182
+
183
+ .testimonial-card:hover {
184
+ transform: translateY(-10px);
185
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
186
+ }
187
+
188
+ .testimonial-card:before {
189
+ content: "";
190
+ position: absolute;
191
+ top: 0;
192
+ left: 0;
193
+ width: 5px;
194
+ height: 100%;
195
+ background: linear-gradient(to bottom, #1e40af, #3b82f6);
196
+ border-radius: 15px 0 0 15px;
197
+ }
198
+
199
+ .nav-link {
200
+ position: relative;
201
+ }
202
+
203
+ .nav-link:after {
204
+ content: '';
205
+ position: absolute;
206
+ width: 0;
207
+ height: 2px;
208
+ background: white;
209
+ left: 0;
210
+ bottom: -5px;
211
+ transition: width 0.3s ease;
212
+ }
213
+
214
+ .nav-link:hover:after {
215
+ width: 100%;
216
+ }
217
+ </style>
218
  </head>
219
+ <body>
220
  <!-- Navigation -->
221
+ <nav class="nav-transparent text-white shadow-lg fixed w-full z-50 transition-all duration-300">
222
  <div class="container mx-auto px-4">
223
  <div class="flex justify-between items-center py-4">
224
+ <a href="{{ url_for('index') }}" class="text-2xl font-bold flex items-center">
225
+ <i class="fas fa-car text-blue-400 mr-2"></i>
226
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">Carwala</span>
227
+ </a>
228
 
229
+ <div class="flex space-x-6 items-center">
230
  {% if session.get('user_id') %}
231
  {% if session.get('role') == 'admin' %}
232
+ <a href="{{ url_for('admin_dashboard') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
233
+ <i class="fas fa-cog mr-1"></i>Admin Dashboard
234
+ </a>
235
  {% elif session.get('role') == 'seller' %}
236
+ <a href="{{ url_for('seller_dashboard') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
237
+ <i class="fas fa-store mr-1"></i>Seller Dashboard
238
+ </a>
239
  {% endif %}
240
+ <a href="{{ url_for('index') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
241
+ <i class="fas fa-home mr-1"></i>Home
242
+ </a>
243
+ <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">
244
+ <i class="fas fa-sign-out-alt mr-1"></i>Logout
245
+ </a>
246
  {% else %}
247
+ <a href="{{ url_for('index') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
248
+ <i class="fas fa-home mr-1"></i>Home
249
+ </a>
250
+ <a href="{{ url_for('login') }}" class="nav-link hover:text-blue-300 px-3 py-2 rounded-lg transition-all duration-300">
251
+ <i class="fas fa-sign-in-alt mr-1"></i>Login
252
+ </a>
253
+ <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">
254
+ <i class="fas fa-user-plus mr-1"></i>Register
255
+ </a>
256
  {% endif %}
257
  </div>
258
  </div>
259
  </div>
260
  </nav>
261
 
262
+ <!-- Hero Section -->
263
+ <section class="hero-bg text-white pt-32 pb-20 relative overflow-hidden">
264
+ <div class="container mx-auto px-4">
265
+ <div class="flex flex-col lg:flex-row items-center">
266
+ <div class="lg:w-1/2 mb-12 lg:mb-0 slide-in-left">
267
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">
268
+ Find Your Perfect
269
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">Car</span>
270
+ with Ease
271
+ </h1>
272
+ <p class="text-lg mb-8 text-gray-300">
273
+ 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.
274
+ </p>
275
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
276
+ <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">
277
+ <i class="fas fa-search mr-2"></i>Browse Cars
278
+ </a>
279
+ <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">
280
+ <i class="fas fa-plus mr-2"></i>Sell Your Car
281
+ </a>
282
+ </div>
283
+ </div>
284
+ <div class="lg:w-1/2 flex justify-center">
285
+ <div class="relative">
286
+ <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
287
+ alt="Luxury Car"
288
+ class="rounded-2xl shadow-2xl floating max-w-md w-full">
289
+ <div class="absolute -bottom-5 -right-5 bg-gradient-to-r from-blue-500 to-cyan-400 text-white p-6 rounded-2xl shadow-2xl">
290
+ <div class="text-center">
291
+ <p class="text-3xl font-bold">2,500+</p>
292
+ <p class="text-sm">Cars Sold</p>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Animated background elements -->
301
+ <div class="absolute top-10 left-10 w-20 h-20 rounded-full bg-blue-500 opacity-10 floating" style="animation-delay: 0.5s;"></div>
302
+ <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-cyan-500 opacity-10 floating" style="animation-delay: 1s;"></div>
303
+ </section>
304
+
305
  <!-- Flash Messages -->
306
  {% with messages = get_flashed_messages() %}
307
  {% if messages %}
308
+ <div class="container mx-auto mt-24 px-4">
309
  {% for message in messages %}
310
+ <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">
311
+ <div class="flex items-center">
312
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
313
+ <span class="block sm:inline">{{ message }}</span>
314
+ </div>
315
  </div>
316
  {% endfor %}
317
  </div>
318
  {% endif %}
319
  {% endwith %}
320
 
321
+ <!-- Stats Section -->
322
+ <section class="py-12 stats-bg text-white">
323
+ <div class="container mx-auto px-4">
324
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
325
+ <div class="fade-in">
326
+ <p class="text-4xl font-bold counter" data-count="5000">0</p>
327
+ <p class="text-gray-300">Total Listings</p>
328
+ </div>
329
+ <div class="fade-in">
330
+ <p class="text-4xl font-bold counter" data-count="2500">0</p>
331
+ <p class="text-gray-300">Cars Sold</p>
332
+ </div>
333
+ <div class="fade-in">
334
+ <p class="text-4xl font-bold counter" data-count="120">0</p>
335
+ <p class="text-gray-300">Verified Dealers</p>
336
+ </div>
337
+ <div class="fade-in">
338
+ <p class="text-4xl font-bold counter" data-count="98">0</p>
339
+ <p class="text-gray-300">Satisfaction Rate</p>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </section>
344
+
345
  <!-- Main Content -->
346
+ <main class="container mx-auto px-4 py-12">
347
+ {% block content %}
348
+ <!-- Default content if not overridden -->
349
+ <div class="text-center py-12">
350
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Featured Cars</h2>
351
+ <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>
352
+
353
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
354
+ <!-- Car Card 1 -->
355
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden car-card card-hover">
356
+ <div class="relative overflow-hidden">
357
+ <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"
358
+ alt="Tesla Model S"
359
+ class="w-full h-56 object-cover car-card-image">
360
+ <div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium">
361
+ Hot Deal
362
+ </div>
363
+ </div>
364
+ <div class="p-6">
365
+ <h3 class="text-xl font-bold mb-2">Tesla Model S</h3>
366
+ <p class="text-gray-600 mb-4">2022 • Electric • 12,000 miles</p>
367
+ <div class="flex justify-between items-center">
368
+ <span class="text-2xl font-bold text-blue-600">$89,999</span>
369
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 btn-glow">
370
+ <i class="fas fa-eye mr-1"></i> View Details
371
+ </button>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Car Card 2 -->
377
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden car-card card-hover">
378
+ <div class="relative overflow-hidden">
379
+ <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"
380
+ alt="BMW X5"
381
+ class="w-full h-56 object-cover car-card-image">
382
+ </div>
383
+ <div class="p-6">
384
+ <h3 class="text-xl font-bold mb-2">BMW X5</h3>
385
+ <p class="text-gray-600 mb-4">2021 • SUV • 18,500 miles</p>
386
+ <div class="flex justify-between items-center">
387
+ <span class="text-2xl font-bold text-blue-600">$65,500</span>
388
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 btn-glow">
389
+ <i class="fas fa-eye mr-1"></i> View Details
390
+ </button>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Car Card 3 -->
396
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden car-card card-hover">
397
+ <div class="relative overflow-hidden">
398
+ <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"
399
+ alt="Ford Mustang"
400
+ class="w-full h-56 object-cover car-card-image">
401
+ <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium">
402
+ Just Added
403
+ </div>
404
+ </div>
405
+ <div class="p-6">
406
+ <h3 class="text-xl font-bold mb-2">Ford Mustang GT</h3>
407
+ <p class="text-gray-600 mb-4">2023 • Sports • 5,200 miles</p>
408
+ <div class="flex justify-between items-center">
409
+ <span class="text-2xl font-bold text-blue-600">$52,800</span>
410
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 btn-glow">
411
+ <i class="fas fa-eye mr-1"></i> View Details
412
+ </button>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <!-- Brands Section -->
419
+ <div class="mb-16">
420
+ <h2 class="text-3xl font-bold mb-8 text-gray-800">Trusted Brands</h2>
421
+ <div class="grid grid-cols-2 md:grid-cols-6 gap-8">
422
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
423
+ <i class="fas fa-car text-4xl text-gray-700"></i>
424
+ <span class="ml-2 text-xl font-bold">Toyota</span>
425
+ </div>
426
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
427
+ <i class="fas fa-car text-4xl text-gray-700"></i>
428
+ <span class="ml-2 text-xl font-bold">BMW</span>
429
+ </div>
430
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
431
+ <i class="fas fa-car text-4xl text-gray-700"></i>
432
+ <span class="ml-2 text-xl font-bold">Mercedes</span>
433
+ </div>
434
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
435
+ <i class="fas fa-car text-4xl text-gray-700"></i>
436
+ <span class="ml-2 text-xl font-bold">Tesla</span>
437
+ </div>
438
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
439
+ <i class="fas fa-car text-4xl text-gray-700"></i>
440
+ <span class="ml-2 text-xl font-bold">Ford</span>
441
+ </div>
442
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center brand-logo">
443
+ <i class="fas fa-car text-4xl text-gray-700"></i>
444
+ <span class="ml-2 text-xl font-bold">Audi</span>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- How It Works -->
450
+ <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-2xl p-8 md:p-12 mb-16">
451
+ <h2 class="text-3xl font-bold mb-8 text-gray-800 text-center">How It Works</h2>
452
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
453
+ <div class="text-center fade-in">
454
+ <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">
455
+ 1
456
+ </div>
457
+ <h3 class="text-xl font-bold mb-4">Browse or List</h3>
458
+ <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>
459
+ </div>
460
+ <div class="text-center fade-in">
461
+ <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">
462
+ 2
463
+ </div>
464
+ <h3 class="text-xl font-bold mb-4">Connect & Inspect</h3>
465
+ <p class="text-gray-600">Connect with buyers or sellers and schedule inspections at your convenience.</p>
466
+ </div>
467
+ <div class="text-center fade-in">
468
+ <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">
469
+ 3
470
+ </div>
471
+ <h3 class="text-xl font-bold mb-4">Complete Transaction</h3>
472
+ <p class="text-gray-600">Complete your purchase or sale with our secure payment and documentation support.</p>
473
+ </div>
474
+ </div>
475
+ </div>
476
+
477
+ <!-- Testimonials -->
478
+ <div class="mb-16">
479
+ <h2 class="text-3xl font-bold mb-8 text-gray-800 text-center">What Our Users Say</h2>
480
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
481
+ <div class="testimonial-card fade-in">
482
+ <div class="flex items-center mb-4">
483
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
484
+ <i class="fas fa-user text-blue-600 text-xl"></i>
485
+ </div>
486
+ <div>
487
+ <h4 class="font-bold">Alex Johnson</h4>
488
+ <p class="text-gray-600 text-sm">Car Buyer</p>
489
+ </div>
490
+ </div>
491
+ <p class="text-gray-700">"Found my dream car at an amazing price! The verification process gave me confidence in the purchase."</p>
492
+ </div>
493
+
494
+ <div class="testimonial-card fade-in">
495
+ <div class="flex items-center mb-4">
496
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
497
+ <i class="fas fa-user text-blue-600 text-xl"></i>
498
+ </div>
499
+ <div>
500
+ <h4 class="font-bold">Sarah Williams</h4>
501
+ <p class="text-gray-600 text-sm">Car Seller</p>
502
+ </div>
503
+ </div>
504
+ <p class="text-gray-700">"Sold my car within 3 days of listing! The platform made everything so simple and secure."</p>
505
+ </div>
506
+
507
+ <div class="testimonial-card fade-in">
508
+ <div class="flex items-center mb-4">
509
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
510
+ <i class="fas fa-user text-blue-600 text-xl"></i>
511
+ </div>
512
+ <div>
513
+ <h4 class="font-bold">Michael Chen</h4>
514
+ <p class="text-gray-600 text-sm">Dealership Owner</p>
515
+ </div>
516
+ </div>
517
+ <p class="text-gray-700">"Carwala has increased our sales by 40%. The quality of leads is far better than other platforms."</p>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ {% endblock %}
523
  </main>
524
 
525
  <!-- Footer -->
526
+ <footer class="bg-gray-900 text-white py-12">
527
+ <div class="container mx-auto px-4">
528
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
529
+ <div>
530
+ <a href="{{ url_for('index') }}" class="text-2xl font-bold flex items-center mb-6">
531
+ <i class="fas fa-car text-blue-400 mr-2"></i>
532
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">Carwala</span>
533
+ </a>
534
+ <p class="text-gray-400 mb-6">Your trusted marketplace for buying and selling cars. Quality, reliability, and satisfaction guaranteed.</p>
535
+ <div class="flex space-x-4">
536
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition-all duration-300">
537
+ <i class="fab fa-facebook-f"></i>
538
+ </a>
539
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-400 transition-all duration-300">
540
+ <i class="fab fa-twitter"></i>
541
+ </a>
542
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition-all duration-300">
543
+ <i class="fab fa-instagram"></i>
544
+ </a>
545
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-700 transition-all duration-300">
546
+ <i class="fab fa-linkedin-in"></i>
547
+ </a>
548
+ </div>
549
+ </div>
550
+
551
+ <div>
552
+ <h3 class="text-lg font-bold mb-6">Quick Links</h3>
553
+ <ul class="space-y-3">
554
+ <li><a href="{{ url_for('index') }}" class="text-gray-400 hover:text-white transition-all duration-300">Home</a></li>
555
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">Browse Cars</a></li>
556
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">Sell Your Car</a></li>
557
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">About Us</a></li>
558
+ </ul>
559
+ </div>
560
+
561
+ <div>
562
+ <h3 class="text-lg font-bold mb-6">Account</h3>
563
+ <ul class="space-y-3">
564
+ {% if session.get('user_id') %}
565
+ <li><a href="{{ url_for('logout') }}" class="text-gray-400 hover:text-white transition-all duration-300">Logout</a></li>
566
+ {% else %}
567
+ <li><a href="{{ url_for('login') }}" class="text-gray-400 hover:text-white transition-all duration-300">Login</a></li>
568
+ <li><a href="{{ url_for('register') }}" class="text-gray-400 hover:text-white transition-all duration-300">Register</a></li>
569
+ {% endif %}
570
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">My Profile</a></li>
571
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all duration-300">My Listings</a></li>
572
+ </ul>
573
+ </div>
574
+
575
+ <div>
576
+ <h3 class="text-lg font-bold mb-6">Contact Us</h3>
577
+ <ul class="space-y-3 text-gray-400">
578
+ <li class="flex items-center">
579
+ <i class="fas fa-map-marker-alt mr-3 text-blue-400"></i>
580
+ 123 Auto Street, City, State 12345
581
+ </li>
582
+ <li class="flex items-center">
583
+ <i class="fas fa-phone mr-3 text-blue-400"></i>
584
+ +1 (555) 123-4567
585
+ </li>
586
+ <li class="flex items-center">
587
+ <i class="fas fa-envelope mr-3 text-blue-400"></i>
588
+ info@carwala.com
589
+ </li>
590
+ </ul>
591
+ </div>
592
+ </div>
593
+
594
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
595
+ <p>&copy; 2024 Carwala. All rights reserved.</p>
596
+ </div>
597
  </div>
598
  </footer>
599
 
600
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
601
+
602
+ <script>
603
+ // Animation on scroll
604
+ document.addEventListener('DOMContentLoaded', function() {
605
+ // Fade in elements on scroll
606
+ const fadeElements = document.querySelectorAll('.fade-in');
607
+ const slideLeftElements = document.querySelectorAll('.slide-in-left');
608
+ const slideRightElements = document.querySelectorAll('.slide-in-right');
609
+
610
+ const observer = new IntersectionObserver((entries) => {
611
+ entries.forEach(entry => {
612
+ if (entry.isIntersecting) {
613
+ entry.target.classList.add('visible');
614
+ }
615
+ });
616
+ }, { threshold: 0.1 });
617
+
618
+ fadeElements.forEach(el => observer.observe(el));
619
+ slideLeftElements.forEach(el => observer.observe(el));
620
+ slideRightElements.forEach(el => observer.observe(el));
621
+
622
+ // Animated counters
623
+ const counters = document.querySelectorAll('.counter');
624
+ const speed = 200;
625
+
626
+ counters.forEach(counter => {
627
+ const updateCount = () => {
628
+ const target = +counter.getAttribute('data-count');
629
+ const count = +counter.innerText;
630
+
631
+ const inc = target / speed;
632
+
633
+ if (count < target) {
634
+ counter.innerText = Math.ceil(count + inc);
635
+ setTimeout(updateCount, 20);
636
+ } else {
637
+ counter.innerText = target;
638
+ }
639
+ };
640
+
641
+ updateCount();
642
+ });
643
+
644
+ // Navbar transparency on scroll
645
+ const navbar = document.querySelector('nav');
646
+ window.addEventListener('scroll', function() {
647
+ if (window.scrollY > 100) {
648
+ navbar.classList.remove('nav-transparent');
649
+ navbar.classList.add('bg-gray-900');
650
+ } else {
651
+ navbar.classList.add('nav-transparent');
652
+ navbar.classList.remove('bg-gray-900');
653
+ }
654
+ });
655
+
656
+ // Make hero section visible immediately
657
+ document.querySelector('.slide-in-left')?.classList.add('visible');
658
+
659
+ // Add hover effect to cards
660
+ const cards = document.querySelectorAll('.card-hover');
661
+ cards.forEach(card => {
662
+ card.addEventListener('mouseenter', function() {
663
+ this.style.transform = 'translateY(-10px)';
664
+ });
665
+
666
+ card.addEventListener('mouseleave', function() {
667
+ this.style.transform = 'translateY(0)';
668
+ });
669
+ });
670
+ });
671
+ </script>
672
  </body>
673
  </html>