243 lines
8.3 KiB
TypeScript
243 lines
8.3 KiB
TypeScript
import { Container } from "@/components/ui/Container";
|
||
import { Button } from "@/components/ui/Button";
|
||
import { Card } from "@/components/ui/Card";
|
||
import { FadeIn } from "@/components/ui/FadeIn";
|
||
import { Calendar, ArrowRight } from "lucide-react";
|
||
import type { Metadata } from "next";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Aktuelles",
|
||
description:
|
||
"Bleiben Sie auf dem Laufenden über Neuigkeiten, Events und Angebote bei Sportbox Reutte.",
|
||
openGraph: {
|
||
title: "Aktuelles | Sportbox Reutte",
|
||
description:
|
||
"Neuigkeiten, Events und Angebote bei Sportbox Reutte – Ihrem Fitnessstudio in Reutte, Tirol.",
|
||
url: "https://sportbox-reutte.at/aktuelles",
|
||
},
|
||
};
|
||
|
||
const BLOG_POSTS = [
|
||
{
|
||
title: "5 Tipps für den perfekten Trainingsstart",
|
||
excerpt:
|
||
"Sie möchten mit dem Training beginnen, wissen aber nicht wo? Unsere Experten teilen ihre besten Tipps für Einsteiger.",
|
||
date: "2026-01-15",
|
||
category: "Tipps",
|
||
},
|
||
{
|
||
title: "Neue Gruppenkurse ab Februar",
|
||
excerpt:
|
||
"Ab Februar erweitern wir unser Kursangebot: HIIT, Functional Training und Pilates neu im Programm.",
|
||
date: "2026-01-10",
|
||
category: "Neuigkeiten",
|
||
},
|
||
{
|
||
title: "Ernährung und Training: Was wirklich zählt",
|
||
excerpt:
|
||
"Unsere Ernährungsberaterin Lisa Mayer erklärt, wie Sie Ihre Ernährung optimal auf Ihr Training abstimmen.",
|
||
date: "2026-01-05",
|
||
category: "Ernährung",
|
||
},
|
||
{
|
||
title: "Rückblick: Community Workout im Dezember",
|
||
excerpt:
|
||
"Über 40 Teilnehmer beim letzten Community Workout – ein Rückblick auf einen großartigen Abend.",
|
||
date: "2025-12-20",
|
||
category: "Events",
|
||
},
|
||
{
|
||
title: "Krafttraining für Anfänger: Der richtige Einstieg",
|
||
excerpt:
|
||
"Thomas Huber zeigt die wichtigsten Grundübungen und erklärt, worauf Anfänger achten sollten.",
|
||
date: "2025-12-15",
|
||
category: "Training",
|
||
},
|
||
{
|
||
title: "Yoga und Fitness: Die perfekte Kombination",
|
||
excerpt:
|
||
"Warum Yoga die ideale Ergänzung zu Ihrem Krafttraining ist und wie Sie beide Disziplinen verbinden können.",
|
||
date: "2025-12-10",
|
||
category: "Yoga",
|
||
},
|
||
] as const;
|
||
|
||
const EVENTS = [
|
||
{
|
||
title: "Community Workout – Open Air",
|
||
date: "15. März 2026",
|
||
time: "10:00 – 12:00 Uhr",
|
||
description: "Gemeinsames Training im Freien für alle Fitnesslevel.",
|
||
},
|
||
{
|
||
title: "Ernährungs-Workshop",
|
||
date: "22. März 2026",
|
||
time: "14:00 – 16:00 Uhr",
|
||
description:
|
||
"Lernen Sie, wie Sie Ihre Mahlzeiten optimal für Ihre Ziele planen.",
|
||
},
|
||
{
|
||
title: "Fitness-Challenge: 30 Tage",
|
||
date: "1. April 2026",
|
||
time: "Start: jederzeit",
|
||
description:
|
||
"30 Tage, 30 Challenges – machen Sie mit und erreichen Sie neue Bestleistungen.",
|
||
},
|
||
] as const;
|
||
|
||
function formatDate(dateString: string): string {
|
||
return new Date(dateString).toLocaleDateString("de-AT", {
|
||
day: "numeric",
|
||
month: "long",
|
||
year: "numeric",
|
||
});
|
||
}
|
||
|
||
export default function AktuellesPage() {
|
||
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">
|
||
Aktuelles
|
||
</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)",
|
||
}}
|
||
>
|
||
Neuigkeiten & Events
|
||
</h1>
|
||
</FadeIn>
|
||
<FadeIn delay={0.2}>
|
||
<p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
|
||
Bleiben Sie auf dem Laufenden über Neuigkeiten, Events und
|
||
Angebote in unserem Fitnessstudio.
|
||
</p>
|
||
</FadeIn>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* Blog Posts */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||
<Container>
|
||
<FadeIn>
|
||
<h2
|
||
className="font-bold mb-2"
|
||
style={{
|
||
fontSize: "var(--text-2xl)",
|
||
lineHeight: "var(--text-2xl-line-height)",
|
||
}}
|
||
>
|
||
Beiträge
|
||
</h2>
|
||
<p className="text-muted mb-10">
|
||
Tipps, Neuigkeiten und Wissenswertes rund um Fitness und Gesundheit.
|
||
</p>
|
||
</FadeIn>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{BLOG_POSTS.map((post, index) => (
|
||
<FadeIn key={post.title} delay={index * 0.05}>
|
||
<article>
|
||
<Card className="h-full flex flex-col">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<span className="text-xs uppercase tracking-widest text-muted font-medium">
|
||
{post.category}
|
||
</span>
|
||
<span className="text-xs text-muted">
|
||
{formatDate(post.date)}
|
||
</span>
|
||
</div>
|
||
<h3 className="text-base font-bold mb-2">{post.title}</h3>
|
||
<p className="text-sm text-muted flex-1">{post.excerpt}</p>
|
||
<div className="mt-4 flex items-center gap-1 text-sm font-medium text-primary">
|
||
<span>Weiterlesen</span>
|
||
<ArrowRight size={14} aria-hidden="true" />
|
||
</div>
|
||
</Card>
|
||
</article>
|
||
</FadeIn>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* Events */}
|
||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
|
||
<Container>
|
||
<FadeIn>
|
||
<h2
|
||
className="font-bold mb-2"
|
||
style={{
|
||
fontSize: "var(--text-2xl)",
|
||
lineHeight: "var(--text-2xl-line-height)",
|
||
}}
|
||
>
|
||
Kommende Events
|
||
</h2>
|
||
<p className="text-muted mb-10">
|
||
Workshops, Community-Events und mehr – seien Sie dabei.
|
||
</p>
|
||
</FadeIn>
|
||
<div className="space-y-4">
|
||
{EVENTS.map((event, index) => (
|
||
<FadeIn key={event.title} delay={index * 0.1}>
|
||
<Card className="bg-background">
|
||
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8">
|
||
<div className="flex items-center gap-3 md:min-w-48">
|
||
<Calendar size={18} className="text-muted" aria-hidden="true" />
|
||
<div>
|
||
<p className="text-sm font-bold">{event.date}</p>
|
||
<p className="text-xs text-muted">{event.time}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="text-base font-bold">{event.title}</h3>
|
||
<p className="text-sm text-muted mt-1">{event.description}</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</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)",
|
||
}}
|
||
>
|
||
Nichts verpassen
|
||
</h2>
|
||
<p className="text-secondary/70 mb-8 max-w-lg mx-auto">
|
||
Kontaktieren Sie uns für aktuelle Informationen zu Events und
|
||
Angeboten.
|
||
</p>
|
||
<Button
|
||
href="/leistungen#kontakt"
|
||
variant="secondary"
|
||
className="border-secondary text-secondary hover:bg-secondary hover:text-primary"
|
||
>
|
||
Jetzt Termin buchen
|
||
</Button>
|
||
</FadeIn>
|
||
</Container>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|