Spaces:

Falln87
/

thunderboltriders

Running

App Files Files Community

Falln87 commited on Oct 16, 2025

Commit

2740c15

verified ·

1 Parent(s): 0754e28

The site should be called SkootrGuy ePowerSports and it should incorporate the attached image as a hero

Browse files

Files changed (1) hide show

index.html +16 -36

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ThunderBoltRiders - ePowerSports</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -47,10 +47,9 @@
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
                     <div class="w-10 h-10 bg-red-500 rounded-full glow-red"></div>
-                    <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-fuchsia-500 bg-clip-text text-transparent">ThunderBoltRiders</span>
                 </div>
-                <div class="hidden md:flex space-x-8">
                     <a href="#home" class="hover:text-red-400 transition-colors">Home</a>
                     <a href="#products" class="hover:text-red-400 transition-colors">Products</a>
                     <a href="#about" class="hover:text-red-400 transition-colors">About</a>
@@ -68,23 +67,23 @@
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
     <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden">
-        <div id="vanta-bg" class="absolute inset-0"></div>
         <div class="relative z-10 container mx-auto px-4 text-center">
             <h1 class="text-6xl md:text-8xl font-bold mb-6">
                 <span class="bg-gradient-to-r from-red-500 to-fuchsia-500 bg-clip-text text-transparent">
-                    RIDE THE
                 </span>
                 <br>
                 <span class="bg-gradient-to-r from-fuchsia-500 to-red-500 bg-clip-text text-transparent">
-                    FUTURE
                 </span>
             </h1>
             <p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-3xl mx-auto">
-                Experience the thrill of electric power sports with our cutting-edge e-bikes, scooters, and boards.
-                Sustainable speed meets unparalleled performance.
             </p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
                 <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">
@@ -96,8 +95,7 @@
             </div>
         </div>
     </section>
-    <!-- Products Section -->
     <section id="products" class="py-20 bg-gray-800/50">
         <div class="container mx-auto px-4">
             <h2 class="text-4xl md:text-5xl font-bold text-center mb-16">
@@ -199,12 +197,11 @@
                 <div>
                     <div class="flex items-center space-x-2 mb-4">
                         <div class="w-8 h-8 bg-red-500 rounded-full"></div>
-                        <span class="text-xl font-bold">ThunderBoltRiders</span>
                     </div>
-                    <p class="text-gray-400">Revolutionizing personal transportation with electric power sports vehicles.</p>
                 </div>
-                <div>
                     <h4 class="text-lg font-bold mb-4 text-fuchsia-400">Products</h4>
                     <ul class="space-y-2 text-gray-400">
                         <li><a href="#" class="hover:text-red-400 transition-colors">E-Bikes</a></li>
@@ -241,28 +238,11 @@
             </div>
             <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
-                <p>&copy; 2024 ThunderBoltRiders. All rights reserved. Ride the future, responsibly.</p>
-            </div>
         </div>
     </footer>
     <script>
-        // Initialize Vanta.js globe
-        VANTA.GLOBE({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0xef4444,
-            color2: 0xd946ef,
-            backgroundColor: 0x111827,
-            size: 1.10
-        });
         // Smooth scroll for navigation links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SkootrGuy ePowerSports</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
                     <div class="w-10 h-10 bg-red-500 rounded-full glow-red"></div>
+                    <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-fuchsia-500 bg-clip-text text-transparent">SkootrGuy</span>
                 </div>
+<div class="hidden md:flex space-x-8">
                     <a href="#home" class="hover:text-red-400 transition-colors">Home</a>
                     <a href="#products" class="hover:text-red-400 transition-colors">Products</a>
                     <a href="#about" class="hover:text-red-400 transition-colors">About</a>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
     <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Falln87/thunderboltriders/resolve/main/images/1760649399355.jpg')"></div>
+        <div class="absolute inset-0 bg-black/60"></div>
         <div class="relative z-10 container mx-auto px-4 text-center">
             <h1 class="text-6xl md:text-8xl font-bold mb-6">
                 <span class="bg-gradient-to-r from-red-500 to-fuchsia-500 bg-clip-text text-transparent">
+                    SKOOTR
                 </span>
                 <br>
                 <span class="bg-gradient-to-r from-fuchsia-500 to-red-500 bg-clip-text text-transparent">
+                    GUY
                 </span>
             </h1>
             <p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-3xl mx-auto">
+                Your premier destination for electric power sports. From high-performance e-bikes to urban scooters,
+                we bring you the future of personal transportation.
             </p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
                 <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">
             </div>
         </div>
     </section>
+<!-- Products Section -->
     <section id="products" class="py-20 bg-gray-800/50">
         <div class="container mx-auto px-4">
             <h2 class="text-4xl md:text-5xl font-bold text-center mb-16">
                 <div>
                     <div class="flex items-center space-x-2 mb-4">
                         <div class="w-8 h-8 bg-red-500 rounded-full"></div>
+                        <span class="text-xl font-bold">SkootrGuy</span>
                     </div>
+                    <p class="text-gray-400">Your premier destination for electric power sports vehicles.</p>
                 </div>
+<div>
                     <h4 class="text-lg font-bold mb-4 text-fuchsia-400">Products</h4>
                     <ul class="space-y-2 text-gray-400">
                         <li><a href="#" class="hover:text-red-400 transition-colors">E-Bikes</a></li>
             </div>
             <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2024 SkootrGuy ePowerSports. All rights reserved. Ride the future, responsibly.</p>
+</div>
         </div>
     </footer>
     <script>
         // Smooth scroll for navigation links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {