Live-Demo: https://forge-muscle.netlify.app/

Die meisten Gyms- und Fitness-Studio-Websites sehen gleich aus: ein Heldenbild von jemandem im Moment des Kreuzhebens, eine Preistabelle und ein Kontaktformular — eher ein Flyer als eine Erlebniswelt. FORGE wurde darauf aufgebaut, dieses Muster aufzubrechen. Es basiert auf dem Konzept des "Training Rituals": eine wiederkehrende visuelle Sprache aus Sätzen, Wiederholungen, Timing und Fortschritt, die das Scrollen selbst zu etwas physisch, diszipliniertem und premium-emotionalem macht. Tiefere Kohleweizen-Töne, eine markante Akzentfarbe, kompakte Display-Typografie und scrollgesteuerte "Session"-Interaktionen lassen die Seite weniger wie eine Broschüre wirken und mehr wie die ersten zehn Minuten eines echten Trainingsblocks — und dieses Gefühl ist genau das, was einen Besucher dazu bringt, tatsächlich zu buchen.

Dies ist keine einzelne, scrollende Landing Page — es ist eine vollständige, mehrseitige Website, aufgebaut um eine echte Benutzerreise: Entdecke ein Programm, treffe den Coach, der es leitet, verstehe den Raum, in dem es stattfindet, und fordere eine Sitzung an. Die Startseite enthält ein Hero-Bild, ein Manifest, eine Training-Methode-Durchführung, Programmhöhepunkte, eine signierte scroll-gesteuerte "Training Session"-Sequenz, animierte Leistungskennzahlen, ein Coach-Spotlight und eine immersive Studio-Showcase. Von dort ermöglicht /session einem Besucher, einen Trainingstyp auszuwählen (Kraft, Kondition, Leistung oder Erholung) und seine Dauer, Intensität, Fokus und Format live zu beobachten, bevor er fortfährt, es anzufordern. /programs und /programs/[slug] bieten eine filterbare Programmliste plus vollständige Detailseiten; /trainers und /trainers/[slug] das Gleiche für dein Coaching-Roster, inklusive Philosophie, Spezialgebieten und buchbaren Sessiontypen. /studio ist eine interaktive Führung durch deine Trainingszonen, /journal ist ein filterbarer Artikelindex mit Lese-Fortschritt-Verfolgung, und /faq, /contact, /privacy, /terms sowie ein gebrandeter 404 vervollständigen eine Site, bei der jeder Button zu einem echten Ort führt — keine toten Links, keine nur-Platzhalter-Routen.

Jedes sichtbare Inhaltselement — Programme, Trainer, Sessiontypen, Studiozonen, Journalbeiträge, FAQ, Navigation, sogar Markenname und Kontaktdaten — lebt in einfachen, typisierten Daten-Dateien unter src/data und src/config. Es gibt kein CMS und kein Backend zum Konfigurieren: Du öffnest eine Datei, bearbeitest ein Objekt, und die Seite baut sich darum herum neu auf. Das /contact-Formular ist eine echte Frontend-Only-Implementierung — es validiert Eingaben und übergibt die Nachricht dann an den E-Mail-Client des Besuchers über einen mailto:-Link, sodass nichts eingerichtet werden muss und nichts stillschweigend von einem nicht existierenden Server verschluckt wird.

Erstellt mit Next.js 16 (App Router) und TypeScript, gestylt mit Tailwind CSS und animiert mit Framer Motion — inklusive vollständiger Unterstützung für Bevorzugtes Reduzieren von Bewegungen, wobei die scroll-gebundenen Abschnitte automatisch auf ein statisches, vollständig erreichbares Layout zurückfallen. Was du erhältst: semantisches HTML mit sichtbarem Tastaturzugriff,