feat: Gestaltung
Niels Yannick Tietze
parent
b44a217d0c
commit
e09fef8c96
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,321 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>TRI-HUB – Ernährungsberatung</title>
|
||||||
|
<!-- Einbindung der zentralen styles.css zur Komprimierung und Nutzung der Styles -->
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
class="bg-slate-950 text-slate-100 antialiased selection:bg-cyan-500/30 selection:text-white"
|
||||||
|
>
|
||||||
|
<!-- Header / Navigationsleiste -->
|
||||||
|
<header class="sticky top-0 z-50 panel-glass border-b border-white/10">
|
||||||
|
<div
|
||||||
|
class="container mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="flex items-center gap-2 font-display text-xl font-bold tracking-tight text-white"
|
||||||
|
>
|
||||||
|
<span class="text-cyan-400">TRI-HUB</span>
|
||||||
|
<span
|
||||||
|
class="text-xs uppercase tracking-widest text-slate-400"
|
||||||
|
>| Ernährungsberatung</span
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<nav
|
||||||
|
class="hidden md:flex items-center gap-6 text-sm font-medium"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#ansatz"
|
||||||
|
class="text-slate-300 hover:text-white transition-colors"
|
||||||
|
>Unser Ansatz</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#leistungen"
|
||||||
|
class="text-slate-300 hover:text-white transition-colors"
|
||||||
|
>Leistungen</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#pakete"
|
||||||
|
class="text-slate-300 hover:text-white transition-colors"
|
||||||
|
>Pakete</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#kontakt"
|
||||||
|
class="rounded-full bg-cyan-500 px-4 py-2 text-slate-950 font-semibold hover:bg-cyan-400 transition-colors"
|
||||||
|
>Beratung buchen</a
|
||||||
|
>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero-Bereich -->
|
||||||
|
<section
|
||||||
|
class="relative isolate overflow-hidden pt-12 pb-20 lg:pt-20 lg:pb-28 hero-shell"
|
||||||
|
>
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-3xl mx-auto text-center">
|
||||||
|
<span class="eyebrow mb-4 block"
|
||||||
|
>Performance & Gesundheit</span
|
||||||
|
>
|
||||||
|
<h1
|
||||||
|
class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white mb-6"
|
||||||
|
>
|
||||||
|
Maßgeschneiderte Ernährungsberatung für Ausdauerathleten
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
class="text-lg sm:text-xl text-slate-300 mb-8 leading-relaxed"
|
||||||
|
>
|
||||||
|
Optimiere deine Energieversorgung im Training und
|
||||||
|
Wettkampf. Wir entwickeln deine individuelle
|
||||||
|
Ernährungsstrategie auf wissenschaftlicher Basis.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
|
<a
|
||||||
|
href="#kontakt"
|
||||||
|
class="rounded-full bg-cyan-500 px-6 py-3 text-slate-950 font-semibold hover:bg-cyan-400 transition-colors"
|
||||||
|
>
|
||||||
|
Erstgespräch vereinbaren
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#leistungen"
|
||||||
|
class="rounded-full panel-glass px-6 py-3 text-white font-medium hover:bg-white/10 transition-colors"
|
||||||
|
>
|
||||||
|
Mehr erfahren
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Hauptinhalte / Leistungen -->
|
||||||
|
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16">
|
||||||
|
<!-- Bereich: Unser Ansatz -->
|
||||||
|
<section id="ansatz" class="space-y-6">
|
||||||
|
<div class="text-center max-w-2xl mx-auto">
|
||||||
|
<span class="eyebrow">Wissenschaftlich & Individuell</span>
|
||||||
|
<h2 class="text-3xl font-bold text-white mt-2">
|
||||||
|
Warum Ernährungsberatung bei TRI-HUB?
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
||||||
|
<div class="card-premium rounded-2xl p-6 space-y-3">
|
||||||
|
<div
|
||||||
|
class="size-10 rounded-lg bg-cyan-500/10 text-cyan-400 flex items-center justify-center font-bold"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-white">
|
||||||
|
Analyse & BIA-Messung
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-300">
|
||||||
|
Fundierte Bestandsaufnahme von
|
||||||
|
Körperzusammensetzung, Stoffwechsel und aktuellen
|
||||||
|
Ernährungsgewohnheiten.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-premium rounded-2xl p-6 space-y-3">
|
||||||
|
<div
|
||||||
|
class="size-10 rounded-lg bg-cyan-500/10 text-cyan-400 flex items-center justify-center font-bold"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-white">
|
||||||
|
Wettkampfstrategie
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-300">
|
||||||
|
Präzise Verpflegungspläne für Renntage
|
||||||
|
(Carboloading, Magenverträglichkeit, Kohlenhydrat- &
|
||||||
|
Flüssigkeitszufuhr).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-premium rounded-2xl p-6 space-y-3">
|
||||||
|
<div
|
||||||
|
class="size-10 rounded-lg bg-cyan-500/10 text-cyan-400 flex items-center justify-center font-bold"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-white">
|
||||||
|
Nachhaltige Integration
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-300">
|
||||||
|
Praxisnahe Empfehlungen, die sich nahtlos in deinen
|
||||||
|
Berufs- und Trainingsalltag integrieren lassen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Bereich: Pakete -->
|
||||||
|
<section id="pakete" class="space-y-8">
|
||||||
|
<div class="text-center max-w-2xl mx-auto">
|
||||||
|
<span class="eyebrow">Angebote</span>
|
||||||
|
<h2 class="text-3xl font-bold text-white mt-2">
|
||||||
|
Unsere Beratungspakete
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||||
|
>
|
||||||
|
<!-- Paket Basic -->
|
||||||
|
<div
|
||||||
|
class="card-premium rounded-2xl p-8 flex flex-col justify-between"
|
||||||
|
>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="text-2xl font-bold text-white">
|
||||||
|
Starter
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-300">
|
||||||
|
Ideal für den Einstieg und die Optimierung der
|
||||||
|
Grundernährung.
|
||||||
|
</p>
|
||||||
|
<div class="text-3xl font-bold text-cyan-400">
|
||||||
|
149 €
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="space-y-2 text-sm text-slate-300 pt-4 border-t border-white/10"
|
||||||
|
>
|
||||||
|
<li>✓ Anamnese & Ist-Analyse</li>
|
||||||
|
<li>✓ 60 Min. Einzelsession</li>
|
||||||
|
<li>✓ Konkrete Handlungsempfehlungen</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#kontakt"
|
||||||
|
class="mt-8 block text-center rounded-full panel-glass py-3 font-medium hover:bg-white/10 transition-colors"
|
||||||
|
>Buchen</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Paket Performance -->
|
||||||
|
<div
|
||||||
|
class="card-premium rounded-2xl p-8 flex flex-col justify-between border-cyan-500/50"
|
||||||
|
>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<span class="eyebrow text-cyan-400">Beliebt</span>
|
||||||
|
<h3 class="text-2xl font-bold text-white">
|
||||||
|
Performance
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-300">
|
||||||
|
Umfassende Betreuung inkl. Wettkampfstrategie.
|
||||||
|
</p>
|
||||||
|
<div class="text-3xl font-bold text-cyan-400">
|
||||||
|
349 €
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="space-y-2 text-sm text-slate-300 pt-4 border-t border-white/10"
|
||||||
|
>
|
||||||
|
<li>✓ Alle Leistungen aus Starter</li>
|
||||||
|
<li>
|
||||||
|
✓ Detaillierter Wettkampf-Verpflegungsplan
|
||||||
|
</li>
|
||||||
|
<li>✓ 2x Folge-Consulting (je 30 Min.)</li>
|
||||||
|
<li>✓ Chat-Support während der Vorbereitung</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#kontakt"
|
||||||
|
class="mt-8 block text-center rounded-full bg-cyan-500 text-slate-950 py-3 font-semibold hover:bg-cyan-400 transition-colors"
|
||||||
|
>Buchen</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Paket Pro -->
|
||||||
|
<div
|
||||||
|
class="card-premium rounded-2xl p-8 flex flex-col justify-between"
|
||||||
|
>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="text-2xl font-bold text-white">
|
||||||
|
Season Pass
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-300">
|
||||||
|
Kontinuierliche Ernährungsbegleitung über die
|
||||||
|
gesamte Saison.
|
||||||
|
</p>
|
||||||
|
<div class="text-3xl font-bold text-cyan-400">
|
||||||
|
Individuell
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="space-y-2 text-sm text-slate-300 pt-4 border-t border-white/10"
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
✓ Regelmäßige Anpassungen je Trainingsphase
|
||||||
|
</li>
|
||||||
|
<li>✓ BIA-Körperanalysen inklusive</li>
|
||||||
|
<li>
|
||||||
|
✓ Maximale Flexibilität & Prioritäts-Support
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#kontakt"
|
||||||
|
class="mt-8 block text-center rounded-full panel-glass py-3 font-medium hover:bg-white/10 transition-colors"
|
||||||
|
>Anfragen</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Kontakt / Call to Action -->
|
||||||
|
<section
|
||||||
|
id="kontakt"
|
||||||
|
class="card-premium rounded-2xl p-8 md:p-12 text-center space-y-6"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl font-bold text-white">
|
||||||
|
Bereit für den nächsten Schritt?
|
||||||
|
</h2>
|
||||||
|
<p class="text-slate-300 max-w-xl mx-auto">
|
||||||
|
Vereinbare jetzt ein unverbindliches Erstgespräch mit
|
||||||
|
unseren Ernährungsexperten und erreiche deine Ziele
|
||||||
|
effizienter.
|
||||||
|
</p>
|
||||||
|
<form class="max-w-md mx-auto space-y-4 text-left">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="block text-xs uppercase text-slate-400 mb-1"
|
||||||
|
>Name</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Dein Name"
|
||||||
|
class="w-full rounded-lg panel-glass px-4 py-2.5 text-white placeholder:text-slate-500 focus:outline-none focus:border-cyan-400 border border-white/10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="block text-xs uppercase text-slate-400 mb-1"
|
||||||
|
>E-Mail</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="deine@email.de"
|
||||||
|
class="w-full rounded-lg panel-glass px-4 py-2.5 text-white placeholder:text-slate-500 focus:outline-none focus:border-cyan-400 border border-white/10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full rounded-full bg-cyan-500 py-3 font-semibold text-slate-950 hover:bg-cyan-400 transition-colors"
|
||||||
|
>
|
||||||
|
Anfrage senden
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer
|
||||||
|
class="border-t border-white/10 py-8 mt-16 text-center text-xs text-slate-500"
|
||||||
|
>
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<p>© 2026 TRI-HUB. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9158
src/styles.css
9158
src/styles.css
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue