210 lines
15 KiB
HTML
210 lines
15 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 Fitness: Sculpt Your Strength</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
/* Custom configuration for Tailwind to enhance the aesthetic */
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
'primary-dark': '#1a202c',
|
||
'secondary-gold': '#d4af37',
|
||
'accent-light': '#f7fafc',
|
||
'deep-charcoal': '#2d3748',
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter', 'sans-serif'],
|
||
serif: ['Playfair Display', 'serif'],
|
||
},
|
||
animation: {
|
||
'slide-in': 'slideIn 1s ease-out forwards',
|
||
'fade-up': 'fadeInUp 1s ease-out forwards',
|
||
},
|
||
keyframes: {
|
||
fadeInUp: {
|
||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||
},
|
||
slideIn: {
|
||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body class="bg-accent-light text-primary-dark antialiased">
|
||
|
||
<!-- Navigation -->
|
||
<header class="sticky top-0 z-50 bg-white shadow-lg backdrop-blur-sm bg-opacity-90 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-20">
|
||
<a href="#" class="text-3xl font-extrabold text-primary-dark tracking-tight flex items-center">
|
||
Ascend<span class="text-secondary-gold">.</span>
|
||
</a>
|
||
<nav class="hidden md:flex space-x-8 font-medium text-gray-600">
|
||
<a href="#philosophy" class="hover:text-secondary-gold transition duration-300">Philosophy</a>
|
||
<a href="#programs" class="hover:text-secondary-gold transition duration-300">Programs</a>
|
||
<a href="#coaching" class="hover:text-secondary-gold transition duration-300">Coaching</a>
|
||
<a href="#testimonials" class="hover:text-secondary-gold transition duration-300">Success</a>
|
||
</nav>
|
||
<a href="#enroll" class="bg-secondary-gold text-primary-dark px-5 py-2 rounded-full text-sm font-semibold shadow-md hover:bg-yellow-600 transition duration-300 transform hover:scale-[1.03] focus:outline-none focus:ring-4 focus:ring-secondary-gold focus:ring-opacity-50">
|
||
Start Now
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section class="relative h-[70vh] flex items-center justify-center overflow-hidden bg-primary-dark">
|
||
<!-- Background Image Container -->
|
||
<div class="absolute inset-0">
|
||
<img src="https://images.pexels.com/photos/14623671/pexels-photo-14623671.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="A shirtless muscular man lifts dumbbells at a gym in Mexico City." class="w-full h-full object-cover opacity-60">
|
||
</div>
|
||
|
||
<!-- Overlay for Contrast -->
|
||
<div class="absolute inset-0 bg-primary-dark bg-opacity-60"></div>
|
||
|
||
<!-- Content -->
|
||
<div class="relative z-10 text-center max-w-4xl p-6 animate-slide-in" style="animation-delay: 0.3s;">
|
||
<h1 class="text-6xl sm:text-7xl lg:text-8xl font-extrabold text-white leading-tight mb-4 shadow-text">
|
||
Build The Body You<br>
|
||
Always Wanted.
|
||
</h1>
|
||
<p class="text-xl sm:text-2xl text-gray-200 mb-8 font-light animate-fade-up" style="animation-delay: 0.6s;">
|
||
Personalized coaching designed to transform potential into peak physical reality. Stop guessing, start achieving.
|
||
</p>
|
||
<a href="#enroll" class="inline-block bg-secondary-gold text-primary-dark text-lg font-bold py-3 px-10 rounded-full shadow-xl hover:bg-yellow-400 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-secondary-gold focus:ring-opacity-75 animate-fade-up" style="animation-delay: 1s;">
|
||
Claim Your Transformation
|
||
</a>
|
||
<p class="mt-4 text-sm text-gray-400">Limited spots available this month.</p>
|
||
|
||
<!-- Attribution -->
|
||
<div class="mt-12 pt-4 border-t border-gray-700 text-sm text-gray-400">
|
||
Photo by Miguel González on Pexels. Link to photos: https://www.pexels.com/photo/a-man-working-out-14623671/.
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Philosophy Section -->
|
||
<section id="philosophy" class="py-20 bg-white border-t border-gray-100">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-5xl font-bold text-center mb-16 text-deep-charcoal animate-fade-up">
|
||
Our Approach: Precision Over Pushing
|
||
</h2>
|
||
<div class="grid md:grid-cols-3 gap-10">
|
||
|
||
<!-- Pillar 1 -->
|
||
<div class="bg-accent-light p-8 rounded-xl shadow-lg hover:shadow-2xl transition duration-500 transform hover:-translate-y-2 border-t-4 border-secondary-gold group animate-slide-in" style="animation-delay: 0.1s;">
|
||
<div class="text-center">
|
||
<div class="text-5xl text-secondary-gold mb-4">🎯</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-deep-charcoal">Personalization</h3>
|
||
<p class="text-gray-600">We don't use cookie-cutter plans. Every workout, every meal, is tailored precisely to your genetics, goals, and lifestyle. Maximize results, minimize burnout.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pillar 2 -->
|
||
<div class="bg-accent-light p-8 rounded-xl shadow-lg hover:shadow-2xl transition duration-500 transform hover:-translate-y-2 border-t-4 border-secondary-gold group animate-slide-in" style="animation-delay: 0.3s;">
|
||
<div class="text-center">
|
||
<div class="text-5xl text-secondary-gold mb-4">📈</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-deep-charcoal">Progressive Overload</h3>
|
||
<p class="text-gray-600">We focus on smart progression. Consistent, measurable effort ensures continuous strength gains and sustainable body composition changes over time.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pillar 3 -->
|
||
<div class="bg-accent-light p-8 rounded-xl shadow-lg hover:shadow-2xl transition duration-500 transform hover:-translate-y-2 border-t-4 border-secondary-gold group animate-slide-in" style="animation-delay: 0.5s;">
|
||
<div class="text-center">
|
||
<div class="text-5xl text-secondary-gold mb-4">❤️</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-deep-charcoal">Sustainable Health</h3>
|
||
<p class="text-gray-600">Fitness is a marathon, not a sprint. We integrate nutrition and recovery strategies so you build strength without sacrificing your well-being.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Programs Section -->
|
||
<section id="programs" class="py-20 bg-primary-dark">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-5xl font-bold text-center mb-16 text-white animate-fade-up">
|
||
Find Your Path
|
||
</h2>
|
||
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||
<!-- Program Card 1 -->
|
||
<div class="bg-deep-charcoal p-8 rounded-2xl shadow-2xl border-b-8 border-secondary-gold transform hover:scale-[1.02] transition duration-500 group animate-slide-in" style="animation-delay: 0.2s;">
|
||
<h3 class="text-4xl font-extrabold text-secondary-gold mb-4">Strength Architect</h3>
|
||
<p class="text-gray-300 mb-6 text-lg">For those focused on maximal strength gains and muscle hypertrophy. Intensive training protocols and high-protein nutrition planning.</p>
|
||
<ul class="space-y-3 text-gray-300 mb-8">
|
||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> 4x Weekly Strength Sessions</li>
|
||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> Advanced Macronutrient Tracking</li>
|
||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> Bi-weekly Form Feedback</li>
|
||
</ul>
|
||
<a href="#enroll" class="inline-block bg-secondary-gold text-primary-dark font-bold py-3 px-8 rounded-lg text-sm uppercase tracking-wider hover:bg-yellow-400 transition duration-300">
|
||
Enroll in Strength
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Program Card 2 -->
|
||
<div class="bg-deep-charcoal p-8 rounded-2xl shadow-2xl border-b-8 border-secondary-gold transform hover:scale-[1.02] transition duration-500 group animate-slide-in" style="animation-delay: 0.4s;">
|
||
<h3 class="text-4xl font-extrabold text-secondary-gold mb-4">Sculpt & Tone</h3>
|
||
<p class="text-gray-300 mb-6 text-lg">Designed for those seeking body recomposition, fat loss, and aesthetic definition. Focus on metabolic conditioning and body sculpting.</p>
|
||
<ul class="space-y-3 text-gray-300 mb-8">
|
||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> High-Intensity Metabolic Workouts</li>
|
||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> Customized Calorie Deficits</li>
|
||
<li class="flex items-center"><span class="text-secondary-gold mr-2 text-xl">✓</span> Mobility and Recovery Focus</li>
|
||
</ul>
|
||
<a href="#enroll" class="inline-block bg-secondary-gold text-primary-dark font-bold py-3 px-8 rounded-lg text-sm uppercase tracking-wider hover:bg-yellow-400 transition duration-300">
|
||
Enroll in Sculpt
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials Section -->
|
||
<section id="testimonials" class="py-20 bg-accent-light">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-5xl font-bold text-center mb-16 text-deep-charcoal animate-fade-up">
|
||
Real Results. Real People.
|
||
</h2>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<!-- Testimonial 1 -->
|
||
<div class="bg-white p-6 rounded-xl shadow-xl border-l-8 border-secondary-gold animate-fade-up" style="animation-delay: 0.1s;">
|
||
<p class="italic text-lg text-gray-700 mb-4">"Ascend completely changed my perspective on fitness. The program was challenging but perfectly structured. I gained strength and confidence in just three months!"</p>
|
||
<div class="font-semibold text-primary-dark">— Alex R.</div>
|
||
<div class="text-sm text-gray-500">Strength Architect Client</div>
|
||
</div>
|
||
|
||
<!-- Testimonial 2 -->
|
||
<div class="bg-white p-6 rounded-xl shadow-xl border-l-8 border-secondary-gold animate-fade-up" style="animation-delay: 0.3s;">
|
||
<p class="italic text-lg text-gray-700 mb-4">"The attention to detail in the nutrition plan is unmatched. I finally understand how to fuel my body correctly. Highly recommended for anyone serious about lasting change."</p>
|
||
<div class="font-semibold text-primary-dark">— Sarah K.</div>
|
||
<div class="text-sm text-gray-500">Sculpt & Tone Client</div>
|
||
</div>
|
||
|
||
<!-- Testimonial 3 -->
|
||
<div class="bg-white p-6 rounded-xl shadow-xl border-l-8 border-secondary-gold animate-fade-up" style="animation-delay: 0.5s;">
|
||
<p class="italic text-lg text-gray-700 mb-4">"I felt overwhelmed before Ascend, but the coaching made the process seamless. It’s about consistency, and this coaching provided the exact roadmap I needed."</p>
|
||
<div class="font-semibold text-primary-dark">— Mark B.</div>
|
||
<div class="text-sm text-gray-500">Strength Architect Client</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Call to Action / Enrollment -->
|
||
<section id="enroll" class="py-24 bg-deep-charcoal">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-6xl font-extrabold text-white mb-6 animate-slide-in" style="animation-delay: 0.1s;">
|
||
Ready To Ascend?
|
||
</h2><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 19.11s</div> |