Hugging Face's logo

Spaces:
SauravCh11
/
chaudhariauto
Running

App Files Community
SauravCh11 commited on
Commit
4d4f9d4
·
verified ·
1 Parent(s): 0bd67a0

Add 2 files

Browse files
Files changed (1) hide show
  1. index.html +604 -38
index.html CHANGED
@@ -1,41 +1,607 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=SauravCh11/chaudhariauto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chaudhari Auto - Premium Bike Parts & Seat Covers</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero {
18
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
19
+ background-size: cover;
20
+ background-position: center;
21
+ }
22
+
23
+ .part-card:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
26
+ }
27
+
28
+ .part-card {
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .testimonial-card {
33
+ background: rgba(255, 255, 255, 0.1);
34
+ backdrop-filter: blur(10px);
35
+ }
36
+
37
+ .category-btn.active {
38
+ background-color: #f59e0b;
39
+ color: white;
40
+ }
41
+
42
+ .floating-whatsapp {
43
+ position: fixed;
44
+ bottom: 30px;
45
+ right: 30px;
46
+ z-index: 100;
47
+ }
48
  </style>
49
+ </head>
50
+ <body class="bg-gray-50">
51
+ <!-- Top Bar -->
52
+ <div class="bg-orange-600 text-white py-2 px-4">
53
+ <div class="container mx-auto flex justify-between items-center">
54
+ <div class="flex items-center space-x-4">
55
+ <div class="flex items-center">
56
+ <i class="fas fa-phone-alt mr-2"></i>
57
+ <span>+91 98765 43210</span>
58
+ </div>
59
+ <div class="flex items-center">
60
+ <i class="fas fa-envelope mr-2"></i>
61
+ <span>[email protected]</span>
62
+ </div>
63
+ </div>
64
+ <div class="flex items-center space-x-4">
65
+ <a href="#" class="hover:text-gray-200"><i class="fab fa-facebook-f"></i></a>
66
+ <a href="#" class="hover:text-gray-200"><i class="fab fa-instagram"></i></a>
67
+ <a href="#" class="hover:text-gray-200"><i class="fab fa-whatsapp"></i></a>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Navigation -->
73
+ <nav class="bg-white shadow-md sticky top-0 z-50">
74
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
75
+ <div class="flex items-center">
76
+ <div class="mr-2">
77
+ <i class="fas fa-motorcycle text-orange-500 text-3xl"></i>
78
+ </div>
79
+ <div>
80
+ <h1 class="text-2xl font-bold text-gray-800">Chaudhari <span class="text-orange-500">Auto</span></h1>
81
+ <p class="text-xs text-gray-600">Since 2024</p>
82
+ </div>
83
+ </div>
84
+
85
+ <div class="hidden md:flex space-x-8">
86
+ <a href="#home" class="text-gray-800 hover:text-orange-500 font-medium">Home</a>
87
+ <a href="#products" class="text-gray-800 hover:text-orange-500 font-medium">Products</a>
88
+ <a href="#about" class="text-gray-800 hover:text-orange-500 font-medium">About</a>
89
+ <a href="#testimonials" class="text-gray-800 hover:text-orange-500 font-medium">Testimonials</a>
90
+ <a href="#contact" class="text-gray-800 hover:text-orange-500 font-medium">Contact</a>
91
+ </div>
92
+
93
+ <div class="md:hidden">
94
+ <button id="menu-toggle" class="text-gray-800 focus:outline-none">
95
+ <i class="fas fa-bars text-2xl"></i>
96
+ </button>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Mobile Menu -->
101
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg">
102
+ <a href="#home" class="block py-2 text-gray-800 hover:text-orange-500">Home</a>
103
+ <a href="#products" class="block py-2 text-gray-800 hover:text-orange-500">Products</a>
104
+ <a href="#about" class="block py-2 text-gray-800 hover:text-orange-500">About</a>
105
+ <a href="#testimonials" class="block py-2 text-gray-800 hover:text-orange-500">Testimonials</a>
106
+ <a href="#contact" class="block py-2 text-gray-800 hover:text-orange-500">Contact</a>
107
+ </div>
108
+ </nav>
109
+
110
+ <!-- Hero Section -->
111
+ <section id="home" class="hero min-h-screen flex items-center justify-center text-white">
112
+ <div class="container mx-auto px-4 text-center">
113
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Premium Bike Parts & Seat Covers</h1>
114
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Your one-stop shop for high-quality motorcycle accessories and parts. Serving customers with excellence since 2024.</p>
115
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
116
+ <a href="#products" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Browse Products</a>
117
+ <a href="#contact" class="bg-transparent hover:bg-white hover:text-gray-900 border-2 border-white text-white font-bold py-3 px-6 rounded-lg transition duration-300">Contact Us</a>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- Featured Products -->
123
+ <section id="products" class="py-16 bg-white">
124
+ <div class="container mx-auto px-4">
125
+ <div class="text-center mb-12">
126
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Products</h2>
127
+ <div class="w-20 h-1 bg-orange-500 mx-auto"></div>
128
+ <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Explore our wide range of premium bike parts and custom seat covers designed for comfort and durability.</p>
129
+ </div>
130
+
131
+ <!-- Category Filter -->
132
+ <div class="flex flex-wrap justify-center gap-3 mb-8">
133
+ <button class="category-btn active px-4 py-2 rounded-full bg-gray-100 hover:bg-orange-500 hover:text-white transition" data-category="all">All Products</button>
134
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-100 hover:bg-orange-500 hover:text-white transition" data-category="seat-covers">Seat Covers</button>
135
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-100 hover:bg-orange-500 hover:text-white transition" data-category="engine-parts">Engine Parts</button>
136
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-100 hover:bg-orange-500 hover:text-white transition" data-category="accessories">Accessories</button>
137
+ </div>
138
+
139
+ <!-- Products Grid -->
140
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
141
+ <!-- Product 1 -->
142
+ <div class="part-card bg-white rounded-lg overflow-hidden shadow-md" data-category="seat-covers">
143
+ <div class="relative">
144
+ <img src="https://images.unsplash.com/photo-1599741848471-8b68e3c798e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Premium Bike Seat Cover" class="w-full h-48 object-cover">
145
+ <div class="absolute top-2 right-2 bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded">Bestseller</div>
146
+ </div>
147
+ <div class="p-4">
148
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Premium Leather Seat Cover</h3>
149
+ <p class="text-gray-600 text-sm mb-3">Waterproof and durable leather seat cover for all bike models.</p>
150
+ <div class="flex justify-between items-center">
151
+ <span class="text-orange-500 font-bold">₹1,299</span>
152
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition">Add to Cart</button>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Product 2 -->
158
+ <div class="part-card bg-white rounded-lg overflow-hidden shadow-md" data-category="engine-parts">
159
+ <div class="relative">
160
+ <img src="https://images.unsplash.com/photo-1580310614697-2a9b9a0b03a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Engine Piston" class="w-full h-48 object-cover">
161
+ </div>
162
+ <div class="p-4">
163
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">High Performance Piston Kit</h3>
164
+ <p class="text-gray-600 text-sm mb-3">Complete piston kit for 150-200cc bikes. OEM quality.</p>
165
+ <div class="flex justify-between items-center">
166
+ <span class="text-orange-500 font-bold">₹2,499</span>
167
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition">Add to Cart</button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Product 3 -->
173
+ <div class="part-card bg-white rounded-lg overflow-hidden shadow-md" data-category="accessories">
174
+ <div class="relative">
175
+ <img src="https://images.unsplash.com/photo-1558980394-4c7c9299fe96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bike Handle Grips" class="w-full h-48 object-cover">
176
+ </div>
177
+ <div class="p-4">
178
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Premium Handle Grips</h3>
179
+ <p class="text-gray-600 text-sm mb-3">Anti-slip, ergonomic design for better control and comfort.</p>
180
+ <div class="flex justify-between items-center">
181
+ <span class="text-orange-500 font-bold">₹499</span>
182
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition">Add to Cart</button>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Product 4 -->
188
+ <div class="part-card bg-white rounded-lg overflow-hidden shadow-md" data-category="seat-covers">
189
+ <div class="relative">
190
+ <img src="https://images.unsplash.com/photo-1568605114967-8130f482d6c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Custom Bike Seat" class="w-full h-48 object-cover">
191
+ <div class="absolute top-2 right-2 bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded">New</div>
192
+ </div>
193
+ <div class="p-4">
194
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Custom Stitched Seat Cover</h3>
195
+ <p class="text-gray-600 text-sm mb-3">Hand-stitched with premium materials for ultimate comfort.</p>
196
+ <div class="flex justify-between items-center">
197
+ <span class="text-orange-500 font-bold">₹1,799</span>
198
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition">Add to Cart</button>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Product 5 -->
204
+ <div class="part-card bg-white rounded-lg overflow-hidden shadow-md" data-category="engine-parts">
205
+ <div class="relative">
206
+ <img src="https://images.unsplash.com/photo-1558981286-6b9826ba576e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bike Chain" class="w-full h-48 object-cover">
207
+ </div>
208
+ <div class="p-4">
209
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">O-Ring Chain Kit</h3>
210
+ <p class="text-gray-600 text-sm mb-3">High-strength chain with O-ring seals for longer life.</p>
211
+ <div class="flex justify-between items-center">
212
+ <span class="text-orange-500 font-bold">₹1,599</span>
213
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition">Add to Cart</button>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Product 6 -->
219
+ <div class="part-card bg-white rounded-lg overflow-hidden shadow-md" data-category="accessories">
220
+ <div class="relative">
221
+ <img src="https://images.unsplash.com/photo-1558981852-426c6c22d060?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Bike Mirrors" class="w-full h-48 object-cover">
222
+ </div>
223
+ <div class="p-4">
224
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Wide View Mirrors</h3>
225
+ <p class="text-gray-600 text-sm mb-3">Convex design for maximum rear visibility and safety.</p>
226
+ <div class="flex justify-between items-center">
227
+ <span class="text-orange-500 font-bold">₹699</span>
228
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition">Add to Cart</button>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Product 7 -->
234
+ <div class="part-card bg-white rounded-lg overflow-hidden shadow-md" data-category="seat-covers">
235
+ <div class="relative">
236
+ <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Gel Seat Cover" class="w-full h-48 object-cover">
237
+ </div>
238
+ <div class="p-4">
239
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Gel Comfort Seat Cover</h3>
240
+ <p class="text-gray-600 text-sm mb-3">Memory foam gel technology for long ride comfort.</p>
241
+ <div class="flex justify-between items-center">
242
+ <span class="text-orange-500 font-bold">₹2,299</span>
243
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition">Add to Cart</button>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Product 8 -->
249
+ <div class="part-card bg-white rounded-lg overflow-hidden shadow-md" data-category="engine-parts">
250
+ <div class="relative">
251
+ <img src="https://images.unsplash.com/photo-1558980394-4c7c9299fe96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Air Filter" class="w-full h-48 object-cover">
252
+ </div>
253
+ <div class="p-4">
254
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">High Flow Air Filter</h3>
255
+ <p class="text-gray-600 text-sm mb-3">Increases airflow while protecting your engine.</p>
256
+ <div class="flex justify-between items-center">
257
+ <span class="text-orange-500 font-bold">₹899</span>
258
+ <button class="bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition">Add to Cart</button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="text-center mt-10">
265
+ <a href="#" class="inline-block bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-8 rounded-lg transition duration-300">View All Products</a>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- About Section -->
271
+ <section id="about" class="py-16 bg-gray-100">
272
+ <div class="container mx-auto px-4">
273
+ <div class="flex flex-col md:flex-row items-center">
274
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
275
+ <img src="https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bapu Chaudhari" class="rounded-lg shadow-lg w-full">
276
+ </div>
277
+ <div class="md:w-1/2">
278
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">About Chaudhari Auto</h2>
279
+ <div class="w-20 h-1 bg-orange-500 mb-6"></div>
280
+ <p class="text-gray-600 mb-4">Founded in 2024 by <span class="font-semibold">Bapu Chaudhari</span>, Chaudhari Auto has grown from a small roadside shop to one of the most trusted names in bike parts and accessories in the region.</p>
281
+ <p class="text-gray-600 mb-4">With over 25 years of experience, we specialize in providing high-quality motorcycle parts, custom seat covers, and accessories for all major bike brands.</p>
282
+ <p class="text-gray-600 mb-6">Our commitment to quality products, fair pricing, and excellent customer service has earned us a loyal customer base that keeps coming back.</p>
283
+
284
+ <div class="grid grid-cols-2 gap-4 mb-6">
285
+ <div class="flex items-center">
286
+ <div class="bg-orange-100 p-3 rounded-full mr-3">
287
+ <i class="fas fa-check-circle text-orange-500"></i>
288
+ </div>
289
+ <span class="text-gray-700 font-medium">Quality Products</span>
290
+ </div>
291
+ <div class="flex items-center">
292
+ <div class="bg-orange-100 p-3 rounded-full mr-3">
293
+ <i class="fas fa-check-circle text-orange-500"></i>
294
+ </div>
295
+ <span class="text-gray-700 font-medium">Fair Pricing</span>
296
+ </div>
297
+ <div class="flex items-center">
298
+ <div class="bg-orange-100 p-3 rounded-full mr-3">
299
+ <i class="fas fa-check-circle text-orange-500"></i>
300
+ </div>
301
+ <span class="text-gray-700 font-medium">Expert Advice</span>
302
+ </div>
303
+ <div class="flex items-center">
304
+ <div class="bg-orange-100 p-3 rounded-full mr-3">
305
+ <i class="fas fa-check-circle text-orange-500"></i>
306
+ </div>
307
+ <span class="text-gray-700 font-medium">Warranty</span>
308
+ </div>
309
+ </div>
310
+
311
+ <a href="#contact" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Visit Our Store</a>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </section>
316
+
317
+ <!-- Testimonials -->
318
+ <section id="testimonials" class="py-16 bg-gray-800 text-white">
319
+ <div class="container mx-auto px-4">
320
+ <div class="text-center mb-12">
321
+ <h2 class="text-3xl font-bold mb-4">What Our Customers Say</h2>
322
+ <div class="w-20 h-1 bg-orange-500 mx-auto"></div>
323
+ </div>
324
+
325
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
326
+ <!-- Testimonial 1 -->
327
+ <div class="testimonial-card p-6 rounded-lg">
328
+ <div class="flex items-center mb-4">
329
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
330
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer" class="w-full h-full object-cover">
331
+ </div>
332
+ <div>
333
+ <h4 class="font-bold">Rajesh Kumar</h4>
334
+ <div class="flex text-orange-400">
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ <i class="fas fa-star"></i>
339
+ <i class="fas fa-star"></i>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ <p class="text-gray-300">"The leather seat cover I bought from Chaudhari Auto has completely transformed my riding experience. It's been 2 years and still looks new!"</p>
344
+ </div>
345
+
346
+ <!-- Testimonial 2 -->
347
+ <div class="testimonial-card p-6 rounded-lg">
348
+ <div class="flex items-center mb-4">
349
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
350
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer" class="w-full h-full object-cover">
351
+ </div>
352
+ <div>
353
+ <h4 class="font-bold">Priya Sharma</h4>
354
+ <div class="flex text-orange-400">
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ <i class="fas fa-star-half-alt"></i>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <p class="text-gray-300">"Bapu Chaudhari helped me find the perfect parts for my vintage bike restoration. His knowledge is incredible and prices are very reasonable."</p>
364
+ </div>
365
+
366
+ <!-- Testimonial 3 -->
367
+ <div class="testimonial-card p-6 rounded-lg">
368
+ <div class="flex items-center mb-4">
369
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
370
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Customer" class="w-full h-full object-cover">
371
+ </div>
372
+ <div>
373
+ <h4 class="font-bold">Vikram Singh</h4>
374
+ <div class="flex text-orange-400">
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star"></i>
379
+ <i class="fas fa-star"></i>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <p class="text-gray-300">"I've been coming to Chaudhari Auto for all my bike needs for over 10 years. Never had a single issue with any product I've purchased."</p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </section>
388
+
389
+ <!-- Contact Section -->
390
+ <section id="contact" class="py-16 bg-white">
391
+ <div class="container mx-auto px-4">
392
+ <div class="text-center mb-12">
393
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Contact Us</h2>
394
+ <div class="w-20 h-1 bg-orange-500 mx-auto"></div>
395
+ <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Visit our store or get in touch for any inquiries about our products and services.</p>
396
+ </div>
397
+
398
+ <div class="flex flex-col md:flex-row gap-8">
399
+ <div class="md:w-1/2">
400
+ <div class="bg-gray-100 p-6 rounded-lg shadow-md h-full">
401
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Our Store</h3>
402
+
403
+ <div class="mb-6">
404
+ <div class="flex items-start mb-4">
405
+ <div class="bg-orange-100 p-2 rounded-full mr-3">
406
+ <i class="fas fa-map-marker-alt text-orange-500"></i>
407
+ </div>
408
+ <div>
409
+ <h4 class="font-semibold text-gray-800">Address</h4>
410
+ <p class="text-gray-600">123 Auto Market, Main Road<br>Mumbai, Maharashtra 400001</p>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="flex items-start mb-4">
415
+ <div class="bg-orange-100 p-2 rounded-full mr-3">
416
+ <i class="fas fa-phone-alt text-orange-500"></i>
417
+ </div>
418
+ <div>
419
+ <h4 class="font-semibold text-gray-800">Phone</h4>
420
+ <p class="text-gray-600">+91 98765 43210<br>+91 22 1234 5678</p>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="flex items-start">
425
+ <div class="bg-orange-100 p-2 rounded-full mr-3">
426
+ <i class="fas fa-envelope text-orange-500"></i>
427
+ </div>
428
+ <div>
429
+ <h4 class="font-semibold text-gray-800">Email</h4>
430
+ <p class="text-gray-600">[email protected]<br>[email protected]</p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Business Hours</h3>
436
+ <div class="space-y-2">
437
+ <div class="flex justify-between">
438
+ <span class="text-gray-700">Monday - Friday</span>
439
+ <span class="text-gray-600">9:00 AM - 8:00 PM</span>
440
+ </div>
441
+ <div class="flex justify-between">
442
+ <span class="text-gray-700">Saturday</span>
443
+ <span class="text-gray-600">9:00 AM - 6:00 PM</span>
444
+ </div>
445
+ <div class="flex justify-between">
446
+ <span class="text-gray-700">Sunday</span>
447
+ <span class="text-gray-600">Closed</span>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="md:w-1/2">
454
+ <div class="bg-gray-100 p-6 rounded-lg shadow-md h-full">
455
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Send Us a Message</h3>
456
+ <form>
457
+ <div class="mb-4">
458
+ <label for="name" class="block text-gray-700 mb-2">Your Name</label>
459
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
460
+ </div>
461
+ <div class="mb-4">
462
+ <label for="email" class="block text-gray-700 mb-2">Email Address</label>
463
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
464
+ </div>
465
+ <div class="mb-4">
466
+ <label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
467
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
468
+ </div>
469
+ <div class="mb-4">
470
+ <label for="message" class="block text-gray-700 mb-2">Your Message</label>
471
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"></textarea>
472
+ </div>
473
+ <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Send Message</button>
474
+ </form>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </section>
480
+
481
+ <!-- Map -->
482
+ <div class="h-96 w-full">
483
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3771.7159111252!2d72.8321503149006!3d19.05272298705692!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c8af04a0e5d1%3A0x654f2e4cba72e4e4!2sAuto%20Market%2C%20Mumbai!5e0!3m2!1sen!2sin!4v1624960000000!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
484
+ </div>
485
+
486
+ <!-- Footer -->
487
+ <footer class="bg-gray-900 text-white py-12">
488
+ <div class="container mx-auto px-4">
489
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
490
+ <div>
491
+ <div class="flex items-center mb-4">
492
+ <div class="mr-2">
493
+ <i class="fas fa-motorcycle text-orange-500 text-2xl"></i>
494
+ </div>
495
+ <div>
496
+ <h3 class="text-xl font-bold">Chaudhari <span class="text-orange-500">Auto</span></h3>
497
+ <p class="text-xs text-gray-400">Since 2024</p>
498
+ </div>
499
+ </div>
500
+ <p class="text-gray-400 mb-4">Your trusted partner for premium bike parts and accessories.</p>
501
+ <div class="flex space-x-4">
502
+ <a href="#" class="text-gray-400 hover:text-orange-500"><i class="fab fa-facebook-f"></i></a>
503
+ <a href="#" class="text-gray-400 hover:text-orange-500"><i class="fab fa-instagram"></i></a>
504
+ <a href="#" class="text-gray-400 hover:text-orange-500"><i class="fab fa-twitter"></i></a>
505
+ <a href="#" class="text-gray-400 hover:text-orange-500"><i class="fab fa-youtube"></i></a>
506
+ </div>
507
+ </div>
508
+
509
+ <div>
510
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
511
+ <ul class="space-y-2">
512
+ <li><a href="#home" class="text-gray-400 hover:text-orange-500 transition">Home</a></li>
513
+ <li><a href="#products" class="text-gray-400 hover:text-orange-500 transition">Products</a></li>
514
+ <li><a href="#about" class="text-gray-400 hover:text-orange-500 transition">About Us</a></li>
515
+ <li><a href="#testimonials" class="text-gray-400 hover:text-orange-500 transition">Testimonials</a></li>
516
+ <li><a href="#contact" class="text-gray-400 hover:text-orange-500 transition">Contact</a></li>
517
+ </ul>
518
+ </div>
519
+
520
+ <div>
521
+ <h4 class="text-lg font-semibold mb-4">Products</h4>
522
+ <ul class="space-y-2">
523
+ <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Seat Covers</a></li>
524
+ <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Engine Parts</a></li>
525
+ <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Accessories</a></li>
526
+ <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Tires & Wheels</a></li>
527
+ <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Maintenance Kits</a></li>
528
+ </ul>
529
+ </div>
530
+
531
+ <div>
532
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
533
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest products and offers.</p>
534
+ <form class="flex">
535
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-800">
536
+ <button type="submit" class="bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-r-lg transition">
537
+ <i class="fas fa-paper-plane"></i>
538
+ </button>
539
+ </form>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
544
+ <p class="text-gray-400 text-sm">© 2023 Chaudhari Auto. All rights reserved.</p>
545
+ <div class="flex space-x-6 mt-4 md:mt-0">
546
+ <a href="#" class="text-gray-400 hover:text-orange-500 text-sm">Privacy Policy</a>
547
+ <a href="#" class="text-gray-400 hover:text-orange-500 text-sm">Terms of Service</a>
548
+ <a href="#" class="text-gray-400 hover:text-orange-500 text-sm">Shipping Policy</a>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </footer>
553
+
554
+ <!-- Floating WhatsApp Button -->
555
+ <div class="floating-whatsapp">
556
+ <a href="https://wa.me/919876543210" class="bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-lg flex items-center justify-center transition">
557
+ <i class="fab fa-whatsapp text-2xl"></i>
558
+ </a>
559
+ </div>
560
+
561
+ <script>
562
+ // Mobile Menu Toggle
563
+ document.getElementById('menu-toggle').addEventListener('click', function() {
564
+ document.getElementById('mobile-menu').classList.toggle('hidden');
565
+ });
566
+
567
+ // Category Filter
568
+ const categoryBtns = document.querySelectorAll('.category-btn');
569
+ const partCards = document.querySelectorAll('.part-card');
570
+
571
+ categoryBtns.forEach(btn => {
572
+ btn.addEventListener('click', function() {
573
+ // Remove active class from all buttons
574
+ categoryBtns.forEach(b => b.classList.remove('active'));
575
+
576
+ // Add active class to clicked button
577
+ this.classList.add('active');
578
+
579
+ const category = this.dataset.category;
580
+
581
+ // Filter products
582
+ partCards.forEach(card => {
583
+ if (category === 'all' || card.dataset.category === category) {
584
+ card.style.display = 'block';
585
+ } else {
586
+ card.style.display = 'none';
587
+ }
588
+ });
589
+ });
590
+ });
591
+
592
+ // Smooth scrolling for anchor links
593
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
594
+ anchor.addEventListener('click', function (e) {
595
+ e.preventDefault();
596
+
597
+ // Close mobile menu if open
598
+ document.getElementById('mobile-menu').classList.add('hidden');
599
+
600
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
601
+ behavior: 'smooth'
602
+ });
603
+ });
604
+ });
605
+ </script>
606
+ <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=SauravCh11/chaudhariauto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
607
+ </html>