feat: Implement initial website structure with core pages, layout, and reusable UI components, alongside ESLint configuration and SEO setup.
This commit is contained in:
1elle1
231
app/über-uns/page.tsx
Normal file
231
app/über-uns/page.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user