Hugging Face's logo

Spaces:
Inspireoriginal
/
fitfusion-fervor
Running

App Files Community
Inspireoriginal commited on
Commit
d7b2b52
·
verified ·
1 Parent(s): 6f50a4d

delet this start new project

Browse files
Files changed (1) hide show
  1. index.html +51 -285
index.html CHANGED
@@ -3,318 +3,84 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Inspire Original | Gear That Moves You</title>
7
- <meta name="description" content="Shop Inspire Original — where premium fitness meets emotional design. Gear built for performance, style, and motivation with neuro-marketing visuals.">
8
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
13
- <style>
14
- @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Inter:wght@400;600&display=swap');
15
- body {
16
- font-family: 'Inter', sans-serif;
17
- }
18
- h1, h2, h3, h4 {
19
- font-family: 'Montserrat', sans-serif;
20
- }
21
- .hero-gradient {
22
- background: linear-gradient(135deg, #0076FF 0%, #FF3C7E 100%);
23
- }
24
- .pulse-animation {
25
- animation: pulse 2s infinite;
26
- }
27
- @keyframes pulse {
28
- 0% { transform: scale(1); }
29
- 50% { transform: scale(1.05); }
30
- 100% { transform: scale(1); }
31
- }
32
- </style>
33
  </head>
34
- <body class="bg-gray-50 text-gray-900">
35
- <!-- Header -->
36
- <header class="relative overflow-hidden">
37
- <div id="vanta-bg" class="absolute inset-0 z-0"></div>
38
- <div class="relative z-10">
39
- <div class="container mx-auto px-6 py-4">
40
- <div class="flex items-center justify-between">
41
- <div class="flex items-center space-x-2">
42
- <img src="http://static.photos/black/200x200/42" alt="Inspire Original Logo" class="h-10 w-10 rounded-full">
43
- <span class="text-xl font-bold text-white">Inspire Original</span>
44
- </div>
45
- <nav class="hidden md:flex items-center space-x-8">
46
- <a href="#" class="text-white hover:text-gray-200 font-medium">Shop</a>
47
- <a href="#" class="text-white hover:text-gray-200 font-medium">Collections</a>
48
- <a href="#" class="text-white hover:text-gray-200 font-medium">Our Story</a>
49
- <a href="#" class="text-white hover:text-gray-200 font-medium">Blog</a>
50
- </nav>
51
- <div class="flex items-center space-x-4">
52
- <button class="text-white"><i data-feather="search"></i></button>
53
- <button class="text-white"><i data-feather="user"></i></button>
54
- <button class="text-white"><i data-feather="shopping-bag"></i></button>
55
- <button class="md:hidden text-white"><i data-feather="menu"></i></button>
56
- </div>
57
  </div>
58
- </div>
59
- </div>
60
-
61
- <!-- Hero Section -->
62
- <div class="relative z-10 py-32 px-6 text-center">
63
- <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Move Different. <span class="text-yellow-300">Live Inspired.</span></h1>
64
- <p class="text-xl text-white mb-8 max-w-2xl mx-auto">Your health, your style, your originality.</p>
65
- <div class="flex flex-col sm:flex-row justify-center gap-4">
66
- <button class="bg-white text-blue-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg">
67
- Shop The Drop
68
- </button>
69
- <button class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-blue-600 transition-all duration-300 transform hover:scale-105">
70
- Join the Movement
71
  </button>
72
  </div>
73
  </div>
74
  </header>
75
 
76
- <!-- Featured Products -->
77
- <section class="py-16 bg-white">
78
- <div class="container mx-auto px-6">
79
- <h2 class="text-3xl font-bold text-center mb-12">Featured Collections</h2>
80
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
81
- <!-- Product 1 -->
82
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
83
- <div class="relative overflow-hidden h-80">
84
- <img src="http://static.photos/fitness/640x360/1" alt="Performance Tee" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
85
- <div class="absolute bottom-4 left-4">
86
- <span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold">New</span>
87
- </div>
88
- </div>
89
- <div class="p-6">
90
- <h3 class="text-xl font-bold mb-2">Performance Tee</h3>
91
- <p class="text-gray-600 mb-4">Breathable fabric for intense workouts</p>
92
- <div class="flex justify-between items-center">
93
- <span class="font-bold text-lg">$49.99</span>
94
- <button class="bg-black text-white px-4 py-2 rounded-full hover:bg-gray-800 transition-colors">
95
- <i data-feather="shopping-bag" class="w-4 h-4"></i>
96
- </button>
97
- </div>
98
- </div>
99
- </div>
100
-
101
- <!-- Product 2 -->
102
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
103
- <div class="relative overflow-hidden h-80">
104
- <img src="http://static.photos/sport/640x360/2" alt="Motivation Hoodie" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
105
- <div class="absolute bottom-4 left-4">
106
- <span class="bg-pink-500 text-white px-3 py-1 rounded-full text-sm font-bold">Bestseller</span>
107
- </div>
108
- </div>
109
- <div class="p-6">
110
- <h3 class="text-xl font-bold mb-2">Motivation Hoodie</h3>
111
- <p class="text-gray-600 mb-4">Stay warm, stay motivated</p>
112
- <div class="flex justify-between items-center">
113
- <span class="font-bold text-lg">$79.99</span>
114
- <button class="bg-black text-white px-4 py-2 rounded-full hover:bg-gray-800 transition-colors">
115
- <i data-feather="shopping-bag" class="w-4 h-4"></i>
116
- </button>
117
- </div>
118
- </div>
119
- </div>
120
-
121
- <!-- Product 3 -->
122
- <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
123
- <div class="relative overflow-hidden h-80">
124
- <img src="http://static.photos/wellness/640x360/3" alt="Recovery Leggings" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
125
- </div>
126
- <div class="p-6">
127
- <h3 class="text-xl font-bold mb-2">Recovery Leggings</h3>
128
- <p class="text-gray-600 mb-4">Compression fit for optimal recovery</p>
129
- <div class="flex justify-between items-center">
130
- <span class="font-bold text-lg">$64.99</span>
131
- <button class="bg-black text-white px-4 py-2 rounded-full hover:bg-gray-800 transition-colors">
132
- <i data-feather="shopping-bag" class="w-4 h-4"></i>
133
- </button>
134
- </div>
135
- </div>
136
- </div>
137
- </div>
138
-
139
- <div class="text-center mt-12">
140
- <button class="border-2 border-black px-8 py-3 rounded-full font-bold hover:bg-black hover:text-white transition-all duration-300">
141
- View All Collections
142
  </button>
143
  </div>
144
- </div>
145
- </section>
146
 
147
- <!-- Benefits Section -->
148
- <section class="py-16 bg-gray-100">
149
- <div class="container mx-auto px-6">
150
- <h2 class="text-3xl font-bold text-center mb-12">Why Choose Inspire Original?</h2>
151
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
152
- <div class="bg-white p-8 rounded-xl shadow-md text-center">
153
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
154
- <i data-feather="activity" class="text-blue-600 w-8 h-8"></i>
155
- </div>
156
- <h3 class="text-xl font-bold mb-3">Performance Driven</h3>
157
- <p class="text-gray-600">Engineered with high-tech fabrics that enhance your workout and recovery.</p>
158
- </div>
159
- <div class="bg-white p-8 rounded-xl shadow-md text-center">
160
- <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
161
- <i data-feather="heart" class="text-pink-600 w-8 h-8"></i>
162
- </div>
163
- <h3 class="text-xl font-bold mb-3">Emotional Design</h3>
164
- <p class="text-gray-600">Visual triggers to keep you motivated through every rep and every mile.</p>
165
- </div>
166
- <div class="bg-white p-8 rounded-xl shadow-md text-center">
167
- <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
168
- <i data-feather="globe" class="text-green-600 w-8 h-8"></i>
169
- </div>
170
- <h3 class="text-xl font-bold mb-3">Sustainable Future</h3>
171
- <p class="text-gray-600">Eco-conscious materials that don't compromise on performance.</p>
172
  </div>
 
 
173
  </div>
174
- </div>
175
- </section>
176
-
177
- <!-- Testimonials -->
178
- <section class="py-16 bg-blue-600 text-white">
179
- <div class="container mx-auto px-6">
180
- <h2 class="text-3xl font-bold text-center mb-12">Real Results from Real People</h2>
181
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
182
- <div class="bg-blue-700 p-8 rounded-xl">
183
- <div class="flex items-center mb-4">
184
- <img src="http://static.photos/people/200x200/1" alt="Alex M." class="w-12 h-12 rounded-full mr-4">
185
- <div>
186
- <h4 class="font-bold">Alex M.</h4>
187
- <div class="flex text-yellow-300">
188
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
189
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
190
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
191
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
192
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
193
- </div>
194
- </div>
195
- </div>
196
- <p>"The Performance Tee changed my workouts. The fabric keeps me cool even during HIIT sessions, and the motivational print pushes me to go harder."</p>
197
  </div>
198
- <div class="bg-blue-700 p-8 rounded-xl">
199
- <div class="flex items-center mb-4">
200
- <img src="http://static.photos/people/200x200/2" alt="Jamie L." class="w-12 h-12 rounded-full mr-4">
201
- <div>
202
- <h4 class="font-bold">Jamie L.</h4>
203
- <div class="flex text-yellow-300">
204
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
205
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
206
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
207
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
208
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
209
- </div>
210
- </div>
211
- </div>
212
- <p>"I live in my Recovery Leggings. The compression is perfect for post-workout, but I wear them all day because they're so comfortable and stylish."</p>
213
- </div>
214
- <div class="bg-blue-700 p-8 rounded-xl">
215
- <div class="flex items-center mb-4">
216
- <img src="http://static.photos/people/200x200/3" alt="Taylor R." class="w-12 h-12 rounded-full mr-4">
217
- <div>
218
- <h4 class="font-bold">Taylor R.</h4>
219
- <div class="flex text-yellow-300">
220
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
221
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
222
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
223
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
224
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
225
- </div>
226
- </div>
227
- </div>
228
- <p>"As a personal trainer, I recommend Inspire Original to all my clients. The quality is unmatched, and the designs actually motivate people to workout."</p>
229
  </div>
 
 
230
  </div>
231
- </div>
232
- </section>
233
-
234
- <!-- CTA Section -->
235
- <section class="py-20 hero-gradient text-white">
236
- <div class="container mx-auto px-6 text-center">
237
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Elevate Your Fitness Journey?</h2>
238
- <p class="text-xl mb-8 max-w-2xl mx-auto">Join 10,000+ inspired individuals who've upgraded their workout gear with us.</p>
239
- <button class="bg-white text-blue-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg pulse-animation">
240
- Start Your Quiz
241
- </button>
242
- </div>
243
- </section>
244
 
245
- <!-- Footer -->
246
- <footer class="bg-black text-white py-12">
247
  <div class="container mx-auto px-6">
248
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
249
- <div>
250
- <h4 class="text-xl font-bold mb-4">Inspire Original</h4>
251
- <p class="text-gray-400">Gear that moves with you, inspires you, and levels you up.</p>
252
- <div class="flex space-x-4 mt-4">
253
- <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
254
- <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
255
- <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
256
- <a href="#" class="text-gray-400 hover:text-white"><i data-feather="youtube"></i></a>
257
- </div>
258
- </div>
259
- <div>
260
- <h4 class="text-lg font-bold mb-4">Shop</h4>
261
- <ul class="space-y-2">
262
- <li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li>
263
- <li><a href="#" class="text-gray-400 hover:text-white">Bestsellers</a></li>
264
- <li><a href="#" class="text-gray-400 hover:text-white">Collections</a></li>
265
- <li><a href="#" class="text-gray-400 hover:text-white">Accessories</a></li>
266
- </ul>
267
- </div>
268
- <div>
269
- <h4 class="text-lg font-bold mb-4">About</h4>
270
- <ul class="space-y-2">
271
- <li><a href="#" class="text-gray-400 hover:text-white">Our Story</a></li>
272
- <li><a href="#" class="text-gray-400 hover:text-white">Materials</a></li>
273
- <li><a href="#" class="text-gray-400 hover:text-white">Sustainability</a></li>
274
- <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
275
- </ul>
276
- </div>
277
- <div>
278
- <h4 class="text-lg font-bold mb-4">Help</h4>
279
- <ul class="space-y-2">
280
- <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
281
- <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
282
- <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li>
283
- <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li>
284
- </ul>
285
- </div>
286
- </div>
287
- <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
288
- <p class="text-gray-400">© 2023 Inspire Original. All rights reserved.</p>
289
- <div class="flex space-x-6 mt-4 md:mt-0">
290
- <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
291
- <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
292
- <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a>
293
  </div>
294
  </div>
295
  </div>
296
  </footer>
297
 
298
  <script>
299
- // Initialize Vanta.js background
300
- VANTA.WAVES({
301
- el: "#vanta-bg",
302
- mouseControls: true,
303
- touchControls: true,
304
- gyroControls: false,
305
- minHeight: 200.00,
306
- minWidth: 200.00,
307
- scale: 1.00,
308
- scaleMobile: 1.00,
309
- color: 0x0076ff,
310
- shininess: 35.00,
311
- waveHeight: 15.00,
312
- waveSpeed: 0.90,
313
- zoom: 0.75
314
- });
315
-
316
- // Initialize Feather Icons
317
  feather.replace();
318
  </script>
319
  </body>
320
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>New Project</title>
 
7
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://unpkg.com/feather-icons"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  </head>
12
+ <body class="bg-gray-100">
13
+ <header class="bg-white shadow-sm">
14
+ <div class="container mx-auto px-6 py-4">
15
+ <div class="flex justify-between items-center">
16
+ <div class="flex items-center space-x-2">
17
+ <i data-feather="circle" class="text-blue-600"></i>
18
+ <span class="font-bold text-lg">NewProject</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </div>
20
+ <nav class="hidden md:flex space-x-8">
21
+ <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
22
+ <a href="#" class="text-gray-700 hover:text-blue-600">About</a>
23
+ <a href="#" class="text-gray-700 hover:text-blue-600">Services</a>
24
+ <a href="#" class="text-gray-700 hover:text-blue-600">Contact</a>
25
+ </nav>
26
+ <button class="md:hidden text-gray-700">
27
+ <i data-feather="menu"></i>
 
 
 
 
 
28
  </button>
29
  </div>
30
  </div>
31
  </header>
32
 
33
+ <main class="container mx-auto px-6 py-12">
34
+ <section class="text-center mb-16">
35
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Welcome to New Project</h1>
36
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">A fresh start for your next big idea</p>
37
+ <div class="mt-8">
38
+ <button class="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
39
+ Get Started
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  </button>
41
  </div>
42
+ </section>
 
43
 
44
+ <section class="grid md:grid-cols-3 gap-8 mb-16">
45
+ <div class="bg-white p-8 rounded-lg shadow-md">
46
+ <div class="text-blue-600 mb-4">
47
+ <i data-feather="zap" class="w-8 h-8"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </div>
49
+ <h2 class="text-xl font-bold mb-3">Fast</h2>
50
+ <p class="text-gray-600">Lightning quick performance for all your needs.</p>
51
  </div>
52
+ <div class="bg-white p-8 rounded-lg shadow-md">
53
+ <div class="text-blue-600 mb-4">
54
+ <i data-feather="shield" class="w-8 h-8"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  </div>
56
+ <h2 class="text-xl font-bold mb-3">Secure</h2>
57
+ <p class="text-gray-600">Bank-level security to protect your data.</p>
58
+ </div>
59
+ <div class="bg-white p-8 rounded-lg shadow-md">
60
+ <div class="text-blue-600 mb-4">
61
+ <i data-feather="settings" class="w-8 h-8"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </div>
63
+ <h2 class="text-xl font-bold mb-3">Customizable</h2>
64
+ <p class="text-gray-600">Tailor it to fit your exact requirements.</p>
65
  </div>
66
+ </section>
67
+ </main>
 
 
 
 
 
 
 
 
 
 
 
68
 
69
+ <footer class="bg-gray-800 text-white py-12">
 
70
  <div class="container mx-auto px-6">
71
+ <div class="text-center">
72
+ <p>&copy; 2023 New Project. All rights reserved.</p>
73
+ <div class="flex justify-center space-x-6 mt-4">
74
+ <a href="#" class="hover:text-blue-400"><i data-feather="twitter"></i></a>
75
+ <a href="#" class="hover:text-blue-400"><i data-feather="instagram"></i></a>
76
+ <a href="#" class="hover:text-blue-400"><i data-feather="github"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  </div>
78
  </div>
79
  </div>
80
  </footer>
81
 
82
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  feather.replace();
84
  </script>
85
  </body>
86
+ </html>