Hugging Face's logo

Spaces:
chatkenneth
/
test
Running

App Files Community
chatkenneth commited on
Commit
b3b67aa
·
verified ·
1 Parent(s): 9ac5768

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +837 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
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: test
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: blue
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,837 @@
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>Laferriere | Luxury Automotive</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=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', 'Montserrat', sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #ffffff;
16
+ }
17
+
18
+ .bg-gradient-red {
19
+ background: linear-gradient(135deg, #e30613 0%, #ff4141 100%);
20
+ }
21
+
22
+ .text-gradient-red {
23
+ background: linear-gradient(135deg, #e30613 0%, #ff4141 100%);
24
+ -webkit-background-clip: text;
25
+ background-clip: text;
26
+ color: transparent;
27
+ }
28
+
29
+ .border-gradient-red {
30
+ border-width: 2px;
31
+ border-style: solid;
32
+ border-image: linear-gradient(135deg, #e30613 0%, #ff4141 100%) 1;
33
+ }
34
+
35
+ .nav-link {
36
+ position: relative;
37
+ }
38
+
39
+ .nav-link::after {
40
+ content: '';
41
+ position: absolute;
42
+ width: 0;
43
+ height: 2px;
44
+ bottom: -4px;
45
+ left: 50%;
46
+ transform: translateX(-50%);
47
+ background: linear-gradient(90deg, rgba(227,6,19,1) 0%, rgba(255,65,65,1) 100%);
48
+ transition: width 0.3s ease;
49
+ }
50
+
51
+ .nav-link:hover::after {
52
+ width: 100%;
53
+ }
54
+
55
+ .hero-slide {
56
+ transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
57
+ opacity: 0;
58
+ transform: scale(0.95);
59
+ position: absolute;
60
+ width: 100%;
61
+ height: 100%;
62
+ top: 0;
63
+ left: 0;
64
+ }
65
+
66
+ .hero-slide.active {
67
+ opacity: 1;
68
+ transform: scale(1);
69
+ }
70
+
71
+ .car-card {
72
+ transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
73
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
74
+ background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
75
+ border: 1px solid rgba(255,255,255,0.05);
76
+ }
77
+
78
+ .car-card:hover {
79
+ transform: translateY(-10px);
80
+ box-shadow: 0 25px 50px -12px rgba(227, 6, 19, 0.25);
81
+ }
82
+
83
+ .service-card {
84
+ background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
85
+ border: 1px solid rgba(255,255,255,0.05);
86
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
87
+ transition: all 0.4s ease;
88
+ }
89
+
90
+ .service-card:hover {
91
+ transform: translateY(-5px);
92
+ box-shadow: 0 25px 50px -12px rgba(227, 6, 19, 0.25);
93
+ }
94
+
95
+ .testimonial-card {
96
+ background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
97
+ border: 1px solid rgba(255,255,255,0.05);
98
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
99
+ transition: all 0.4s ease;
100
+ }
101
+
102
+ .testimonial-card:hover {
103
+ transform: translateY(-5px);
104
+ box-shadow: 0 25px 50px -12px rgba(227, 6, 19, 0.25);
105
+ }
106
+
107
+ .contact-input {
108
+ background: rgba(10,10,10,0.5);
109
+ border: 1px solid rgba(255,255,255,0.1);
110
+ transition: all 0.3s ease;
111
+ }
112
+
113
+ .contact-input:focus {
114
+ box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.3);
115
+ border-color: rgba(227, 6, 19, 0.5);
116
+ background: rgba(10,10,10,0.8);
117
+ }
118
+
119
+ .feature-box {
120
+ background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
121
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
122
+ position: relative;
123
+ overflow: hidden;
124
+ }
125
+
126
+ .feature-box::before {
127
+ content: '';
128
+ position: absolute;
129
+ top: 0;
130
+ left: -100%;
131
+ width: 100%;
132
+ height: 100%;
133
+ background: linear-gradient(90deg, transparent, rgba(227, 6, 19, 0.1), transparent);
134
+ transition: all 0.6s;
135
+ }
136
+
137
+ .feature-box:hover::before {
138
+ left: 100%;
139
+ }
140
+
141
+ .slider-indicator {
142
+ width: 12px;
143
+ height: 12px;
144
+ border-radius: 50%;
145
+ background: rgba(255,255,255,0.3);
146
+ transition: all 0.3s ease;
147
+ }
148
+
149
+ .slider-indicator.active {
150
+ background: linear-gradient(135deg, #e30613 0%, #ff4141 100%);
151
+ transform: scale(1.3);
152
+ }
153
+
154
+ .slider-control {
155
+ background: rgba(10,10,10,0.7);
156
+ border: 1px solid rgba(255,255,255,0.1);
157
+ transition: all 0.3s ease;
158
+ }
159
+
160
+ .slider-control:hover {
161
+ background: rgba(227, 6, 19, 0.8);
162
+ transform: scale(1.1);
163
+ }
164
+
165
+ .bg-dark-gradient {
166
+ background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
167
+ }
168
+ </style>
169
+ </head>
170
+ <body class="min-h-screen">
171
+ <!-- Navigation -->
172
+ <nav class="fixed w-full bg-black bg-opacity-90 backdrop-blur-md z-50 border-b border-gray-900">
173
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
174
+ <div class="flex justify-between h-20 items-center">
175
+ <div class="flex-shrink-0 flex items-center">
176
+ <a href="#" class="text-2xl font-bold text-white">LAFERRIERE <span class="text-gradient-red">AUTO</span></a>
177
+ </div>
178
+ <div class="hidden lg:block">
179
+ <div class="ml-10 flex items-center space-x-8">
180
+ <a href="#home" class="nav-link font-medium text-white">Home</a>
181
+ <a href="#inventory" class="nav-link font-medium text-white">Inventory</a>
182
+ <a href="#services" class="nav-link font-medium text-white">Services</a>
183
+ <a href="#about" class="nav-link font-medium text-white">About</a>
184
+ <a href="#testimonials" class="nav-link font-medium text-white">Testimonials</a>
185
+ <a href="#contact" class="nav-link font-medium text-white">Contact</a>
186
+ </div>
187
+ </div>
188
+ <div class="lg:hidden">
189
+ <button id="mobile-menu-button" class="text-white">
190
+ <i class="fas fa-bars text-2xl"></i>
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Mobile menu -->
197
+ <div id="mobile-menu" class="hidden lg:hidden bg-black bg-opacity-95 backdrop-blur-md border-t border-gray-800">
198
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
199
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Home</a>
200
+ <a href="#inventory" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Inventory</a>
201
+ <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Services</a>
202
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">About</a>
203
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Testimonials</a>
204
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-900 hover:text-gradient-red">Contact</a>
205
+ </div>
206
+ </div>
207
+ </nav>
208
+
209
+ <!-- Hero Slider -->
210
+ <section id="home" class="relative h-screen pt-20 overflow-hidden">
211
+ <!-- Slide 1 -->
212
+ <div class="hero-slide active" id="slide1">
213
+ <div class="absolute inset-0 bg-black bg-opacity-50"></div>
214
+ <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
215
+ alt="Luxury Cars" class="w-full h-full object-cover object-center">
216
+ <div class="absolute inset-0 flex items-center justify-center">
217
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
218
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
219
+ EXCLUSIVE <span class="text-gradient-red">PERFORMANCE</span> CARS
220
+ </h1>
221
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
222
+ Curated selection of the world's most prestigious automotive marques
223
+ </p>
224
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
225
+ <a href="#inventory" class="px-8 py-4 bg-gradient-red text-white rounded-md font-bold hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300 uppercase tracking-wider">
226
+ Explore Collection
227
+ </a>
228
+ <a href="#contact" class="px-8 py-4 border-gradient-red text-white rounded-md font-bold hover:bg-gradient-to-r hover:from-red-900/20 hover:to-red-900/10 transition-all duration-300 uppercase tracking-wider">
229
+ Book Consultation
230
+ </a>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Slide 2 -->
237
+ <div class="hero-slide" id="slide2">
238
+ <div class="absolute inset-0 bg-black bg-opacity-50"></div>
239
+ <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
240
+ alt="Luxury SUVs" class="w-full h-full object-cover object-center">
241
+ <div class="absolute inset-0 flex items-center justify-center">
242
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
243
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
244
+ ELEVATE YOUR <span class="text-gradient-red">JOURNEY</span>
245
+ </h1>
246
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
247
+ Discover luxury SUVs crafted for distinction and uncompromising comfort
248
+ </p>
249
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
250
+ <a href="#inventory" class="px-8 py-4 bg-gradient-red text-white rounded-md font-bold hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300 uppercase tracking-wider">
251
+ View Inventory
252
+ </a>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Slide 3 -->
259
+ <div class="hero-slide" id="slide3">
260
+ <div class="absolute inset-0 bg-black bg-opacity-50"></div>
261
+ <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1583&q=80"
262
+ alt="Super Cars" class="w-full h-full object-cover object-center">
263
+ <div class="absolute inset-0 flex items-center justify-center">
264
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
265
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
266
+ REDISCOVER THE <span class="text-gradient-red">THRILL</span>
267
+ </h1>
268
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
269
+ Experience automotive perfection with our bespoke supercar collection
270
+ </p>
271
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
272
+ <a href="#inventory" class="px-8 py-4 bg-gradient-red text-white rounded-md font-bold hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300 uppercase tracking-wider">
273
+ View Supercars
274
+ </a>
275
+ <a href="#contact" class="px-8 py-4 border-gradient-red text-white rounded-md font-bold hover:bg-gradient-to-r hover:from-red-900/20 hover:to-red-900/10 transition-all duration-300 uppercase tracking-wider">
276
+ Schedule Test Drive
277
+ </a>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Slider Controls -->
284
+ <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-3 z-10" id="slider-indicators">
285
+ <button class="slider-indicator active" data-slide="0"></button>
286
+ <button class="slider-indicator" data-slide="1"></button>
287
+ <button class="slider-indicator" data-slide="2"></button>
288
+ </div>
289
+
290
+ <!-- Navigation Arrows -->
291
+ <button id="prev-slide" class="slider-control absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center z-10">
292
+ <i class="fas fa-chevron-left"></i>
293
+ </button>
294
+ <button id="next-slide" class="slider-control absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center z-10">
295
+ <i class="fas fa-chevron-right"></i>
296
+ </button>
297
+ </section>
298
+
299
+ <!-- Featured Cars -->
300
+ <section id="inventory" class="py-20 bg-dark-gradient">
301
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
302
+ <div class="text-center mb-16">
303
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">FEATURED <span class="text-gradient-red">COLLECTION</span></h2>
304
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
305
+ Hand-selected luxury vehicles showcasing automotive excellence
306
+ </p>
307
+ </div>
308
+
309
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
310
+ <!-- Car 1 -->
311
+ <div class="car-card rounded-xl overflow-hidden">
312
+ <div class="relative h-64 overflow-hidden">
313
+ <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
314
+ alt="Porsche 911 Turbo S" class="w-full h-full object-cover transition-all duration-500 ease-in-out transform hover:scale-110">
315
+ <div class="absolute top-4 right-4 bg-gradient-red text-white px-4 py-1 text-xs font-bold rounded-full uppercase tracking-wider">LIMITED</div>
316
+ </div>
317
+ <div class="p-6">
318
+ <h3 class="text-xl font-bold mb-2">2023 Porsche 911 Turbo S</h3>
319
+ <div class="flex justify-between items-center mb-4">
320
+ <span class="text-gray-400">Starting at</span>
321
+ <span class="text-xl font-bold text-gradient-red">$216,300</span>
322
+ </div>
323
+ <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4">
324
+ <div class="border-r border-gray-800">
325
+ <div class="text-gray-400">POWER</div>
326
+ <div class="font-bold">640 HP</div>
327
+ </div>
328
+ <div class="border-r border-gray-800">
329
+ <div class="text-gray-400">0-60 MPH</div>
330
+ <div class="font-bold">2.6s</div>
331
+ </div>
332
+ <div>
333
+ <div class="text-gray-400">TOP SPEED</div>
334
+ <div class="font-bold">205 MPH</div>
335
+ </div>
336
+ </div>
337
+ <a href="#" class="block w-full text-center py-3 bg-black text-white hover:bg-gradient-red transition-all duration-300 rounded-md font-medium tracking-wide">
338
+ <span class="flex items-center justify-center">
339
+ Explore Vehicle <i class="fas fa-arrow-right ml-2"></i>
340
+ </span>
341
+ </a>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Car 2 -->
346
+ <div class="car-card rounded-xl overflow-hidden">
347
+ <div class="relative h-64 overflow-hidden">
348
+ <img src="https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
349
+ alt="Mercedes S-Class" class="w-full h-full object-cover transition-all duration-500 ease-in-out transform hover:scale-110">
350
+ <div class="absolute top-4 right-4 bg-gradient-red text-white px-4 py-1 text-xs font-bold rounded-full uppercase tracking-wider">NEW</div>
351
+ </div>
352
+ <div class="p-6">
353
+ <h3 class="text-xl font-bold mb-2">2023 Mercedes-Benz S 580</h3>
354
+ <div class="flex justify-between items-center mb-4">
355
+ <span class="text-gray-400">Starting at</span>
356
+ <span class="text-xl font-bold text-gradient-red">$128,900</span>
357
+ </div>
358
+ <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4">
359
+ <div class="border-r border-gray-800">
360
+ <div class="text-gray-400">POWER</div>
361
+ <div class="font-bold">496 HP</div>
362
+ </div>
363
+ <div class="border-r border-gray-800">
364
+ <div class="text-gray-400">0-60 MPH</div>
365
+ <div class="font-bold">4.4s</div>
366
+ </div>
367
+ <div>
368
+ <div class="text-gray-400">TOP SPEED</div>
369
+ <div class="font-bold">155 MPH</div>
370
+ </div>
371
+ </div>
372
+ <a href="#" class="block w-full text-center py-3 bg-black text-white hover:bg-gradient-red transition-all duration-300 rounded-md font-medium tracking-wide">
373
+ <span class="flex items-center justify-center">
374
+ Explore Vehicle <i class="fas fa-arrow-right ml-2"></i>
375
+ </span>
376
+ </a>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Car 3 -->
381
+ <div class="car-card rounded-xl overflow-hidden">
382
+ <div class="relative h-64 overflow-hidden">
383
+ <img src="https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80"
384
+ alt="Range Rover SV" class="w-full h-full object-cover transition-all duration-500 ease-in-out transform hover:scale-110">
385
+ </div>
386
+ <div class="p-6">
387
+ <h3 class="text-xl font-bold mb-2">2023 Range Rover SVAutobiography</h3>
388
+ <div class="flex justify-between items-center mb-4">
389
+ <span class="text-gray-400">Starting at</span>
390
+ <span class="text-xl font-bold text-gradient-red">$187,500</span>
391
+ </div>
392
+ <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4">
393
+ <div class="border-r border-gray-800">
394
+ <div class="text-gray-400">POWER</div>
395
+ <div class="font-bold">557 HP</div>
396
+ </div>
397
+ <div class="border-r border-gray-800">
398
+ <div class="text-gray-400">0-60 MPH</div>
399
+ <div class="font-bold">4.5s</div>
400
+ </div>
401
+ <div>
402
+ <div class="text-gray-400">TOP SPEED</div>
403
+ <div class="font-bold">155 MPH</div>
404
+ </div>
405
+ </div>
406
+ <a href="#" class="block w-full text-center py-3 bg-black text-white hover:bg-gradient-red transition-all duration-300 rounded-md font-medium tracking-wide">
407
+ <span class="flex items-center justify-center">
408
+ Explore Vehicle <i class="fas fa-arrow-right ml-2"></i>
409
+ </span>
410
+ </a>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="text-center mt-12">
416
+ <a href="#" class="inline-flex items-center px-6 py-3 border-2 border-white text-white rounded-md font-bold hover:bg-white hover:text-black transition-all duration-300 tracking-wide">
417
+ View Complete Collection
418
+ <i class="fas fa-arrow-right ml-3 animate-pulse"></i>
419
+ </a>
420
+ </div>
421
+ </div>
422
+ </section>
423
+
424
+ <!-- Services Section -->
425
+ <section id="services" class="py-20 bg-black">
426
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
427
+ <div class="text-center mb-16">
428
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">PREMIUM <span class="text-gradient-red">SERVICES</span></h2>
429
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
430
+ Beyond sales - comprehensive luxury automotive solutions
431
+ </p>
432
+ </div>
433
+
434
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
435
+ <!-- Service 1 -->
436
+ <div class="service-card rounded-xl p-6 text-center">
437
+ <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-gradient-red text-white feature-box">
438
+ <i class="fas fa-car text-3xl"></i>
439
+ </div>
440
+ <h3 class="text-xl font-bold mb-3">Vehicle Acquisition</h3>
441
+ <p class="text-gray-400">
442
+ We source the perfect vehicle globally based on your exact specifications and preferences.
443
+ </p>
444
+ </div>
445
+
446
+ <!-- Service 2 -->
447
+ <div class="service-card rounded-xl p-6 text-center">
448
+ <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-gradient-red text-white feature-box">
449
+ <i class="fas fa-shield-alt text-3xl"></i>
450
+ </div>
451
+ <h3 class="text-xl font-bold mb-3">Asset Protection</h3>
452
+ <p class="text-gray-400">
453
+ Comprehensive protection plans tailored to your vehicle and driving habits.
454
+ </p>
455
+ </div>
456
+
457
+ <!-- Service 3 -->
458
+ <div class="service-card rounded-xl p-6 text-center">
459
+ <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-gradient-red text-white feature-box">
460
+ <i class="fas fa-trophy text-3xl"></i>
461
+ </div>
462
+ <h3 class="text-xl font-bold mb-3">Concierge Care</h3>
463
+ <p class="text-gray-400">
464
+ White-glove maintenance, detailing, and valet services for your vehicle.
465
+ </p>
466
+ </div>
467
+
468
+ <!-- Service 4 -->
469
+ <div class="service-card rounded-xl p-6 text-center">
470
+ <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center rounded-full bg-gradient-red text-white feature-box">
471
+ <i class="fas fa-exchange-alt text-3xl"></i>
472
+ </div>
473
+ <h3 class="text-xl font-bold mb-3">Discretionary Exit</h3>
474
+ <p class="text-gray-400">
475
+ Confidential vehicle sale or trade-in with maximized value retention.
476
+ </p>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </section>
481
+
482
+ <!-- About Section -->
483
+ <section id="about" class="relative py-20 overflow-hidden">
484
+ <div class="absolute inset-0 bg-gradient-to-b from-red-900/10 to-black/80 z-0"></div>
485
+ <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
486
+ <div class="flex flex-col lg:flex-row items-center gap-12">
487
+ <div class="lg:w-1/2">
488
+ <img src="https://images.unsplash.com/photo-1580274455191-1c62238fa333?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80"
489
+ alt="Laferriere Auto Facility" class="w-full h-auto rounded-xl shadow-2xl transform -rotate-1 hover:rotate-0 transition duration-500">
490
+ </div>
491
+ <div class="lg:w-1/2">
492
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">THE <span class="text-gradient-red">LAFERRIERE</span> DIFFERENCE</h2>
493
+ <p class="text-lg text-gray-300 mb-6">
494
+ Founded in 2005, Laferriere Auto Group has redefined luxury automotive retail by crafting personalized experiences that transcend traditional dealership interactions. Our private client model establishes lifetime relationships with discerning collectors.
495
+ </p>
496
+ <p class="text-lg text-gray-300 mb-8">
497
+ With headquarters in Beverly Hills and strategic partners worldwide, we provide access to the most exclusive current and future models from premier manufacturers.
498
+ </p>
499
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
500
+ <div class="feature-box text-center p-4 rounded-lg">
501
+ <div class="text-3xl font-bold text-gradient-red">18+</div>
502
+ <div class="text-sm text-gray-300 uppercase tracking-wider mt-1">Years Serving Clients</div>
503
+ </div>
504
+ <div class="feature-box text-center p-4 rounded-lg">
505
+ <div class="text-3xl font-bold text-gradient-red">5000+</div>
506
+ <div class="text-sm text-gray-300 uppercase tracking-wider mt-1">Satisfied Clients</div>
507
+ </div>
508
+ <div class="feature-box text-center p-4 rounded-lg">
509
+ <div class="text-3xl font-bold text-gradient-red">$2B+</div>
510
+ <div class="text-sm text-gray-300 uppercase tracking-wider mt-1">In Transactions</div>
511
+ </div>
512
+ </div>
513
+ <a href="#contact" class="inline-flex items-center px-8 py-4 bg-gradient-red text-white rounded-md font-bold hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300 uppercase tracking-wider">
514
+ Connect With Our Team
515
+ </a>
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </section>
520
+
521
+ <!-- Testimonials Section -->
522
+ <section id="testimonials" class="py-20 bg-dark-gradient">
523
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
524
+ <div class="text-center mb-16">
525
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">CLIENT <span class="text-gradient-red">EXPERIENCES</span></h2>
526
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
527
+ Hear from our distinguished clients about their Laferriere journeys
528
+ </p>
529
+ </div>
530
+
531
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
532
+ <!-- Testimonial 1 -->
533
+ <div class="testimonial-card rounded-xl p-8">
534
+ <div class="flex items-center mb-6">
535
+ <div class="w-14 h-14 rounded-full overflow-hidden mr-4 border-2 border-gray-700">
536
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="James W." class="w-full h-full object-cover">
537
+ </div>
538
+ <div>
539
+ <h4 class="font-bold">James W.</h4>
540
+ <div class="flex text-yellow-400 text-sm mt-1">
541
+ <i class="fas fa-star"></i>
542
+ <i class="fas fa-star"></i>
543
+ <i class="fas fa-star"></i>
544
+ <i class="fas fa-star"></i>
545
+ <i class="fas fa-star"></i>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ <p class="text-gray-300 italic mb-6">
550
+ "Laferriere's ability to source my exact specification 911 GT3 when no other dealer could demonstrates their exceptional industry connections and commitment to client satisfaction."
551
+ </p>
552
+ <div class="border-t border-gray-800 pt-4">
553
+ <div class="text-sm text-gray-500">Acquired: Porsche 911 GT3</div>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- Testimonial 2 -->
558
+ <div class="testimonial-card rounded-xl p-8">
559
+ <div class="flex items-center mb-6">
560
+ <div class="w-14 h-14 rounded-full overflow-hidden mr-4 border-2 border-gray-700">
561
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sarah L." class="w-full h-full object-cover">
562
+ </div>
563
+ <div>
564
+ <h4 class="font-bold">Sarah L.</h4>
565
+ <div class="flex text-yellow-400 text-sm mt-1">
566
+ <i class="fas fa-star"></i>
567
+ <i class="fas fa-star"></i>
568
+ <i class="fas fa-star"></i>
569
+ <i class="fas fa-star"></i>
570
+ <i class="fas fa-star"></i>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ <p class="text-gray-300 italic mb-6">
575
+ "The entire experience from selection to delivery was flawless. My Bentley Bentayga arrived exactly as promised, with every detail personalized to my preferences. Truly white-glove service."
576
+ </p>
577
+ <div class="border-t border-gray-800 pt-4">
578
+ <div class="text-sm text-gray-500">Acquired: Bentley Bentayga</div>
579
+ </div>
580
+ </div>
581
+
582
+ <!-- Testimonial 3 -->
583
+ <div class="testimonial-card rounded-xl p-8">
584
+ <div class="flex items-center mb-6">
585
+ <div class="w-14 h-14 rounded-full overflow-hidden mr-4 border-2 border-gray-700">
586
+ <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Michael T." class="w-full h-full object-cover">
587
+ </div>
588
+ <div>
589
+ <h4 class="font-bold">Michael T.</h4>
590
+ <div class="flex text-yellow-400 text-sm mt-1">
591
+ <i class="fas fa-star"></i>
592
+ <i class="fas fa-star"></i>
593
+ <i class="fas fa-star"></i>
594
+ <i class="fas fa-star"></i>
595
+ <i class="fas fa-star"></i>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ <p class="text-gray-300 italic mb-6">
600
+ "As a collector, I value discretion and expertise. Laferriere has handled multiple acquisitions for my collection with professionalism and market knowledge that's unmatched in the industry."
601
+ </p>
602
+ <div class="border-t border-gray-800 pt-4">
603
+ <div class="text-sm text-gray-500">Collections Managed: 12+ Vehicles</div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </section>
609
+
610
+ <!-- Contact Section -->
611
+ <section id="contact" class="py-20 bg-black">
612
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
613
+ <div class="text-center mb-16">
614
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">CONTACT <span class="text-gradient-red">LAFERRIERE</span></h2>
615
+ <p class="text-lg text-gray-400 max-w-2xl mx-auto">
616
+ Begin your luxury automotive journey with our concierge team
617
+ </p>
618
+ </div>
619
+
620
+ <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
621
+ <div>
622
+ <h3 class="text-xl font-bold mb-6 pb-2 border-b border-gray-800">OUR INFORMATION</h3>
623
+ <div class="space-y-6">
624
+ <div class="flex items-start">
625
+ <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center mr-4 mt-1">
626
+ <i class="fas fa-map-marker-alt"></i>
627
+ </div>
628
+ <div>
629
+ <h4 class="font-bold mb-1">Visiting Address</h4>
630
+ <p class="text-gray-400">451 North Rodeo Drive<br>Beverly Hills, CA 90210</p>
631
+ </div>
632
+ </div>
633
+ <div class="flex items-start">
634
+ <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center mr-4 mt-1">
635
+ <i class="fas fa-phone-alt"></i>
636
+ </div>
637
+ <div>
638
+ <h4 class="font-bold mb-1">Contact Numbers</h4>
639
+ <p class="text-gray-400">+1 (310) 550-9876 (Sales)<br>+1 (310) 550-9877 (Service)</p>
640
+ </div>
641
+ </div>
642
+ <div class="flex items-start">
643
+ <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center mr-4 mt-1">
644
+ <i class="fas fa-envelope"></i>
645
+ </div>
646
+ <div>
647
+ <h4 class="font-bold mb-1">Email Contacts</h4>
648
+ <p class="text-gray-400">sales@laferriereauto.com<br>concierge@laferriereauto.com</p>
649
+ </div>
650
+ </div>
651
+ <div class="flex items-start">
652
+ <div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center mr-4 mt-1">
653
+ <i class="fas fa-clock"></i>
654
+ </div>
655
+ <div>
656
+ <h4 class="font-bold mb-1">By Appointment</h4>
657
+ <p class="text-gray-400">Monday - Sunday<br>9:00 AM - 9:00 PM</p>
658
+ </div>
659
+ </div>
660
+ <div class="flex space-x-4 pt-4">
661
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
662
+ <i class="fab fa-facebook-f"></i>
663
+ </a>
664
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
665
+ <i class="fab fa-instagram"></i>
666
+ </a>
667
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
668
+ <i class="fab fa-linkedin-in"></i>
669
+ </a>
670
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
671
+ <i class="fab fa-youtube"></i>
672
+ </a>
673
+ </div>
674
+ </div>
675
+ </div>
676
+
677
+ <div>
678
+ <h3 class="text-xl font-bold mb-6 pb-2 border-b border-gray-800">SEND A MESSAGE</h3>
679
+ <form class="space-y-4">
680
+ <div>
681
+ <label for="contact-name" class="block text-sm font-medium text-gray-400 mb-1">Your Name</label>
682
+ <input type="text" id="contact-name" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none">
683
+ </div>
684
+ <div>
685
+ <label for="contact-email" class="block text-sm font-medium text-gray-400 mb-1">Email Address</label>
686
+ <input type="email" id="contact-email" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none">
687
+ </div>
688
+ <div>
689
+ <label for="contact-phone" class="block text-sm font-medium text-gray-400 mb-1">Phone Number</label>
690
+ <input type="tel" id="contact-phone" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none">
691
+ </div>
692
+ <div>
693
+ <label for="contact-subject" class="block text-sm font-medium text-gray-400 mb-1">Subject</label>
694
+ <select id="contact-subject" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none">
695
+ <option value="">Select Inquiry Type</option>
696
+ <option value="purchase">Vehicle Purchase</option>
697
+ <option value="collection">Collection Consultation</option>
698
+ <option value="service">Maintenance Service</option>
699
+ <option value="other">Other Inquiry</option>
700
+ </select>
701
+ </div>
702
+ <div>
703
+ <label for="contact-message" class="block text-sm font-medium text-gray-400 mb-1">Message</label>
704
+ <textarea id="contact-message" rows="4" class="contact-input w-full px-4 py-3 rounded-md focus:outline-none"></textarea>
705
+ </div>
706
+ <div>
707
+ <button type="submit" class="w-full px-8 py-4 bg-gradient-red text-white rounded-md font-bold hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300">
708
+ Submit Inquiry
709
+ </button>
710
+ </div>
711
+ </form>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </section>
716
+
717
+ <!-- Footer -->
718
+ <footer class="bg-gradient-to-b from-black to-gray-900/10 py-12 border-t border-gray-900">
719
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
720
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
721
+ <div>
722
+ <a href="#" class="text-2xl font-bold text-white">LAFERRIERE <span class="text-gradient-red">AUTO</span></a>
723
+ <p class="text-gray-400 mt-4 text-sm">
724
+ Redefining luxury automotive experiences since 2005 through unparalleled service and access to the world's finest vehicles.
725
+ </p>
726
+ </div>
727
+ <div>
728
+ <h4 class="text-lg font-bold text-white mb-4">Quick Links</h4>
729
+ <ul class="space-y-2">
730
+ <li><a href="#home" class="text-gray-400 hover:text-gradient-red transition duration-300">Home</a></li>
731
+ <li><a href="#inventory" class="text-gray-400 hover:text-gradient-red transition duration-300">Inventory</a></li>
732
+ <li><a href="#services" class="text-gray-400 hover:text-gradient-red transition duration-300">Services</a></li>
733
+ <li><a href="#about" class="text-gray-400 hover:text-gradient-red transition duration-300">About</a></li>
734
+ </ul>
735
+ </div>
736
+ <div>
737
+ <h4 class="text-lg font-bold text-white mb-4">Legal</h4>
738
+ <ul class="space-y-2">
739
+ <li><a href="#" class="text-gray-400 hover:text-gradient-red transition duration-300">Privacy Policy</a></li>
740
+ <li><a href="#" class="text-gray-400 hover:text-gradient-red transition duration-300">Terms of Service</a></li>
741
+ <li><a href="#" class="text-gray-400 hover:text-gradient-red transition duration-300">Financial Services</a></li>
742
+ <li><a href="#" class="text-gray-400 hover:text-gradient-red transition duration-300">Cookie Policy</a></li>
743
+ </ul>
744
+ </div>
745
+ <div>
746
+ <h4 class="text-lg font-bold text-white mb-4">Newsletter</h4>
747
+ <p class="text-gray-400 mb-4 text-sm">
748
+ Subscribe to our newsletter for exclusive updates on new arrivals and private events.
749
+ </p>
750
+ <form class="flex">
751
+ <input type="email" placeholder="Your Email" class="px-4 py-2 rounded-l-md bg-gray-900 text-white focus:outline-none focus:ring-1 focus:ring-red-500 w-full">
752
+ <button type="submit" class="px-4 py-2 bg-gradient-red text-white rounded-r-md hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300">
753
+ <i class="fas fa-paper-plane"></i>
754
+ </button>
755
+ </form>
756
+ </div>
757
+ </div>
758
+ <div class="border-t border-gray-900 mt-12 pt-8 text-center text-gray-400 text-sm">
759
+ <p>&copy; 2023 Laferriere Auto Group. All rights reserved. Luxury automotive retail specialists.</p>
760
+ </div>
761
+ </div>
762
+ </footer>
763
+
764
+ <script>
765
+ // Mobile menu toggle
766
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
767
+ const menu = document.getElementById('mobile-menu');
768
+ menu.classList.toggle('hidden');
769
+ });
770
+
771
+ // Hero Slider
772
+ const slides = document.querySelectorAll('.hero-slide');
773
+ const indicators = document.querySelectorAll('.slider-indicator');
774
+ let currentSlide = 0;
775
+
776
+ function showSlide(index) {
777
+ // Hide all slides
778
+ slides.forEach(slide => slide.classList.remove('active'));
779
+ indicators.forEach(indicator => indicator.classList.remove('active'));
780
+
781
+ // Show the selected slide
782
+ slides[index].classList.add('active');
783
+ indicators[index].classList.add('active');
784
+ currentSlide = index;
785
+ }
786
+
787
+ // Set up indicator clicks
788
+ indicators.forEach((indicator, index) => {
789
+ indicator.addEventListener('click', () => {
790
+ showSlide(index);
791
+ });
792
+ });
793
+
794
+ // Previous slide button
795
+ document.getElementById('prev-slide').addEventListener('click', () => {
796
+ const newIndex = (currentSlide - 1 + slides.length) % slides.length;
797
+ showSlide(newIndex);
798
+ });
799
+
800
+ // Next slide button
801
+ document.getElementById('next-slide').addEventListener('click', () => {
802
+ const newIndex = (currentSlide + 1) % slides.length;
803
+ showSlide(newIndex);
804
+ });
805
+
806
+ // Auto-advance slides
807
+ setInterval(() => {
808
+ const newIndex = (currentSlide + 1) % slides.length;
809
+ showSlide(newIndex);
810
+ }, 7000);
811
+
812
+ // Smooth scrolling for anchor links
813
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
814
+ anchor.addEventListener('click', function (e) {
815
+ e.preventDefault();
816
+
817
+ const targetId = this.getAttribute('href');
818
+ const targetElement = document.querySelector(targetId);
819
+
820
+ if (targetElement) {
821
+ // Close mobile menu if open
822
+ const mobileMenu = document.getElementById('mobile-menu');
823
+ if (!mobileMenu.classList.contains('hidden')) {
824
+ mobileMenu.classList.add('hidden');
825
+ }
826
+
827
+ // Scroll to target
828
+ window.scrollTo({
829
+ top: targetElement.offsetTop - 100,
830
+ behavior: 'smooth'
831
+ });
832
+ }
833
+ });
834
+ });
835
+ </script>
836
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=chatkenneth/test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
837
+ </html>