Add cookie popup component (issue #118)

components/CookiePopup.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import styles from "@/styles/components/CookiePopup.module.css";
+
+const USE_ILLUSTRATED = false;
+
+export default function CookiePopup() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const consent = localStorage.getItem("cookieConsent");
+    if (!consent) {
+      setVisible(true);
+    }
+  }, []);
+
+  const acceptCookies = () => {
+    localStorage.setItem("cookieConsent", "true");
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.card}>
+        <div className={styles.iconWrapper}>
+            {USE_ILLUSTRATED ? (
+                <>
+                <img src="/cookies/light-cookie.svg" className={styles.cookieBehind} />
+                <img src="/cookies/dark-cookie.svg" className={styles.cookieFront} />
+              </>
+            ) : (
+              <span className={styles.icon}>🍪</span>
+            )}
+        </div>
+
+        <p className={styles.text}>
+          We care about your data, and we&apos;d love to use cookies to make
+          your experience better.
+        </p>
+
+        <div className={styles.footer}>
+          <Link href="/privacy" className={styles.link}>
+            Privacy Policy
+          </Link>
+
+          <button
+            type="button"
+            onClick={acceptCookies}
+            className={styles.button}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/Layout.tsx

@@ -4,6 +4,7 @@ import Header from "./Header";
 import BackgroundPolygons from "@/components/BackgroundPolygons";
 import Footer from "@/components/Footer";
 import {ReactNode} from "react";
+import CookiePopup from "@/components/CookiePopup";
 
 const Layout = ( { children, triangles = false, darkHeader = false }: {children: ReactNode, triangles?: boolean, darkHeader?: boolean }) => {
 
@@ -29,6 +30,8 @@ const Layout = ( { children, triangles = false, darkHeader = false }: {children:
                     {children}
                 </div>
 
+                <CookiePopup />
+
                 <Footer/>
             </div>
     )

styles/components/CookiePopup.module.css

@@ -0,0 +1,97 @@
+.wrapper {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1000;
+}
+
+.card {
+  position: relative;
+  width: 240px;
+  background: #ffffff;
+  border-radius: 22px;
+  padding: 20px 18px 16px;
+  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.22);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+.iconWrapper {
+  position: absolute;
+  top: -22px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  background: #f6e1c6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.text {
+  margin: 10px 0 14px;
+  font-size: 0.86rem;
+  line-height: 1.45;
+  color: #3f3f4e;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.link {
+  font-size: 0.78rem;
+  color: #9ca3af;
+  text-decoration: underline;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.button {
+  border: none;
+  border-radius: 999px;
+  padding: 7px 22px;
+  background: #111827;
+  color: #ffffff;
+  font-size: 0.78rem;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
+  transition: transform 0.1s ease, box-shadow 0.1s ease,
+    background-color 0.1s ease;
+}
+
+.button:hover {
+  background: #020617;
+  transform: translateY(-1px);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
+}
+
+.cookieBehind {
+  position: absolute;
+  width: 46px;
+  height: 46px;
+  left: -10px;
+  top: 0;
+  z-index: 1;
+}
+
+.cookieFront {
+  position: absolute;
+  width: 46px;
+  height: 46px;
+  left: 10px;
+  top: -2px;
+  z-index: 2;
+}