Hugging Face's logo

Spaces:
dotkaio
/
emin
Running

App Files Community
dotkaio commited on
Commit
051126a
·
verified ·
1 Parent(s): c8fb291

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +565 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Emin
3
- emoji: 🏆
4
- colorFrom: blue
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: emin
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,565 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>Emin Aghasanov - Premium Car Dealer</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-gradient {
18
+ background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%);
19
+ }
20
+
21
+ .car-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .testimonial-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .testimonial-card:hover {
31
+ transform: scale(1.03);
32
+ }
33
+
34
+ .contact-input:focus {
35
+ outline: none;
36
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50">
41
+ <!-- Navigation -->
42
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
43
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
44
+ <div class="flex justify-between h-16">
45
+ <div class="flex items-center">
46
+ <div class="flex-shrink-0 flex items-center">
47
+ <i class="fas fa-car text-red-600 text-2xl mr-2"></i>
48
+ <span class="text-xl font-bold text-gray-900">Emin's Auto</span>
49
+ </div>
50
+ </div>
51
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
52
+ <a href="#home" class="text-gray-900 hover:text-red-600 px-3 py-2 text-sm font-medium">Home</a>
53
+ <a href="#inventory" class="text-gray-900 hover:text-red-600 px-3 py-2 text-sm font-medium">Inventory</a>
54
+ <a href="#about" class="text-gray-900 hover:text-red-600 px-3 py-2 text-sm font-medium">About</a>
55
+ <a href="#testimonials" class="text-gray-900 hover:text-red-600 px-3 py-2 text-sm font-medium">Testimonials</a>
56
+ <a href="#contact" class="text-gray-900 hover:text-red-600 px-3 py-2 text-sm font-medium">Contact</a>
57
+ </div>
58
+ <div class="md:hidden flex items-center">
59
+ <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900 focus:outline-none">
60
+ <i class="fas fa-bars text-xl"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- Mobile menu -->
67
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
68
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
69
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-red-600 hover:bg-gray-50">Home</a>
70
+ <a href="#inventory" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-red-600 hover:bg-gray-50">Inventory</a>
71
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-red-600 hover:bg-gray-50">About</a>
72
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-red-600 hover:bg-gray-50">Testimonials</a>
73
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-red-600 hover:bg-gray-50">Contact</a>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+
78
+ <!-- Hero Section -->
79
+ <section id="home" class="relative bg-gray-900 text-white">
80
+ <div class="absolute inset-0">
81
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Luxury cars">
82
+ <div class="absolute inset-0 hero-gradient"></div>
83
+ </div>
84
+ <div class="relative max-w-7xl mx-auto px-4 py-24 sm:px-6 lg:px-8">
85
+ <div class="md:w-1/2">
86
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">Premium Cars For Discerning Buyers</h1>
87
+ <p class="text-lg md:text-xl mb-8">Emin Aghasanov brings you the finest selection of luxury and performance vehicles with unmatched service.</p>
88
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
89
+ <a href="#inventory" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium text-center transition duration-300">View Inventory</a>
90
+ <a href="#contact" class="bg-transparent hover:bg-white hover:text-gray-900 text-white border border-white px-6 py-3 rounded-lg font-medium text-center transition duration-300">Contact Emin</a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <!-- Featured Cars -->
97
+ <section id="inventory" class="py-16 bg-white">
98
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
99
+ <div class="text-center mb-12">
100
+ <h2 class="text-3xl font-bold text-gray-900 mb-2">Featured Inventory</h2>
101
+ <div class="w-20 h-1 bg-red-600 mx-auto"></div>
102
+ <p class="mt-4 text-gray-600 max-w-2xl mx-auto">Explore our curated selection of premium vehicles. Each car undergoes rigorous inspection to ensure top quality.</p>
103
+ </div>
104
+
105
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
106
+ <!-- Car 1 -->
107
+ <div class="car-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
108
+ <div class="relative">
109
+ <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mercedes-Benz S-Class">
110
+ <div class="absolute top-4 right-4 bg-red-600 text-white px-3 py-1 rounded-full text-xs font-semibold">New Arrival</div>
111
+ </div>
112
+ <div classp-6">
113
+ <div class="flex justify-between items-start">
114
+ <div>
115
+ <h3 class="text-xl font-bold text-gray-900">Mercedes-Benz S-Class</h3>
116
+ <p class="text-gray-600">2023 Model</p>
117
+ </div>
118
+ <span class="text-xl font-bold text-red-600">$109,900</span>
119
+ </div>
120
+ <div class="mt-4 flex flex-wrap gap-2">
121
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Luxury</span>
122
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">V8 Engine</span>
123
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">12K Miles</span>
124
+ </div>
125
+ <div class="mt-6 flex justify-between items-center">
126
+ <div class="flex space-x-2 text-gray-500">
127
+ <span class="flex items-center"><i class="fas fa-gas-pump mr-1"></i> 22 MPG</span>
128
+ <span class="flex items-center"><i class="fas fa-tachometer-alt mr-1"></i> 4.5s 0-60</span>
129
+ <span class="flex items-center"><i class="fas fa-chair mr-1"></i> 5</span>
130
+ </div>
131
+ <button class="text-red-600 hover:text-red-700 font-medium">View Details</button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Car 2 -->
137
+ <div class="car-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
138
+ <div class="relative">
139
+ <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Porsche 911 Turbo S">
140
+ <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-xs font-semibold">Certified</div>
141
+ </div>
142
+ <div class="p-6">
143
+ <div class="flex justify-between items-start">
144
+ <div>
145
+ <h3 class="text-xl font-bold text-gray-900">Porsche 911 Turbo S</h3>
146
+ <p class="text-gray-600">2022 Model</p>
147
+ </div>
148
+ <span class="text-xl font-bold text-red-600">$189,500</span>
149
+ </div>
150
+ <div class="mt-4 flex flex-wrap gap-2">
151
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Performance</span>
152
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Twin-Turbo</span>
153
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">8K Miles</span>
154
+ </div>
155
+ <div class="mt-6 flex justify-between items-center">
156
+ <div class="flex space-x-2 text-gray-500">
157
+ <span class="flex items-center"><i class="fas fa-gas-pump mr-1"></i> 18 MPG</span>
158
+ <span class="flex items-center"><i class="fas fa-tachometer-alt mr-1"></i> 2.6s 0-60</span>
159
+ <span class="flex items-center"><i class="fas fa-chair mr-1"></i> 4</span>
160
+ </div>
161
+ <button class="text-red-600 hover:text-red-700 font-medium">View Details</button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Car 3 -->
167
+ <div class="car-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
168
+ <div class="relative">
169
+ <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="Range Rover Autobiography">
170
+ <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-xs font-semibold">Low Miles</div>
171
+ </div>
172
+ <div class="p-6">
173
+ <div class="flex justify-between items-start">
174
+ <div>
175
+ <h3 class="text-xl font-bold text-gray-900">Range Rover Autobiography</h3>
176
+ <p class="text-gray-600">2021 Model</p>
177
+ </div>
178
+ <span class="text-xl font-bold text-red-600">$92,750</span>
179
+ </div>
180
+ <div class="mt-4 flex flex-wrap gap-2">
181
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">SUV</span>
182
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Supercharged</span>
183
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">15K Miles</span>
184
+ </div>
185
+ <div class="mt-6 flex justify-between items-center">
186
+ <div class="flex space-x-2 text-gray-500">
187
+ <span class="flex items-center"><i class="fas fa-gas-pump mr-1"></i> 17 MPG</span>
188
+ <span class="flex items-center"><i class="fas fa-tachometer-alt mr-1"></i> 5.8s 0-60</span>
189
+ <span class="flex items-center"><i class="fas fa-chair mr-1"></i> 5</span>
190
+ </div>
191
+ <button class="text-red-600 hover:text-red-700 font-medium">View Details</button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="mt-12 text-center">
198
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 transition duration-300">
199
+ View Full Inventory
200
+ <i class="fas fa-arrow-right ml-2"></i>
201
+ </a>
202
+ </div>
203
+ </div>
204
+ </section>
205
+
206
+ <!-- About Section -->
207
+ <section id="about" class="py-16 bg-gray-50">
208
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
209
+ <div class="lg:flex lg:items-center lg:justify-between">
210
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
211
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">About Emin Aghasanov</h2>
212
+ <div class="w-20 h-1 bg-red-600 mb-6"></div>
213
+ <p class="text-gray-600 mb-4">With over 15 years of experience in the luxury automotive industry, Emin Aghasanov has built a reputation for integrity, expertise, and exceptional customer service.</p>
214
+ <p class="text-gray-600 mb-6">Emin personally selects each vehicle in his inventory, ensuring only the finest examples of automotive excellence are offered to his clients.</p>
215
+ <div class="space-y-4">
216
+ <div class="flex items-start">
217
+ <div class="flex-shrink-0 mt-1">
218
+ <i class="fas fa-check-circle text-red-600"></i>
219
+ </div>
220
+ <p class="ml-3 text-gray-700">Over 500 satisfied customers served</p>
221
+ </div>
222
+ <div class="flex items-start">
223
+ <div class="flex-shrink-0 mt-1">
224
+ <i class="fas fa-check-circle text-red-600"></i>
225
+ </div>
226
+ <p class="ml-3 text-gray-700">150+ point inspection on every vehicle</p>
227
+ </div>
228
+ <div class="flex items-start">
229
+ <div class="flex-shrink-0 mt-1">
230
+ <i class="fas fa-check-circle text-red-600"></i>
231
+ </div>
232
+ <p class="ml-3 text-gray-700">Transparent pricing with no hidden fees</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div class="lg:w-1/2 relative">
237
+ <img class="w-full rounded-lg shadow-xl" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Emin Aghasanov with a client">
238
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg hidden md:block">
239
+ <div class="flex items-center">
240
+ <div class="bg-red-100 p-3 rounded-full mr-4">
241
+ <i class="fas fa-trophy text-red-600 text-xl"></i>
242
+ </div>
243
+ <div>
244
+ <p class="text-gray-900 font-bold">Top Luxury Dealer</p>
245
+ <p class="text-gray-600 text-sm">Awarded 2022 & 2023</p>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Why Choose Us -->
255
+ <section class="py-16 bg-white">
256
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
257
+ <div class="text-center mb-12">
258
+ <h2 class="text-3xl font-bold text-gray-900 mb-2">Why Choose Emin's Auto</h2>
259
+ <div class="w-20 h-1 bg-red-600 mx-auto"></div>
260
+ </div>
261
+
262
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
263
+ <div class="bg-gray-50 p-8 rounded-lg text-center">
264
+ <div class="bg-red-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
265
+ <i class="fas fa-search-dollar text-red-600 text-2xl"></i>
266
+ </div>
267
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Rigorous Selection</h3>
268
+ <p class="text-gray-600">Each vehicle undergoes a meticulous 150+ point inspection to ensure only the highest quality cars make it to our showroom.</p>
269
+ </div>
270
+
271
+ <div class="bg-gray-50 p-8 rounded-lg text-center">
272
+ <div class="bg-red-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
273
+ <i class="fas fa-hand-holding-usd text-red-600 text-2xl"></i>
274
+ </div>
275
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Competitive Financing</h3>
276
+ <p class="text-gray-600">We work with top lenders to secure the best financing options tailored to your needs and budget.</p>
277
+ </div>
278
+
279
+ <div class="bg-gray-50 p-8 rounded-lg text-center">
280
+ <div class="bg-red-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
281
+ <i class="fas fa-shield-alt text-red-600 text-2xl"></i>
282
+ </div>
283
+ <h3 class="text-xl font-bold text-gray-900 mb-2">After-Sale Support</h3>
284
+ <p class="text-gray-600">Our relationship doesn't end at the sale. We provide ongoing support and assistance throughout your ownership experience.</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <!-- Testimonials -->
291
+ <section id="testimonials" class="py-16 bg-gray-900 text-white">
292
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
293
+ <div class="text-center mb-12">
294
+ <h2 class="text-3xl font-bold mb-2">Client Testimonials</h2>
295
+ <div class="w-20 h-1 bg-red-600 mx-auto"></div>
296
+ <p class="mt-4 text-gray-300 max-w-2xl mx-auto">Hear what our satisfied customers have to say about their experience with Emin's Auto.</p>
297
+ </div>
298
+
299
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
300
+ <div class="testimonial-card bg-gray-800 p-8 rounded-lg">
301
+ <div class="flex items-center mb-4">
302
+ <div class="flex-shrink-0">
303
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
304
+ </div>
305
+ <div class="ml-4">
306
+ <h4 class="text-lg font-bold">Sarah Johnson</h4>
307
+ <div class="flex text-yellow-400 mt-1">
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ <i class="fas fa-star"></i>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ <p class="text-gray-300 italic">"Emin found me the perfect Mercedes when no other dealer could. His knowledge of the luxury market is unparalleled and he made the entire process seamless."</p>
317
+ </div>
318
+
319
+ <div class="testimonial-card bg-gray-800 p-8 rounded-lg">
320
+ <div class="flex items-center mb-4">
321
+ <div class="flex-shrink-0">
322
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael Chen">
323
+ </div>
324
+ <div class="ml-4">
325
+ <h4 class="text-lg font-bold">Michael Chen</h4>
326
+ <div class="flex text-yellow-400 mt-1">
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star"></i>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <p class="text-gray-300 italic">"The Porsche 911 Turbo S I bought from Emin exceeded all expectations. The car was in flawless condition and the paperwork was handled perfectly. Will definitely buy from him again."</p>
336
+ </div>
337
+
338
+ <div class="testimonial-card bg-gray-800 p-8 rounded-lg">
339
+ <div class="flex items-center mb-4">
340
+ <div class="flex-shrink-0">
341
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="David Rodriguez">
342
+ </div>
343
+ <div class="ml-4">
344
+ <h4 class="text-lg font-bold">David Rodriguez</h4>
345
+ <div class="flex text-yellow-400 mt-1">
346
+ <i class="fas fa-star"></i>
347
+ <i class="fas fa-star"></i>
348
+ <i class="fas fa-star"></i>
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star-half-alt"></i>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <p class="text-gray-300 italic">"As a first-time luxury car buyer, I was nervous about the process. Emin walked me through everything and found me an amazing Range Rover at a fair price. Highly recommend!"</p>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Contact Section -->
361
+ <section id="contact" class="py-16 bg-white">
362
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
363
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12">
364
+ <div class="mb-12 lg:mb-0">
365
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Contact Emin</h2>
366
+ <div class="w-20 h-1 bg-red-600 mb-6"></div>
367
+ <p class="text-gray-600 mb-8">Ready to find your dream car? Contact Emin directly for personalized service and expert advice on your next luxury vehicle purchase.</p>
368
+
369
+ <div class="space-y-6">
370
+ <div class="flex items-start">
371
+ <div class="flex-shrink-0 mt-1">
372
+ <i class="fas fa-map-marker-alt text-red-600"></i>
373
+ </div>
374
+ <div class="ml-4">
375
+ <h3 class="text-lg font-medium text-gray-900">Showroom Address</h3>
376
+ <p class="text-gray-600">123 Luxury Lane, Beverly Hills, CA 90210</p>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="flex items-start">
381
+ <div class="flex-shrink-0 mt-1">
382
+ <i class="fas fa-phone-alt text-red-600"></i>
383
+ </div>
384
+ <div class="ml-4">
385
+ <h3 class="text-lg font-medium text-gray-900">Phone Number</h3>
386
+ <p class="text-gray-600">(310) 555-1234</p>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="flex items-start">
391
+ <div class="flex-shrink-0 mt-1">
392
+ <i class="fas fa-envelope text-red-600"></i>
393
+ </div>
394
+ <div class="ml-4">
395
+ <h3 class="text-lg font-medium text-gray-900">Email Address</h3>
396
+ <p class="text-gray-600">emin@eminsauto.com</p>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="flex items-start">
401
+ <div class="flex-shrink-0 mt-1">
402
+ <i class="fas fa-clock text-red-600"></i>
403
+ </div>
404
+ <div class="ml-4">
405
+ <h3 class="text-lg font-medium text-gray-900">Business Hours</h3>
406
+ <p class="text-gray-600">Monday - Friday: 9am - 7pm<br>Saturday: 10am - 5pm<br>Sunday: By appointment</p>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="mt-8 flex space-x-4">
412
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full">
413
+ <i class="fab fa-facebook-f"></i>
414
+ </a>
415
+ <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white p-3 rounded-full">
416
+ <i class="fab fa-instagram"></i>
417
+ </a>
418
+ <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full">
419
+ <i class="fab fa-twitter"></i>
420
+ </a>
421
+ <a href="#" class="bg-green-600 hover:bg-green-700 text-white p-3 rounded-full">
422
+ <i class="fab fa-whatsapp"></i>
423
+ </a>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md">
428
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Send Emin a Message</h3>
429
+ <form>
430
+ <div class="mb-4">
431
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
432
+ <input type="text" id="name" class="contact-input w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500" placeholder="John Smith">
433
+ </div>
434
+ <div class="mb-4">
435
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
436
+ <input type="email" id="email" class="contact-input w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500" placeholder="john@example.com">
437
+ </div>
438
+ <div class="mb-4">
439
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
440
+ <input type="tel" id="phone" class="contact-input w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500" placeholder="(123) 456-7890">
441
+ </div>
442
+ <div class="mb-4">
443
+ <label for="interest" class="block text-sm font-medium text-gray-700 mb-1">Vehicle Interest</label>
444
+ <select id="interest" class="contact-input w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500">
445
+ <option value="">Select a vehicle type</option>
446
+ <option value="sedan">Luxury Sedan</option>
447
+ <option value="suv">Premium SUV</option>
448
+ <option value="sports">Sports Car</option>
449
+ <option value="other">Other</option>
450
+ </select>
451
+ </div>
452
+ <div class="mb-6">
453
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Your Message</label>
454
+ <textarea id="message" rows="4" class="contact-input w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500" placeholder="Tell us about the vehicle you're looking for..."></textarea>
455
+ </div>
456
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
457
+ Send Message
458
+ </button>
459
+ </form>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </section>
464
+
465
+ <!-- Footer -->
466
+ <footer class="bg-gray-900 text-white py-12">
467
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
468
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
469
+ <div>
470
+ <h3 class="text-lg font-bold mb-4">Emin's Auto</h3>
471
+ <p class="text-gray-400">Premium luxury vehicles with exceptional service. Let us help you find your dream car.</p>
472
+ </div>
473
+ <div>
474
+ <h3 class="text-lg font-bold mb-4">Quick Links</h3>
475
+ <ul class="space-y-2">
476
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
477
+ <li><a href="#inventory" class="text-gray-400 hover:text-white transition duration-300">Inventory</a></li>
478
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
479
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">Testimonials</a></li>
480
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
481
+ </ul>
482
+ </div>
483
+ <div>
484
+ <h3 class="text-lg font-bold mb-4">Services</h3>
485
+ <ul class="space-y-2">
486
+ <li class="text-gray-400">Luxury Vehicle Sales</li>
487
+ <li class="text-gray-400">Trade-In Appraisals</li>
488
+ <li class="text-gray-400">Financing Assistance</li>
489
+ <li class="text-gray-400">Vehicle Delivery</li>
490
+ <li class="text-gray-400">After-Sale Support</li>
491
+ </ul>
492
+ </div>
493
+ <div>
494
+ <h3 class="text-lg font-bold mb-4">Newsletter</h3>
495
+ <p class="text-gray-400 mb-4">Subscribe to receive updates on new inventory and special offers.</p>
496
+ <form class="flex">
497
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md w-full text-gray-900 focus:outline-none">
498
+ <button type="submit" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-r-md">
499
+ <i class="fas fa-paper-plane"></i>
500
+ </button>
501
+ </form>
502
+ </div>
503
+ </div>
504
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
505
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Emin's Auto. All rights reserved.</p>
506
+ <div class="flex space-x-6">
507
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
508
+ <i class="fab fa-facebook-f"></i>
509
+ </a>
510
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
511
+ <i class="fab fa-twitter"></i>
512
+ </a>
513
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
514
+ <i class="fab fa-instagram"></i>
515
+ </a>
516
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
517
+ <i class="fab fa-linkedin-in"></i>
518
+ </a>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </footer>
523
+
524
+ <script>
525
+ // Mobile menu toggle
526
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
527
+ const menu = document.getElementById('mobile-menu');
528
+ menu.classList.toggle('hidden');
529
+ });
530
+
531
+ // Smooth scrolling for anchor links
532
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
533
+ anchor.addEventListener('click', function (e) {
534
+ e.preventDefault();
535
+
536
+ const targetId = this.getAttribute('href');
537
+ if (targetId === '#') return;
538
+
539
+ const targetElement = document.querySelector(targetId);
540
+ if (targetElement) {
541
+ targetElement.scrollIntoView({
542
+ behavior: 'smooth'
543
+ });
544
+
545
+ // Close mobile menu if open
546
+ const mobileMenu = document.getElementById('mobile-menu');
547
+ if (!mobileMenu.classList.contains('hidden')) {
548
+ mobileMenu.classList.add('hidden');
549
+ }
550
+ }
551
+ });
552
+ });
553
+
554
+ // Form submission handler (would be connected to backend in real implementation)
555
+ const contactForm = document.querySelector('form');
556
+ if (contactForm) {
557
+ contactForm.addEventListener('submit', function(e) {
558
+ e.preventDefault();
559
+ alert('Thank you for your message! Emin will contact you shortly.');
560
+ this.reset();
561
+ });
562
+ }
563
+ </script>
564
+ <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=dotkaio/emin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
565
+ </html>