206 lines
14 KiB
HTML
206 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>Iron Ascent | Strength Coaching</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom Configuration for Tailwind */
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'primary-red': '#B91C1C', /* Deep Red for intensity */
|
|
'secondary-gray': '#374151', /* Slate Gray for grounding */
|
|
'background-dark': '#1F2937', /* Dark Blue/Gray Background */
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
display: ['Impact', 'sans-serif'], /* Bold, strong display font feel */
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
/* Custom CSS for subtle effects */
|
|
.card-hover:hover {
|
|
transform: translateY(-5px) scale(1.02);
|
|
box-shadow: 0 15px 25px rgba(185, 28, 28, 0.3);
|
|
}
|
|
.btn-glow {
|
|
transition: all 0.3s ease-in-out;
|
|
box-shadow: 0 0 0 rgba(185, 28, 28, 0);
|
|
}
|
|
.btn-glow:hover {
|
|
box-shadow: 0 0 0 5px rgba(185, 28, 28, 0.4);
|
|
}
|
|
</style>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Impact&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-background-dark text-gray-100 font-sans antialiased">
|
|
|
|
<!-- Navigation Bar -->
|
|
<header class="sticky top-0 z-50 bg-background-dark/95 backdrop-blur-sm shadow-lg border-b border-gray-700">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center space-x-2">
|
|
<h1 class="text-3xl font-display text-primary-red tracking-wider uppercase">
|
|
Iron Ascent
|
|
</h1>
|
|
<span class="hidden sm:inline text-sm text-gray-400 ml-2 border-l border-gray-600 pl-2">Strength Coaching</span>
|
|
</div>
|
|
<nav class="space-x-6 hidden md:flex">
|
|
<a href="#philosophy" class="text-gray-300 hover:text-primary-red transition duration-150 text-sm uppercase font-semibold focus:outline-none focus:text-primary-red">Philosophy</a>
|
|
<a href="#services" class="text-gray-300 hover:text-primary-red transition duration-150 text-sm uppercase font-semibold focus:outline-none focus:text-primary-red">Services</a>
|
|
<a href="#results" class="text-gray-300 hover:text-primary-red transition duration-150 text-sm uppercase font-semibold focus:outline-none focus:text-primary-red">Results</a>
|
|
<a href="#contact" class="text-gray-300 hover:text-primary-red transition duration-150 text-sm uppercase font-semibold focus:outline-none focus:text-primary-red">Contact</a>
|
|
</nav>
|
|
<a href="#contact" class="md:hidden text-gray-300 focus:outline-none focus:text-primary-red">
|
|
<svg class="w-6 h-6" 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 12h16M4 18h16"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[70vh] flex items-center justify-center text-center bg-cover bg-center"
|
|
style="background-image: url('https://images.unsplash.com/photo-1519389950473-499a3e273e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');">
|
|
<!-- Overlay for visual depth -->
|
|
<div class="absolute inset-0 bg-black/60 backdrop-blur-[1px]"></div>
|
|
<div class="relative z-10 px-4">
|
|
<h2 class="text-6xl md:text-8xl font-display uppercase mb-4 leading-tight text-white drop-shadow-lg">
|
|
Forge Your Ascent.
|
|
</h2>
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto font-light">
|
|
Stop guessing. Start progressing. Personalized strength coaching designed to break through plateaus and build unbreakable physical resilience.
|
|
</p>
|
|
<a href="#contact" class="inline-block px-10 py-4 text-lg font-bold uppercase bg-primary-red text-white rounded-lg btn-glow shadow-xl transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-4 ring-primary-red/50">
|
|
Begin The Build
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Philosophy Section -->
|
|
<section id="philosophy" class="py-20 bg-background-dark border-t border-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h3 class="text-sm uppercase tracking-widest text-primary-red mb-2">Our Ethos</h3>
|
|
<h2 class="text-4xl md:text-5xl font-display text-white">
|
|
Discipline Over Desire.
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-400 max-w-3xl mx-auto">
|
|
We reject quick fixes. Iron Ascent is built on the principle of consistent, intelligent effort. We teach you the mechanics of real strength, ensuring sustainable gains that last a lifetime.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Philosophy Pillars -->
|
|
<div class="grid md:grid-cols-3 gap-10">
|
|
<div class="bg-secondary-gray/30 p-8 rounded-xl border-t-4 border-primary-red transition duration-300 shadow-lg hover:shadow-primary-red/30 card-hover">
|
|
<div class="text-4xl text-primary-red mb-3">⚙️</div>
|
|
<h4 class="text-2xl font-bold text-white mb-3">Precision Programming</h4>
|
|
<p class="text-gray-300">No cookie-cutter plans. Every program is calibrated to your current capability and long-term physical targets.</p>
|
|
</div>
|
|
<div class="bg-secondary-gray/30 p-8 rounded-xl border-t-4 border-primary-red transition duration-300 shadow-lg hover:shadow-primary-red/30 card-hover">
|
|
<div class="text-4xl text-primary-red mb-3">🧠</div>
|
|
<h4 class="text-2xl font-bold text-white mb-3">Movement Mastery</h4>
|
|
<p class="text-gray-300">Learn the 'why' behind the lift. We focus on perfect form to maximize strength and minimize injury risk.</p>
|
|
</div>
|
|
<div class="bg-secondary-gray/30 p-8 rounded-xl border-t-4 border-primary-red transition duration-300 shadow-lg hover:shadow-primary-red/30 card-hover">
|
|
<div class="text-4xl text-primary-red mb-3">🌱</div>
|
|
<h4 class="text-2xl font-bold text-white mb-3">Sustainable Growth</h4>
|
|
<p class="text-gray-300">This is a lifestyle shift, not a temporary diet. Build habits that serve you for decades to come.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="py-24 bg-gray-900 border-t border-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h3 class="text-sm uppercase tracking-widest text-primary-red mb-2">Our Offerings</h3>
|
|
<h2 class="text-4xl md:text-5xl font-display text-white">
|
|
Choose Your Path To Peak Performance
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-400 max-w-4xl mx-auto">
|
|
Whether you are looking to gain functional strength, optimize athletic performance, or simply move with more confidence, we have a tailored coaching structure for you.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Service Cards Grid -->
|
|
<div class="grid lg:grid-cols-3 gap-10">
|
|
|
|
<!-- Service 1: 1-on-1 Coaching -->
|
|
<div class="bg-background-dark p-8 rounded-xl shadow-2xl border-b-8 border-primary-red transition duration-300 hover:shadow-2xl hover:border-primary-red/80 cursor-pointer card-hover">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-4xl mr-3 text-primary-red">👤</span>
|
|
<h4 class="text-3xl font-bold text-white">1:1 Elite Coaching</h4>
|
|
</div>
|
|
<p class="text-gray-300 mb-4 text-base">The deepest dive. Weekly check-ins, personalized program adjustments, and direct accountability with a dedicated coach.</p>
|
|
<ul class="text-gray-400 space-y-2 text-sm mb-6 list-disc list-inside">
|
|
<li>Customized Macrocycles</li>
|
|
<li>Form Correction Sessions</li>
|
|
<li>Performance Tracking</li>
|
|
</ul>
|
|
<div class="flex justify-between items-center pt-2 border-t border-gray-700">
|
|
<span class="text-2xl font-bold text-primary-red">$499/month</span>
|
|
<button class="text-primary-red border-2 border-primary-red px-6 py-2 rounded-full text-sm font-semibold hover:bg-primary-red hover:text-white transition duration-200 focus:outline-none focus:ring-2 ring-primary-red">
|
|
Enroll Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service 2: Digital Blueprint -->
|
|
<div class="bg-background-dark p-8 rounded-xl shadow-2xl border-b-8 border-gray-500 transition duration-300 hover:shadow-2xl hover:border-gray-500/80 cursor-pointer card-hover">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-4xl mr-3 text-gray-400">💻</span>
|
|
<h4 class="text-3xl font-bold text-white">Digital Blueprint</h4>
|
|
</div>
|
|
<p class="text-gray-300 mb-4 text-base">Perfect for independent learners. Access structured training modules and exercise libraries on your own schedule.</p>
|
|
<ul class="text-gray-400 space-y-2 text-sm mb-6 list-disc list-inside">
|
|
<li>Program Library Access</li>
|
|
<li>Video Technique Guides</li>
|
|
<li>Progress Log Templates</li>
|
|
</ul>
|
|
<div class="flex justify-between items-center pt-2 border-t border-gray-700">
|
|
<span class="text-2xl font-bold text-gray-300">$99/month</span>
|
|
<button class="text-gray-300 border-2 border-gray-500 px-6 py-2 rounded-full text-sm font-semibold hover:bg-gray-700 hover:text-white transition duration-200 focus:outline-none focus:ring-2 ring-gray-500">
|
|
Start Free Trial
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service 3: Performance Audit -->
|
|
<div class="bg-background-dark p-8 rounded-xl shadow-2xl border-b-8 border-yellow-500 transition duration-300 hover:shadow-2xl hover:border-yellow-500/80 cursor-pointer card-hover">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-4xl mr-3 text-yellow-500">📊</span>
|
|
<h4 class="text-3xl font-bold text-white">Performance Audit</h4>
|
|
</div>
|
|
<p class="text-gray-300 mb-4 text-base">A one-time intensive review. We assess your current routine, identify bottlenecks, and deliver a strategic action plan.</p>
|
|
<ul class="text-gray-400 space-y-2 text-sm mb-6 list-disc list-inside">
|
|
<li>Comprehensive Movement Review</li>
|
|
<li>Injury Risk Assessment</li>
|
|
<li>30-Day Action Plan</li>
|
|
</ul>
|
|
<div class="flex justify-between items-center pt-2 border-t border-gray-700">
|
|
<span class="text-2xl font-bold text-yellow-500">$250 (One-Time)</span>
|
|
<button class="text-yellow-500 border-2 border-yellow-500 px-6 py-2 rounded-full text-sm font-semibold hover:bg-yellow-500 hover:text-background-dark transition duration-200 focus:outline-none focus:ring-2 ring-yellow-500">
|
|
Schedule Audit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results/Testimonials Section -->
|
|
<section id="results" class="py-24 bg-background-dark border-t border-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h3 class="text-sm uppercase tracking-widest text-primary-red mb-2">Real Impact</h3>
|
|
<h2 class="text-4xl md:text-5xl font-display text-white">
|
|
Transformations Aren't Accidental.
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Hear how disciplined effort translates into real, measurable strength and confidence in the lives of our clients.<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 30.00s</div> |