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>
|
||||
9154
src/styles.css
9154
src/styles.css
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue