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
227
app/leistungen/page.tsx
Normal file
227
app/leistungen/page.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
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 { ContactForm } from "@/components/ui/ContactForm";
|
||||
import { FaqSection } from "@/components/sections/FaqSection";
|
||||
import { Dumbbell, Users, Apple, Flower2, Zap, HeartPulse } from "lucide-react";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Leistungen",
|
||||
description:
|
||||
"Informieren Sie sich über unser vielfältiges Kursangebot und individuelle Trainingsmöglichkeiten bei Sportbox Reutte.",
|
||||
openGraph: {
|
||||
title: "Leistungen | Sportbox Reutte",
|
||||
description:
|
||||
"Vielfältiges Kursangebot und individuelle Trainingsmöglichkeiten bei Sportbox Reutte in Reutte, Tirol.",
|
||||
url: "https://sportbox-reutte.at/leistungen",
|
||||
},
|
||||
};
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
icon: Dumbbell,
|
||||
title: "Personal Training",
|
||||
description:
|
||||
"Individuell abgestimmte Trainingspläne mit persönlicher Betreuung durch zertifizierte Trainer. Ideal für gezielte Ziele wie Muskelaufbau, Gewichtsreduktion oder Rehabilitation.",
|
||||
features: [
|
||||
"1:1 Betreuung",
|
||||
"Individueller Trainingsplan",
|
||||
"Regelmäßige Fortschrittskontrolle",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Gruppenkurse",
|
||||
description:
|
||||
"Vielfältige Kurse für jedes Fitnesslevel – von HIIT über Functional Training bis Pilates. Gemeinsam trainieren motiviert und macht Spaß.",
|
||||
features: [
|
||||
"Verschiedene Kursformate",
|
||||
"Für alle Levels",
|
||||
"Motivierende Gruppenatmosphäre",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Apple,
|
||||
title: "Ernährungsberatung",
|
||||
description:
|
||||
"Professionelle Beratung durch unsere diplomierte Ernährungsberaterin. Wir helfen Ihnen, Ihre Ernährung optimal auf Ihre Trainingsziele abzustimmen.",
|
||||
features: [
|
||||
"Persönlicher Ernährungsplan",
|
||||
"Sportgerechte Ernährung",
|
||||
"Nachhaltige Umstellung",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Flower2,
|
||||
title: "Yoga & Mobility",
|
||||
description:
|
||||
"Finden Sie Balance zwischen Kraft und Flexibilität. Unsere Yoga- und Mobility-Kurse verbessern Ihre Beweglichkeit und reduzieren Stress.",
|
||||
features: [
|
||||
"Verschiedene Yoga-Stile",
|
||||
"Stretching & Mobility",
|
||||
"Atemtechniken",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Krafttraining",
|
||||
description:
|
||||
"Strukturiertes Krafttraining an modernen Geräten und mit freien Gewichten. Von Grundlagen bis Wettkampfvorbereitung.",
|
||||
features: [
|
||||
"Moderne Geräte",
|
||||
"Freie Gewichte",
|
||||
"Technikschulung",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: HeartPulse,
|
||||
title: "Gesundheitstraining",
|
||||
description:
|
||||
"Präventives und rehabilitatives Training für mehr Wohlbefinden im Alltag. Ideal für Rückengesundheit, Haltungsverbesserung und allgemeine Fitness.",
|
||||
features: [
|
||||
"Rückentraining",
|
||||
"Haltungsanalyse",
|
||||
"Präventives Training",
|
||||
],
|
||||
},
|
||||
] as const;
|
||||
|
||||
export default function LeistungenPage() {
|
||||
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">
|
||||
Leistungen
|
||||
</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)",
|
||||
}}
|
||||
>
|
||||
Was wir für Sie tun können.
|
||||
</h1>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
|
||||
Vielfältige Angebote für Ihre individuellen Fitnessziele –
|
||||
professionell, persönlich und auf Sie abgestimmt.
|
||||
</p>
|
||||
</FadeIn>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Services */}
|
||||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||||
<Container>
|
||||
<FadeIn>
|
||||
<SectionHeading
|
||||
title="Unser Angebot"
|
||||
subtitle="Von Personal Training bis Ernährungsberatung – wir haben für jeden das Richtige."
|
||||
/>
|
||||
</FadeIn>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{SERVICES.map((service, index) => (
|
||||
<FadeIn key={service.title} delay={index * 0.08}>
|
||||
<Card className="h-full flex flex-col">
|
||||
<service.icon
|
||||
size={28}
|
||||
className="mb-4 text-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 className="text-lg font-bold mb-2">{service.title}</h3>
|
||||
<p className="text-sm text-muted mb-4 flex-1">
|
||||
{service.description}
|
||||
</p>
|
||||
<ul className="space-y-1.5">
|
||||
{service.features.map((feature) => (
|
||||
<li
|
||||
key={feature}
|
||||
className="text-sm text-foreground flex items-start gap-2"
|
||||
>
|
||||
<span className="mt-1.5 w-1 h-1 bg-primary rounded-full shrink-0" aria-hidden="true" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
|
||||
<Container>
|
||||
<FadeIn>
|
||||
<SectionHeading
|
||||
title="Häufige Fragen"
|
||||
subtitle="Antworten auf die häufigsten Fragen rund um Sportbox Reutte."
|
||||
/>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<FaqSection />
|
||||
</FadeIn>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Contact Form */}
|
||||
<section id="kontakt" className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<FadeIn>
|
||||
<div>
|
||||
<p className="text-sm uppercase tracking-[0.2em] text-muted mb-4">
|
||||
Kontakt
|
||||
</p>
|
||||
<h2
|
||||
className="font-bold mb-6"
|
||||
style={{
|
||||
fontSize: "var(--text-3xl)",
|
||||
lineHeight: "var(--text-3xl-line-height)",
|
||||
letterSpacing: "var(--text-3xl-letter-spacing)",
|
||||
}}
|
||||
>
|
||||
Jetzt Termin vereinbaren.
|
||||
</h2>
|
||||
<p className="text-muted leading-relaxed mb-6">
|
||||
Haben Sie Fragen oder möchten Sie ein Probetraining
|
||||
vereinbaren? Schreiben Sie uns – wir melden uns schnellstmöglich
|
||||
bei Ihnen.
|
||||
</p>
|
||||
<div className="space-y-3 text-sm text-muted">
|
||||
<p>
|
||||
<span className="font-medium text-foreground">E-Mail:</span>{" "}
|
||||
kontakt@sportbox-reutte.at
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium text-foreground">Telefon:</span>{" "}
|
||||
+43 123 456 789
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium text-foreground">Adresse:</span>{" "}
|
||||
Reutte, Tirol, Österreich
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.15}>
|
||||
<ContactForm />
|
||||
</FadeIn>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user