Hugging Face's logo

Spaces:
stubbornmohit
/
ai-app
Running

App Files Community
ai-app
File size: 14,392 Bytes 
61b164b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
 
<!DOCTYPE html>
<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>