Marco
7a3ae0ea53
- New /widerruf page: CMS-driven content via getLegalPage("widerruf"),
sidebar TOC + "Nachhaltig handeln" callout, TrustRow, and a download
card for the Muster-Widerrufsformular PDF attachment.
- New /agb page, same legal-page shell pattern as Impressum/Datenschutz.
- lib/payload.ts: getLegalPage now also resolves the optional `attachment`
media relation (depth=1) for legal pages that have a downloadable file.
- NewsletterModal: replaced the body overflow/position scroll-lock hacks
(which fought with the sticky Navbar and the global scroll-smooth CSS)
with a wheel/touch event interceptor that never touches scroll position
at all, plus `preventScroll: true` on all modal/drawer focus() calls to
stop the browser's implicit scrollIntoView from nudging the page for
elements near the sticky navbar's reserved scroll-padding-top zone.
Same preventScroll fix applied to VersandModal and the Navbar mobile
drawer for consistency.
- globals.css: scrollbar-gutter: stable, so a modal's overflow:hidden
lock never causes a scrollbar-width layout shift.
- Divider: stagger its reveal animation slightly (delay 0.3s) behind the
section above it.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import Link from "next/link";
|
|
|
|
const links = [
|
|
{ label: "Impressum", href: "/impressum" },
|
|
{ label: "Datenschutz", href: "/datenschutz" },
|
|
{ label: "Versand", href: "/versand" },
|
|
{ label: "AGB", href: "/agb" },
|
|
{ label: "Widerruf", href: "/widerruf" },
|
|
];
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="bg-bg-dark flex flex-col items-center justify-end w-full mt-auto">
|
|
|
|
{/* 3px top divider — not a border */}
|
|
<div className="bg-[#30302c] h-[3px] w-full shrink-0" />
|
|
|
|
{/* Footer inner — max-width 1280px, centered */}
|
|
<div className="flex flex-col items-center w-full max-w-[1280px] py-8 md:py-4">
|
|
|
|
{/* Three groups: logo | @handle | links — stacked + centered below md */}
|
|
<div className="flex flex-col md:flex-row items-center md:justify-between gap-6 md:gap-0 px-8 md:px-16 w-full">
|
|
|
|
{/* Logo: "einfach produktiv" white + "." gold */}
|
|
<div className="flex items-center p-2 shrink-0">
|
|
<span
|
|
className="font-semibold text-bg-white text-h-small leading-normal whitespace-nowrap"
|
|
style={{ fontFamily: "var(--font-lora)" }}
|
|
>
|
|
einfach produktiv
|
|
<span className="text-brand">.</span>
|
|
</span>
|
|
</div>
|
|
|
|
{/* Social handle — Lora Regular (weight 400) */}
|
|
<a
|
|
href="https://www.instagram.com/einfach.produktiv/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-normal text-bg-white text-h-small text-center leading-[1.2] whitespace-nowrap shrink-0 hover:text-brand transition-colors"
|
|
style={{ fontFamily: "var(--font-lora)", fontWeight: 400 }}
|
|
>
|
|
@einfach.produktiv
|
|
</a>
|
|
|
|
{/* Legal links — wrap + center below md instead of a rigid row */}
|
|
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 shrink-0">
|
|
{links.map((link) => (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
className="font-normal text-bg-white text-body-sm leading-[1.5] whitespace-nowrap hover:text-brand transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|