Files
sportbox-reutte-2026-01-30-v1/app/page.tsx

240 lines
8.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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 { Section } from "@/components/layout/Section";
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="flex items-center min-h-[90vh] bg-primary text-secondary">
<Container className="py-20 md:py-32">
<FadeIn>
<p className="text-sm uppercase tracking-[0.2em] opacity-80 mb-6">
Fitnessstudio in Reutte, Tirol
</p>
</FadeIn>
<FadeIn delay={0.1}>
<h1 className="font-bold max-w-4xl text-5xl md:text-6xl lg:text-[5rem] leading-[1.1] tracking-tight mb-6">
Dein Weg zu mehr
<br />
Fitness beginnt hier.
</h1>
</FadeIn>
<FadeIn delay={0.2}>
<p className="mt-6 max-w-xl text-lg md:text-xl text-secondary/80 leading-relaxed">
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="outline-white">
Jetzt Termin buchen
</Button>
<Button href="/über-uns" variant="ghost-white">
Mehr über uns erfahren
</Button>
</div>
</FadeIn>
</Container>
</Section>
{/* Features Section */}
<Section>
<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-8">
{FEATURES.map((feature, index) => (
<FadeIn key={feature.title} delay={index * 0.1}>
{/* Simplified Card usage since it might be just a div in this specialized case or reuse Card */}
<Card className="text-center h-full p-6 bg-background border border-border shadow-sm">
<feature.icon
size={32}
className="mx-auto mb-4 text-primary"
aria-hidden="true"
/>
<h3 className="text-lg font-bold mb-2">{feature.title}</h3>
<p className="text-sm text-muted leading-relaxed">{feature.description}</p>
</Card>
</FadeIn>
))}
</div>
</Container>
</Section>
{/* About Teaser Section */}
<Section className="bg-neutral">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<FadeIn>
<div
className="aspect-[4/3] bg-accent/40 flex items-center justify-center rounded-2xl overflow-hidden shadow-lg"
>
<div className="text-muted text-sm font-medium">PLACEHOLDER: Studio-Bild</div>
</div>
</FadeIn>
<FadeIn delay={0.15}>
<div>
<p className="text-sm uppercase tracking-[0.2em] text-muted mb-4 font-semibold">
Über uns
</p>
<h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">
Mehr als nur Training eine Gemeinschaft.
</h2>
<p className="text-muted mb-8 leading-relaxed text-lg">
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>
<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-8">
{SERVICES_PREVIEW.map((service, index) => (
<FadeIn key={service.title} delay={index * 0.1}>
<Card className="h-full flex flex-col p-8 bg-background border border-border shadow-sm hover:shadow-md transition-shadow">
<h3 className="text-xl font-bold mb-3">{service.title}</h3>
<p className="text-sm text-muted mb-6 flex-grow leading-relaxed">{service.description}</p>
<div className="mt-auto">
<Button href="/leistungen" variant="ghost" className="px-0 hover:bg-transparent">
Mehr erfahren
</Button>
</div>
</Card>
</FadeIn>
))}
</div>
</Container>
</Section>
{/* CTA Section */}
<Section className="bg-primary text-secondary text-center">
<Container>
<FadeIn>
<h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">
Bereit für den ersten Schritt?
</h2>
<p className="text-secondary/80 mb-10 max-w-xl mx-auto text-lg">
Vereinbaren Sie jetzt einen unverbindlichen Termin und lernen Sie
Sportbox Reutte kennen.
</p>
<Button
href="/leistungen#kontakt"
variant="outline-white"
className="px-8 py-4 text-base"
>
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>
);
}