Refactor code structure and remove redundant changes
This commit is contained in:
@@ -0,0 +1,311 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Forge & Flow | Holistic Strength & Mobility Coaching</title>
|
||||
<meta name="description" content="Elevate your physical potential with Forge & Flow. A premium coaching experience blending heavy resistance training with functional mobility.">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--brand-dark: #0a0a0a;
|
||||
--brand-accent: #d97706;
|
||||
--brand-light: #f8f9fa;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--brand-dark);
|
||||
color: var(--brand-light);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h1, h2, h3, .serif {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background-color: var(--brand-accent);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--brand-accent);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px -5px rgba(217, 119, 6, 0.4);
|
||||
}
|
||||
.program-card {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
.program-card:hover {
|
||||
border-color: var(--brand-accent);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 px-6 py-6 md:px-12 flex justify-between items-center transition-all duration-300" id="main-nav">
|
||||
<a href="#" class="text-2xl font-bold serif tracking-tight">FORGE<span class="text-amber-600">&</span>FLOW</a>
|
||||
|
||||
<div class="hidden md:flex space-x-8 items-center uppercase text-xs tracking-[0.2em] font-semibold">
|
||||
<a href="#philosophy" class="nav-link relative py-1">Philosophy</a>
|
||||
<a href="#programs" class="nav-link relative py-1">Programs</a>
|
||||
<a href="#testimonials" class="nav-link relative py-1">Results</a>
|
||||
<a href="#contact" class="px-5 py-2 border border-amber-600 text-amber-600 hover:bg-amber-600 hover:text-white transition-all duration-300">Book Session</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button class="md:hidden text-white focus:outline-none" aria-label="Open Menu">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-screen flex items-center pt-20 overflow-hidden">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img src="https://images.pexels.com/photos/27730474/pexels-photo-27730474.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Athletes engage in recovery therapy with cupping and massage in a gym." class="w-full h-full object-cover opacity-40" />
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-[#0a0a0a] via-[#0a0a0a]/80 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 md:px-12 relative z-10 grid md:grid-cols-2 gap-12 items-center">
|
||||
<div class="reveal">
|
||||
<h1 class="text-5xl md:text-8xl mb-6 leading-[1.1]">Build Strength.<br><span class="italic text-amber-500">Find Flow.</span></h1>
|
||||
<p class="text-lg md:text-xl text-gray-300 max-w-lg mb-10 leading-relaxed">
|
||||
A high-performance coaching methodology designed to bridge the gap between raw power and fluid movement. Build a body that is as resilient as it is capable.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="#programs" class="btn-primary px-8 py-4 text-black font-bold uppercase text-sm tracking-widest">View Programs</a>
|
||||
<a href="#philosophy" class="px-8 py-4 border border-white/30 hover:border-white transition-all uppercase text-sm tracking-widest">Our Method</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block reveal delay-200">
|
||||
<div class="relative aspect-[4/5] bg-zinc-800 overflow-hidden group">
|
||||
<img src="https://images.pexels.com/photos/27730474/pexels-photo-27730474.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Athletes engage in recovery therapy with cupping and massage in a gym." class="w-full h-full object-cover opacity-80 grayscale group-hover:grayscale-0 transition-all duration-700" />
|
||||
<div class="absolute bottom-4 left-4 text-xs text-gray-400 bg-black/50 px-3 py-2 backdrop-blur-sm">
|
||||
Photo by <a href="https://www.pexels.com/photo/two-women-are-working-out-in-a-gym-27730474/" class="underline hover:text-amber-500" target="_blank">Jonathan Borba</a> on Pexels
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Philosophy Section -->
|
||||
<section id="philosophy" class="py-24 md:py-36 bg-[#0f0f0f]">
|
||||
<div class="container mx-auto px-6 md:px-12">
|
||||
<div class="max-w-3xl mb-20 reveal">
|
||||
<h2 class="text-amber-600 uppercase tracking-[0.3em] text-sm font-semibold mb-4">The Dual Path</h2>
|
||||
<p class="text-3xl md:text-5xl serif leading-tight">We reject the idea that strength and mobility are mutually exclusive.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-16 md:gap-24">
|
||||
<div class="reveal">
|
||||
<div class="text-amber-600 text-5xl mb-6 font-serif">01</div>
|
||||
<h3 class="text-3xl mb-4">The Forge</h3>
|
||||
<p class="text-gray-400 text-lg leading-relaxed mb-6">
|
||||
True strength requires progressive overload and intentional tension. Our resistance programs focus on structural integrity, hypertrophy, and neurological adaptation. We build the foundation that supports everything else.
|
||||
</p>
|
||||
<ul class="space-y-3 text-sm text-gray-500 uppercase tracking-widest">
|
||||
<li>+ Compound Movements</li>
|
||||
<li>+ Hypertrophy Focus</li>
|
||||
<li>+ Progressive Overload</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="reveal delay-200">
|
||||
<div class="text-amber-600 text-5xl mb-6 font-serif">02</div>
|
||||
<h3 class="text-3xl mb-4">The Flow</h3>
|
||||
<p class="text-gray-400 text-lg leading-relaxed mb-6">
|
||||
Strength without range is a prison. We integrate functional mobility and active recovery to ensure your body remains fluid, injury-resistant, and ready for the demands of everyday life.
|
||||
</p>
|
||||
<ul class="space-y-3 text-sm text-gray-500 uppercase tracking-widest">
|
||||
<li>+ Dynamic Mobility</li>
|
||||
<li>+ Joint Articulation</li>
|
||||
<li>+ Recovery Protocols</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programs Section -->
|
||||
<section id="programs" class="py-24 md:py-36">
|
||||
<div class="container mx-auto px-6 md:px-12">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6 reveal">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-4xl md:text-6xl serif mb-6">Tailored Approaches</h2>
|
||||
<p class="text-gray-400">Choose the level of commitment that fits your current life stage.</p>
|
||||
</div>
|
||||
<a href="#contact" class="text-amber-500 border-b border-amber-500 pb-1 hover:text-white hover:border-white transition-all">Request Consultation</a>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Program 1 -->
|
||||
<div class="program-card p-10 flex flex-col reveal">
|
||||
<span class="text-amber-600 text-sm font-bold tracking-widest uppercase mb-4">The Foundation</span>
|
||||
<h3 class="text-3xl mb-6">Base Level</h3>
|
||||
<p class="text-gray-400 mb-8 flex-grow">Perfect for those starting their journey. We focus on fundamental movement patterns and building a consistent habit.</p>
|
||||
<div class="text-4xl font-serif mb-8">$199<span class="text-sm text-gray-500 ml-2">/month</span></div>
|
||||
<a href="#contact" class="block text-center py-4 border border-white/10 hover:bg-white hover:text-black transition-all uppercase text-xs tracking-widest font-bold">Select Program</a>
|
||||
</div>
|
||||
|
||||
<!-- Program 2 -->
|
||||
<div class="program-card p-10 flex flex-col reveal delay-100 border-amber-600/50 bg-[#1a1a1a] scale-105 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 bg-amber-600 text-black text-[10px] font-bold px-4 py-1 uppercase tracking-tighter">Popular</div>
|
||||
<span class="text-amber-600 text-sm font-bold tracking-widest uppercase mb-4">The Athlete</span>
|
||||
<h3 class="text-3xl mb-6">Performance</h3>
|
||||
<p class="text-gray-400 mb-8 flex-grow">For the dedicated individual seeking measurable gains in power, agility, and metabolic efficiency.</p>
|
||||
<div class="text-4xl font-serif mb-8">$349<span class="text-sm text-gray-500 ml-2">/month</span></div>
|
||||
<a href="#contact" class="block text-center py-4 bg-amber-600 text-black uppercase text-xs tracking-widest font-bold">Select Program</a>
|
||||
</div>
|
||||
|
||||
<!-- Program 3 -->
|
||||
<div class="program-card p-10 flex flex-col reveal delay-200">
|
||||
<span class="text-amber-600 text-sm font-bold tracking-widest uppercase mb-4">The Mastery</span>
|
||||
<h3 class="text-3xl mb-6">Elite Coaching</h3>
|
||||
<p class="text-gray-400 mb-8 flex-grow">Full-service lifestyle management. Nutrition, weekly check-ins, and personalized biomechanical analysis.</p>
|
||||
<div class="text-4xl font-serif mb-8">$599<span class="text-sm text-gray-500 ml-2">/month</span></div>
|
||||
<a href="#contact" class="block text-center py-4 border border-white/10 hover:bg-white hover:text-black transition-all uppercase text-xs tracking-widest font-bold">Select Program</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonial Section -->
|
||||
<section id="testimonials" class="py-24 md:py-36 bg-zinc-900/50">
|
||||
<div class="container mx-auto px-6 md:px-12 text-center">
|
||||
<div class="max-w-4xl mx-auto reveal">
|
||||
<svg class="w-16 h-16 text-amber-600/30 mx-auto mb-8" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.897 14.914 16 16.017 16H19.017C20.12 16 21.017 16.897 21.017 18V21H14.017ZM3.017 21L3.017 18C3.017 16.897 3.914 16 5.017 16H8.017C9.12 16 10.017 16.897 10.017 18V21H3.017ZM14.017 7L14.017 4C14.017 2.897 14.914 2 16.017 2H19.017C20.12 2 21.017 2.897 21.017 4V7H14.017ZM5.017 7H8.017C9.12 7 10.017 7.897 10.017 9V12H5.017V7Z"></path></svg>
|
||||
<p class="text-2xl md:text-4xl serif italic mb-10 leading-relaxed">
|
||||
"Forge & Flow changed my perception of what training can be. I'm lifting heavier than I was in my early twenties, but I feel more mobile and fluid than ever before."
|
||||
</p>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="h-1 w-12 bg-amber-600 mb-4"></div>
|
||||
<h4 class="text-lg font-semibold uppercase tracking-widest">Julian Sterling</h4>
|
||||
<p class="text-gray-500 text-sm">Professional Athlete</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-24 md:py-36">
|
||||
<div class="container mx-auto px-6 md:px-12 grid md:grid-cols-2 gap-16">
|
||||
<div class="reveal">
|
||||
<h2 class="text-4xl md:text-6xl serif mb-8">Start Your <br><span class="text-amber-600">Transformation.</span></h2>
|
||||
<p class="text-gray-400 text-lg mb-12">Ready to redefine your capabilities? Fill out the form or reach out via email to book your initial movement assessment.</p>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 text-amber-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5H16a2 2 0 002-2V6a2 2 0 00-2-2H8.028a2 2 0 00-1.536.832l-1.74 2.666A2 2 0 014.172 12H4m10 0v1a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h2.5M16 3a2 2 0 100 4 2 2 0 000-4z"></path></svg>
|
||||
</div>
|
||||
<span class="text-lg">hello@forgeandflow.com</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 text-amber-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
</div>
|
||||
<span class="text-lg">Austin, TX • Global Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal delay-200">
|
||||
<form class="space-y-6" onsubmit="event.preventDefault(); alert('Thank you for reaching out. We will contact you shortly.');">
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs uppercase tracking-widest text-gray-500 mb-2 ml-1" for="name">Full Name</label>
|
||||
<input type="text" id="name" required class="bg-[#1a1a1a] border border-white/10 p-4 text-white focus:border-amber-600 focus:ring-1 focus:ring-amber-600 outline-none transition-all" placeholder="John Doe">
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs uppercase tracking-widest text-gray-500 mb-2 ml-1" for="email">Email Address</label>
|
||||
<input type="email" id="email" required class="bg-[#1a1a1a] border border-white/10 p-4 text-white focus:border-amber-600 focus:ring-1 focus:ring-amber-600 outline-none transition-all" placeholder="john@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs uppercase tracking-widest text-gray-500 mb-2 ml-1" for="goal">Primary Goal</label>
|
||||
<select id="goal" class="bg-[#1a1a1a] border border-white/10 p-4 text-white focus:border-amber-600 focus:ring-1 focus:ring-amber-600 outline-none transition-all">
|
||||
<option value="strength">Strength & Power</option>
|
||||
<option value="mobility">Mobility & Longevity</option>
|
||||
<option value="hybrid">Hybrid Performance</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="text-xs uppercase tracking-widest text-gray-500 mb-2 ml-1" for="message">Message</label>
|
||||
<textarea id="message" rows="4" class="bg-[#1a1a1a] border border-white/10 p-4 text-white focus:border-amber-600 focus:ring-1 focus:ring-amber-600 outline-none transition-all" placeholder="Tell us about your current training..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full btn-primary py-5 text-black font-bold uppercase text-sm tracking-[0.2em]">Send Application</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-white/5">
|
||||
<div class="container mx-auto px-6 md:px-12 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div class="serif text-xl font-bold">FORGE<span class="text-amber-600">&</span>FLOW</div>
|
||||
<div class="flex space-x-8 text-xs uppercase tracking-widest text-gray-500">
|
||||
<a href="#" class="hover:text-white transition-colors">Instagram</a>
|
||||
<a href="#" class="hover:text-white transition-colors">YouTube</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 uppercase tracking-widest">
|
||||
© 2024 Forge & Flow Coaching. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Navigation Scroll Effect
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.getElementById('main-nav');
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add('bg-[#0a0a0a]/95', 'backdrop-blur-md', 'shadow-lg', 'py-4');
|
||||
nav.classList.remove('py-6');
|
||||
} else {
|
||||
nav.classList.remove('bg-[#0a0a0a]/95', 'backdrop-blur-md', 'shadow-lg', 'py-4');
|
||||
nav.classList.add('py-6');
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for Reveal Animations
|
||||
const observerOptions = {
|
||||
threshold: 0.15
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('active');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.reveal').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
<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 90.70s</div></body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user