Initial commit

components/CookieConsent.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect } from "react";
+import * as CookieConsent from "vanilla-cookieconsent";
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import "./CookieConsent.module.css";
+
+export default function CookieConsentBanner() {
+  useEffect(() => {
+    CookieConsent.run({
+      categories: {
+        necessary: {
+          enabled: true,
+          readOnly: true,
+        },
+        analytics: {},
+        marketing: {},
+      },
+      language: {
+        default: "de",
+        translations: {
+          de: {
+            consentModal: {
+              title: "Ihre Privatsphäre ist uns wichtig",
+              description:
+                "Wir verwenden Cookies, um Ihnen die bestmögliche Nutzung unserer Website zu ermöglichen. " +
+                "Einige Cookies sind technisch notwendig, andere helfen uns, die Website zu verbessern " +
+                "und Ihnen relevante Inhalte anzuzeigen. Sie können Ihre Auswahl jederzeit unter " +
+                "<a href='/datenschutz'>Datenschutz</a> anpassen oder widerrufen.",
+              acceptAllBtn: "Alle akzeptieren",
+              acceptNecessaryBtn: "Nur notwendige",
+              showPreferencesBtn: "Einstellungen anpassen",
+              footer:
+                "<a href='/impressum'>Impressum</a>" +
+                "<a href='/datenschutz'>Datenschutzerklärung</a>",
+            },
+            preferencesModal: {
+              title: "Cookie-Einstellungen",
+              acceptAllBtn: "Alle akzeptieren",
+              acceptNecessaryBtn: "Nur notwendige",
+              savePreferencesBtn: "Auswahl speichern",
+              closeIconLabel: "Schließen",
+              sections: [
+                {
+                  title: "Ihre Privatsphäre",
+                  description:
+                    "Wir setzen Cookies ein, um die Funktionalität unserer Website sicherzustellen " +
+                    "und unser Angebot kontinuierlich zu verbessern. Sie entscheiden selbst, " +
+                    "welche Kategorien Sie zulassen möchten.",
+                },
+                {
+                  title: "Technisch notwendig",
+                  description:
+                    "Diese Cookies sind für den reibungslosen Betrieb der Website unbedingt erforderlich " +
+                    "und können nicht deaktiviert werden. Sie speichern keine personenbezogenen Daten " +
+                    "und werden ausschließlich als Reaktion auf von Ihnen durchgeführte Aktionen gesetzt " +
+                    "(z. B. Spracheinstellungen oder Sicherheits-Token).",
+                  linkedCategory: "necessary",
+                },
+                {
+                  title: "Analyse & Statistik",
+                  description:
+                    "Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren. " +
+                    "Alle Daten werden anonymisiert gesammelt und dienen ausschließlich zur Verbesserung " +
+                    "unseres Angebots. Wir nutzen Google Analytics (GA4) – Ihre IP-Adresse wird dabei " +
+                    "anonymisiert und nicht gespeichert.",
+                  linkedCategory: "analytics",
+                },
+                {
+                  title: "Marketing & externe Medien",
+                  description:
+                    "Diese Cookies ermöglichen die Einbindung externer Inhalte wie YouTube-Videos, " +
+                    "Google Maps, Instagram-, Facebook- und X (Twitter)-Inhalte. " +
+                    "Ohne Ihre Zustimmung werden diese Inhalte nicht geladen und keine Daten übertragen. " +
+                    "Bitte beachten Sie, dass bei Aktivierung personenbezogene Daten " +
+                    "an Drittanbieter (ggf. auch in die USA) übertragen werden können.",
+                  linkedCategory: "marketing",
+                },
+                {
+                  title: "Weitere Informationen",
+                  description:
+                    "Bei Fragen zu unserer Cookie-Richtlinie wenden Sie sich bitte an uns über das " +
+                    "<a href='/kontakt'>Kontaktformular</a>. Mehr Details finden Sie in unserer " +
+                    "<a href='/datenschutz'>Datenschutzerklärung</a>.",
+                },
+              ],
+            },
+          },
+        },
+      },
+    });
+  }, []);
+
+  return null;
+}