From b1d50248d2c0a8a42645d72278fe26cdde9dfe22 Mon Sep 17 00:00:00 2001
From: AlinaRyabova <alinavr7@gmail.com>
Date: Tue, 6 Jan 2026 20:33:26 +0200
Subject: [PATCH 1/2] feat(ui): add GDPR-compliant cookie consent banner with
 i18n support

---
 frontend/app/[locale]/layout.tsx            |  3 +
 frontend/components/shared/CookieBanner.tsx | 83 +++++++++++++++++++++
 frontend/messages/en.json                   |  7 ++
 frontend/messages/pl.json                   |  7 ++
 frontend/messages/uk.json                   |  7 ++
 5 files changed, 107 insertions(+)
 create mode 100644 frontend/components/shared/CookieBanner.tsx

diff --git a/frontend/app/[locale]/layout.tsx b/frontend/app/[locale]/layout.tsx
index 32465af3..96f569b3 100644
--- a/frontend/app/[locale]/layout.tsx
+++ b/frontend/app/[locale]/layout.tsx
@@ -12,6 +12,8 @@ import { getCurrentUser } from '@/lib/auth';
 import { MainSwitcher } from '@/components/header/MainSwitcher';
 import { AppChrome } from '@/components/header/AppChrome';
 
+import { CookieBanner } from '@/components/shared/CookieBanner';
+
 export const dynamic = 'force-dynamic';
 
 export default async function LocaleLayout({
@@ -45,6 +47,7 @@ export default async function LocaleLayout({
 
         <Footer />
         <Toaster position="top-right" richColors expand />
+        <CookieBanner />
       </ThemeProvider>
     </NextIntlClientProvider>
   );
diff --git a/frontend/components/shared/CookieBanner.tsx b/frontend/components/shared/CookieBanner.tsx
new file mode 100644
index 00000000..3d1775f4
--- /dev/null
+++ b/frontend/components/shared/CookieBanner.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { Link } from '@/i18n/routing';
+import { Button } from '@/components/ui/button';
+import { useTranslations } from 'next-intl';
+
+export function CookieBanner() {
+  const t = useTranslations('CookieBanner');
+  const [isVisible, setIsVisible] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    const consent = localStorage.getItem('cookie-consent');
+    if (!consent) {
+      const timer = setTimeout(() => setIsVisible(true), 500);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem('cookie-consent', 'accepted');
+    setIsVisible(false);
+  };
+
+  const handleDecline = () => {
+    localStorage.setItem('cookie-consent', 'declined');
+    setIsVisible(false);
+  };
+
+  if (!isMounted || !isVisible) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 animate-in slide-in-from-bottom-full fade-in duration-700">
+      <div className="mx-auto max-w-4xl rounded-2xl border border-gray-200 bg-white/90 p-5 shadow-2xl backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90 md:flex md:items-center md:justify-between md:gap-6">
+        <div className="mb-4 md:mb-0 md:flex-1">
+          <h3 className="mb-1 text-lg font-semibold text-gray-900 dark:text-white">
+            {t('title')}
+          </h3>
+          <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+            {t('description')}{' '}
+            <Link
+              href="/privacy-policy"
+              className="font-medium text-blue-600 underline decoration-blue-600/30 underline-offset-4 transition-colors hover:text-blue-700 hover:decoration-blue-700 dark:text-blue-500 dark:hover:text-blue-400"
+            >
+              {t('policyLink')}
+            </Link>
+            .
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleDecline}
+            className="w-full sm:w-auto"
+          >
+            {t('decline')}
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleAccept}
+            className="w-full sm:w-auto shadow-lg shadow-blue-500/20"
+          >
+            {t('accept')}
+          </Button>
+        </div>
+
+        <button
+          onClick={handleDecline}
+          className="absolute right-2 top-2 rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300 md:hidden"
+          aria-label={t('decline')}
+        >
+          <X size={20} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index e5c61db7..1a72272a 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -141,5 +141,12 @@
         "5": "I recommend DevLovers to all my mentees. It's become essential for anyone preparing for tech interviews."
       }
     }
+  },
+  "CookieBanner": {
+    "title": "🍪 We value your privacy",
+    "description": "We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. By clicking \"Accept\", you consent to our use of cookies. Read our",
+    "policyLink": "Privacy Policy",
+    "accept": "Accept Cookies",
+    "decline": "Decline"
   }
 }
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 963bd2bf..47e7abb0 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -141,5 +141,12 @@
         "5": "Polecam DevLovers wszystkim moim podopiecznym. Stało się to niezbędne dla każdego, kto przygotowuje się do technicznych rozmów kwalifikacyjnych."
       }
     }
+  },
+  "CookieBanner": {
+    "title": "🍪 Dbamy o Twoją prywatność",
+    "description": "Używamy plików cookie, aby poprawić jakość przeglądania, wyświetlać spersonalizowane treści i analizować nasz ruch. Klikając „Zaakceptuj”, wyrażasz zgodę na używanie plików cookie. Przeczytaj naszą",
+    "policyLink": "Politykę Prywatności",
+    "accept": "Zaakceptuj",
+    "decline": "Odrzuć"
   }
 }
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index 727f3783..b69a6975 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -141,5 +141,12 @@
         "5": "Я рекомендую DevLovers всім своїм підопічним. Це стало важливим для всіх, хто готується до технічних співбесід."
       }
     }
+  },
+  "CookieBanner": {
+    "title": "🍪 Ми цінуємо вашу приватність",
+    "description": "Ми використовуємо файли cookie для покращення вашого досвіду, персоналізації контенту та аналізу трафіку. Натискаючи \"Прийняти\", ви погоджуєтесь на використання cookie. Читайте нашу",
+    "policyLink": "Політику конфіденційності",
+    "accept": "Прийняти",
+    "decline": "Відхилити"
   }
 }

From bd51862aea8f2bab0812f4b852fc79773f3dbbf2 Mon Sep 17 00:00:00 2001
From: AlinaRyabova <alinavr7@gmail.com>
Date: Tue, 6 Jan 2026 20:47:48 +0200
Subject: [PATCH 2/2] fix: wrap localStorage in try-catch block for safety

---
 frontend/components/shared/CookieBanner.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/components/shared/CookieBanner.tsx b/frontend/components/shared/CookieBanner.tsx
index 3d1775f4..8f6acdd3 100644
--- a/frontend/components/shared/CookieBanner.tsx
+++ b/frontend/components/shared/CookieBanner.tsx
@@ -21,12 +21,20 @@ export function CookieBanner() {
   }, []);
 
   const handleAccept = () => {
-    localStorage.setItem('cookie-consent', 'accepted');
+    try {
+      localStorage.setItem('cookie-consent', 'accepted');
+    } catch (error) {
+      console.error('Failed to save cookie consent:', error);
+    }
     setIsVisible(false);
   };
 
   const handleDecline = () => {
-    localStorage.setItem('cookie-consent', 'declined');
+    try {
+      localStorage.setItem('cookie-consent', 'declined');
+    } catch (error) {
+      console.error('Failed to save cookie consent:', error);
+    }
     setIsVisible(false);
   };