- Next.js 16 App Router site with the ANOUMA design system - Payload CMS (PostgreSQL) for offers, events, posts and page content - WebRTC video-call system with custom signaling server - SMTP email reminders and booking-request notifications - Customer accounts, calendar-based availability, and booking workflow
93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import Link from "next/link";
|
|
import { groupOffersByCategory } from "@/lib/angebote";
|
|
import { footerNav, mainNav, siteConfig } from "@/lib/site";
|
|
import { getOffers } from "@/lib/payload/content";
|
|
|
|
export async function Footer() {
|
|
const offers = await getOffers();
|
|
const groups = groupOffersByCategory(offers);
|
|
|
|
return (
|
|
<footer className="bg-anouma-plum text-anouma-cream-light">
|
|
<div className="mx-auto max-w-6xl px-6 py-16 sm:px-8 lg:px-12">
|
|
<div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div>
|
|
<Link href="/" className="font-serif text-2xl font-semibold tracking-[0.08em]">
|
|
{siteConfig.name.toUpperCase()}
|
|
</Link>
|
|
<p className="mt-4 max-w-xs text-sm leading-relaxed text-anouma-cream-light/90">
|
|
Räume für Verbindung — mit dir selbst, miteinander und mit der Natur.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-xs font-medium uppercase tracking-[0.2em] text-anouma-cream-light/90">
|
|
Navigation
|
|
</h3>
|
|
<ul className="mt-4 space-y-2.5">
|
|
{mainNav.map((item) => (
|
|
<li key={item.href}>
|
|
<Link href={item.href} className="text-sm text-anouma-cream-light/90 hover:text-white">
|
|
{item.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<Link href="/termin-buchen" className="text-sm text-anouma-cream-light/90 hover:text-white">
|
|
Termin buchen
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-xs font-medium uppercase tracking-[0.2em] text-anouma-cream-light/90">
|
|
Angebote
|
|
</h3>
|
|
<ul className="mt-4 space-y-2.5">
|
|
{groups.map((group) => (
|
|
<li key={group.category}>
|
|
<Link
|
|
href={group.offers.length === 1 ? `/angebote/${group.offers[0].slug}` : group.href}
|
|
className="text-sm text-anouma-cream-light/90 hover:text-white"
|
|
>
|
|
{group.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-xs font-medium uppercase tracking-[0.2em] text-anouma-cream-light/90">
|
|
Kontakt
|
|
</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-anouma-cream-light/90">
|
|
Ich freue mich, von dir zu hören.
|
|
</p>
|
|
<Link
|
|
href="/kontakt"
|
|
className="mt-3 inline-block text-sm font-medium underline underline-offset-4 hover:text-white"
|
|
>
|
|
Zum Kontaktformular
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-14 flex flex-col gap-4 border-t border-anouma-cream-light/20 pt-8 text-sm text-anouma-cream-light/90 sm:flex-row sm:items-center sm:justify-between">
|
|
<p>© {new Date().getFullYear()} {siteConfig.name}</p>
|
|
<ul className="flex flex-wrap gap-x-6 gap-y-2">
|
|
{footerNav.map((item) => (
|
|
<li key={item.href}>
|
|
<Link href={item.href} className="hover:text-white">
|
|
{item.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|