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
@@ -0,0 +1,222 @@
|
||||
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: "Studio",
|
||||
description:
|
||||
"Entdecken Sie unsere modernen Räumlichkeiten und hochwertigen Fitnessgeräte bei Sportbox Reutte.",
|
||||
openGraph: {
|
||||
title: "Studio | Sportbox Reutte",
|
||||
description:
|
||||
"Moderne Räumlichkeiten und hochwertige Fitnessgeräte bei Sportbox Reutte in Reutte, Tirol.",
|
||||
url: "https://sportbox-reutte.at/studio",
|
||||
},
|
||||
};
|
||||
|
||||
const AREAS = [
|
||||
{
|
||||
title: "Kraftbereich",
|
||||
description:
|
||||
"Freie Gewichte, Kabelzüge und Kraftgeräte der neuesten Generation für effektives Krafttraining.",
|
||||
},
|
||||
{
|
||||
title: "Cardio-Zone",
|
||||
description:
|
||||
"Laufbänder, Ergometer und Rudergeräte für Ihr Ausdauertraining in angenehmer Atmosphäre.",
|
||||
},
|
||||
{
|
||||
title: "Functional Area",
|
||||
description:
|
||||
"Offener Trainingsbereich mit Rig, Kettlebells, Medizinbällen und TRX für funktionelles Training.",
|
||||
},
|
||||
{
|
||||
title: "Kursraum",
|
||||
description:
|
||||
"Großer, heller Kursraum für Yoga, Pilates, HIIT und weitere Gruppenkurse.",
|
||||
},
|
||||
{
|
||||
title: "Umkleiden & Duschen",
|
||||
description:
|
||||
"Moderne Umkleidebereiche mit Schließfächern, Duschen und allem, was Sie brauchen.",
|
||||
},
|
||||
{
|
||||
title: "Lounge",
|
||||
description:
|
||||
"Gemütlicher Aufenthaltsbereich zum Ankommen, Austauschen und Entspannen nach dem Training.",
|
||||
},
|
||||
] as const;
|
||||
|
||||
const GALLERY_ITEMS = [
|
||||
"Trainingsbereich",
|
||||
"Cardio-Zone",
|
||||
"Kursraum",
|
||||
"Eingangsbereich",
|
||||
"Functional Area",
|
||||
"Lounge",
|
||||
] as const;
|
||||
|
||||
export default function StudioPage() {
|
||||
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">
|
||||
Unser Studio
|
||||
</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)",
|
||||
}}
|
||||
>
|
||||
Ihr Trainingsraum in Reutte.
|
||||
</h1>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
|
||||
Moderne Geräte, durchdachte Räumlichkeiten und eine Atmosphäre,
|
||||
die zum Training motiviert.
|
||||
</p>
|
||||
</FadeIn>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Studio Overview */}
|
||||
<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">
|
||||
Räumlichkeiten
|
||||
</p>
|
||||
<h2
|
||||
className="font-bold mb-6"
|
||||
style={{
|
||||
fontSize: "var(--text-3xl)",
|
||||
lineHeight: "var(--text-3xl-line-height)",
|
||||
letterSpacing: "var(--text-3xl-letter-spacing)",
|
||||
}}
|
||||
>
|
||||
Trainieren mit Blick auf das Wesentliche.
|
||||
</h2>
|
||||
<p className="text-muted leading-relaxed mb-4">
|
||||
Unser Studio verbindet Funktionalität mit Atmosphäre. Auf
|
||||
großzügiger Fläche finden Sie alles, was Sie für ein
|
||||
effektives Training brauchen – ohne Ablenkung, aber mit Stil.
|
||||
</p>
|
||||
<p className="text-muted leading-relaxed">
|
||||
Hochwertige Geräte namhafter Hersteller, durchdachte
|
||||
Trainingszonen und eine klare Raumaufteilung sorgen dafür,
|
||||
dass Sie sich auf das konzentrieren können, was zählt: Ihr
|
||||
Training.
|
||||
</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: Studio-Übersicht</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Areas */}
|
||||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
|
||||
<Container>
|
||||
<FadeIn>
|
||||
<SectionHeading
|
||||
title="Unsere Bereiche"
|
||||
subtitle="Jeder Bereich ist darauf ausgelegt, Ihnen das bestmögliche Trainingserlebnis zu bieten."
|
||||
/>
|
||||
</FadeIn>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{AREAS.map((area, index) => (
|
||||
<FadeIn key={area.title} delay={index * 0.08}>
|
||||
<Card className="h-full bg-background">
|
||||
<h3 className="text-base font-bold mb-2">{area.title}</h3>
|
||||
<p className="text-sm text-muted">{area.description}</p>
|
||||
</Card>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Gallery */}
|
||||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||||
<Container>
|
||||
<FadeIn>
|
||||
<SectionHeading
|
||||
title="Einblicke"
|
||||
subtitle="Werfen Sie einen Blick in unsere Räumlichkeiten."
|
||||
/>
|
||||
</FadeIn>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{GALLERY_ITEMS.map((item, index) => (
|
||||
<FadeIn key={item} delay={index * 0.05}>
|
||||
<div
|
||||
className="aspect-[4/3] bg-neutral flex items-center justify-center"
|
||||
style={{ borderRadius: "var(--radius-md)" }}
|
||||
>
|
||||
<p className="text-muted text-sm">PLACEHOLDER: {item}</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)",
|
||||
}}
|
||||
>
|
||||
Überzeugen Sie sich selbst.
|
||||
</h2>
|
||||
<p className="text-secondary/70 mb-8 max-w-lg mx-auto">
|
||||
Vereinbaren Sie einen Termin für ein unverbindliches Probetraining
|
||||
in unserem Studio.
|
||||
</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="/leistungen"
|
||||
variant="ghost"
|
||||
className="text-secondary/80 hover:text-secondary"
|
||||
>
|
||||
Unsere Leistungen
|
||||
</Button>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user