232 lines
8.2 KiB
TypeScript
232 lines
8.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 type { Metadata } from "next";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Über Uns",
|
||
description:
|
||
"Erfahren Sie mehr über unsere Philosophie, unser Team und unsere Community bei Sportbox Reutte.",
|
||
openGraph: {
|
||
title: "Über Uns | Sportbox Reutte",
|
||
description:
|
||
"Erfahren Sie mehr über unsere Philosophie, unser Team und unsere Community bei Sportbox Reutte.",
|
||
url: "https://sportbox-reutte.at/über-uns",
|
||
},
|
||
};
|
||
|
||
const TEAM_MEMBERS = [
|
||
{
|
||
name: "Max Mustermann",
|
||
role: "Gründer & Head Coach",
|
||
description:
|
||
"Zertifizierter Personal Trainer mit über 10 Jahren Erfahrung in der Fitnessbranche.",
|
||
},
|
||
{
|
||
name: "Anna Berger",
|
||
role: "Yoga & Mobility Coach",
|
||
description:
|
||
"Spezialisiert auf Yoga, Stretching und ganzheitliche Bewegungskonzepte.",
|
||
},
|
||
{
|
||
name: "Thomas Huber",
|
||
role: "Kraft- & Konditionstrainer",
|
||
description:
|
||
"Experte für Krafttraining, Athletiktraining und Wettkampfvorbereitung.",
|
||
},
|
||
{
|
||
name: "Lisa Mayer",
|
||
role: "Ernährungsberaterin",
|
||
description:
|
||
"Diplomierte Ernährungsberaterin mit Fokus auf sportgerechte Ernährung.",
|
||
},
|
||
] as const;
|
||
|
||
const VALUES = [
|
||
{
|
||
title: "Individualität",
|
||
description:
|
||
"Jeder Mensch ist einzigartig. Unsere Trainingspläne werden individuell auf Sie abgestimmt.",
|
||
},
|
||
{
|
||
title: "Gemeinschaft",
|
||
description:
|
||
"Gemeinsam erreichen wir mehr. Unsere Community motiviert und unterstützt sich gegenseitig.",
|
||
},
|
||
{
|
||
title: "Qualität",
|
||
description:
|
||
"Von der Ausbildung unserer Trainer bis zur Auswahl der Geräte – wir setzen auf höchste Qualität.",
|
||
},
|
||
] as const;
|
||
|
||
export default function UeberUnsPage() {
|
||
return (
|
||
<main>
|
||
{/* Hero */}
|
||
<section className="pt-32 pb-[var(--spacing-section)] md:pt-40 md:pb-[var(--spacing-4xl)] bg-primary text-secondary">
|
||
<Container>
|
||
<FadeIn>
|
||
<p className="text-sm uppercase tracking-[0.2em] text-secondary/60 mb-4">
|
||
Über uns
|
||
</p>
|
||
</FadeIn>
|
||
<FadeIn delay={0.1}>
|
||
<h1
|
||
className="font-bold max-w-2xl"
|
||
style={{
|
||
fontSize: "clamp(var(--text-3xl), 4vw, var(--text-5xl))",
|
||
lineHeight: "1.1",
|
||
letterSpacing: "var(--text-5xl-letter-spacing)",
|
||
}}
|
||
>
|
||
Wir glauben an die Kraft der Bewegung.
|
||
</h1>
|
||
</FadeIn>
|
||
<FadeIn delay={0.2}>
|
||
<p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
|
||
Seit der Gründung von Sportbox Reutte verfolgen wir eine klare
|
||
Mission: Fitness für jeden zugänglich und persönlich zu gestalten.
|
||
</p>
|
||
</FadeIn>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* Philosophy */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||
<Container>
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<FadeIn>
|
||
<div>
|
||
<p className="text-sm uppercase tracking-[0.2em] text-muted mb-4">
|
||
Unsere Philosophie
|
||
</p>
|
||
<h2
|
||
className="font-bold mb-6"
|
||
style={{
|
||
fontSize: "var(--text-3xl)",
|
||
lineHeight: "var(--text-3xl-line-height)",
|
||
letterSpacing: "var(--text-3xl-letter-spacing)",
|
||
}}
|
||
>
|
||
Fitness ist kein Ziel – es ist ein Weg.
|
||
</h2>
|
||
<p className="text-muted leading-relaxed mb-4">
|
||
Bei Sportbox Reutte geht es nicht um kurzfristige Ergebnisse.
|
||
Wir begleiten Sie auf einem nachhaltigen Weg zu mehr
|
||
Wohlbefinden, Kraft und Lebensqualität.
|
||
</p>
|
||
<p className="text-muted leading-relaxed">
|
||
Unser ganzheitlicher Ansatz verbindet körperliches Training,
|
||
mentale Gesundheit und ausgewogene Ernährung. Denn wahre
|
||
Fitness entsteht, wenn Körper und Geist im Einklang sind.
|
||
</p>
|
||
</div>
|
||
</FadeIn>
|
||
<FadeIn delay={0.15}>
|
||
<div
|
||
className="aspect-[4/3] bg-neutral flex items-center justify-center"
|
||
style={{ borderRadius: "var(--radius-md)" }}
|
||
>
|
||
<p className="text-muted text-sm">PLACEHOLDER: Team-Bild</p>
|
||
</div>
|
||
</FadeIn>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* Values */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
|
||
<Container>
|
||
<FadeIn>
|
||
<SectionHeading
|
||
title="Unsere Werte"
|
||
subtitle="Was uns antreibt und was Sie von uns erwarten können."
|
||
/>
|
||
</FadeIn>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{VALUES.map((value, index) => (
|
||
<FadeIn key={value.title} delay={index * 0.1}>
|
||
<Card className="h-full bg-background">
|
||
<h3 className="text-lg font-bold mb-3">{value.title}</h3>
|
||
<p className="text-sm text-muted">{value.description}</p>
|
||
</Card>
|
||
</FadeIn>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* Team */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||
<Container>
|
||
<FadeIn>
|
||
<SectionHeading
|
||
title="Unser Team"
|
||
subtitle="Lernen Sie die Menschen kennen, die Sportbox Reutte ausmachen."
|
||
/>
|
||
</FadeIn>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{TEAM_MEMBERS.map((member, index) => (
|
||
<FadeIn key={member.name} delay={index * 0.1}>
|
||
<div className="text-center">
|
||
<div
|
||
className="w-full aspect-square bg-neutral mb-4 flex items-center justify-center"
|
||
style={{ borderRadius: "var(--radius-md)" }}
|
||
>
|
||
<p className="text-muted text-xs">PLACEHOLDER: Foto</p>
|
||
</div>
|
||
<h3 className="text-base font-bold">{member.name}</h3>
|
||
<p className="text-sm text-muted mt-1">{member.role}</p>
|
||
<p className="text-sm text-muted mt-2">
|
||
{member.description}
|
||
</p>
|
||
</div>
|
||
</FadeIn>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* CTA */}
|
||
<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)",
|
||
}}
|
||
>
|
||
Werden Sie Teil unserer Community.
|
||
</h2>
|
||
<p className="text-secondary/70 mb-8 max-w-lg mx-auto">
|
||
Kommen Sie vorbei und überzeugen Sie sich selbst von der
|
||
Sportbox-Atmosphäre.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row justify-center 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="/studio"
|
||
variant="ghost"
|
||
className="text-secondary/80 hover:text-secondary"
|
||
>
|
||
Unser Studio entdecken
|
||
</Button>
|
||
</div>
|
||
</FadeIn>
|
||
</Container>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|