Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LUXE KICKS | Premium Sneakers</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #000; | |
| color: #fff; | |
| overflow-x: hidden; | |
| } | |
| .sneaker-card:hover .sneaker-3d { | |
| transform: rotateY(15deg) rotateX(10deg) translateY(-10px); | |
| box-shadow: 0 25px 50px rgba(255, 0, 0, 0.3); | |
| } | |
| .sneaker-3d { | |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| transform-style: preserve-3d; | |
| } | |
| .red-glow { | |
| box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); | |
| } | |
| .red-glow:hover { | |
| box-shadow: 0 0 25px rgba(255, 0, 0, 0.8); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #ff0000, #ff4d4d); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .marquee { | |
| animation: marquee 20s linear infinite; | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-blur-sm border-b border-red-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold gradient-text">LUXE KICKS</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#featured" class="text-white hover:text-red-500 transition">Featured</a> | |
| <a href="#collections" class="text-white hover:text-red-500 transition">Collections</a> | |
| <a href="#about" class="text-white hover:text-red-500 transition">About</a> | |
| <a href="#contact" class="text-white hover:text-red-500 transition">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="cart-btn" class="relative text-white hover:text-red-500 transition"> | |
| <i class="fas fa-shopping-bag text-xl"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-red-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <button id="auth-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full transition">Login</button> | |
| <button class="md:hidden text-white" id="mobile-menu-btn"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95 border-t border-red-900"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#featured" class="block px-3 py-2 text-white hover:text-red-500">Featured</a> | |
| <a href="#collections" class="block px-3 py-2 text-white hover:text-red-500">Collections</a> | |
| <a href="#about" class="block px-3 py-2 text-white hover:text-red-500">About</a> | |
| <a href="#contact" class="block px-3 py-2 text-white hover:text-red-500">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10"> | |
| <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6"> | |
| <span class="gradient-text">ELEVATE</span> YOUR STYLE | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl"> | |
| Discover the most exclusive sneakers from limited editions to collector's items. Handpicked for the discerning enthusiast. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#collections" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-full font-medium transition transform hover:scale-105"> | |
| SHOP NOW | |
| </a> | |
| <a href="#featured" class="border border-red-600 text-red-500 hover:bg-red-900 hover:bg-opacity-30 px-8 py-3 rounded-full font-medium transition transform hover:scale-105"> | |
| EXPLORE | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3D Sneaker Animation --> | |
| <div class="absolute right-0 top-1/2 transform -translate-y-1/2 w-1/2 md:w-1/3 lg:w-1/4 opacity-70 md:opacity-100"> | |
| <div class="sneaker-3d"> | |
| <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80" | |
| alt="Premium Sneaker" | |
| class="w-full h-auto rotate-12 transform scale-110"> | |
| </div> | |
| </div> | |
| <!-- Marquee --> | |
| <div class="absolute bottom-0 left-0 w-full bg-red-900 bg-opacity-20 py-3 overflow-hidden"> | |
| <div class="marquee whitespace-nowrap"> | |
| <span class="text-white text-sm md:text-base mx-8">FREE SHIPPING ON ALL ORDERS • LIMITED STOCK AVAILABLE • EXCLUSIVE DROPS EVERY WEEK • FREE SHIPPING ON ALL ORDERS • LIMITED STOCK AVAILABLE • EXCLUSIVE DROPS EVERY WEEK</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Section --> | |
| <section id="featured" class="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">FEATURED</span> DROPS | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Our most exclusive releases. Limited quantities available. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Featured Item 1 --> | |
| <div class="sneaker-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-900 transition group"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <div class="sneaker-3d absolute inset-0 flex items-center justify-center p-8"> | |
| <img src="https://images.unsplash.com/photo-1605348532760-6753d2c43329?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Air Jordan 1 Retro High" | |
| class="w-full h-full object-contain transform group-hover:scale-110 transition duration-500"> | |
| </div> | |
| <div class="absolute top-4 right-4"> | |
| <span class="bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">LIMITED</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Air Jordan 1 Retro High</h3> | |
| <p class="text-gray-400 text-sm mb-3">OG Chicago Colorway</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-red-500 font-bold text-lg">$1,299</span> | |
| <button class="add-to-cart bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm transition" | |
| data-id="1" | |
| data-name="Air Jordan 1 Retro High" | |
| data-price="1299" | |
| data-image="https://images.unsplash.com/photo-1605348532760-6753d2c43329?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Item 2 --> | |
| <div class="sneaker-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-900 transition group"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <div class="sneaker-3d absolute inset-0 flex items-center justify-center p-8"> | |
| <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80" | |
| alt="Nike Dunk Low SP" | |
| class="w-full h-full object-contain transform group-hover:scale-110 transition duration-500"> | |
| </div> | |
| <div class="absolute top-4 right-4"> | |
| <span class="bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Nike Dunk Low SP</h3> | |
| <p class="text-gray-400 text-sm mb-3">Syracuse University</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-red-500 font-bold text-lg">$899</span> | |
| <button class="add-to-cart bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm transition" | |
| data-id="2" | |
| data-name="Nike Dunk Low SP" | |
| data-price="899" | |
| data-image="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Item 3 --> | |
| <div class="sneaker-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-900 transition group"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <div class="sneaker-3d absolute inset-0 flex items-center justify-center p-8"> | |
| <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Adidas Yeezy Boost 350" | |
| class="w-full h-full object-contain transform group-hover:scale-110 transition duration-500"> | |
| </div> | |
| <div class="absolute top-4 right-4"> | |
| <span class="bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">RARE</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Adidas Yeezy Boost 350</h3> | |
| <p class="text-gray-400 text-sm mb-3">V2 Zebra</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-red-500 font-bold text-lg">$1,499</span> | |
| <button class="add-to-cart bg-gray-800 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm transition" | |
| data-id="3" | |
| data-name="Adidas Yeezy Boost 350" | |
| data-price="1499" | |
| data-image="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Collections Section --> | |
| <section id="collections" class="py-16 px-4 sm:px-6 lg:px-8 bg-black"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">EXCLUSIVE</span> COLLECTIONS | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Browse our curated collections of the most sought-after sneakers. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Collection 1 --> | |
| <a href="#" class="collection-card | |
| </html> |