206 lines
14 KiB
HTML
206 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VitalKraft - Dein Weg zur inneren Stärke</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
/* Custom Configuration for Tailwind */
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
'primary-green': '#10B981', /* Emerald Green */
|
||
'dark-charcoal': '#1F2937', /* Dark Charcoal Gray */
|
||
'light-bg': '#F9FAFB', /* Light Gray Background */
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter', 'sans-serif'],
|
||
serif: ['Playfair Display', 'serif'],
|
||
},
|
||
boxShadow: {
|
||
'vital': '0 10px 20px rgba(16, 185, 129, 0.2)',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Custom CSS for subtle animations and typography */
|
||
.hero-gradient {
|
||
background: linear-gradient(135deg, #059669 0%, #10B981 100%);
|
||
}
|
||
|
||
.card-hover:hover {
|
||
transform: translateY(-8px) scale(1.02);
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.progress-bar-fill {
|
||
transition: width 2s ease-out;
|
||
}
|
||
|
||
/* Ensure smooth scrolling for navigation */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
</style>
|
||
<!-- Load Google Fonts -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body class="bg-light-bg font-sans text-dark-charcoal antialiased">
|
||
|
||
<!-- Header & Navigation -->
|
||
<header class="sticky top-0 z-50 bg-white shadow-lg 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">
|
||
<!-- Logo/Brand Name -->
|
||
<div class="flex-shrink-0">
|
||
<a href="#" class="text-3xl font-bold text-dark-charcoal flex items-center">
|
||
<svg class="w-8 h-8 text-primary-green mr-2" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||
VitalKraft
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Desktop Navigation -->
|
||
<nav class="hidden md:flex space-x-8">
|
||
<a href="#methodik" class="text-gray-600 hover:text-primary-green px-3 py-1 border-b-2 border-transparent hover:border-primary-green transition duration-150 font-medium">Methode</a>
|
||
<a href="#leistungen" class="text-gray-600 hover:text-primary-green px-3 py-1 border-b-2 border-transparent hover:border-primary-green transition duration-150 font-medium">Leistungen</a>
|
||
<a href="#erfolge" class="text-gray-600 hover:text-primary-green px-3 py-1 border-b-2 border-transparent hover:border-primary-green transition duration-150 font-medium">Erfolge</a>
|
||
<a href="#kontakt" class="text-gray-600 hover:text-primary-green px-3 py-1 border-b-2 border-transparent hover:border-primary-green transition duration-150 font-medium">Kontakt</a>
|
||
</nav>
|
||
|
||
<!-- CTA Button -->
|
||
<div class="hidden md:block">
|
||
<a href="#kontakt" class="bg-primary-green text-white px-6 py-2 rounded-full shadow-lg hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-primary-green focus:ring-opacity-50">
|
||
Starte Jetzt
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Mobile Menu (Simplified for single page, using a visible toggle area) -->
|
||
<div class="md:hidden border-t border-gray-100 p-4">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-xl font-bold text-dark-charcoal">VitalKraft</span>
|
||
<button id="mobile-menu-button" class="text-dark-charcoal text-2xl focus:outline-none focus:ring-2 focus:ring-primary-green">
|
||
<!-- Hamburger Icon -->
|
||
<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>
|
||
</button>
|
||
</div>
|
||
<nav id="mobile-menu" class="hidden space-y-2 mt-4">
|
||
<a href="#methodik" class="block p-3 text-dark-charcoal hover:bg-gray-100 transition">Methode</a>
|
||
<a href="#leistungen" class="block p-3 text-dark-charcoal hover:bg-gray-100 transition">Leistungen</a>
|
||
<a href="#erfolge" class="block p-3 text-dark-charcoal hover:bg-gray-100 transition">Erfolge</a>
|
||
<a href="#kontakt" class="block p-3 bg-primary-green text-white text-center hover:bg-green-700 transition">Starte Jetzt</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section class="hero-gradient pt-20 pb-32 text-white shadow-vital">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h1 class="text-5xl sm:text-7xl font-extrabold mb-4 leading-tight tracking-tight">
|
||
Entfessle Deine <span class="block mt-2">wahre innere Kraft.</span>
|
||
</h1>
|
||
<p class="text-xl sm:text-2xl mb-10 max-w-3xl mx-auto opacity-90">
|
||
VitalKraft ist mehr als Training – es ist eine Transformation. Wir bauen nachhaltige Stärke in deinen Alltag ein.
|
||
</p>
|
||
<a href="#kontakt" class="inline-block bg-white text-dark-charcoal font-bold text-lg px-10 py-4 rounded-full shadow-xl transition duration-300 hover:bg-gray-100 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-75">
|
||
Kostenloses Beratungsgespräch
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Mission/Philosophy Section -->
|
||
<section id="methodik" class="py-20 lg:py-28 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center max-w-4xl mx-auto mb-16">
|
||
<h2 class="text-sm uppercase tracking-widest text-primary-green mb-2">Unsere Philosophie</h2>
|
||
<p class="text-5xl font-bold text-dark-charcoal leading-snug">
|
||
Nachhaltige Stärke, nicht schnelle Kurse.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-10">
|
||
<!-- Feature 1 -->
|
||
<div class="p-8 bg-light-bg rounded-xl shadow-lg transition duration-300 card-hover border-t-4 border-primary-green">
|
||
<div class="text-primary-green mb-4 text-5xl">🌱</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-dark-charcoal">Individuelle Planung</h3>
|
||
<p class="text-gray-600">Keine Standardprogramme. Wir analysieren deinen Lebensstil und erstellen einen Plan, der wirklich zu DIR passt.</p>
|
||
</div>
|
||
<!-- Feature 2 -->
|
||
<div class="p-8 bg-light-bg rounded-xl shadow-lg transition duration-300 card-hover border-t-4 border-primary-green">
|
||
<div class="text-primary-green mb-4 text-5xl">🧠</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-dark-charcoal">Mentale Stärke</h3>
|
||
<p class="text-gray-600">Fitness ist mental. Wir arbeiten an deiner Disziplin und deinem Mindset für langfristigen Erfolg.</p>
|
||
</div>
|
||
<!-- Feature 3 -->
|
||
<div class="p-8 bg-light-bg rounded-xl shadow-lg transition duration-300 card-hover border-t-4 border-primary-green">
|
||
<div class="text-primary-green mb-4 text-5xl">🤝</div>
|
||
<h3 class="text-2xl font-bold mb-3 text-dark-charcoal">Ganzheitlicher Coach</h3>
|
||
<p class="text-gray-600">Ernährung, Bewegung, Erholung – Wir begleiten dich auf allen Ebenen zu deinem besten Selbst.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services/Offerings Section -->
|
||
<section id="leistungen" class="py-20 lg:py-28 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center max-w-3xl mx-auto mb-12">
|
||
<h2 class="text-sm uppercase tracking-widest text-primary-green mb-2">Unsere Angebote</h2>
|
||
<p class="text-4xl font-bold text-dark-charcoal leading-tight">
|
||
Wähle deinen Pfad zur Vitalität.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Service Cards Grid -->
|
||
<div class="grid lg:grid-cols-3 gap-8">
|
||
|
||
<!-- Service 1: Einzelcoaching -->
|
||
<div class="bg-white rounded-xl p-8 shadow-vital shadow-lg border-b-8 border-primary-green transition duration-300 transform hover:shadow-2xl">
|
||
<h3 class="text-3xl font-bold mb-3 text-dark-charcoal">1:1 Vital-Coaching</h3>
|
||
<p class="text-gray-600 mb-4">Intensive, personalisierte Begleitung für maximale Ergebnisse. Perfekt für den tiefgreifenden Wandel.</p>
|
||
<ul class="space-y-2 text-gray-700 mb-6 list-none">
|
||
<li class="flex items-center"><span class="text-primary-green mr-2">✓</span> Ernährungsanalyse</li>
|
||
<li class="flex items-center"><span class="text-primary-green mr-2">✓</span> Trainingsplanung</li>
|
||
<li class="flex items-center"><span class="text-primary-green mr-2">✓</span> Mindset Training</li>
|
||
</ul>
|
||
<div class="mt-6 pt-4 border-t flex justify-between items-center">
|
||
<span class="text-xl font-bold text-dark-charcoal">Ab 399€ / Monat</span>
|
||
<button class="bg-primary-green text-white px-6 py-3 rounded-full text-sm shadow-md hover:bg-green-700 transition focus:outline-none focus:ring-4 focus:ring-primary-green">
|
||
Mehr erfahren
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Service 2: Gruppenfitness -->
|
||
<div class="bg-white rounded-xl p-8 shadow-lg border-b-8 border-amber-500 transition duration-300 transform hover:shadow-2xl">
|
||
<h3 class="text-3xl font-bold mb-3 text-dark-charcoal">Gruppentraining "Kraftnetz"</h3>
|
||
<p class="text-gray-600 mb-4">Motivation durch Gemeinschaft. Dynamische Trainingsmodule für alle Fitnesslevel.</p>
|
||
<ul class="space-y-2 text-gray-700 mb-6 list-none">
|
||
<li class="flex items-center"><span class="text-amber-500 mr-2">✓</span> Soziale Dynamik</li>
|
||
<li class="flex items-center"><span class="text-amber-500 mr-2">✓</span> Flexible Zeiten</li>
|
||
<li class="flex items-center"><span class="text-amber-500 mr-2">✓</span> Gemeinschaftsgeist</li>
|
||
</ul>
|
||
<div class="mt-6 pt-4 border-t flex justify-between items-center">
|
||
<span class="text-xl font-bold text-dark-charcoal">Ab 79€ / Monat</span>
|
||
<button class="bg-amber-500 text-white px-6 py-3 rounded-full text-sm shadow-md hover:bg-amber-600 transition focus:outline-none focus:ring-4 focus:ring-amber-500">
|
||
Jetzt beitreten
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Service 3: Digitale Programme -->
|
||
<div class="bg-white rounded-xl p-8 shadow-lg border-b-8 border-indigo-500 transition duration-300 transform hover:shadow-2xl">
|
||
<h3 class="text-3xl font-bold mb-3 text-dark-charcoal">Digitale Trainingspakete</h3>
|
||
<p class="text-gray-600 mb-4">Trainiere jederzeit und überall mit unseren digitalen Guides. Dein Fitnessplan im Pocket.</p>
|
||
<ul class="space-y-2 text-gray-700 mb-6 list-none">
|
||
<li class="flex items-center"><span class="text-indigo-500 mr-2">✓</span> Anytime-Zugriff</li>
|
||
<li class="flex items-center"><span class="text-indigo-500 mr-2">✓</span> Ernährungs-Templates</li>
|
||
<li class="flex items-center"><span class="text-indigo-500 mr-2">✓</span> Community Support</li>
|
||
</ul>
|
||
<div class="mt-6 pt-4 border-t flex justify-between items-center">
|
||
<span class="text-xl font-bold text-dark-charcoal">Ab 49€ / Monat</span>
|
||
<button class="bg-indigo-50<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> |