Spaces:
Running
Running
Add 1 files
Browse files- index.html +595 -47
index.html
CHANGED
|
@@ -137,7 +137,7 @@
|
|
| 137 |
right: 0;
|
| 138 |
width: 50%;
|
| 139 |
height: 80%;
|
| 140 |
-
background-image: url('https://
|
| 141 |
background-size: cover;
|
| 142 |
background-position: center;
|
| 143 |
opacity: 0.3;
|
|
@@ -214,14 +214,14 @@
|
|
| 214 |
</div>
|
| 215 |
|
| 216 |
<!-- Mobile menu -->
|
| 217 |
-
<div id="mobile-menu"
|
| 218 |
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
| 219 |
-
<a href="#home"
|
| 220 |
-
<a href="#inventory"
|
| 221 |
-
<a href="#services"
|
| 222 |
-
<a href="#about"
|
| 223 |
-
<a href="#testimonials"
|
| 224 |
-
<a href="#contact"
|
| 225 |
</div>
|
| 226 |
</div>
|
| 227 |
</nav>
|
|
@@ -239,10 +239,10 @@
|
|
| 239 |
Curated selection of the world's most prestigious and rare automobiles
|
| 240 |
</p>
|
| 241 |
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
|
| 242 |
-
<a href="#inventory"
|
| 243 |
View Collection
|
| 244 |
</a>
|
| 245 |
-
<a href="#contact"
|
| 246 |
Contact Us
|
| 247 |
</a>
|
| 248 |
</div>
|
|
@@ -260,14 +260,14 @@
|
|
| 260 |
<!-- Car Items -->
|
| 261 |
<div class="car-carousel-item">
|
| 262 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 263 |
-
<img src="https://
|
| 264 |
-
alt="
|
| 265 |
class="w-full h-48 object-cover">
|
| 266 |
<div class="p-4">
|
| 267 |
-
<h4 class="font-bold text-sm uppercase">
|
| 268 |
-
<p class="text-xs text-gray-400">From $
|
| 269 |
<div class="mt-2">
|
| 270 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">
|
| 271 |
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Convertible</span>
|
| 272 |
</div>
|
| 273 |
</div>
|
|
@@ -275,16 +275,16 @@
|
|
| 275 |
</div>
|
| 276 |
|
| 277 |
<div class="car-carousel-item">
|
| 278 |
-
<div class="bg-gray-
|
| 279 |
-
<img src="https://
|
| 280 |
-
alt="
|
| 281 |
class="w-full h-48 object-cover">
|
| 282 |
<div class="p-4">
|
| 283 |
-
<h4 class="font-bold text-sm uppercase">
|
| 284 |
-
<p class="text-xs text-gray-400">From $
|
| 285 |
<div class="mt-2">
|
| 286 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">
|
| 287 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">
|
| 288 |
</div>
|
| 289 |
</div>
|
| 290 |
</div>
|
|
@@ -292,15 +292,15 @@
|
|
| 292 |
|
| 293 |
<div class="car-carousel-item">
|
| 294 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 295 |
-
<img src="https://
|
| 296 |
-
alt="
|
| 297 |
class="w-full h-48 object-cover">
|
| 298 |
<div class="p-4">
|
| 299 |
-
<h4 class="font-bold text-sm uppercase">
|
| 300 |
-
<p class="text-xs text-gray-400">From $
|
| 301 |
<div class="mt-2">
|
| 302 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">
|
| 303 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">
|
| 304 |
</div>
|
| 305 |
</div>
|
| 306 |
</div>
|
|
@@ -308,15 +308,15 @@
|
|
| 308 |
|
| 309 |
<div class="car-carousel-item">
|
| 310 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 311 |
-
<img src="https://
|
| 312 |
-
alt="
|
| 313 |
class="w-full h-48 object-cover">
|
| 314 |
<div class="p-4">
|
| 315 |
-
<h4 class="font-bold text-sm uppercase">
|
| 316 |
-
<p class="text-xs text-gray-400">From $
|
| 317 |
<div class="mt-2">
|
| 318 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">
|
| 319 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">
|
| 320 |
</div>
|
| 321 |
</div>
|
| 322 |
</div>
|
|
@@ -324,15 +324,15 @@
|
|
| 324 |
|
| 325 |
<div class="car-carousel-item">
|
| 326 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 327 |
-
<img src="https://
|
| 328 |
-
alt="
|
| 329 |
class="w-full h-48 object-cover">
|
| 330 |
<div class="p-4">
|
| 331 |
-
<h4 class="font-bold text-sm uppercase">
|
| 332 |
-
<p class="text-xs text-gray-400">From $
|
| 333 |
<div class="mt-2">
|
| 334 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">
|
| 335 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">
|
| 336 |
</div>
|
| 337 |
</div>
|
| 338 |
</div>
|
|
@@ -340,15 +340,15 @@
|
|
| 340 |
|
| 341 |
<div class="car-carousel-item">
|
| 342 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 343 |
-
<img src="https://
|
| 344 |
-
alt="
|
| 345 |
class="w-full h-48 object-cover">
|
| 346 |
<div class="p-4">
|
| 347 |
-
<h4 class="font-bold text-sm uppercase">
|
| 348 |
-
<p class="text-xs text-gray-400">From $
|
| 349 |
<div class="mt-2">
|
| 350 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">
|
| 351 |
-
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">
|
| 352 |
</div>
|
| 353 |
</div>
|
| 354 |
</div>
|
|
@@ -363,7 +363,555 @@
|
|
| 363 |
</div>
|
| 364 |
</section>
|
| 365 |
|
| 366 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 367 |
|
| 368 |
<script>
|
| 369 |
// Mobile menu toggle
|
|
|
|
| 137 |
right: 0;
|
| 138 |
width: 50%;
|
| 139 |
height: 80%;
|
| 140 |
+
background-image: url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1283&q=80');
|
| 141 |
background-size: cover;
|
| 142 |
background-position: center;
|
| 143 |
opacity: 0.3;
|
|
|
|
| 214 |
</div>
|
| 215 |
|
| 216 |
<!-- Mobile menu -->
|
| 217 |
+
<div id="mobile-menu" class="hidden lg:hidden bg-black bg-opacity-95 backdrop-blur-md border-t border-gray-800">
|
| 218 |
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
| 219 |
+
<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>
|
| 220 |
+
<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>
|
| 221 |
+
<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>
|
| 222 |
+
<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>
|
| 223 |
+
<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>
|
| 224 |
+
<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>
|
| 225 |
</div>
|
| 226 |
</div>
|
| 227 |
</nav>
|
|
|
|
| 239 |
Curated selection of the world's most prestigious and rare automobiles
|
| 240 |
</p>
|
| 241 |
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
|
| 242 |
+
<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">
|
| 243 |
View Collection
|
| 244 |
</a>
|
| 245 |
+
<a href="#contact" class="px-8 py-4 border border-white text-white rounded-md font-bold hover:bg-white hover:text-black transition-all duration-300 uppercase tracking-wider">
|
| 246 |
Contact Us
|
| 247 |
</a>
|
| 248 |
</div>
|
|
|
|
| 260 |
<!-- Car Items -->
|
| 261 |
<div class="car-carousel-item">
|
| 262 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 263 |
+
<img src="https://images.unsplash.com/photo-1593941707882-a91b5a8d2f9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 264 |
+
alt="1957 Chevrolet Bel Air"
|
| 265 |
class="w-full h-48 object-cover">
|
| 266 |
<div class="p-4">
|
| 267 |
+
<h4 class="font-bold text-sm uppercase">1957 Chevrolet Bel Air</h4>
|
| 268 |
+
<p class="text-xs text-gray-400">From $85,000</p>
|
| 269 |
<div class="mt-2">
|
| 270 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Classic</span>
|
| 271 |
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Convertible</span>
|
| 272 |
</div>
|
| 273 |
</div>
|
|
|
|
| 275 |
</div>
|
| 276 |
|
| 277 |
<div class="car-carousel-item">
|
| 278 |
+
<div class="bg-gray-80800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 279 |
+
<img src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
|
| 280 |
+
alt="1969 Ford Mustang"
|
| 281 |
class="w-full h-48 object-cover">
|
| 282 |
<div class="p-4">
|
| 283 |
+
<h4 class="font-bold text-sm uppercase">1969 Ford Mustang</h4>
|
| 284 |
+
<p class="text-xs text-gray-400">From $120,000</p>
|
| 285 |
<div class="mt-2">
|
| 286 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Muscle</span>
|
| 287 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Fastback</span>
|
| 288 |
</div>
|
| 289 |
</div>
|
| 290 |
</div>
|
|
|
|
| 292 |
|
| 293 |
<div class="car-carousel-item">
|
| 294 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 295 |
+
<img src="https://images.unsplash.com/photo-1523913507744-3e09116b380b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 296 |
+
alt="1963 Jaguar E-Type"
|
| 297 |
class="w-full h-48 object-cover">
|
| 298 |
<div class="p-4">
|
| 299 |
+
<h4 class="font-bold text-sm uppercase">1963 Jaguar E-Type</h4>
|
| 300 |
+
<p class="text-xs text-gray-400">From $175,000</p>
|
| 301 |
<div class="mt-2">
|
| 302 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Sports</span>
|
| 303 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Roadster</span>
|
| 304 |
</div>
|
| 305 |
</div>
|
| 306 |
</div>
|
|
|
|
| 308 |
|
| 309 |
<div class="car-carousel-item">
|
| 310 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 311 |
+
<img src="https://images.unsplash.com/photo-1580273916550-e52803fe8c14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 312 |
+
alt="1955 Porsche 356 Speedster"
|
| 313 |
class="w-full h-48 object-cover">
|
| 314 |
<div class="p-4">
|
| 315 |
+
<h4 class="font-bold text-sm uppercase">1955 Porsche 356</h4>
|
| 316 |
+
<p class="text-xs text-gray-400">From $250,000</p>
|
| 317 |
<div class="mt-2">
|
| 318 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Sports</span>
|
| 319 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Convertible</span>
|
| 320 |
</div>
|
| 321 |
</div>
|
| 322 |
</div>
|
|
|
|
| 324 |
|
| 325 |
<div class="car-carousel-item">
|
| 326 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 327 |
+
<img src="https://images.unsplash.com/photo-1625398407796-82650a8c135f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 328 |
+
alt="1968 Mercedes-Benz 280SL"
|
| 329 |
class="w-full h-48 object-cover">
|
| 330 |
<div class="p-4">
|
| 331 |
+
<h4 class="font-bold text-sm uppercase">1968 Mercedes 280SL</h4>
|
| 332 |
+
<p class="text-xs text-gray-400">From $145,000</p>
|
| 333 |
<div class="mt-2">
|
| 334 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Luxury</span>
|
| 335 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Convertible</span>
|
| 336 |
</div>
|
| 337 |
</div>
|
| 338 |
</div>
|
|
|
|
| 340 |
|
| 341 |
<div class="car-carousel-item">
|
| 342 |
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 343 |
+
<img src="https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 344 |
+
alt="1959 Cadillac Coupe de Ville"
|
| 345 |
class="w-full h-48 object-cover">
|
| 346 |
<div class="p-4">
|
| 347 |
+
<h4 class="font-bold text-sm uppercase">1959 Cadillac de Ville</h4>
|
| 348 |
+
<p class="text-xs text-gray-400">From $95,000</p>
|
| 349 |
<div class="mt-2">
|
| 350 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full mr-1">Luxury</span>
|
| 351 |
+
<span class="inline-block bg-gray-700 text-xs px-2 py-1 rounded-full">Coupe</span>
|
| 352 |
</div>
|
| 353 |
</div>
|
| 354 |
</div>
|
|
|
|
| 363 |
</div>
|
| 364 |
</section>
|
| 365 |
|
| 366 |
+
<!-- Inventory Section -->
|
| 367 |
+
<section id="inventory" class="py-20 bg-gray-900">
|
| 368 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 369 |
+
<div class="text-center mb-16">
|
| 370 |
+
<h2 class="text-4xl font-bold mb-4">Our <span class="text-gradient-red">Inventory</span></h2>
|
| 371 |
+
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Discover our curated collection of the world's finest classic automobiles</p>
|
| 372 |
+
</div>
|
| 373 |
+
|
| 374 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 375 |
+
<!-- Car 1 -->
|
| 376 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 377 |
+
<div class="relative">
|
| 378 |
+
<img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 379 |
+
alt="1970 Dodge Challenger"
|
| 380 |
+
class="w-full h-64 object-cover">
|
| 381 |
+
<div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full">
|
| 382 |
+
<span class="text-xs font-semibold text-white">RARE FIND</span>
|
| 383 |
+
</div>
|
| 384 |
+
</div>
|
| 385 |
+
<div class="p-6">
|
| 386 |
+
<h3 class="text-2xl font-bold mb-2">1970 Dodge Challenger</h3>
|
| 387 |
+
<div class="flex items-center mb-4">
|
| 388 |
+
<span class="text-gray-400 text-sm">Mileage: 12,345 mi</span>
|
| 389 |
+
<span class="mx-2 text-gray-600">·</span>
|
| 390 |
+
<span class="text-gray-400 text-sm">Condition: Concours</span>
|
| 391 |
+
</div>
|
| 392 |
+
<p class="text-gray-300 mb-6">Numbers matching 440ci V8 with 4-speed manual transmission. Award-winning rotisserie restoration.</p>
|
| 393 |
+
<div class="flex justify-between items-center">
|
| 394 |
+
<span class="text-2xl font-bold">$225,000</span>
|
| 395 |
+
<button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300">
|
| 396 |
+
Details
|
| 397 |
+
</button>
|
| 398 |
+
</div>
|
| 399 |
+
</div>
|
| 400 |
+
</div>
|
| 401 |
+
|
| 402 |
+
<!-- Car 2 -->
|
| 403 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 404 |
+
<div class="relative">
|
| 405 |
+
<img 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"
|
| 406 |
+
alt="1963 Corvette Sting Ray"
|
| 407 |
+
class="w-full h-64 object-cover">
|
| 408 |
+
<div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full">
|
| 409 |
+
<span class="text-xs font-semibold text-white">NEW ARRIVAL</span>
|
| 410 |
+
</div>
|
| 411 |
+
</div>
|
| 412 |
+
<div class="p-6">
|
| 413 |
+
<h3 class="text-2xl font-bold mb-2">1963 Corvette Sting Ray</h3>
|
| 414 |
+
<div class="flex items-center mb-4">
|
| 415 |
+
<span class="text-gray-400 text-sm">Mileage: 28,765 mi</span>
|
| 416 |
+
<span class="mx-2 text-gray-600">·</span>
|
| 417 |
+
<span class="text-gray-400 text-sm">Condition: Excellent</span>
|
| 418 |
+
</div>
|
| 419 |
+
<p class="text-gray-300 mb-6">Split window coupe with original 327/340hp fuel injected engine and 4-speed transmission.</p>
|
| 420 |
+
<div class="flex justify-between items-center">
|
| 421 |
+
<span class="text-2xl font-bold">$195,000</span>
|
| 422 |
+
<button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300">
|
| 423 |
+
Details
|
| 424 |
+
</button>
|
| 425 |
+
</div>
|
| 426 |
+
</div>
|
| 427 |
+
</div>
|
| 428 |
+
|
| 429 |
+
<!-- Car 3 -->
|
| 430 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 431 |
+
<div class="relative">
|
| 432 |
+
<img src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 433 |
+
alt="1964 Aston Martin DB5"
|
| 434 |
+
class="w-full h-64 object-cover">
|
| 435 |
+
</div>
|
| 436 |
+
<div class="p-6">
|
| 437 |
+
<h3 class="text-2xl font-bold mb-2">1964 Aston Martin DB5</h3>
|
| 438 |
+
<div class="flex items-center mb-4">
|
| 439 |
+
<span class="text-gray-400 text-sm">Mileage: 35,210 mi</span>
|
| 440 |
+
<span class="mx-2 text-gray-600">·</span>
|
| 441 |
+
<span class="text-gray-400 text-sm">Condition: Excellent</span>
|
| 442 |
+
</div>
|
| 443 |
+
<p class="text-gray-300 mb-6">Originally delivered in Dubonnet Rosso with Beige Connolly hides. Matching numbers 4.0L inline-6.</p>
|
| 444 |
+
<div class="flex justify-between items-center">
|
| 445 |
+
<span class="text-2xl font-bold">$1,250,000</span>
|
| 446 |
+
<button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300">
|
| 447 |
+
Details
|
| 448 |
+
</button>
|
| 449 |
+
</div>
|
| 450 |
+
</div>
|
| 451 |
+
</div>
|
| 452 |
+
|
| 453 |
+
<!-- Car 4 -->
|
| 454 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 455 |
+
<div class="relative">
|
| 456 |
+
<img src="https://images.unsplash.com/photo-1558980664-10e7170b5df1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 457 |
+
alt="1961 Ferrari 250 GT"
|
| 458 |
+
class="w-full h-64 object-cover">
|
| 459 |
+
<div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full">
|
| 460 |
+
<span class="text-xs font-semibold text-white">SOLD</span>
|
| 461 |
+
</div>
|
| 462 |
+
</div>
|
| 463 |
+
<div class="p-6">
|
| 464 |
+
<h3 class="text-2xl font-bold mb-2">1961 Ferrari 250 GT</h3>
|
| 465 |
+
<div class="flex items-center mb-4">
|
| 466 |
+
<span class="text-gray-400 text-sm">Mileage: 52,890 mi</span>
|
| 467 |
+
<span class="mx-2 text-gray-600">·</span>
|
| 468 |
+
<span class="text-gray-400 text-sm">Condition: Concours</span>
|
| 469 |
+
</div>
|
| 470 |
+
<p class="text-gray-300 mb-6">One of only 950 examples built, 3.0L Colombo V12, matching numbers with excellent provenance.</p>
|
| 471 |
+
<div class="flex justify-between items-center">
|
| 472 |
+
<span class="text-2xl font-bold text-gray-500 line-through">$3,750,000</span>
|
| 473 |
+
<button class="bg-gray-600 text-white px-6 py-2 rounded cursor-not-allowed">
|
| 474 |
+
Sold
|
| 475 |
+
</button>
|
| 476 |
+
</div>
|
| 477 |
+
</div>
|
| 478 |
+
</div>
|
| 479 |
+
|
| 480 |
+
<!-- Car 5 -->
|
| 481 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 482 |
+
<div class="relative">
|
| 483 |
+
<img src="https://images.unsplash.com/photo-1616422285623-13ff0162193c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
| 484 |
+
alt="1954 Mercedes-Benz 300 SL Gullwing"
|
| 485 |
+
class="w-full h-64 object-cover">
|
| 486 |
+
<div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full">
|
| 487 |
+
<span class="text-xs font-semibold text-white">INQUIRE</span>
|
| 488 |
+
</div>
|
| 489 |
+
</div>
|
| 490 |
+
<div class="p-6">
|
| 491 |
+
<h3 class="text-2xl font-bold mb-2">1954 Mercedes 300 SL</h3>
|
| 492 |
+
<div class="flex items-center mb-4">
|
| 493 |
+
<span class="text-gray-400 text-sm">Mileage: 42,310 mi</span>
|
| 494 |
+
<span class="mx-2 text-gray-600">·</span>
|
| 495 |
+
<span class="text-gray-400 text-sm">Condition: Excellent</span>
|
| 496 |
+
</div>
|
| 497 |
+
<p class="text-gray-300 mb-6">Iconic gullwing doors, matching numbers 3.0L inline-6 with mechanical fuel injection.</p>
|
| 498 |
+
<div class="flex justify-between items-center">
|
| 499 |
+
<span class="text-2xl font-bold">POA</span>
|
| 500 |
+
<button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300">
|
| 501 |
+
Inquire
|
| 502 |
+
</button>
|
| 503 |
+
</div>
|
| 504 |
+
</div>
|
| 505 |
+
</div>
|
| 506 |
+
|
| 507 |
+
<!-- Car 6 -->
|
| 508 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg hover:shadow-red-900/20 transition-all duration-300">
|
| 509 |
+
<div class="relative">
|
| 510 |
+
<img src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
|
| 511 |
+
alt="1969 Ford Mustang Boss 429"
|
| 512 |
+
class="w-full h-64 object-cover">
|
| 513 |
+
<div class="absolute top-4 left-4 bg-black bg-opacity-70 px-3 py-1 rounded-full">
|
| 514 |
+
<span class="text-xs font-semibold text-white">RESTORED</span>
|
| 515 |
+
</div>
|
| 516 |
+
</div>
|
| 517 |
+
<div class="p-6">
|
| 518 |
+
<h3 class="text-2xl font-bold mb-2">1969 Mustang Boss 429</h3>
|
| 519 |
+
<div class="flex items-center mb-4">
|
| 520 |
+
<span class="text-gray-400 text-sm">Mileage: 9,876 mi</span>
|
| 521 |
+
<span class="mx-2 text-gray-600">·</span>
|
| 522 |
+
<span class="text-gray-400 text-sm">Condition: Concours</span>
|
| 523 |
+
</div>
|
| 524 |
+
<p class="text-gray-300 mb-6">Factory-correct Grabber Blue, one of only 859 built in 1969, nut-and-bolt rotisserie restoration.</p>
|
| 525 |
+
<div class="flex justify-between items-center">
|
| 526 |
+
<span class="text-2xl font-bold">$385,000</span>
|
| 527 |
+
<button class="bg-gradient-red text-white px-6 py-2 rounded hover:scale-105 transition-transform duration-300">
|
| 528 |
+
Details
|
| 529 |
+
</button>
|
| 530 |
+
</div>
|
| 531 |
+
</div>
|
| 532 |
+
</div>
|
| 533 |
+
</div>
|
| 534 |
+
|
| 535 |
+
<div class="mt-12 text-center">
|
| 536 |
+
<button class="border-gradient-red px-8 py-3 text-white rounded-md font-bold hover:bg-gradient-to-r from-red-900/20 to-red-700/20 transition-all duration-300 uppercase tracking-wider">
|
| 537 |
+
View Full Inventory
|
| 538 |
+
</button>
|
| 539 |
+
</div>
|
| 540 |
+
</div>
|
| 541 |
+
</section>
|
| 542 |
+
|
| 543 |
+
<!-- Services Section -->
|
| 544 |
+
<section id="services" class="py-20 bg-gray-950">
|
| 545 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 546 |
+
<div class="text-center mb-16">
|
| 547 |
+
<h2 class="text-4xl font-bold mb-4">Our <span class="text-gradient-red">Services</span></h2>
|
| 548 |
+
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Comprehensive care for your prized automobile</p>
|
| 549 |
+
</div>
|
| 550 |
+
|
| 551 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
| 552 |
+
<!-- Service 1 -->
|
| 553 |
+
<div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition-all duration-300">
|
| 554 |
+
<div class="w-16 h-16 bg-gradient-red rounded-full flex items-center justify-center text-white mb-6">
|
| 555 |
+
<i class="fas fa-search text-2xl"></i>
|
| 556 |
+
</div>
|
| 557 |
+
<h3 class="text-xl font-bold mb-3">Curated Acquisition</h3>
|
| 558 |
+
<p class="text-gray-400">Let our experts locate and acquire the perfect classic car based on your specifications, provenance requirements, and budget.</p>
|
| 559 |
+
</div>
|
| 560 |
+
|
| 561 |
+
<!-- Service 2 -->
|
| 562 |
+
<div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition-all duration-300">
|
| 563 |
+
<div class="w-16 h-16 bg-gradient-red rounded-full flex items-center justify-center text-white mb-6">
|
| 564 |
+
<i class="fas fa-wrench text-2xl"></i>
|
| 565 |
+
</div>
|
| 566 |
+
<h3 class="text-xl font-bold mb-3">Restoration</h3>
|
| 567 |
+
<p class="text-gray-400">Our master craftsmen provide concours-quality restorations with obsessive attention to authenticity and detail.</p>
|
| 568 |
+
</div>
|
| 569 |
+
|
| 570 |
+
<!-- Service 3 -->
|
| 571 |
+
<div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition-all duration-300">
|
| 572 |
+
<div class="w-16 h-16 bg-gradient-red rounded-full flex items-center justify-center text-white mb-6">
|
| 573 |
+
<i class="fas fa-leaf text-2xl"></i>
|
| 574 |
+
</div>
|
| 575 |
+
<h3 class="text-xl font-bold mb-3">Preservation</h3>
|
| 576 |
+
<p class="text-gray-400">Specialized care for unrestored original vehicles including climate-controlled storage and maintenance.</p>
|
| 577 |
+
</div>
|
| 578 |
+
|
| 579 |
+
<!-- Service 4 -->
|
| 580 |
+
<div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition-all duration-300">
|
| 581 |
+
<div class="w-16 h-16 bg-gradient-red rounded-full flex items-center justify-center text-white mb-6">
|
| 582 |
+
<i class="fas fa-chart-line text-2xl"></i>
|
| 583 |
+
</div>
|
| 584 |
+
<h3 class="text-xl font-bold mb-3">Investment Advisory</h3>
|
| 585 |
+
<p class="text-gray-400">Market analysis and strategic acquisition guidance for collectors seeking automotive assets with appreciation potential.</p>
|
| 586 |
+
</div>
|
| 587 |
+
</div>
|
| 588 |
+
</div>
|
| 589 |
+
</section>
|
| 590 |
+
|
| 591 |
+
<!-- About Section -->
|
| 592 |
+
<section id="about" class="py-20 bg-black">
|
| 593 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 594 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
| 595 |
+
<div>
|
| 596 |
+
<h2 class="text-4xl font-bold mb-6">About <span class="text-gradient-red">Laferriere Auto</span></h2>
|
| 597 |
+
<p class="text-gray-400 mb-6 leading-relaxed">
|
| 598 |
+
Founded in 1985, Laferriere Auto has established itself as one of the world's premier classic automobile dealers, specializing in rare, investment-quality vehicles from the Brass Era through the 1980s.
|
| 599 |
+
</p>
|
| 600 |
+
<p class="text-gray-400 mb-6 leading-relaxed">
|
| 601 |
+
Our team of experts combines decades of experience in classic car restoration, sales, and market analysis to provide unparalleled service to discerning collectors worldwide.
|
| 602 |
+
</p>
|
| 603 |
+
<p class="text-gray-400 mb-8 leading-relaxed">
|
| 604 |
+
Whether you're seeking to acquire your first classic or add to an established collection, we offer a personalized approach that considers aesthetic preference, historical significance, mechanical condition, and long-term value.
|
| 605 |
+
</p>
|
| 606 |
+
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
|
| 607 |
+
<div class="flex items-center">
|
| 608 |
+
<div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4">
|
| 609 |
+
<i class="fas fa-check"></i>
|
| 610 |
+
</div>
|
| 611 |
+
<div>
|
| 612 |
+
<h4 class="font-bold">350+</h4>
|
| 613 |
+
<p class="text-xs text-gray-500">Cars Restored</p>
|
| 614 |
+
</div>
|
| 615 |
+
</div>
|
| 616 |
+
<div class="flex items-center">
|
| 617 |
+
<div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4">
|
| 618 |
+
<i class="fas fa-trophy"></i>
|
| 619 |
+
</div>
|
| 620 |
+
<div>
|
| 621 |
+
<h4 class="font-bold">42</h4>
|
| 622 |
+
<p class="text-xs text-gray-500">Concours Awards</p>
|
| 623 |
+
</div>
|
| 624 |
+
</div>
|
| 625 |
+
<div class="flex items-center">
|
| 626 |
+
<div class="w-12 h-12 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4">
|
| 627 |
+
<i class="fas fa-users"></i>
|
| 628 |
+
</div>
|
| 629 |
+
<div>
|
| 630 |
+
<h4 class="font-bold">650+</h4>
|
| 631 |
+
<p class="text-xs text-gray-500">Satisfied Clients</p>
|
| 632 |
+
</div>
|
| 633 |
+
</div>
|
| 634 |
+
</div>
|
| 635 |
+
</div>
|
| 636 |
+
<div class="relative">
|
| 637 |
+
<img src="https://images.unsplash.com/photo-1619468129361-1e0cf7eb1699?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
|
| 638 |
+
alt="Our workshop"
|
| 639 |
+
class="rounded-lg shadow-2xl w-full h-auto">
|
| 640 |
+
<div class="absolute -bottom-6 -left-6 w-32 h-32 border-4 border-red-600 z-10 hidden lg:block"></div>
|
| 641 |
+
<div class="absolute -top-6 -right-6 w-32 h-32 border-4 border-red-600 z-10 hidden lg:block"></div>
|
| 642 |
+
</div>
|
| 643 |
+
</div>
|
| 644 |
+
</div>
|
| 645 |
+
</section>
|
| 646 |
+
|
| 647 |
+
<!-- Testimonials Section -->
|
| 648 |
+
<section id="testimonials" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1493238792000-8115dc68c873?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
|
| 649 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 650 |
+
<div class="text-center mb-16">
|
| 651 |
+
<h2 class="text-4xl font-bold mb-4 text-white">Client <span class="text-gradient-red">Testimonials</span></h2>
|
| 652 |
+
<p class="text-xl text-gray-300 max-w-3xl mx-auto">What our clients say about their experience with Laferriere Auto</p>
|
| 653 |
+
</div>
|
| 654 |
+
|
| 655 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 656 |
+
<!-- Testimonial 1 -->
|
| 657 |
+
<div class="testimonial-card rounded-lg p-8 border border-gray-700">
|
| 658 |
+
<div class="flex items-center mb-6">
|
| 659 |
+
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="James Wilson" class="w-12 h-12 rounded-full mr-4">
|
| 660 |
+
<div>
|
| 661 |
+
<h4 class="font-bold">James Wilson</h4>
|
| 662 |
+
<p class="text-sm text-gray-400">Collector Since 1992</p>
|
| 663 |
+
</div>
|
| 664 |
+
</div>
|
| 665 |
+
<p class="text-gray-300 mb-6 italic">
|
| 666 |
+
"Laferriere Auto sourced my dream car - a 1967 Shelby GT500 - with the exact provenance and condition specs I requested. Their attention to detail is unmatched in this industry."
|
| 667 |
+
</p>
|
| 668 |
+
<div class="flex text-yellow-400">
|
| 669 |
+
<i class="fas fa-star"></i>
|
| 670 |
+
<i class="fas fa-star"></i>
|
| 671 |
+
<i class="fas fa-star"></i>
|
| 672 |
+
<i class="fas fa-star"></i>
|
| 673 |
+
<i class="fas fa-star"></i>
|
| 674 |
+
</div>
|
| 675 |
+
</div>
|
| 676 |
+
|
| 677 |
+
<!-- Testimonial 2 -->
|
| 678 |
+
<div class="testimonial-card rounded-lg p-8 border border-gray-700">
|
| 679 |
+
<div class="flex items-center mb-6">
|
| 680 |
+
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sophia Chen" class="w-12 h-12 rounded-full mr-4">
|
| 681 |
+
<div>
|
| 682 |
+
<h4 class="font-bold">Sophia Chen</h4>
|
| 683 |
+
<p class="text-sm text-gray-400">First-time Buyer</p>
|
| 684 |
+
</div>
|
| 685 |
+
</div>
|
| 686 |
+
<p class="text-gray-300 mb-6 italic">
|
| 687 |
+
"As a first-time buyer, I was nervous about entering the classic car market. The team guided me through every step and found me a beautiful '71 Datsun 240Z that's exceeded all expectations."
|
| 688 |
+
</p>
|
| 689 |
+
<div class="flex text-yellow-400">
|
| 690 |
+
<i class="fas fa-star"></i>
|
| 691 |
+
<i class="fas fa-star"></i>
|
| 692 |
+
<i class="fas fa-star"></i>
|
| 693 |
+
<i class="fas fa-star"></i>
|
| 694 |
+
<i class="fas fa-star"></i>
|
| 695 |
+
</div>
|
| 696 |
+
</div>
|
| 697 |
+
|
| 698 |
+
<!-- Testimonial 3 -->
|
| 699 |
+
<div class="testimonial-card rounded-lg p-8 border border-gray-700">
|
| 700 |
+
<div class="flex items-center mb-6">
|
| 701 |
+
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Richard Müller" class="w-12 h-12 rounded-full mr-4">
|
| 702 |
+
<div>
|
| 703 |
+
<h4 class="font-bold">Richard Müller</h4>
|
| 704 |
+
<p class="text-sm text-gray-400">Investment Client</p>
|
| 705 |
+
</div>
|
| 706 |
+
</div>
|
| 707 |
+
<p class="text-gray-300 mb-6 italic">
|
| 708 |
+
"Their market insight helped me build a portfolio of classic cars that has outperformed traditional investments. The Ferrari 250 GT they sourced has appreciated 40% in three years."
|
| 709 |
+
</p>
|
| 710 |
+
<div class="flex text-yellow-400">
|
| 711 |
+
<i class="fas fa-star"></i>
|
| 712 |
+
<i class="fas fa-star"></i>
|
| 713 |
+
<i class="fas fa-star"></i>
|
| 714 |
+
<i class="fas fa-star"></i>
|
| 715 |
+
<i class="fas fa-star-half-alt"></i>
|
| 716 |
+
</div>
|
| 717 |
+
</div>
|
| 718 |
+
</div>
|
| 719 |
+
</div>
|
| 720 |
+
</section>
|
| 721 |
+
|
| 722 |
+
<!-- Contact Section -->
|
| 723 |
+
<section id="contact" class="py-20 bg-gray-900">
|
| 724 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 725 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
| 726 |
+
<div>
|
| 727 |
+
<h2 class="text-4xl font-bold mb-6">Contact <span class="text-gradient-red">Us</span></h2>
|
| 728 |
+
<p class="text-gray-400 mb-8 max-w-lg">
|
| 729 |
+
Ready to begin your classic car journey? Complete the form or contact us directly to speak with one of our specialists about your goals.
|
| 730 |
+
</p>
|
| 731 |
+
|
| 732 |
+
<div class="space-y-6">
|
| 733 |
+
<div class="flex items-start">
|
| 734 |
+
<div class="w-10 h-10 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4 mt-1">
|
| 735 |
+
<i class="fas fa-map-marker-alt"></i>
|
| 736 |
+
</div>
|
| 737 |
+
<div>
|
| 738 |
+
<h4 class="font-bold mb-1">Location</h4>
|
| 739 |
+
<p class="text-gray-400">123 Classic Avenue, Beverly Hills, CA 90210</p>
|
| 740 |
+
</div>
|
| 741 |
+
</div>
|
| 742 |
+
|
| 743 |
+
<div class="flex items-start">
|
| 744 |
+
<div class="w-10 h-10 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4 mt-1">
|
| 745 |
+
<i class="fas fa-phone-alt"></i>
|
| 746 |
+
</div>
|
| 747 |
+
<div>
|
| 748 |
+
<h4 class="font-bold mb-1">Phone</h4>
|
| 749 |
+
<p class="text-gray-400">+1 (310) 555-1967</p>
|
| 750 |
+
</div>
|
| 751 |
+
</div>
|
| 752 |
+
|
| 753 |
+
<div class="flex items-start">
|
| 754 |
+
<div class="w-10 h-10 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4 mt-1">
|
| 755 |
+
<i class="fas fa-envelope"></i>
|
| 756 |
+
</div>
|
| 757 |
+
<div>
|
| 758 |
+
<h4 class="font-bold mb-1">Email</h4>
|
| 759 |
+
<p class="text-gray-400">info@laferriereauto.com</p>
|
| 760 |
+
</div>
|
| 761 |
+
</div>
|
| 762 |
+
|
| 763 |
+
<div class="flex items-start">
|
| 764 |
+
<div class="w-10 h-10 bg-gradient-red rounded-full flex items-center justify-center text-white mr-4 mt-1">
|
| 765 |
+
<i class="fas fa-clock"></i>
|
| 766 |
+
</div>
|
| 767 |
+
<div>
|
| 768 |
+
<h4 class="font-bold mb-1">Hours</h4>
|
| 769 |
+
<p class="text-gray-400">Monday - Friday: 9:00 AM - 6:00 PM <br>
|
| 770 |
+
Saturday: By Appointment<br>
|
| 771 |
+
Sunday: Closed</p>
|
| 772 |
+
</div>
|
| 773 |
+
</div>
|
| 774 |
+
</div>
|
| 775 |
+
|
| 776 |
+
<div class="mt-12 flex space-x-4">
|
| 777 |
+
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
|
| 778 |
+
<i class="fab fa-facebook-f"></i>
|
| 779 |
+
</a>
|
| 780 |
+
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
|
| 781 |
+
<i class="fab fa-instagram"></i>
|
| 782 |
+
</a>
|
| 783 |
+
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
|
| 784 |
+
<i class="fab fa-twitter"></i>
|
| 785 |
+
</a>
|
| 786 |
+
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
|
| 787 |
+
<i class="fab fa-youtube"></i>
|
| 788 |
+
</a>
|
| 789 |
+
</div>
|
| 790 |
+
</div>
|
| 791 |
+
|
| 792 |
+
<div>
|
| 793 |
+
<form class="contact-form space-y-6">
|
| 794 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 795 |
+
<div>
|
| 796 |
+
<label for="first-name" class="block text-sm font-medium text-gray-400 mb-1">First Name</label>
|
| 797 |
+
<input type="text" id="first-name" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500">
|
| 798 |
+
</div>
|
| 799 |
+
<div>
|
| 800 |
+
<label for="last-name" class="block text-sm font-medium text-gray-400 mb-1">Last Name</label>
|
| 801 |
+
<input type="text" id="last-name" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500">
|
| 802 |
+
</div>
|
| 803 |
+
</div>
|
| 804 |
+
|
| 805 |
+
<div>
|
| 806 |
+
<label for="email" class="block text-sm font-medium text-gray-400 mb-1">Email</label>
|
| 807 |
+
<input type="email" id="email" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500">
|
| 808 |
+
</div>
|
| 809 |
+
|
| 810 |
+
<div>
|
| 811 |
+
<label for="phone" class="block text-sm font-medium text-gray-400 mb-1">Phone</label>
|
| 812 |
+
<input type="tel" id="phone" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500">
|
| 813 |
+
</div>
|
| 814 |
+
|
| 815 |
+
<div>
|
| 816 |
+
<label for="interest" class="block text-sm font-medium text-gray-400 mb-1">Vehicle of Interest</label>
|
| 817 |
+
<select id="interest" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white border-gray-600 focus:ring-0 focus:border-red-500">
|
| 818 |
+
<option class="bg-gray-900">General Inquiry</option>
|
| 819 |
+
<option class="bg-gray-900">1957 Chevrolet Bel Air</option>
|
| 820 |
+
<option class="bg-gray-900">1969 Ford Mustang</option>
|
| 821 |
+
<option class="bg-gray-900">1963 Jaguar E-Type</option>
|
| 822 |
+
<option class="bg-gray-900">1955 Porsche 356</option>
|
| 823 |
+
<option class="bg-gray-900">1968 Mercedes 280SL</option>
|
| 824 |
+
<option class="bg-gray-900">Other Specific Model</option>
|
| 825 |
+
</select>
|
| 826 |
+
</div>
|
| 827 |
+
|
| 828 |
+
<div>
|
| 829 |
+
<label for="message" class="block text-sm font-medium text-gray-400 mb-1">Message</label>
|
| 830 |
+
<textarea id="message" rows="4" class="w-full px-0 py-3 bg-transparent border-0 border-b text-white placeholder-gray-500 focus:ring-0 focus:border-red-500"></textarea>
|
| 831 |
+
</div>
|
| 832 |
+
|
| 833 |
+
<button type="submit" class="w-full bg-gradient-red text-white py-4 rounded-md font-bold hover:shadow-lg hover:shadow-red-900/30 transition-all duration-300 uppercase tracking-wider">
|
| 834 |
+
Send Message
|
| 835 |
+
</button>
|
| 836 |
+
</form>
|
| 837 |
+
</div>
|
| 838 |
+
</div>
|
| 839 |
+
</div>
|
| 840 |
+
</section>
|
| 841 |
+
|
| 842 |
+
<!-- Footer -->
|
| 843 |
+
<footer class="bg-black py-12 border-t border-gray-900">
|
| 844 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 845 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-12">
|
| 846 |
+
<div>
|
| 847 |
+
<h3 class="text-xl font-bold mb-6">LAFERRIERE <span class="text-gradient-red">AUTO</span></h3>
|
| 848 |
+
<p class="text-gray-400 mb-6">
|
| 849 |
+
The world's premier destination for investment-grade classic automobiles since 1985.
|
| 850 |
+
</p>
|
| 851 |
+
<div class="flex space-x-4">
|
| 852 |
+
<a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
|
| 853 |
+
<i class="fab fa-facebook-f"></i>
|
| 854 |
+
</a>
|
| 855 |
+
<a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
|
| 856 |
+
<i class="fab fa-instagram"></i>
|
| 857 |
+
</a>
|
| 858 |
+
<a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
|
| 859 |
+
<i class="fab fa-twitter"></i>
|
| 860 |
+
</a>
|
| 861 |
+
<a href="#" class="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-gradient-red transition-all duration-300">
|
| 862 |
+
<i class="fab fa-youtube"></i>
|
| 863 |
+
</a>
|
| 864 |
+
</div>
|
| 865 |
+
</div>
|
| 866 |
+
|
| 867 |
+
<div>
|
| 868 |
+
<h4 class="font-bold text-lg mb-6">Quick Links</h4>
|
| 869 |
+
<ul class="space-y-3">
|
| 870 |
+
<li><a href="#home" class="text-gray-400 hover:text-white transition-colors duration-300">Home</a></li>
|
| 871 |
+
<li><a href="#inventory" class="text-gray-400 hover:text-white transition-colors duration-300">Inventory</a></li>
|
| 872 |
+
<li><a href="#services" class="text-gray-400 hover:text-white transition-colors duration-300">Services</a></li>
|
| 873 |
+
<li><a href="#about" class="text-gray-400 hover:text-white transition-colors duration-300">About Us</a></li>
|
| 874 |
+
<li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
|
| 875 |
+
</ul>
|
| 876 |
+
</div>
|
| 877 |
+
|
| 878 |
+
<div>
|
| 879 |
+
<h4 class="font-bold text-lg mb-6">Services</h4>
|
| 880 |
+
<ul class="space-y-3">
|
| 881 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Acquisition</a></li>
|
| 882 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Restoration</a></li>
|
| 883 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Preservation</a></li>
|
| 884 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Investment Advisory</a></li>
|
| 885 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Consignment</a></li>
|
| 886 |
+
</ul>
|
| 887 |
+
</div>
|
| 888 |
+
|
| 889 |
+
<div>
|
| 890 |
+
<h4 class="font-bold text-lg mb-6">Newsletter</h4>
|
| 891 |
+
<p class="text-gray-400 mb-6">
|
| 892 |
+
Subscribe to receive updates on new arrivals, upcoming auctions, and market insights.
|
| 893 |
+
</p>
|
| 894 |
+
<form class="flex">
|
| 895 |
+
<input type="email" placeholder="Your Email" class="px-4 py-3 bg-gray-900 text-white rounded-l focus:outline-none focus:ring-1 focus:ring-red-500 w-full">
|
| 896 |
+
<button type="submit" class="bg-gradient-red text-white px-4 rounded-r hover:bg-red-700 transition-colors duration-300">
|
| 897 |
+
<i class="fas fa-paper-plane"></i>
|
| 898 |
+
</button>
|
| 899 |
+
</form>
|
| 900 |
+
</div>
|
| 901 |
+
</div>
|
| 902 |
+
|
| 903 |
+
<div class="border-t border-gray-900 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 904 |
+
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
| 905 |
+
© 2023 Laferriere Auto. All rights reserved.
|
| 906 |
+
</p>
|
| 907 |
+
<div class="flex space-x-6">
|
| 908 |
+
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Privacy Policy</a>
|
| 909 |
+
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Terms of Service</a>
|
| 910 |
+
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Sitemap</a>
|
| 911 |
+
</div>
|
| 912 |
+
</div>
|
| 913 |
+
</div>
|
| 914 |
+
</footer>
|
| 915 |
|
| 916 |
<script>
|
| 917 |
// Mobile menu toggle
|