| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.tailwindcss.com https://cdn.jsdelivr.net https://unpkg.com https://huggingface.co; style-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; img-src 'self' http://static.photos data:; connect-src 'self'; font-src 'self'; frame-ancestors 'none';"> |
| | <meta http-equiv="X-Frame-Options" content="DENY"> |
| | <meta http-equiv="X-Content-Type-Options" content="nosniff"> |
| | <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin"> |
| | <meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=()"> |
| | <title>FitForge Pro - Elite Fitness & Training Center</title> |
| | <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💪</text></svg>"> |
| | <link rel="stylesheet" href="style.css"> |
| | <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> |
| | </head> |
| | <body class="bg-gray-900 text-white font-sans" cz-shortcut-listen="true"> |
| | |
| | <script src="components/navbar.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="components/trainer-card.js"></script> |
| | |
| | <custom-navbar></custom-navbar> |
| | |
| | |
| | <section id="home" class="relative h-screen overflow-hidden bg-gradient-to-br from-orange-600 via-red-600 to-gray-900"> |
| | <div class="absolute inset-0 bg-black bg-opacity-40"></div> |
| | <div class="relative z-10 flex flex-col items-center justify-center h-full px-6 text-center"> |
| | <h1 class="text-5xl md:text-7xl font-bold mb-6 animate-fade-in-up"> |
| | TRANSFORM YOUR<span class="text-orange-400"> LIMITS</span> |
| | </h1> |
| | <p class="text-xl md:text-2xl mb-8 max-w-2xl animate-fade-in-up-delay"> |
| | Unleash your potential with elite training, world-class facilities, and a community that pushes you beyond |
| | </p> |
| | <div class="flex flex-col sm:flex-row gap-4 animate-fade-in-up-delay-2"> |
| | <a href="#trial" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all transform hover:scale-105" rel="noopener noreferrer"> |
| | Start Free Trial |
| | </a> |
| | <a href="#classes" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all" rel="noopener noreferrer"> |
| | View Classes |
| | </a> |
| | </div> |
| | </div> |
| | <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> |
| | <i data-feather="chevron-down" class="w-8 h-8 text-white"></i> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="classes" class="py-20 px-6 bg-gray-800"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| | CLASS <span class="text-orange-400">SCHEDULE</span> |
| | </h2> |
| | <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| | Choose from 40+ weekly classes designed for every fitness level and goal |
| | </p> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | <div class="class-card bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition-all cursor-pointer"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h3 class="text-xl font-bold text-orange-400">HIIT BLAST</h3> |
| | <span class="text-sm bg-orange-500 px-2 py-1 rounded">HIGH INTENSITY</span> |
| | </div> |
| | <p class="text-gray-300 mb-4">45 minutes of high-intensity intervals to torch calories and boost metabolism</p> |
| | <div class="flex items-center text-sm text-gray-400"> |
| | <i data-feather="clock" class="w-4 h-4 mr-2"></i> |
| | <span class="mr-4">Mon, Wed, Fri - 6:00 AM</span> |
| | <i data-feather="user" class="w-4 h-4 mr-2"></i> |
| | <span>Sarah M.</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="class-card bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition-all cursor-pointer"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h3 class="text-xl font-bold text-purple-400">YOGA FLOW</h3> |
| | <span class="text-sm bg-purple-500 px-2 py-1 rounded">MIND & BODY</span> |
| | </div> |
| | <p class="text-gray-300 mb-4">Vinyasa flow yoga to improve flexibility, strength, and mental clarity</p> |
| | <div class="flex items-center text-sm text-gray-400"> |
| | <i data-feather="clock" class="w-4 h-4 mr-2"></i> |
| | <span class="mr-4">Tue, Thu - 7:00 PM</span> |
| | <i data-feather="user" class="w-4 h-4 mr-2"></i> |
| | <span>Elena R.</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="class-card bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition-all cursor-pointer"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h3 class="text-xl font-bold text-blue-400">POWER LIFTING</h3> |
| | <span class="text-sm bg-blue-500 px-2 py-1 rounded">STRENGTH</span> |
| | </div> |
| | <p class="text-gray-300 mb-4">Build raw strength with compound lifts and progressive overload</p> |
| | <div class="flex items-center text-sm text-gray-400"> |
| | <i data-feather="clock" class="w-4 h-4 mr-2"></i> |
| | <span class="mr-4">Mon, Wed, Fri - 5:00 PM</span> |
| | <i data-feather="user" class="w-4 h-4 mr-2"></i> |
| | <span>Mike T.</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="class-card bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition-all cursor-pointer"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h3 class="text-xl font-bold text-green-400">SPIN & BURN</h3> |
| | <span class="text-sm bg-green-500 px-2 py-1 rounded">CARDIO</span> |
| | </div> |
| | <p class="text-gray-300 mb-4">Indoor cycling class with energizing music and calorie-crushing intervals</p> |
| | <div class="flex items-center text-sm text-gray-400"> |
| | <i data-feather="clock" class="w-4 h-4 mr-2"></i> |
| | <span class="mr-4">Daily - 6:30 PM</span> |
| | <i data-feather="user" class="w-4 h-4 mr-2"></i> |
| | <span>Jessica L.</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="class-card bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition-all cursor-pointer"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h3 class="text-xl font-bold text-red-400">BOXING FIT</h3> |
| | <span class="text-sm bg-red-500 px-2 py-1 rounded">COMBAT</span> |
| | </div> |
| | <p class="text-gray-300 mb-4">Learn boxing techniques while getting an intense full-body workout</p> |
| | <div class="flex items-center text-sm text-gray-400"> |
| | <i data-feather="clock" class="w-4 h-4 mr-2"></i> |
| | <span class="mr-4">Tue, Thu - 6:00 PM</span> |
| | <i data-feather="user" class="w-4 h-4 mr-2"></i> |
| | <span>Carlos D.</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="class-card bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition-all cursor-pointer"> |
| | <div class="flex justify-between items-start mb-3"> |
| | <h3 class="text-xl font-bold text-yellow-400">FUNCTIONAL FIT</h3> |
| | <span class="text-sm bg-yellow-500 px-2 py-1 rounded">ALL LEVELS</span> |
| | </div> |
| | <p class="text-gray-300 mb-4">Real-world movement patterns to improve daily life performance</p> |
| | <div class="flex items-center text-sm text-gray-400"> |
| | <i data-feather="clock" class="w-4 h-4 mr-2"></i> |
| | <span class="mr-4">Sat, Sun - 9:00 AM</span> |
| | <i data-feather="user" class="w-4 h-4 mr-2"></i> |
| | <span>Tom K.</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="trainers" class="py-20 px-6 bg-gray-900"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| | MEET YOUR <span class="text-orange-400">TRAINERS</span> |
| | </h2> |
| | <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| | Our certified trainers are here to guide, motivate, and push you toward your goals |
| | </p> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | <custom-trainer-card |
| | name="Sarah Martinez" |
| | specialization="HIIT & Functional Training" |
| | experience="8 years" |
| | image="http://static.photos/people/640x360/101" |
| | certifications="NASM-CPT, HIIT Certified, Nutrition Coach" |
| | bio="Former collegiate athlete turned fitness coach, Sarah specializes in high-intensity training that gets results fast." |
| | ></custom-trainer-card> |
| |
|
| | <custom-trainer-card |
| | name="Mike Thompson" |
| | specialization="Strength & Powerlifting" |
| | experience="12 years" |
| | image="http://static.photos/people/640x360/102" |
| | certifications="NSCA-CSCS, Powerlifting Coach, USAW" |
| | bio="Competitive powerlifter and strength coach who has helped hundreds build serious muscle and strength." |
| | ></custom-trainer-card> |
| |
|
| | <custom-trainer-card |
| | name="Elena Rodriguez" |
| | specialization="Yoga & Mindfulness" |
| | experience="6 years" |
| | image="http://static.photos/people/640x360/103" |
| | certifications="RYT-500, Mindfulness Coach, Reiki Master" |
| | bio="Brings peace and strength together through vinyasa flow and mindfulness practices." |
| | ></custom-trainer-card> |
| |
|
| | <custom-trainer-card |
| | name="Carlos Diaz" |
| | specialization="Boxing & Combat Sports" |
| | experience="15 years" |
| | image="http://static.photos/people/640x360/104" |
| | certifications="USA Boxing Coach, MMA Conditioning, Krav Maga" |
| | bio="Professional boxer turned coach, Carlos brings authentic fight training to fitness." |
| | ></custom-trainer-card> |
| |
|
| | <custom-trainer-card |
| | name="Jessica Liu" |
| | specialization="Cycling & Cardio" |
| | experience="5 years" |
| | image="http://static.photos/people/640x360/105" |
| | certifications="Spinning Instructor, ACE-CPT, Group Fitness" |
| | bio="High-energy coach who makes cardio fun and addictive with her motivational style." |
| | ></custom-trainer-card> |
| |
|
| | <custom-trainer-card |
| | name="Tom Kim" |
| | specialization="Functional Movement" |
| | experience="10 years" |
| | image="http://static.photos/people/640x360/106" |
| | certifications="FMS Level 2, NASM-CES, TRX Certified" |
| | bio="Movement specialist focused on corrective exercise and functional strength." |
| | ></custom-trainer-card> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="membership" class="py-20 px-6 bg-gradient-to-br from-gray-800 to-gray-900"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| | MEMBERSHIP <span class="text-orange-400">PLANS</span> |
| | </h2> |
| | <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| | Choose the plan that fits your goals and lifestyle |
| | </p> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | |
| | <div class="pricing-card bg-gray-700 rounded-lg p-8 hover:transform hover:scale-105 transition-all"> |
| | <div class="text-center mb-6"> |
| | <h3 class="text-2xl font-bold mb-2">STARTER</h3> |
| | <div class="text-4xl font-bold text-orange-400">$49<span class="text-lg text-gray-400">/mo</span></div> |
| | </div> |
| | <ul class="space-y-3 mb-8"> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-3"></i>Access to gym floor</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-3"></i>Basic equipment use</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-3"></i>Locker room access</li> |
| | <li class="flex items-center text-gray-500"><i data-feather="x" class="w-5 h-5 mr-3"></i>Classes not included</li> |
| | <li class="flex items-center text-gray-500"><i data-feather="x" class="w-5 h-5 mr-3"></i>Personal training</li> |
| | </ul> |
| | <button class="w-full bg-gray-600 hover:bg-gray-500 py-3 rounded-lg font-semibold transition-all"> |
| | Get Started |
| | </button> |
| | </div> |
| |
|
| | |
| | <div class="pricing-card bg-orange-600 rounded-lg p-8 transform scale-105 relative"> |
| | <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-yellow-400 text-gray-900 px-4 py-1 rounded-full text-sm font-bold"> |
| | MOST POPULAR |
| | </div> |
| | <div class="text-center mb-6"> |
| | <h3 class="text-2xl font-bold mb-2">PREMIUM</h3> |
| | <div class="text-5xl font-bold text-white">$89<span class="text-lg text-orange-200">/mo</span></div> |
| | </div> |
| | <ul class="space-y-3 mb-8"> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 mr-3"></i>Everything in Starter</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 mr-3"></i>Unlimited classes</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 mr-3"></i>Guest passes (2/month)</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 mr-3"></i>Towel service</li> |
| | <li class="flex items-center text-orange-200"><i data-feather="minus" class="w-5 h-5 mr-3"></i>Personal training extra</li> |
| | </ul> |
| | <button class="w-full bg-white text-orange-600 hover:bg-gray-100 py-3 rounded-lg font-semibold transition-all transform hover:scale-105" type="button"> |
| | Join Now |
| | </button> |
| | </div> |
| |
|
| | |
| | <div class="pricing-card bg-gray-700 rounded-lg p-8 hover:transform hover:scale-105 transition-all"> |
| | <div class="text-center mb-6"> |
| | <h3 class="text-2xl font-bold mb-2">ELITE</h3> |
| | <div class="text-4xl font-bold text-orange-400">$149<span class="text-lg text-gray-400">/mo</span></div> |
| | </div> |
| | <ul class="space-y-3 mb-8"> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-3"></i>Everything in Premium</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-3"></i>2 personal training sessions/month</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-3"></i>Nutrition coaching</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-3"></i>Priority booking</li> |
| | <li class="flex items-center"><i data-feather="check" class="w-5 h-5 text-green-400 mr-3"></i>Recovery zone access</li> |
| | </ul> |
| | <button class="w-full bg-orange-500 hover:bg-orange-600 py-3 rounded-lg font-semibold transition-all" type="button"> |
| | Go Elite |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="transformations" class="py-20 px-6 bg-gray-900"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| | REAL <span class="text-orange-400">RESULTS</span> |
| | </h2> |
| | <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| | See how our members have transformed their bodies and lives |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | <div class="transformation-card bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all cursor-pointer"> |
| | <div class="relative"> |
| | <img src="http://static.photos/people/640x360/201" alt="Transformation" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">Maria's Journey</h3> |
| | <p class="text-orange-400">Lost 35 lbs in 4 months</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <p class="text-gray-300 text-sm">"The HIIT classes and nutrition guidance changed my life. I feel stronger than ever!"</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="transformation-card bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all cursor-pointer"> |
| | <div class="relative"> |
| | <img src="http://static.photos/people/640x360/202" alt="Transformation" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">David's Strength</h3> |
| | <p class="text-orange-400">Gained 20 lbs muscle</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <p class="text-gray-300 text-sm">"Mike's powerlifting program helped me build serious strength and confidence."</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="transformation-card bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all cursor-pointer"> |
| | <div class="relative"> |
| | <img src="http://static.photos/people/640x360/203" alt="Transformation" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">Lisa's Flexibility</h3> |
| | <p class="text-orange-400">Enhanced mobility & peace</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <p class="text-gray-300 text-sm">"Elena's yoga classes improved my flexibility and brought balance to my life."</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="transformation-card bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all cursor-pointer"> |
| | <div class="relative"> |
| | <img src="http://static.photos/people/640x360/204" alt="Transformation" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">James' Endurance</h3> |
| | <p class="text-orange-400">Marathon ready in 6 months</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <p class="text-gray-300 text-sm">"The cycling classes and cardio program prepared me for my first marathon!"</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="transformation-card bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all cursor-pointer"> |
| | <div class="relative"> |
| | <img src="http://static.photos/people/640x360/205" alt="Transformation" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">Ana's Recovery</h3> |
| | <p class="text-orange-400">Overcame injury, gained strength</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <p class="text-gray-300 text-sm">"Tom's functional movement program helped me recover and become stronger than before."</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="transformation-card bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all cursor-pointer"> |
| | <div class="relative"> |
| | <img src="http://static.photos/people/640x360/206" alt="Transformation" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">Roberto's Skill</h3> |
| | <p class="text-orange-400">Learned boxing, lost 25 lbs</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <p class="text-gray-300 text-sm">"Carlos taught me real boxing skills while getting me in the best shape of my life."</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="facilities" class="py-20 px-6 bg-gray-800"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| | WORLD-CLASS <span class="text-orange-400">FACILITIES</span> |
| | </h2> |
| | <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| | Train in our state-of-the-art facility designed for optimal performance |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | <div class="facility-card group relative overflow-hidden rounded-lg cursor-pointer"> |
| | <img src="http://static.photos/fitness/640x360/301" alt="Weight Floor" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-2xl font-bold">Elite Weight Floor</h3> |
| | <p class="text-orange-400">Premium equipment from Life Fitness & Rogue</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="facility-card group relative overflow-hidden rounded-lg cursor-pointer"> |
| | <img src="http://static.photos/fitness/640x360/302" alt="Cardio Zone" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-2xl font-bold">Cardio Theater</h3> |
| | <p class="text-orange-400">50+ machines with personal entertainment</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="facility-card group relative overflow-hidden rounded-lg cursor-pointer"> |
| | <img src="http://static.photos/fitness/640x360/303" alt="Group Studio" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-2xl font-bold">Group Fitness Studio</h3> |
| | <p class="text-orange-400">Climate-controlled with premium sound system</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="facility-card group relative overflow-hidden rounded-lg cursor-pointer"> |
| | <img src="http://static.photos/fitness/640x360/304" alt="Yoga Studio" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-2xl font-bold">Mind & Body Studio</h3> |
| | <p class="text-orange-400">Dedicated yoga and meditation space</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="facility-card group relative overflow-hidden rounded-lg cursor-pointer"> |
| | <img src="http://static.photos/fitness/640x360/305" alt="Recovery Zone" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-2xl font-bold">Recovery Zone</h3> |
| | <p class="text-orange-400">Sauna, massage, and recovery equipment</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="facility-card group relative overflow-hidden rounded-lg cursor-pointer"> |
| | <img src="http://static.photos/fitness/640x360/306" alt="Boxing Area" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-2xl font-bold">Combat Training Area</h3> |
| | <p class="text-orange-400">Rings, bags, and matted floors for combat sports</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="trial" class="py-20 px-6 bg-gradient-to-br from-orange-600 via-red-600 to-gray-900"> |
| | <div class="max-w-3xl mx-auto"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| | START YOUR <span class="text-white">TRANSFORMATION</span> |
| | </h2> |
| | <p class="text-xl text-orange-100"> |
| | Get a 7-day free trial and experience everything FitForge Pro has to offer |
| | </p> |
| | </div> |
| | <form class="bg-gray-800 rounded-lg p-8 space-y-6" id="trial-form" autocomplete="on"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <label class="block text-sm font-semibold mb-2 text-gray-300">First Name</label> |
| | <input type="text" class="w-full px-4 py-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 text-white" placeholder="Enter your first name" required autocomplete="given-name"> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-semibold mb-2 text-gray-300">Last Name</label> |
| | <input type="text" class="w-full px-4 py-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 text-white" placeholder="Enter your last name" required autocomplete="family-name"> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-sm font-semibold mb-2 text-gray-300">Email Address</label> |
| | <input type="email" class="w-full px-4 py-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 text-white" placeholder="your.email@example.com" required autocomplete="email"> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-sm font-semibold mb-2 text-gray-300">Phone Number</label> |
| | <input type="tel" class="w-full px-4 py-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 text-white" placeholder="(555) 123-4567" required autocomplete="tel"> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-sm font-semibold mb-2 text-gray-300">Fitness Goals</label> |
| | <select class="w-full px-4 py-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 text-white" autocomplete="on"> |
| | <option>Weight Loss</option> |
| | <option>Muscle Building</option> |
| | <option>General Fitness</option> |
| | <option>Athletic Performance</option> |
| | <option>Rehabilitation</option> |
| | <option>Stress Relief</option> |
| | </select> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-sm font-semibold mb-2 text-gray-300">Preferred Class Types</label> |
| | <div class="grid grid-cols-2 md:grid-cols-3 gap-3"> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="checkbox" class="mr-2 text-orange-500" name="class-types" value="HIIT" aria-label="HIIT Classes"> |
| | <span class="text-sm">HIIT</span> |
| | </label> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="checkbox" class="mr-2 text-orange-500" aria-describedby="class-types-description"> |
| | <span class="text-sm">Yoga</span> |
| | </label> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="checkbox" class="mr-2 text-orange-500" name="class-types" value="Strength" aria-label="Strength Training Classes"> |
| | <span class="text-sm">Strength</span> |
| | </label> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="checkbox" class="mr-2 text-orange-500" name="class-types" value="Boxing" aria-label="Boxing Classes"> |
| | <span class="text-sm">Boxing</span> |
| | </label> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="checkbox" class="mr-2 text-orange-500" name="class-types" value="Cycling" aria-label="Cycling Classes"> |
| | <span class="text-sm">Cycling</span> |
| | </label> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="checkbox" class="mr-2 text-orange-500" name="class-types" value="Functional" aria-label="Functional Training Classes"> |
| | <span class="text-sm">Functional</span> |
| | </label> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-sm font-semibold mb-2 text-gray-300">Experience Level</label> |
| | <div class="flex flex-wrap gap-3" role="radiogroup" aria-labelledby="experience-label"> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="radio" name="experience" value="beginner" class="mr-2 text-orange-500" required aria-describedby="experience-description"> |
| | <span class="text-sm">Beginner</span> |
| | </label> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="radio" name="experience" value="intermediate" class="mr-2 text-orange-500" required> |
| | <span class="text-sm">Intermediate</span> |
| | </label> |
| | <label class="flex items-center text-gray-300"> |
| | <input type="radio" name="experience" value="advanced" class="mr-2 text-orange-500" required> |
| | <span class="text-sm">Advanced</span> |
| | </label> |
| | </div> |
| | </div> |
| | <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-4 rounded-lg text-xl font-bold transition-all transform hover:scale-105" aria-label="Claim your 7-day free trial"> |
| | CLAIM YOUR FREE TRIAL |
| | </button> |
| | <p class="text-center text-sm text-gray-400"> |
| | No credit card required • Cancel anytime • Unlimited access for 7 days |
| | </p> |
| | </form> |
| | </div> |
| | </section> |
| |
|
| | |
| | <custom-footer></custom-footer> |
| | |
| | <script src="components/security-badge.js"></script> |
| | |
| | |
| | <script src="script.js"></script> |
| | <script>feather.replace();</script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
