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
242
app/aktuelles/page.tsx
Normal file
242
app/aktuelles/page.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user