Hugging Face's logo

Spaces:
Falln87
/
thunderboltriders
Running

App Files Community
Falln87 commited on
Commit
f16a4c1
·
verified ·
1 Parent(s): 5b6b66d

Create an ePowerSports site

Browse files
Files changed (2) hide show
  1. README.md +6 -3
  2. index.html +283 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Thunderboltriders
3
- emoji: 🌍
4
  colorFrom: red
5
  colorTo: blue
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ThunderBoltRiders ⚡
 
3
  colorFrom: red
4
  colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,284 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ThunderBoltRiders - ePowerSports</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#ef4444',
19
+ secondary: '#d946ef'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .hero-gradient {
27
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(217, 70, 239, 0.05) 100%);
28
+ }
29
+ .glow-red {
30
+ box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
31
+ }
32
+ .glow-fuchsia {
33
+ box-shadow: 0 0 20px rgba(217, 70, 239, 0.3);
34
+ }
35
+ .hover-lift {
36
+ transition: all 0.3s ease;
37
+ }
38
+ .hover-lift:hover {
39
+ transform: translateY(-5px);
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-900 text-white min-h-screen">
44
+ <!-- Navigation -->
45
+ <nav class="bg-gray-800/80 backdrop-blur-lg border-b border-gray-700 sticky top-0 z-50">
46
+ <div class="container mx-auto px-4 py-4">
47
+ <div class="flex justify-between items-center">
48
+ <div class="flex items-center space-x-2">
49
+ <div class="w-10 h-10 bg-red-500 rounded-full glow-red"></div>
50
+ <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-fuchsia-500 bg-clip-text text-transparent">ThunderBoltRiders</span>
51
+ </div>
52
+
53
+ <div class="hidden md:flex space-x-8">
54
+ <a href="#home" class="hover:text-red-400 transition-colors">Home</a>
55
+ <a href="#products" class="hover:text-red-400 transition-colors">Products</a>
56
+ <a href="#about" class="hover:text-red-400 transition-colors">About</a>
57
+ <a href="#contact" class="hover:text-red-400 transition-colors">Contact</a>
58
+ </div>
59
+
60
+ <div class="flex items-center space-x-4">
61
+ <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg transition-colors glow-red">
62
+ Shop Now
63
+ </button>
64
+ <button class="md:hidden">
65
+ <i data-feather="menu"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </nav>
71
+
72
+ <!-- Hero Section -->
73
+ <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden">
74
+ <div id="vanta-bg" class="absolute inset-0"></div>
75
+ <div class="relative z-10 container mx-auto px-4 text-center">
76
+ <h1 class="text-6xl md:text-8xl font-bold mb-6">
77
+ <span class="bg-gradient-to-r from-red-500 to-fuchsia-500 bg-clip-text text-transparent">
78
+ RIDE THE
79
+ </span>
80
+ <br>
81
+ <span class="bg-gradient-to-r from-fuchsia-500 to-red-500 bg-clip-text text-transparent">
82
+ FUTURE
83
+ </span>
84
+ </h1>
85
+ <p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-3xl mx-auto">
86
+ Experience the thrill of electric power sports with our cutting-edge e-bikes, scooters, and boards.
87
+ Sustainable speed meets unparalleled performance.
88
+ </p>
89
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
90
+ <button class="bg-red-500 hover:bg-red-600 px-8 py-4 rounded-xl text-lg font-semibold transition-all hover-lift glow-red">
91
+ Explore Collection
92
+ </button>
93
+ <button class="border-2 border-fuchsia-500 hover:bg-fuchsia-500/20 px-8 py-4 rounded-xl text-lg font-semibold transition-all hover-lift glow-fuchsia">
94
+ Book Test Ride
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </section>
99
+
100
+ <!-- Products Section -->
101
+ <section id="products" class="py-20 bg-gray-800/50">
102
+ <div class="container mx-auto px-4">
103
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-16">
104
+ <span class="bg-gradient-to-r from-red-500 to-fuchsia-500 bg-clip-text text-transparent">
105
+ OUR POWER LINEUP
106
+ </span>
107
+ </h2>
108
+
109
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
110
+ <!-- Product 1 -->
111
+ <div class="bg-gray-800 rounded-2xl p-6 hover-lift border border-gray-700">
112
+ <div class="w-full h-64 bg-gradient-to-br from-red-500/20 to-fuchsia-500/20 rounded-xl mb-4 flex items-center justify-center">
113
+ <img src="http://static.photos/technology/640x360/1" alt="Thunder Bike" class="w-3/4 h-auto">
114
+ </div>
115
+ <h3 class="text-2xl font-bold mb-2 text-red-400">Thunder Bike Pro</h3>
116
+ <p class="text-gray-300 mb-4">High-performance electric mountain bike with 100km range and smart suspension.</p>
117
+ <div class="flex justify-between items-center">
118
+ <span class="text-2xl font-bold text-fuchsia-400">$2,499</span>
119
+ <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg transition-colors">
120
+ View Details
121
+ </button>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Product 2 -->
126
+ <div class="bg-gray-800 rounded-2xl p-6 hover-lift border border-gray-700">
127
+ <div class="w-full h-64 bg-gradient-to-br from-fuchsia-500/20 to-red-500/20 rounded-xl mb-4 flex items-center justify-center">
128
+ <img src="http://static.photos/technology/640x360/2" alt="Lightning Scooter" class="w-3/4 h-auto">
129
+ </div>
130
+ <h3 class="text-2xl font-bold mb-2 text-fuchsia-400">Lightning Scooter</h3>
131
+ <p class="text-gray-300 mb-4">Urban electric scooter with 80km range and foldable design for ultimate portability.</p>
132
+ <div class="flex justify-between items-center">
133
+ <span class="text-2xl font-bold text-red-400">$899</span>
134
+ <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg transition-colors">
135
+ View Details
136
+ </button>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Product 3 -->
141
+ <div class="bg-gray-800 rounded-2xl p-6 hover-lift border border-gray-700">
142
+ <div class="w-full h-64 bg-gradient-to-br from-red-500/20 to-fuchsia-500/20 rounded-xl mb-4 flex items-center justify-center">
143
+ <img src="http://static.photos/technology/640x360/3" alt="Storm Board" class="w-3/4 h-auto">
144
+ </div>
145
+ <h3 class="text-2xl font-bold mb-2 text-red-400">Storm Electric Board</h3>
146
+ <p class="text-gray-300 mb-4">All-terrain electric skateboard with 50km range and wireless remote control.</p>
147
+ <div class="flex justify-between items-center">
148
+ <span class="text-2xl font-bold text-fuchsia-400">$1,299</span>
149
+ <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg transition-colors">
150
+ View Details
151
+ </button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </section>
157
+
158
+ <!-- Features Section -->
159
+ <section class="py-20 bg-gray-900">
160
+ <div class="container mx-auto px-4">
161
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-16">
162
+ <span class="bg-gradient-to-r from-fuchsia-500 to-red-500 bg-clip-text text-transparent">
163
+ WHY CHOOSE US
164
+ </span>
165
+ </h2>
166
+
167
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
168
+ <div class="text-center p-6">
169
+ <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4 glow-red">
170
+ <i data-feather="zap" class="w-8 h-8"></i>
171
+ </div>
172
+ <h3 class="text-xl font-bold mb-4 text-red-400">Instant Power</h3>
173
+ <p class="text-gray-300">Zero to max speed in seconds with our advanced electric motors and battery systems.</p>
174
+ </div>
175
+
176
+ <div class="text-center p-6">
177
+ <div class="w-16 h-16 bg-fuchsia-500 rounded-full flex items-center justify-center mx-auto mb-4 glow-fuchsia">
178
+ <i data-feather="battery-charging" class="w-8 h-8"></i>
179
+ </div>
180
+ <h3 class="text-xl font-bold mb-4 text-fuchsia-400">Long Range</h3>
181
+ <p class="text-gray-300">Extended battery life ensures you can ride further without worrying about recharging.</p>
182
+ </div>
183
+
184
+ <div class="text-center p-6">
185
+ <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4 glow-red">
186
+ <i data-feather="shield" class="w-8 h-8"></i>
187
+ </div>
188
+ <h3 class="text-xl font-bold mb-4 text-red-400">Smart Safety</h3>
189
+ <p class="text-gray-300">Advanced safety features including GPS tracking, anti-theft, and emergency braking systems.</p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- Footer -->
196
+ <footer class="bg-gray-800 border-t border-gray-700 py-12">
197
+ <div class="container mx-auto px-4">
198
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
199
+ <div>
200
+ <div class="flex items-center space-x-2 mb-4">
201
+ <div class="w-8 h-8 bg-red-500 rounded-full"></div>
202
+ <span class="text-xl font-bold">ThunderBoltRiders</span>
203
+ </div>
204
+ <p class="text-gray-400">Revolutionizing personal transportation with electric power sports vehicles.</p>
205
+ </div>
206
+
207
+ <div>
208
+ <h4 class="text-lg font-bold mb-4 text-fuchsia-400">Products</h4>
209
+ <ul class="space-y-2 text-gray-400">
210
+ <li><a href="#" class="hover:text-red-400 transition-colors">E-Bikes</a></li>
211
+ <li><a href="#" class="hover:text-red-400 transition-colors">E-Scooters</a></li>
212
+ <li><a href="#" class="hover:text-red-400 transition-colors">E-Boards</a></li>
213
+ <li><a href="#" class="hover:text-red-400 transition-colors">Accessories</a></li>
214
+ </ul>
215
+ </div>
216
+
217
+ <div>
218
+ <h4 class="text-lg font-bold mb-4 text-red-400">Support</h4>
219
+ <ul class="space-y-2 text-gray-400">
220
+ <li><a href="#" class="hover:text-fuchsia-400 transition-colors">Contact Us</a></li>
221
+ <li><a href="#" class="hover:text-fuchsia-400 transition-colors">Warranty</a></li>
222
+ <li><a href="#" class="hover:text-fuchsia-400 transition-colors">FAQs</a></li>
223
+ <li><a href="#" class="hover:text-fuchsia-400 transition-colors">Service Centers</a></li>
224
+ </ul>
225
+ </div>
226
+
227
+ <div>
228
+ <h4 class="text-lg font-bold mb-4 text-fuchsia-400">Connect</h4>
229
+ <div class="flex space-x-4">
230
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
231
+ <i data-feather="facebook"></i>
232
+ </a>
233
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-fuchsia-500 transition-colors">
234
+ <i data-feather="instagram"></i>
235
+ </a>
236
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
237
+ <i data-feather="twitter"></i>
238
+ </a>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
244
+ <p>&copy; 2024 ThunderBoltRiders. All rights reserved. Ride the future, responsibly.</p>
245
+ </div>
246
+ </div>
247
+ </footer>
248
+
249
+ <script>
250
+ // Initialize Vanta.js globe
251
+ VANTA.GLOBE({
252
+ el: "#vanta-bg",
253
+ mouseControls: true,
254
+ touchControls: true,
255
+ gyroControls: false,
256
+ minHeight: 200.00,
257
+ minWidth: 200.00,
258
+ scale: 1.00,
259
+ scaleMobile: 1.00,
260
+ color: 0xef4444,
261
+ color2: 0xd946ef,
262
+ backgroundColor: 0x111827,
263
+ size: 1.10
264
+ });
265
+
266
+ // Smooth scroll for navigation links
267
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
268
+ anchor.addEventListener('click', function (e) {
269
+ e.preventDefault();
270
+ const target = document.querySelector(this.getAttribute('href'));
271
+ if (target) {
272
+ target.scrollIntoView({
273
+ behavior: 'smooth',
274
+ block: 'start'
275
+ });
276
+ }
277
+ });
278
+ });
279
+
280
+ // Initialize feather icons
281
+ feather.replace();
282
+ </script>
283
+ </body>
284
  </html>