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,97 @@
|
||||
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">
|
||||
© {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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ 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 Header() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
||||
<div className="mx-auto flex items-center justify-between px-[var(--spacing-container-padding)] py-4" style={{ maxWidth: "var(--spacing-container)" }}>
|
||||
<Link href="/" className="text-xl font-bold tracking-tight" aria-label="Sportbox Reutte – Zur Startseite">
|
||||
SPORTBOX
|
||||
</Link>
|
||||
|
||||
<nav className="hidden lg:flex items-center gap-8" aria-label="Hauptnavigation">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`text-sm tracking-wide transition-colors hover:text-muted ${
|
||||
pathname === item.href ? "font-bold" : "font-normal"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/leistungen#kontakt"
|
||||
className="bg-primary text-secondary px-5 py-2.5 text-sm font-medium transition-opacity hover:opacity-80"
|
||||
>
|
||||
Jetzt Termin buchen
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden p-2 -mr-2"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
aria-controls="mobile-menu"
|
||||
aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
|
||||
>
|
||||
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{mobileMenuOpen && (
|
||||
<motion.nav
|
||||
id="mobile-menu"
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="lg:hidden overflow-hidden border-t border-border bg-background"
|
||||
aria-label="Mobile Navigation"
|
||||
>
|
||||
<div className="flex flex-col px-[var(--spacing-container-padding)] py-4 gap-1">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`py-3 text-base transition-colors hover:text-muted ${
|
||||
pathname === item.href ? "font-bold" : "font-normal"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/leistungen#kontakt"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="mt-2 bg-primary text-secondary px-5 py-3 text-center text-sm font-medium transition-opacity hover:opacity-80"
|
||||
>
|
||||
Jetzt Termin buchen
|
||||
</Link>
|
||||
</div>
|
||||
</motion.nav>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user