christian/website-ai-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure and remove redundant changes

Browse Source
This commit is contained in:
christian
2026-07-12 18:16:31 +02:00
parent 23f20e4371
commit 80ee4cc892
101 changed files with 10541 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/seed-a90323d28d7fd4e6.html
+325
View File
@@ -0,0 +1,325 @@
<!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 & Grit Athletics | Elite Strength Coaching</title>
<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@400;700;900&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
<style>
:root {
--accent: #ea580c;
}
body {
font-family: 'Inter', sans-serif;
background-color: #0a0a0a;
color: #f4f4f5;
}
h1, h2, h3, .brand-font {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
}
.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);
}
.hero-gradient {
background: linear-gradient(to right, rgba(10, 10, 10, 1) 30%, rgba(10, 10, 10, 0.6) 100%);
}
.btn-primary {
background-color: var(--accent);
transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn-primary:hover {
transform: scale(1.05);
background-color: #c2410c;
}
.nav-link {
position: relative;
transition: color 0.3s ease;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: var(--accent);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
</style>
</head>
<body class="antialiased">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-black/90 backdrop-blur-md border-b border-white/10">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<a href="#" class="text-2xl font-bold tracking-tighter brand-font text-white">
FORGE<span class="text-orange-600">&</span>GRIT
</a>
<!-- Desktop Menu -->
<div class="hidden md:flex space-x-8 text-sm font-medium tracking-widest uppercase">
<a href="#philosophy" class="nav-link">Philosophy</a>
<a href="#services" class="nav-link">Services</a>
<a href="#results" class="nav-link">Results</a>
<a href="#contact" class="nav-link">Join Us</a>
</div>
<!-- Mobile Menu Toggle -->
<button id="menu-toggle" class="md:hidden text-white focus:outline-none" aria
aria-label="Toggle Menu">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-black border-b border-white/10 px-6 py-8 space-y-6 text-center uppercase tracking-widest text-sm">
<a href="#philosophy" class="block nav-link">Philosophy</a>
<a href="#services" class="block nav-link">Services</a>
<a href="#results" class="block nav-link">Results</a>
<a href="#contact" class="block nav-link">Join Us</a>
</div>
</nav>
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center overflow-hidden pt-20">
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 hero-gradient z-10"></div>
<img src="https://images.pexels.com/photos/16966286/pexels-photo-16966286.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" alt="An athlete performs a challenging lift during a weightlifting competition indoors." class="w-full h-full object-cover opacity-50">
</div>
<div class="relative z-20 max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
<div class="reveal">
<h1 class="text-6xl md:text-8xl font-black leading-none mb-6">
UNYIELDING <br> <span class="text-orange-600">STRENGTH.</span>
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-lg font-light">
We don't chase fitness. We forge capability. High-performance strength and conditioning for the relentless.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#contact" class="btn-primary text-white px-10 py-5 text-center font-bold uppercase tracking-widest text-sm">
Start Your Transformation
</a>
<a href="#services" class="border border-white/30 hover:bg-white hover:text-black transition-colors px-10 py-5 text-center font-bold uppercase tracking-widest text-sm">
Explore Methods
</a>
</div>
</div>
</div>
<!-- Attribution -->
<div class="absolute bottom-8 right-8 z-30 text-[10px] uppercase tracking-widest text-white/40">
Photo by <a href="https://www.pexels.com/photo/judge-watching-a-male-athlete-during-a-weightlifting-competition-16966286/" class="hover:text-orange-500 transition-colors" target="_blank">Ardit Mbrati</a> on Pexels
</div>
</section>
<!-- Philosophy Section -->
<section id="philosophy" class="py-24 bg-[#0a0a0a]">
<div class="max-w-7xl mx-auto px-6">
<div class="grid lg:grid-cols-2 gap-20 items-center">
<div class="reveal">
<h2 class="text-4xl md:text-5xl mb-8">The Core <br><span class="text-orange-600">Principle</span></h2>
<div class="space-y-6 text-gray-400 text-lg leading-relaxed">
<p>Most programs focus on aesthetics. We focus on the foundation that makes aesthetics inevitable. At Forge & Grit, we believe strength is the ultimate lever for human performance.</p>
<p>Our method is built on three pillars: Biomechanical integrity, progressive overload, and metabolic conditioning. We don't just move weights; we move with intent.</p>
</div>
<div class="mt-10 grid grid-cols-2 gap-8">
<div>
<span class="block text-3xl font-bold text-white mb-1">01</span>
<span class="uppercase text-xs tracking-widest text-orange-600 font-bold">Precision</span>
</div>
<div>
<span class="block text-3xl font-bold text-white mb-1">02</span>
<span class="uppercase text-xs tracking-widest text-orange-600 font-bold">Intensity</span>
</div>
<div>
<span class="block text-3xl font-bold text-white mb-1">03</span>
<span class="uppercase text-xs tracking-widest text-orange-600 font-bold">Recovery</span>
</div>
<div>
<span class="block text-3xl font-bold text-white mb-1">04</span>
<span class="uppercase text-xs tracking-widest text-orange-600 font-bold">Results</span>
</div>
</div>
</div>
<div class="reveal relative">
<div class="absolute -inset-4 border border-orange-600/30 translate-x-4 translate-y-4 -z-10"></div>
<img src="https://images.pexels.com/photos/6387341/pexels-photo-6387341.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Training session" class="w-full grayscale hover:grayscale-0 transition-all duration-700 shadow-2xl">
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-24 bg-zinc-950">
<div class="max-w-7xl mx-auto px-6 text-center mb-20">
<h2 class="text-4xl md:text-6xl mb-4 reveal">Coaching <span class="text-orange-600">Programs</span></h2>
<p class="text-gray-400 max-w-2xl mx-auto reveal">Tailored solutions for specific physiological goals. No generic templates. No wasted effort.</p>
</div>
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="reveal bg-zinc-900 p-10 border-t-4 border-orange-600 hover:bg-zinc-800 transition-colors group">
<h3 class="text-2xl mb-4">Elite 1-on-1</h3>
<p class="text-gray-400 mb-8">Comprehensive programming, bi-weekly check-ins, and video form analysis. For the serious athlete.</p>
<ul class="text-sm space-y-3 text-gray-500 mb-8">
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Custom Macro Plan</li>
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> 24/7 Messaging</li>
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Weekly Video Calls</li>
</ul>
<a href="#contact" class="text-sm font-bold uppercase tracking-widest group-hover:text-orange-500 transition-colors">Inquire &rarr;</a>
</div>
<!-- Service 2 -->
<div class="reveal bg-zinc-900 p-10 border-t-4 border-orange-600 hover:bg-zinc-800 transition-colors group">
<h3 class="text-2xl mb-4">Group Strength</h3>
<p class="text-gray-400 mb-8">High-intensity functional training designed to build explosive power and metabolic efficiency.</p>
<ul class="text-sm space-y-3 text-gray-500 mb-8">
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Small Group Sizes</li>
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Structured Workouts</li>
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Community Focus</li>
</ul>
<a href="#contact" class="text-sm font-bold uppercase tracking-widest group-hover:text-orange-500 transition-colors">Inquire &rarr;</a>
</div>
<!-- Service 3 -->
<div class="reveal bg-zinc-900 p-10 border-t-4 border-orange-600 hover:bg-zinc-800 transition-colors group">
<h3 class="text-2xl mb-4">Nutrition Strategy</h3>
<p class="text-gray-400 mb-8">Fueling for performance. We teach you how to eat for strength without restriction.</p>
<ul class="text-sm space-y-3 text-gray-500 mb-8">
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Macro Breakdown</li>
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Supplement Guide</li>
<li class="flex items-center"><span class="text-orange-600 mr-2">✓</span> Meal Planning</li>
</ul>
<a href="#contact" class="text-sm font-bold uppercase tracking-widest group-hover:text-orange-500 transition-colors">Inquire &rarr;</a>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section id="results" class="py-24 bg-[#0a0a0a]">
<div class="max-w-4xl mx-auto px-6 text-center">
<div class="reveal mb-12">
<svg class="w-16 h-16 text-orange-600 mx-auto opacity-50 mb-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20 15.5693 20 15V9C20 8.44772 19.5523 8 19 8H16.017C15.4647 8 15 8.44772 15 9V12H14.017V9C14.017 7.89543 13.1216 7 12 7C10.8784 7 10 7.89543 10 9V15C10 15.5523 10.4477 16 11 16H14.017V21Z" />
<path d="M2 22C2 22 2 20 4 20C6 20 6 22 8 22C10 22 10 20 12 20C14 20 14 22 16 22C18 22 18 20 20 20C22 20 22 22 22 22V14C22 14 22 12 20 12C18 12 18 14 16 14C14 14 14 12 12 12C10 12 10 14 8 14C6 14 6 12 4 12C2 12 2 14 2 14V22Z" />
</svg>
<p class="text-2xl md:text-4xl italic font-light leading-relaxed mb-8">
"The structured approach to my programming completely changed how I view training. I'm not just lifting heavier; I'm moving better and feeling more capable than ever."
</p>
<div class="flex items-center justify-center space-x-4">
<div class="h-px w-12 bg-orange-600"></div>
<span class="uppercase tracking-widest text-sm font-bold">Marcus V. — Professional Athlete</span>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="contact" class="py-24 bg-orange-600 overflow-hidden relative">
<div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
<div class="absolute top-10 left-10 w-64 h-64 bg-white rounded-full mix-blend-overlay filter blur-3xl"></div>
<div class="absolute bottom-10 right-10 w-96 h-96 bg-black rounded-full mix-blend-overlay filter blur-3xl"></div>
</div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-4xl md:text-6xl text-black font-black mb-8">Ready to Forge Yourself?</h2>
<p class="text-orange-100 text-xl mb-12">Limited slots available for our 1-on-1 elite coaching program.</p>
<form class="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
<input type="text" placeholder="Full Name" class="p-4 bg-black/20 border border-black/30 placeholder:text-orange-200 focus:outline-none focus:bg-black/40 transition-all" required>
<input type="email" placeholder="Email Address" class="p-4 bg-black/20 border border-black/30 placeholder:text-orange-200 focus:outline-none focus:bg-black/40 transition-all" required>
<textarea placeholder="Tell us about your goals..." class="md:col-span-2 p-4 bg-black/20 border border-black/30 placeholder:text-orange-200 focus:outline-none focus:bg-black/40 transition-all h-32" required></textarea>
<button type="submit" class="md:col-span-2 bg-black text-white font-bold py-5 uppercase tracking-widest hover:bg-zinc-900 transition-colors">
Apply Now
</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-black py-12 border-t border-white/5">
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center">
<div class="mb-8 md:mb-0 text-center md:text-left">
<a href="#" class="text-xl font-bold brand-font tracking-tighter">
FORGE<span class="text-orange-600">&</span>GRIT
</a>
<p class="text-gray-600 text-xs mt-2 uppercase tracking-widest">© 2024 Forge & Grit Athletics. All rights reserved.</p>
</div>
<div class="flex space-x-8 text-xs uppercase tracking-widest text-gray-400">
<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</a>
</div>
</div>
</footer>
<script>
// Mobile Menu Toggle
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when a link is clicked
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Reveal on Scroll
const revealCallback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target);
}
});
};
const revealObserver = new IntersectionObserver(revealCallback, {
threshold: 0.1
});
document.querySelectorAll('.reveal').forEach(el => {
revealObserver.observe(el);
});
// Form Submission Simulation
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const btn = e.target.querySelector('button');
const originalText = btn.innerText;
btn.innerText = "Sending...";
btn.disabled = true;
setTimeout(() => {
btn.innerText = "Application Received!";
btn.style.backgroundColor = "#10b981"; // success green
e.target.reset();
setTimeout(() => {
btn.innerText = originalText;
btn.style.backgroundColor = "";
btn.disabled = false;
}, 3000);
}, 1500);
});
</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 84.15s</div></body>
</html>