Merge version_1 into main #2
452
src/app/page.tsx
452
src/app/page.tsx
@@ -26,341 +26,141 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Start",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Leistungen",
|
||||
id: "leistungen",
|
||||
},
|
||||
{
|
||||
name: "Konzept",
|
||||
id: "ablauf",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "cta",
|
||||
},
|
||||
]}
|
||||
brandName="Body & Care"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Start", id: "hero" },
|
||||
{ name: "Leistungen", id: "leistungen" },
|
||||
{ name: "Konzept", id: "ablauf" },
|
||||
{ name: "Kontakt", id: "cta" },
|
||||
]}
|
||||
brandName="Body & Care"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Dein Körper verdient mehr als nur Training."
|
||||
description="Individuelles Coaching, modernste Ausstattung und echte Ergebnisse – bei Body & Care Fitness. Starte deine Transformation in einer Umgebung, die dich inspiriert."
|
||||
buttons={[
|
||||
{
|
||||
text: "Jetzt Probetraining sichern",
|
||||
href: "#cta",
|
||||
},
|
||||
{
|
||||
text: "Beratung vereinbaren",
|
||||
href: "#cta",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/people-pilates-reformer-class-exercising-their-bodies_23-2150858008.jpg?_wi=1"
|
||||
imageAlt="Luxuriöses Personal Training Studio"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
alt: "professional portrait healthy woman",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bearded-man-posing-with-striped-shirt_343059-1138.jpg",
|
||||
alt: "professional headshot fitness client",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/sport-wellbeing-active-lifestyle-concept-attractive-asian-female-fitness-coach-girl-trainer-advi_1258-109566.jpg",
|
||||
alt: "smiling business woman portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-with-basket-ball_23-2149213166.jpg",
|
||||
alt: "portrait athletic mature man",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/black-white-portrait-athlete-competing-paralympics-championship-games_23-2151492705.jpg",
|
||||
alt: "focused business woman portrait",
|
||||
},
|
||||
]}
|
||||
avatarText="Von über 500 zufriedenen Mitgliedern empfohlen"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "1:1 Personal Training",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Individuelle Ernährungspläne",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Rückengerechte Konzepte",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modernste Technik",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Exklusive Studioatmosphäre",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "plain" }}
|
||||
title="Dein Körper verdient mehr als nur Training."
|
||||
description="Individuelles Coaching, modernste Ausstattung und echte Ergebnisse – bei Body & Care Fitness. Starte deine Transformation in einer Umgebung, die dich inspiriert."
|
||||
buttons={[{ text: "Jetzt Probetraining sichern", href: "#cta" }, { text: "Beratung vereinbaren", href: "#cta" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/people-pilates-reformer-class-exercising-their-bodies_23-2150858008.jpg"
|
||||
imageAlt="Luxuriöses Personal Training Studio"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "professional portrait healthy woman" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/bearded-man-posing-with-striped-shirt_343059-1138.jpg", alt: "professional headshot fitness client" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/sport-wellbeing-active-lifestyle-concept-attractive-asian-female-fitness-coach-girl-trainer-advi_1258-109566.jpg", alt: "smiling business woman portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-with-basket-ball_23-2149213166.jpg", alt: "portrait athletic mature man" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/black-white-portrait-athlete-competing-paralympics-championship-games_23-2151492705.jpg", alt: "focused business woman portrait" }
|
||||
]}
|
||||
avatarText="Von über 500 zufriedenen Mitgliedern empfohlen"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "1:1 Personal Training" },
|
||||
{ type: "text", text: "Individuelle Ernährungspläne" },
|
||||
{ type: "text", text: "Rückengerechte Konzepte" },
|
||||
{ type: "text", text: "Modernste Technik" },
|
||||
{ type: "text", text: "Exklusive Studioatmosphäre" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="vorteile" data-section="vorteile">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Persönliche Betreuung",
|
||||
description: "Keine Anonymität, keine Massenabfertigung. Dein Trainer begleitet dich exklusiv.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Users,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-gym_23-2151917987.jpg",
|
||||
imageAlt: "luxury gym interior clean",
|
||||
},
|
||||
{
|
||||
title: "Individuelle Pläne",
|
||||
description: "Dein Trainingsplan wächst mit dir und passt sich an deine Fortschritte an.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Target,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-pilates-reformer-class-exercising-their-bodies_23-2150858008.jpg?_wi=2",
|
||||
imageAlt: "luxury gym interior clean",
|
||||
},
|
||||
{
|
||||
title: "Hochwertige Ausstattung",
|
||||
description: "Trainiere mit Geräten der neuesten Generation für maximale Sicherheit und Effizienz.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=1",
|
||||
imageAlt: "luxury gym interior clean",
|
||||
},
|
||||
]}
|
||||
title="Warum unsere Mitglieder bleiben"
|
||||
description="Qualität bedeutet für uns, den Menschen in den Fokus zu stellen. Erlebe ein Training, das individuell auf dich und deinen Körper zugeschnitten ist."
|
||||
/>
|
||||
</div>
|
||||
<div id="vorteile" data-section="vorteile">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Persönliche Betreuung", description: "Keine Anonymität, keine Massenabfertigung. Dein Trainer begleitet dich exklusiv.", bentoComponent: "reveal-icon", icon: Users },
|
||||
{ title: "Individuelle Pläne", description: "Dein Trainingsplan wächst mit dir und passt sich an deine Fortschritte an.", bentoComponent: "reveal-icon", icon: Target },
|
||||
{ title: "Hochwertige Ausstattung", description: "Trainiere mit Geräten der neuesten Generation für maximale Sicherheit und Effizienz.", bentoComponent: "reveal-icon", icon: Zap }
|
||||
]}
|
||||
title="Warum unsere Mitglieder bleiben"
|
||||
description="Qualität bedeutet für uns, den Menschen in den Fokus zu stellen. Erlebe ein Training, das individuell auf dich und deinen Körper zugeschnitten ist."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="leistungen" data-section="leistungen">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Mehr als nur Fitness"
|
||||
buttons={[
|
||||
{
|
||||
text: "Unser Angebot ansehen",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="leistungen" data-section="leistungen">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Mehr als nur Fitness"
|
||||
buttons={[{ text: "Unser Angebot ansehen", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="problem" data-section="problem">
|
||||
<FeatureBento
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Überfüllte Studios",
|
||||
description: "Genieße Ruhe und Privatsphäre statt Hektik.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Users,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-pilates-reformer-class-exercising-their-bodies_23-2150858027.jpg",
|
||||
imageAlt: "People in pilates reformer class exercising their bodies",
|
||||
},
|
||||
{
|
||||
title: "Fehlende Betreuung",
|
||||
description: "Du wirst bei uns bei jeder Übung professionell korrigiert.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: ShieldCheck,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-pilates-reformer-class-exercising-their-bodies_23-2150858008.jpg?_wi=3",
|
||||
imageAlt: "People in pilates reformer class exercising their bodies",
|
||||
},
|
||||
{
|
||||
title: "Schmerzen trotz Training",
|
||||
description: "Wir setzen auf gesundheitsorientierte, rückengerechte Konzepte.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Activity,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=2",
|
||||
imageAlt: "People in pilates reformer class exercising their bodies",
|
||||
},
|
||||
]}
|
||||
title="Du hast genug von..."
|
||||
description="Erfahre den Unterschied zwischen einem gewöhnlichen Fitnessstudio und einem Ort der nachhaltigen Gesundheit."
|
||||
/>
|
||||
</div>
|
||||
<div id="problem" data-section="problem">
|
||||
<FeatureBento
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Überfüllte Studios", description: "Genieße Ruhe und Privatsphäre statt Hektik.", bentoComponent: "reveal-icon", icon: Users },
|
||||
{ title: "Fehlende Betreuung", description: "Du wirst bei uns bei jeder Übung professionell korrigiert.", bentoComponent: "reveal-icon", icon: ShieldCheck },
|
||||
{ title: "Schmerzen trotz Training", description: "Wir setzen auf gesundheitsorientierte, rückengerechte Konzepte.", bentoComponent: "reveal-icon", icon: Activity }
|
||||
]}
|
||||
title="Du hast genug von..."
|
||||
description="Erfahre den Unterschied zwischen einem gewöhnlichen Fitnessstudio und einem Ort der nachhaltigen Gesundheit."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="studio" data-section="studio">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Ein Ort, an dem du dich wohlfühlst."
|
||||
buttons={[
|
||||
{
|
||||
text: "Jetzt Termin sichern",
|
||||
href: "#cta",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="studio" data-section="studio">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Ein Ort, an dem du dich wohlfühlst."
|
||||
buttons={[{ text: "Jetzt Termin sichern", href: "#cta" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="ablauf" data-section="ablauf">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Beratung",
|
||||
description: "Kostenloses Erstgespräch zur Bedarfsanalyse.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: MessageSquare,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trainer-helping-woman-while-practicing-pilates_107420-84998.jpg",
|
||||
imageAlt: "Trainer helping a woman while practicing pilates",
|
||||
},
|
||||
{
|
||||
title: "Trainingsplan",
|
||||
description: "Erstellung deines maßgeschneiderten Konzepts.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: ListChecks,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-pilates-reformer-class-exercising-their-bodies_23-2150858008.jpg?_wi=4",
|
||||
imageAlt: "Trainer helping a woman while practicing pilates",
|
||||
},
|
||||
{
|
||||
title: "Start",
|
||||
description: "Gemeinsame Durchführung deines ersten Trainings.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Play,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=3",
|
||||
imageAlt: "Trainer helping a woman while practicing pilates",
|
||||
},
|
||||
]}
|
||||
title="So startest du bei uns"
|
||||
description="Einfach, strukturiert und transparent – dein Weg zur neuen Fitness."
|
||||
/>
|
||||
</div>
|
||||
<div id="ablauf" data-section="ablauf">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Beratung", description: "Kostenloses Erstgespräch zur Bedarfsanalyse.", bentoComponent: "reveal-icon", icon: MessageSquare },
|
||||
{ title: "Trainingsplan", description: "Erstellung deines maßgeschneiderten Konzepts.", bentoComponent: "reveal-icon", icon: ListChecks },
|
||||
{ title: "Start", description: "Gemeinsame Durchführung deines ersten Trainings.", bentoComponent: "reveal-icon", icon: Play }
|
||||
]}
|
||||
title="So startest du bei uns"
|
||||
description="Einfach, strukturiert und transparent – dein Weg zur neuen Fitness."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="preise" data-section="preise">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basis",
|
||||
badge: "Einsteiger",
|
||||
price: "Individuell",
|
||||
subtitle: "Perfekt zum Kennenlernen",
|
||||
features: [
|
||||
"Basischeck",
|
||||
"Erste Trainingseinheit",
|
||||
"Beratungsgespräch",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Beratung sichern",
|
||||
href: "#cta",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Premium",
|
||||
price: "Exklusiv",
|
||||
subtitle: "Für maximale Ziele",
|
||||
features: [
|
||||
"Personal Training",
|
||||
"Ernährungsberatung",
|
||||
"Monatliche Pläne",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Beratung sichern",
|
||||
href: "#cta",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "health",
|
||||
badge: "Fokus",
|
||||
price: "Maßgeschneidert",
|
||||
subtitle: "Rückengesundheit",
|
||||
features: [
|
||||
"Schmerzprävention",
|
||||
"Reha-orientiert",
|
||||
"Wöchentliche Betreuung",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Beratung sichern",
|
||||
href: "#cta",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Investiere in deine Gesundheit"
|
||||
description="Wir bieten flexible Mitgliedschaften und individuelle Betreuungspakete, die langfristige Ergebnisse garantieren."
|
||||
/>
|
||||
</div>
|
||||
<div id="preise" data-section="preise">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basis", badge: "Einsteiger", price: "Individuell", subtitle: "Perfekt zum Kennenlernen", features: ["Basischeck", "Erste Trainingseinheit", "Beratungsgespräch"], buttons: [{ text: "Beratung sichern", href: "#cta" }] },
|
||||
{ id: "premium", badge: "Premium", price: "Exklusiv", subtitle: "Für maximale Ziele", features: ["Personal Training", "Ernährungsberatung", "Monatliche Pläne"], buttons: [{ text: "Beratung sichern", href: "#cta" }] },
|
||||
{ id: "health", badge: "Fokus", price: "Maßgeschneidert", subtitle: "Rückengesundheit", features: ["Schmerzprävention", "Reha-orientiert", "Wöchentliche Betreuung"], buttons: [{ text: "Beratung sichern", href: "#cta" }] }
|
||||
]}
|
||||
title="Investiere in deine Gesundheit"
|
||||
description="Wir bieten flexible Mitgliedschaften und individuelle Betreuungspakete, die langfristige Ergebnisse garantieren."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Startet jetzt"
|
||||
title="Dein nächster Schritt beginnt heute."
|
||||
description="Sichere dir jetzt dein erstes, kostenloses Beratungsgespräch und erlebe den Body & Care Unterschied persönlich."
|
||||
inputPlaceholder="Deine E-Mail Adresse"
|
||||
buttonText="Kostenloses Gespräch sichern"
|
||||
/>
|
||||
</div>
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Startet jetzt"
|
||||
title="Dein nächster Schritt beginnt heute."
|
||||
description="Sichere dir jetzt dein erstes, kostenloses Beratungsgespräch und erlebe den Body & Care Unterschied persönlich."
|
||||
inputPlaceholder="Deine E-Mail Adresse"
|
||||
buttonText="Kostenloses Gespräch sichern"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Studio",
|
||||
items: [
|
||||
{
|
||||
label: "Adresse",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Öffnungszeiten",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Impressum",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Datenschutz",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Body & Care Fitness"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Studio", items: [{ label: "Adresse", href: "#" }, { label: "Öffnungszeiten", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Impressum", href: "#" }, { label: "Datenschutz", href: "#" }] }
|
||||
]}
|
||||
logoText="Body & Care Fitness"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user