Refactor code structure and remove redundant changes
This commit is contained in:
@@ -0,0 +1,222 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ascend Strength Coaching | Achieve Your Peak Potential</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Custom Tailwind Configuration for visual impact */
|
||||
:root {
|
||||
--primary-color: #D9534F; /* A strong, motivational red/maroon */
|
||||
--secondary-color: #333;
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.border-primary {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Keyframe Animation for subtle pulse/focus */
|
||||
@keyframes pulse-glow {
|
||||
0% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(217, 83, 79, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); }
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s infinite;
|
||||
}
|
||||
|
||||
/* Typography Styling */
|
||||
.display-font {
|
||||
font-family: 'Georgia', serif; /* Strong, established feel */
|
||||
}
|
||||
.body-font {
|
||||
font-family: 'Inter', sans-serif; /* Clean, modern body text */
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for visual polish (optional) */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Utility for button hover interaction */
|
||||
.btn-primary {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 15px rgba(217, 83, 79, 0.4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-800 body-font">
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<!-- Logo/Brand Name -->
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#" class="text-2xl font-extrabold tracking-tighter text-gray-900">
|
||||
ASCEND <span class="text-primary">STRENGTH</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Desktop Nav Links -->
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#methodology" class="text-gray-600 hover:text-primary transition duration-150 font-medium">Methodology</a>
|
||||
<a href="#programs" class="text-gray-600 hover:text-primary transition duration-150 font-medium">Programs</a>
|
||||
<a href="#testimonials" class="text-gray-600 hover:text-primary transition duration-150 font-medium">Results</a>
|
||||
<a href="#contact" class="px-4 py-2 border border-primary text-primary hover:bg-primary hover:text-white transition duration-150 rounded-lg shadow-md">Start Ascent</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Button (Hidden on large screens) -->
|
||||
<div class="md:hidden">
|
||||
<button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Menu Content (Hidden by default) -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-8 border-t border-gray-100">
|
||||
<a href="#methodology" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-primary font-medium">Methodology</a>
|
||||
<a href="#programs" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-primary font-medium">Programs</a>
|
||||
<a href="#testimonials" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50 hover:text-primary font-medium">Results</a>
|
||||
<a href="#contact" class="block w-full text-center mt-2 px-4 py-2 border border-primary text-primary hover:bg-primary hover:text-white transition duration-150 rounded-lg">Start Ascent</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gray-900 bg-cover bg-center h-[70vh] flex items-center text-center relative overflow-hidden"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1546483629-b7a6e450c521?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80');">
|
||||
|
||||
<!-- Dark Overlay for Text Readability -->
|
||||
<div class="absolute inset-0 bg-black opacity-60"></div>
|
||||
|
||||
<div class="relative z-10 max-w-4xl mx-auto px-4 pt-16">
|
||||
<h1 class="display-font text-5xl sm:text-7xl lg:text-8xl font-bold text-white leading-tight mb-4 drop-shadow-lg">
|
||||
Forge Your Ultimate Self.
|
||||
</h1>
|
||||
<p class="text-xl sm:text-2xl text-gray-200 mb-10 max-w-3xl mx-auto font-light">
|
||||
Stop wishing for change. Start building it. Ascend Strength provides personalized, science-backed coaching to transform your body and mindset.
|
||||
</p>
|
||||
<a href="#contact" class="btn-primary inline-flex items-center justify-center px-10 py-4 text-lg font-semibold text-white bg-primary rounded-xl shadow-2xl transform hover:scale-[1.02]">
|
||||
Begin Transformation Now
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Methodology Section -->
|
||||
<section id="methodology" class="py-20 lg:py-28 bg-white border-b">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="display-font text-5xl font-extrabold text-gray-900 mb-4">
|
||||
The Ascent Framework
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
||||
We don't just count reps; we engineer sustainable, powerful, and holistic change. Our process is built on three pillars.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Pillar 1 -->
|
||||
<div class="p-8 bg-gray-50 border-t-4 border-primary rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-[1.02] hover:shadow-2xl">
|
||||
<div class="text-5xl mb-3 text-primary">♎</div> <!-- Icon: Up Arrow -->
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Precision Assessment</h3>
|
||||
<p class="text-gray-600">
|
||||
We begin by understanding *you*—your biomechanics, your goals, and your limitations. No guesswork, just data-driven planning for maximum effect.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 2 -->
|
||||
<div class="p-8 bg-gray-50 border-t-4 border-primary rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-[1.02] hover:shadow-2xl">
|
||||
<div class="text-5xl mb-3 text-primary">📞</div> <!-- Icon: Muscle -->
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Adaptive Programming</h3>
|
||||
<p class="text-gray-600">
|
||||
Workouts are not static. They evolve weekly based on recovery, performance, and adherence. We adjust as you improve.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 3 -->
|
||||
<div class="p-8 bg-gray-50 border-t-4 border-primary rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-[1.02] hover:shadow-2xl">
|
||||
<div class="text-5xl mb-3 text-primary">✅</div> <!-- Icon: Check Mark -->
|
||||
<h3 class="text-2xl font-bold mb-3 text-gray-900">Sustained Mastery</h3>
|
||||
<p class="text-gray-600">
|
||||
True fitness is a lifestyle shift. We embed nutritional habits and recovery routines to ensure your gains last a lifetime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programs Section -->
|
||||
<section id="programs" class="py-20 lg:py-28 bg-gray-100 border-b">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="display-font text-5xl font-extrabold text-gray-900 mb-4">
|
||||
Choose Your Path to Excellence
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Whether you need targeted weight loss, maximal strength gains, or general vitality, we have a program designed for your ambition level.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-10 items-start">
|
||||
|
||||
<!-- Program Card 1: Foundation -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl shadow-2xl p-8 flex flex-col hover:shadow-primary/30 transition duration-300">
|
||||
<h3 class="display-font text-3xl font-bold text-primary mb-2">Foundation Build</h3>
|
||||
<p class="text-gray-500 mb-4">Perfect for beginners re-learning movement patterns.</p>
|
||||
<p class="text-gray-700 mb-6 flex-grow">
|
||||
Focuses on mastering fundamental movements, building consistent habit streaks, and establishing a strong metabolic base. Perfect for those intimidated by the gym.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<p class="text-4xl font-bold text-gray-900">$499<span class="text-xl text-gray-400">/month</span></p>
|
||||
<p class="text-sm text-gray-500 mt-1">Monthly Recurring Fee</p>
|
||||
</div>
|
||||
<a href="#contact" class="btn-primary mt-auto w-full text-center py-3 text-lg font-semibold bg-gray-800 text-white rounded-lg shadow-md">
|
||||
Enroll in Foundation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Program Card 2: Elite (Featured) -->
|
||||
<div class="bg-gray-800 border-4 border-primary rounded-xl shadow-2xl p-10 flex flex-col transform scale-[1.02] z-10">
|
||||
<div class="bg-primary text-white text-center px-4 py-2 mb-4 rounded-full font-semibold uppercase text-sm tracking-widest shadow-lg">
|
||||
Most Comprehensive
|
||||
</div>
|
||||
<h3 class="display-font text-4xl font-bold text-white mb-2">Ascend Elite</h3>
|
||||
<p class="text-gray-300 mb-4">For those serious about peak physical performance.</p>
|
||||
<p class="text-gray-300 mb-6 flex-grow">
|
||||
A high-intensity, hyper-personalized journey. We dive deep into periodization, advanced nutrition timing, and performance optimization to unlock your absolute best.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<p class="text-5xl font-extrabold text-white">$799<span class="text-2xl text-gray-300">/month</span></p>
|
||||
<p class="text-sm text-gray-400 mt-1">Elite Coaching & Support</p>
|
||||
</div>
|
||||
<a href="#contact" class="btn-primary mt-auto w-full text-center py-3 text-lg font-semibold bg-white text-gray-800 rounded-lg shadow-xl hover:bg-gray-100">
|
||||
Start Elite Journey
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Program Card 3: Vitality -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl shadow-2xl p-8 flex flex-col hover:shadow-primary/30 transition duration-300">
|
||||
<h3 class="display-font text-3xl font-bold text-primary mb-2">Vitality Maintenance</h3>
|
||||
<p class="text-gray-500 mb-4">Ideal for maintaining health and consistent energy.</p>
|
||||
<p class="text-gray-700 mb-6 flex-grow">
|
||||
Focuses on movement longevity, injury prevention, and balanced nutrition. Maintain progress without the intensity of a full overhaul.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<p class="text-4xl font-bold text-gray-900">$299<span class="text-xl text-gray-400">/month</span></p><div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 29.82s</div>
|
||||
Reference in New Issue
Block a user