Files
sportbox-reutte-2026-01-30-v1/components/layout/Footer.tsx

98 lines
3.4 KiB
TypeScript

import Link from "next/link";
import { Mail, Phone, MapPin } from "lucide-react";
const NAV_LINKS = [
{ href: "/", label: "Startseite" },
{ href: "/über-uns", label: "Über Uns" },
{ href: "/leistungen", label: "Leistungen" },
{ href: "/studio", label: "Studio" },
{ href: "/aktuelles", label: "Aktuelles" },
] as const;
export function Footer() {
return (
<footer className="bg-primary text-secondary" role="contentinfo">
<div
className="mx-auto px-[var(--spacing-container-padding)] py-16"
style={{ maxWidth: "var(--spacing-container)" }}
>
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
<div>
<p className="text-xl font-bold tracking-tight mb-4">SPORTBOX</p>
<p className="text-sm text-secondary/70 leading-relaxed">
Ihr Fitnessstudio in Reutte für individuelle Trainingspläne
und persönliche Betreuung.
</p>
</div>
<div>
<p className="text-sm font-bold uppercase tracking-widest mb-4">
Navigation
</p>
<nav aria-label="Footer-Navigation">
<ul className="space-y-2">
{NAV_LINKS.map((link) => (
<li key={link.href}>
<Link
href={link.href}
className="text-sm text-secondary/70 transition-colors hover:text-secondary"
>
{link.label}
</Link>
</li>
))}
</ul>
</nav>
</div>
<div>
<p className="text-sm font-bold uppercase tracking-widest mb-4">
Kontakt
</p>
<address className="not-italic space-y-3">
<a
href="mailto:kontakt@sportbox-reutte.at"
className="flex items-center gap-2 text-sm text-secondary/70 transition-colors hover:text-secondary"
>
<Mail size={16} aria-hidden="true" />
kontakt@sportbox-reutte.at
</a>
<a
href="tel:+43123456789"
className="flex items-center gap-2 text-sm text-secondary/70 transition-colors hover:text-secondary"
>
<Phone size={16} aria-hidden="true" />
+43 123 456 789
</a>
<p className="flex items-center gap-2 text-sm text-secondary/70">
<MapPin size={16} aria-hidden="true" />
Reutte, Tirol, Österreich
</p>
</address>
</div>
</div>
<div className="mt-12 pt-8 border-t border-secondary/20 flex flex-col sm:flex-row items-center justify-between gap-4">
<p className="text-xs text-secondary/50">
&copy; {new Date().getFullYear()} Sportbox Reutte. Alle Rechte vorbehalten.
</p>
<div className="flex items-center gap-6">
<Link
href="/impressum"
className="text-xs text-secondary/50 transition-colors hover:text-secondary"
>
Impressum
</Link>
<Link
href="/datenschutz"
className="text-xs text-secondary/50 transition-colors hover:text-secondary"
>
Datenschutz
</Link>
</div>
</div>
</div>
</footer>
);
}