Nick SzaunigandClaude Opus 5.5
3de17ca070
- Hero: deutlich groessere Headline, langsam atmendes Bild, Wabenraster, Honigtropfen als Scroll-Hinweis, Hauptaktion in Honig - "Sechs Schritte" als Weg: eine Honiglinie fuellt sich beim Scrollen und laesst die Waben der Schritte nacheinander aufleuchten (waagerecht ab lg, senkrecht auf dem Handy; reduzierte Bewegung: sofort gefuellt) - Philosophie mit Waben statt Nummern, Verantwortung als geteiltes Layout mit mitlaufender Ueberschrift - Bilder mit versetztem Honigrahmen, Wabenraster auf dunklen Flaechen, grosse Anfuehrungszeichen bei den Kundenstimmen - Knopf-Varianten "inverted"/"accent" fuer dunkle Flaechen ersetzen !-Overrides, die den Fuell-Effekt ausgehebelt haetten - Fix: Ueberschrift der Kundenstimmen war Waldgruen auf Waldgruen Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
import { Button } from "@/components/ui";
|
|
import { useI18n } from "@/i18n/i18n-provider";
|
|
|
|
export const COOKIE_CONSENT_KEY = "wabenhain-cookie-consent";
|
|
|
|
type Consent = "all" | "essential";
|
|
|
|
export function CookieConsentBanner() {
|
|
const { t } = useI18n();
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Liest bewusst erst nach dem Mount aus localStorage (Browser-API, im
|
|
// SSR-Markup nicht verfuegbar), um einen Hydration-Mismatch zu vermeiden.
|
|
const stored = window.localStorage.getItem(COOKIE_CONSENT_KEY);
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect -- externe Browser-Quelle (localStorage) einmalig nach dem Mount synchronisieren
|
|
if (!stored) setVisible(true);
|
|
}, []);
|
|
|
|
function choose(consent: Consent) {
|
|
window.localStorage.setItem(COOKIE_CONSENT_KEY, consent);
|
|
setVisible(false);
|
|
}
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{visible ? (
|
|
<motion.div
|
|
initial={{ y: 100, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: 100, opacity: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
role="dialog"
|
|
aria-label={t.cookieConsent.dialogLabel}
|
|
className="fixed inset-x-0 bottom-0 z-50 bg-forest text-cream border-t border-cream/20"
|
|
>
|
|
<div className="mx-auto max-w-6xl px-6 py-6 flex flex-col md:flex-row md:items-center gap-4">
|
|
<p className="text-sm text-cream/85 leading-relaxed flex-1">
|
|
{t.cookieConsent.bannerTextBeforeLink}
|
|
<Link href="/cookie-richtlinie" className="underline">
|
|
{t.cookieConsent.policyLinkLabel}
|
|
</Link>
|
|
{t.cookieConsent.bannerTextAfterLink}
|
|
</p>
|
|
<div className="flex flex-shrink-0 flex-wrap gap-3">
|
|
<Button
|
|
variant="inverted"
|
|
className="whitespace-nowrap"
|
|
onClick={() => choose("essential")}
|
|
>
|
|
{t.cookieConsent.essentialOnly}
|
|
</Button>
|
|
<Button className="whitespace-nowrap" onClick={() => choose("all")}>
|
|
{t.cookieConsent.acceptAll}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
) : null}
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|
|
/** Erlaubt es, die getroffene Cookie-Auswahl auf der Cookie-Richtlinie-Seite zu widerrufen. */
|
|
export function CookieSettingsButton() {
|
|
const { t } = useI18n();
|
|
return (
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
window.localStorage.removeItem(COOKIE_CONSENT_KEY);
|
|
window.location.reload();
|
|
}}
|
|
>
|
|
{t.cookieConsent.changeSettings}
|
|
</Button>
|
|
);
|
|
}
|