225 lines
14 KiB
HTML
225 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Apex Vitality - Elevate Your Strength</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Customizing Tailwind Configuration for Brand Feel */
|
|
:root {
|
|
--color-primary: #D9534F; /* A strong, energetic red/coral */
|
|
--color-secondary: #34495E; /* Deep navy/charcoal */
|
|
--color-accent: #F4B400; /* Gold/Amber for highlights */
|
|
}
|
|
|
|
body {
|
|
font-family: 'Montserrat', sans-serif; /* Using a strong, geometric font feel */
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.btn-primary {
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(217, 83, 79, 0.4);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(217, 83, 79, 0.6);
|
|
background-color: #c34a49;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-5px) scale(1.02);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Subtle animation for content reveal */
|
|
.animate-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeInSlide 1s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInSlide {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
// Tailwind Configuration for Custom Colors/Fonts
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'vitality-primary': '#D9534F',
|
|
'vitality-secondary': '#34495E',
|
|
'vitality-accent': '#F4B400',
|
|
'background-light': '#f7f7f7',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Montserrat', 'sans-serif'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-background-light text-gray-800 antialiased">
|
|
|
|
<!-- Header & Navigation -->
|
|
<header class="bg-white shadow-lg sticky top-0 z-10">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
<div class="flex-shrink-0">
|
|
<a href="#" class="text-3xl font-extrabold text-vitality-primary tracking-tight">
|
|
Apex <span class="text-vitality-secondary">Vitality</span>
|
|
</a>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#services" class="text-lg font-medium text-vitality-secondary hover:text-vitality-primary transition duration-150 border-b-2 border-transparent hover:border-vitality-primary pb-1">Coaching</a>
|
|
<a href="#plans" class="text-lg font-medium text-vitality-secondary hover:text-vitality-primary transition duration-150 border-b-2 border-transparent hover:border-vitality-primary pb-1">Programs</a>
|
|
<a href="#about" class="text-lg font-medium text-vitality-secondary hover:text-vitality-primary transition duration-150 border-b-2 border-transparent hover:border-vitality-primary pb-1">About</a>
|
|
<a href="#contact" class="text-lg font-medium text-vitality-secondary hover:text-vitality-primary transition duration-150">Start Now</a>
|
|
</nav>
|
|
<!-- Mobile Menu Button (Simple implementation for this scope) -->
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-button" class="p-2 text-vitality-secondary focus:outline-none focus:ring-2 focus:ring-vitality-primary rounded">
|
|
<svg class="w-7 h-7" 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="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu Drawer -->
|
|
<div id="mobile-menu" class="md:hidden hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
|
|
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-vitality-secondary hover:bg-vitality-primary/10">Coaching</a>
|
|
<a href="#plans" class="block px-3 py-2 rounded-md text-base font-medium text-vitality-secondary hover:bg-vitality-primary/10">Programs</a>
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-vitality-secondary hover:bg-vitality-primary/10">About</a>
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-vitality-secondary hover:bg-vitality-primary/10">Start Now</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="bg-vitality-secondary pt-16 pb-24 text-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="max-w-4xl mx-auto animate-in" style="animation-delay: 0.1s;">
|
|
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-tight mb-4">
|
|
Stop Wishing. Start Moving.
|
|
</h1>
|
|
<p class="text-xl sm:text-2xl mb-10 font-light opacity-90">
|
|
Apex Vitality provides personalized, data-driven fitness coaching designed not just to build muscle, but to build lasting, resilient habits. Your peak performance starts here.
|
|
</p>
|
|
<a href="#contact" class="inline-block bg-vitality-accent text-vitality-secondary font-bold py-4 px-10 text-xl rounded-lg shadow-xl btn-primary transition duration-300 ease-in-out">
|
|
Claim Your Free Consultation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 animate-in" style="animation-delay: 0.3s;">
|
|
<h2 class="text-base text-vitality-primary uppercase tracking-widest">OUR APPROACH</h2>
|
|
<p class="mt-2 text-4xl lg:text-5xl font-extrabold text-vitality-secondary">
|
|
Holistic Strength Building
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-10">
|
|
|
|
<!-- Service Card 1 -->
|
|
<div class="p-8 bg-white rounded-xl shadow-lg border-t-4 border-vitality-primary card-hover transition duration-300 animate-in" style="animation-delay: 0.5s;">
|
|
<div class="text-4xl text-vitality-primary mb-4">🏋️</div>
|
|
<h3 class="text-2xl font-bold text-vitality-secondary mb-3">Custom Training Roadmaps</h3>
|
|
<p class="text-gray-600">Forget cookie-cutter plans. We build training modules tailored exactly to your biomechanics, goals, and current fitness level, ensuring sustainable progress.</p>
|
|
</div>
|
|
|
|
<!-- Service Card 2 -->
|
|
<div class="p-8 bg-white rounded-xl shadow-lg border-t-4 border-vitality-accent card-hover transition duration-300 animate-in" style="animation-delay: 0.7s;">
|
|
<div class="text-4xl text-vitality-accent mb-4">🥗</div>
|
|
<h3 class="text-2xl font-bold text-vitality-secondary mb-3">Nutrition Strategy</h3>
|
|
<p class="text-gray-600">Fueling performance requires precision. Get actionable, realistic dietary guidance that fits your lifestyle, not just restrictive rules.</p>
|
|
</div>
|
|
|
|
<!-- Service Card 3 -->
|
|
<div class="p-8 bg-white rounded-xl shadow-lg border-t-4 border-vitality-secondary card-hover transition duration-300 animate-in" style="animation-delay: 0.9s;">
|
|
<div class="text-4xl text-vitality-secondary mb-4">🧠</div>
|
|
<h3 class="text-2xl font-bold text-vitality-secondary mb-3">Mindset Mastery</h3>
|
|
<p class="text-gray-600">True strength begins in the mind. We coach you on consistency, overcoming plateaus, and maintaining discipline long after the program ends.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Program Showcase Section -->
|
|
<section id="plans" class="py-24 bg-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 animate-in" style="animation-delay: 1.1s;">
|
|
<h2 class="text-base text-vitality-primary uppercase tracking-widest">PROGRAMS</h2>
|
|
<p class="mt-2 text-4xl lg:text-5xl font-extrabold text-vitality-secondary">
|
|
Find Your Path to Peak Performance
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-10 items-start">
|
|
|
|
<!-- Plan Card 1: Foundations -->
|
|
<div class="bg-white p-10 rounded-xl shadow-2xl border-b-8 border-vitality-primary transform hover:scale-[1.02] transition duration-500 animate-in" style="animation-delay: 1.3s;">
|
|
<h3 class="text-3xl font-bold text-vitality-primary mb-3">Foundation Builder</h3>
|
|
<p class="text-gray-500 mb-6">Ideal for beginners establishing consistency and building fundamental strength.</p>
|
|
<ul class="space-y-3 mb-8 text-lg">
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Bi-weekly check-ins</li>
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Basic nutrition guide</li>
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Weekly workout framework</li>
|
|
</ul>
|
|
<div class="text-center">
|
|
<span class="text-5xl font-extrabold text-vitality-secondary">$99</span><span class="text-xl text-gray-500">/mo</span>
|
|
<button class="mt-6 w-full bg-vitality-primary text-white py-3 rounded-lg text-lg font-semibold btn-primary">
|
|
Select Foundation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plan Card 2: Elite Focus (Featured) -->
|
|
<div class="bg-white p-12 rounded-xl shadow-2xl border-b-8 border-vitality-accent scale-105 transform animate-in" style="animation-delay: 1.5s;">
|
|
<div class="absolute top-0 right-0 -mt-3 -mr-3">
|
|
<div class="bg-vitality-accent text-vitality-secondary text-sm font-bold uppercase px-4 py-1 rounded-full shadow-md">MOST POPULAR</div>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-vitality-secondary mb-3">Apex Performance Elite</h3>
|
|
<p class="text-gray-500 mb-6">For dedicated individuals aiming for maximal gains and total physical transformation.</p>
|
|
<ul class="space-y-3 mb-8 text-lg">
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Unlimited messaging support</li>
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Custom weekly video review</li>
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Full dietary customization</li>
|
|
</ul>
|
|
<div class="text-center">
|
|
<span class="text-6xl font-extrabold text-vitality-accent">$249</span>
|
|
<button class="mt-6 w-full bg-vitality-secondary text-white py-4 rounded-lg text-xl font-bold btn-primary shadow-lg">
|
|
Go Elite Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plan Card 3: Maintenance -->
|
|
<div class="bg-white p-10 rounded-xl shadow-2xl border-b-8 border-vitality-secondary transform hover:scale-[1.02] transition duration-500 animate-in" style="animation-delay: 1.7s;">
|
|
<h3 class="text-3xl font-bold text-vitality-secondary mb-3">Maintenance Flow</h3>
|
|
<p class="text-gray-500 mb-6">Perfect for seasoned athletes needing structure to maintain progress and avoid stagnation.</p>
|
|
<ul class="space-y-3 mb-8 text-lg">
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Monthly accountability call</li>
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Progress tracking dashboard</li>
|
|
<li class="flex items-center"><span class="text-vitality-accent mr-2 text-xl">✓</span> Optimized recovery protocols</li>
|
|
</ul>
|
|
<div class="text-center">
|
|
<span class="text-5xl font-extrabold text-vitality-secondary">$129</span><span class="text-xl text-gray-500">/mo</span>
|
|
<button class="mt-6 w-full bg-vitality-secondary text-white py-3 rounded-lg text-lg font-semibold btn-primary">
|
|
Select Maintenance
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div><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.90s</div> |