257 lines
9.2 KiB
TypeScript
257 lines
9.2 KiB
TypeScript
import { Container } from "@/components/ui/Container";
|
||
import { Button } from "@/components/ui/Button";
|
||
import { SectionHeading } from "@/components/ui/SectionHeading";
|
||
import { Card } from "@/components/ui/Card";
|
||
import { FadeIn } from "@/components/ui/FadeIn";
|
||
import { Dumbbell, Users, Clock, Heart } from "lucide-react";
|
||
import type { Metadata } from "next";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Sportbox Reutte – Dein Fitnessstudio in Reutte",
|
||
description:
|
||
"Willkommen bei Sportbox Reutte – Ihr Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung in Reutte, Tirol.",
|
||
openGraph: {
|
||
title: "Sportbox Reutte – Dein Fitnessstudio in Reutte",
|
||
description:
|
||
"Ihr Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung in Reutte, Tirol.",
|
||
url: "https://sportbox-reutte.at",
|
||
},
|
||
};
|
||
|
||
const FEATURES = [
|
||
{
|
||
icon: Dumbbell,
|
||
title: "Individuelle Betreuung",
|
||
description:
|
||
"Persönliche Trainingspläne, abgestimmt auf Ihre Ziele und Ihr Fitnesslevel.",
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: "Starke Community",
|
||
description:
|
||
"Trainieren Sie in einer motivierenden Gemeinschaft, die Sie unterstützt und inspiriert.",
|
||
},
|
||
{
|
||
icon: Clock,
|
||
title: "Flexible Zeiten",
|
||
description:
|
||
"Großzügige Öffnungszeiten, damit Fitness in Ihren Alltag passt.",
|
||
},
|
||
{
|
||
icon: Heart,
|
||
title: "Ganzheitlicher Ansatz",
|
||
description:
|
||
"Körperliche Fitness, mentale Gesundheit und Ernährung – alles unter einem Dach.",
|
||
},
|
||
] as const;
|
||
|
||
const SERVICES_PREVIEW = [
|
||
{
|
||
title: "Personal Training",
|
||
description:
|
||
"Eins-zu-Eins Betreuung durch zertifizierte Trainer für maximale Ergebnisse.",
|
||
},
|
||
{
|
||
title: "Gruppenkurse",
|
||
description:
|
||
"Von Yoga bis Krafttraining – vielfältige Kurse für jedes Fitnesslevel.",
|
||
},
|
||
{
|
||
title: "Ernährungsberatung",
|
||
description:
|
||
"Professionelle Beratung für eine Ernährung, die Ihre Trainingsziele unterstützt.",
|
||
},
|
||
] as const;
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<main>
|
||
{/* Hero Section */}
|
||
<section className="relative flex items-center min-h-screen bg-primary text-secondary">
|
||
<Container className="py-32 md:py-40">
|
||
<FadeIn>
|
||
<p className="text-sm uppercase tracking-[0.2em] text-secondary/60 mb-6">
|
||
Fitnessstudio in Reutte, Tirol
|
||
</p>
|
||
</FadeIn>
|
||
<FadeIn delay={0.1}>
|
||
<h1
|
||
className="font-bold max-w-3xl"
|
||
style={{
|
||
fontSize: "clamp(var(--text-4xl), 5vw, var(--text-6xl))",
|
||
lineHeight: "1.1",
|
||
letterSpacing: "var(--text-5xl-letter-spacing)",
|
||
}}
|
||
>
|
||
Dein Weg zu mehr
|
||
<br />
|
||
Fitness beginnt hier.
|
||
</h1>
|
||
</FadeIn>
|
||
<FadeIn delay={0.2}>
|
||
<p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
|
||
Individuelle Trainingspläne, persönliche Betreuung und eine
|
||
motivierende Community. Willkommen bei Sportbox Reutte.
|
||
</p>
|
||
</FadeIn>
|
||
<FadeIn delay={0.3}>
|
||
<div className="mt-10 flex flex-col sm:flex-row gap-4">
|
||
<Button href="/leistungen#kontakt" variant="secondary" className="border-secondary text-secondary hover:bg-secondary hover:text-primary">
|
||
Jetzt Termin buchen
|
||
</Button>
|
||
<Button href="/über-uns" variant="ghost" className="text-secondary/80 hover:text-secondary">
|
||
Mehr über uns erfahren
|
||
</Button>
|
||
</div>
|
||
</FadeIn>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||
<Container>
|
||
<FadeIn>
|
||
<SectionHeading
|
||
title="Warum Sportbox Reutte?"
|
||
subtitle="Wir bieten mehr als nur ein Fitnessstudio – wir sind Ihr Partner auf dem Weg zu einem gesünderen Leben."
|
||
/>
|
||
</FadeIn>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{FEATURES.map((feature, index) => (
|
||
<FadeIn key={feature.title} delay={index * 0.1}>
|
||
<Card className="text-center h-full">
|
||
<feature.icon
|
||
size={32}
|
||
className="mx-auto mb-4 text-primary"
|
||
aria-hidden="true"
|
||
/>
|
||
<h3 className="text-base font-bold mb-2">{feature.title}</h3>
|
||
<p className="text-sm text-muted">{feature.description}</p>
|
||
</Card>
|
||
</FadeIn>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* About Teaser Section */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
|
||
<Container>
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<FadeIn>
|
||
<div
|
||
className="aspect-[4/3] bg-accent/40 flex items-center justify-center"
|
||
style={{ borderRadius: "var(--radius-md)" }}
|
||
>
|
||
<p className="text-muted text-sm">PLACEHOLDER: Studio-Bild</p>
|
||
</div>
|
||
</FadeIn>
|
||
<FadeIn delay={0.15}>
|
||
<div>
|
||
<p className="text-sm uppercase tracking-[0.2em] text-muted mb-4">
|
||
Über uns
|
||
</p>
|
||
<h2
|
||
className="font-bold mb-6"
|
||
style={{
|
||
fontSize: "var(--text-3xl)",
|
||
lineHeight: "var(--text-3xl-line-height)",
|
||
letterSpacing: "var(--text-3xl-letter-spacing)",
|
||
}}
|
||
>
|
||
Mehr als nur Training – eine Gemeinschaft.
|
||
</h2>
|
||
<p className="text-muted mb-6 leading-relaxed">
|
||
Bei Sportbox Reutte stehen Sie im Mittelpunkt. Unser erfahrenes
|
||
Team begleitet Sie auf Ihrem individuellen Weg – ob Einsteiger
|
||
oder Fortgeschrittener. Gemeinsam erreichen wir Ihre Ziele.
|
||
</p>
|
||
<Button href="/über-uns" variant="secondary">
|
||
Mehr über uns erfahren
|
||
</Button>
|
||
</div>
|
||
</FadeIn>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* Services Preview Section */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||
<Container>
|
||
<FadeIn>
|
||
<SectionHeading
|
||
title="Unsere Leistungen"
|
||
subtitle="Entdecken Sie unser vielfältiges Angebot für Ihre persönlichen Fitnessziele."
|
||
/>
|
||
</FadeIn>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{SERVICES_PREVIEW.map((service, index) => (
|
||
<FadeIn key={service.title} delay={index * 0.1}>
|
||
<Card className="h-full">
|
||
<h3 className="text-lg font-bold mb-3">{service.title}</h3>
|
||
<p className="text-sm text-muted mb-4">{service.description}</p>
|
||
<Button href="/leistungen" variant="ghost" className="text-sm">
|
||
Mehr erfahren
|
||
</Button>
|
||
</Card>
|
||
</FadeIn>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-primary text-secondary">
|
||
<Container className="text-center">
|
||
<FadeIn>
|
||
<h2
|
||
className="font-bold mb-4"
|
||
style={{
|
||
fontSize: "var(--text-3xl)",
|
||
lineHeight: "var(--text-3xl-line-height)",
|
||
}}
|
||
>
|
||
Bereit für den ersten Schritt?
|
||
</h2>
|
||
<p className="text-secondary/70 mb-8 max-w-lg mx-auto">
|
||
Vereinbaren Sie jetzt einen unverbindlichen Termin und lernen Sie
|
||
Sportbox Reutte kennen.
|
||
</p>
|
||
<Button
|
||
href="/leistungen#kontakt"
|
||
variant="secondary"
|
||
className="border-secondary text-secondary hover:bg-secondary hover:text-primary"
|
||
>
|
||
Jetzt Termin buchen
|
||
</Button>
|
||
</FadeIn>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* JSON-LD Structured Data */}
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{
|
||
__html: JSON.stringify({
|
||
"@context": "https://schema.org",
|
||
"@type": "LocalBusiness",
|
||
name: "Sportbox Reutte",
|
||
description:
|
||
"Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung in Reutte, Tirol.",
|
||
url: "https://sportbox-reutte.at",
|
||
telephone: "+43123456789",
|
||
email: "kontakt@sportbox-reutte.at",
|
||
address: {
|
||
"@type": "PostalAddress",
|
||
addressLocality: "Reutte",
|
||
addressRegion: "Tirol",
|
||
addressCountry: "AT",
|
||
},
|
||
sameAs: [],
|
||
}),
|
||
}}
|
||
/>
|
||
</main>
|
||
);
|
||
}
|