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-3d1edc2dbb75c232.html
+210
View File
@@ -0,0 +1,210 @@
<!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&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;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>