199 lines
12 KiB
HTML
199 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ascend Athletics - Elevate Your Strength</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom Styling for Bold Typography and Focus States */
|
|
:root {
|
|
--primary-color: #E74C3C; /* A strong, energetic red */
|
|
--secondary-color: #34495E; /* Deep Slate Blue for grounding */
|
|
}
|
|
.font-display {
|
|
font-family: 'Montserrat', sans-serif; /* Simulating a strong display font */
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.btn-primary {
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(231, 76, 60, 0.6);
|
|
}
|
|
/* Subtle Hover Effect for Cards */
|
|
.card-lift {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.card-lift:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
|
}
|
|
/* Focus Ring Enhancement */
|
|
:focus {
|
|
outline: 4px solid var(--primary-color);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'brand-primary': '#E74C3C',
|
|
'brand-secondary': '#34495E',
|
|
'brand-light': '#F9FAFB',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Montserrat', 'sans-serif'],
|
|
display: ['Oswald', 'sans-serif'], /* Using a simulated bold font */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-brand-light text-brand-secondary antialiased font-sans">
|
|
|
|
<!-- Navigation Bar -->
|
|
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
|
|
<nav 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 -->
|
|
<div class="flex-shrink-0">
|
|
<span class="text-3xl font-display text-brand-primary tracking-widest">ASCEND</span>
|
|
</div>
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:ml-6 md:flex md:space-x-8">
|
|
<a href="#services" class="text-gray-600 hover:text-brand-primary px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-brand-primary">Coaching</a>
|
|
<a href="#plans" class="text-gray-600 hover:text-brand-primary px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-brand-primary">Programs</a>
|
|
<a href="#about" class="text-gray-600 hover:text-brand-primary px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-brand-primary">About</a>
|
|
<a href="#contact" class="text-gray-600 hover:text-brand-primary px-3 py-2 text-sm font-medium transition duration-150 border-b-2 border-transparent hover:border-brand-primary">Book Session</a>
|
|
</div>
|
|
<!-- Mobile Menu Button (Simplified for single page focus) -->
|
|
<div class="md:hidden flex items-center">
|
|
<button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-brand-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-primary">
|
|
<svg class="block 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 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Mobile Menu Dropdown (Hidden by default) -->
|
|
<div class="md:hidden hidden" id="mobile-menu">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-brand-primary/10 hover:text-brand-primary focus:bg-brand-primary/20">Coaching</a>
|
|
<a href="#plans" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-brand-primary/10 hover:text-brand-primary">Programs</a>
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-brand-primary/10 hover:text-brand-primary">About</a>
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-brand-primary/10 hover:text-brand-primary">Book Session</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[60vh] md:h-[80vh] flex items-center justify-center bg-cover bg-center overflow-hidden"
|
|
style="background-image: url('https://images.pexels.com/photos/5075744/pexels-photo-5075744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750');">
|
|
|
|
<!-- Overlay for visual depth -->
|
|
<div class="absolute inset-0 bg-brand-secondary/50 backdrop-brightness-75"></div>
|
|
|
|
<!-- Content Container -->
|
|
<div class="relative z-10 text-center max-w-4xl px-4">
|
|
<h1 class="text-5xl sm:text-7xl font-display text-white leading-tight mb-4 drop-shadow-lg">
|
|
Unleash Your Peak Performance.
|
|
</h1>
|
|
<p class="text-xl sm:text-2xl text-gray-200 mb-8 font-medium drop-shadow-md">
|
|
Personalized fitness coaching designed to build sustainable strength, resilience, and lasting vitality.
|
|
</p>
|
|
<a href="#contact" class="inline-block bg-brand-primary text-white text-lg font-bold py-4 px-10 rounded-lg uppercase tracking-wider shadow-xl btn-primary focus:ring-4 focus:ring-brand-primary/50">
|
|
Start Your Transformation
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Image Attribution (Placeholder adherence) -->
|
|
<div class="absolute bottom-4 left-4 z-20 text-white text-xs opacity-80 bg-black/50 p-2 rounded">
|
|
Photo by Pexels Photographer on Pexels
|
|
<a href="https://www.pexels.com/" target="_blank" class="ml-1 hover:underline">Pexels</a>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="py-20 lg:py-32 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-4xl font-display text-brand-secondary mb-4">Our Coaching Pillars</h2>
|
|
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
|
We don't just count reps; we build habits. Focus on holistic strength, mental fortitude, and movement mastery.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
|
|
|
<!-- Service Card 1 -->
|
|
<div class="p-8 bg-white border border-gray-100 rounded-xl shadow-lg card-lift">
|
|
<div class="text-brand-primary mb-4">
|
|
<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
|
</div>
|
|
<h3 class="text-2xl font-display text-brand-secondary mb-3">Strength Foundation</h3>
|
|
<p class="text-gray-600">
|
|
Master compound movements and build a rock-solid physical base. Customized programming for beginner to advanced athletes.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Service Card 2 -->
|
|
<div class="p-8 bg-white border border-gray-100 rounded-xl shadow-lg card-lift">
|
|
<div class="text-brand-primary mb-4">
|
|
<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6 10h-1.732M5 12h14a2 2 0 012 2v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3a2 2 0 012-2z"></path></svg>
|
|
</div>
|
|
<h3 class="text-2xl font-display text-brand-secondary mb-3">Injury Resilience</h3>
|
|
<p class="text-gray-600">
|
|
Learn mobility drills and proper form to keep you moving strong and stay injury-free through every phase of your journey.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Service Card 3 -->
|
|
<div class="p-8 bg-white border border-gray-100 rounded-xl shadow-lg card-lift">
|
|
<div class="text-brand-primary mb-4">
|
|
<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
</div>
|
|
<h3 class="text-2xl font-display text-brand-secondary mb-3">Metabolic Conditioning</h3>
|
|
<p class="text-gray-600">
|
|
Boost energy levels and endurance with targeted metabolic training, making workouts efficient and powerful.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Program Plans Section -->
|
|
<section id="plans" class="py-20 lg:py-32 bg-brand-light">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-4xl font-display text-brand-secondary mb-4">Choose Your Ascent Path</h2>
|
|
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
|
|
Whether you need a quick boost or a total body rebuild, we have a path for your goals.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
|
|
|
<!-- Plan 1: Core -->
|
|
<div class="bg-white p-8 rounded-xl shadow-2xl border-t-8 border-gray-300 card-lift flex flex-col">
|
|
<h3 class="text-3xl font-display text-brand-secondary mb-2">Foundational</h3>
|
|
<p class="text-gray-500 mb-4">Ideal for beginners needing structure.</p>
|
|
<p class="text-4xl font-bold text-brand-primary mb-6">$99<span class="text-xl font-normal text-gray-500">/month</span></p>
|
|
<ul class="text-left space-y-3 text-gray-600 flex-grow mb-8">
|
|
<li class="flex items-center"><span class="text-green-500 mr-2">✔</span> Weekly Check-ins</li>
|
|
<li class="flex items-center"><span class="text-green-500 mr-2">✔</span> Custom Workout Templates</li>
|
|
<li class="flex items-center"><span class="text-green-500 mr-2">✔</span> Form Review (Video)</li>
|
|
</ul>
|
|
<button class="w-full bg-brand-secondary text-white py-3 rounded-lg font-semibold hover:bg-gray-700 transition duration-300 focus:ring-4 focus:ring-brand-secondary/50">
|
|
Select Foundational
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Plan 2: Premium (Featured) -->
|
|
<div class="bg-white p-10 rounded-xl shadow-2xl border-t-8 border-brand-primary transform scale-105 card-lift flex flex-col">
|
|
<div class="absolute top-0 right-0 -mt-4 -mr-4">
|
|
<span class="bg-brand-primary text-white text-xs font-bold uppercase px-4 py-1 rounded-full shadow-lg transform rotate-3">BEST VALUE</span><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.40s</div> |