feat: implement privacy policy and cookie banner

2026-06-21 23:55:33 +02:00
parent 912318fdcd
commit 31be20da40
4 changed files with 139 additions and 35 deletions
@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Cookie, X } from "lucide-react";
+
+
+export function CookieBanner() {
+  const [showBanner, setShowBanner] = useState(false);
+
+  useEffect(() => {
+    // Check if the user has already accepted cookies
+    const consent = localStorage.getItem("airproject_cookie_consent");
+    if (!consent) {
+      setShowBanner(true);
+    }
+  }, []);
+
+  const acceptCookies = () => {
+    localStorage.setItem("airproject_cookie_consent", "true");
+    setShowBanner(false);
+  };
+
+  if (!showBanner) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 pb-safe">
+      <div className="max-w-4xl mx-auto bg-slate-900 border border-slate-700 shadow-2xl rounded-2xl p-4 md:p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 md:gap-6 animate-in slide-in-from-bottom-10 fade-in duration-500">
+        <div className="flex items-start gap-4">
+          <div className="bg-primary/20 p-2 md:p-3 rounded-full shrink-0 mt-1 md:mt-0 text-primary">
+            <Cookie className="w-5 h-5 md:w-6 md:h-6" />
+          </div>
+          <div>
+            <h3 className="text-white font-semibold text-sm md:text-base mb-1">
+              Dbamy o Twoją prywatność
+            </h3>
+            <p className="text-slate-400 text-xs md:text-sm leading-relaxed max-w-2xl">
+              Nasz serwis używa plików cookies (ciasteczek) w celach statystycznych (m.in. Google Analytics, Google Tag Manager) oraz prawidłowego działania strony. 
+              Możesz określić warunki przechowywania cookies w swojej przeglądarce. Dowiedz się więcej w naszej{" "}
+              <Link 
+                href="/polityka-prywatnosci" 
+                className="text-primary hover:text-white transition-colors underline underline-offset-2"
+              >
+                Polityce Prywatności
+              </Link>.
+            </p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-3 w-full md:w-auto shrink-0 justify-end md:justify-start">
+          <button 
+            onClick={() => setShowBanner(false)}
+            className="md:hidden btn btn-ghost btn-circle text-slate-400 hover:text-white shrink-0"
+          >
+            <X className="w-5 h-5" />
+          </button>
+          <button 
+            onClick={acceptCookies}
+            className="btn btn-primary text-white w-full md:w-auto shadow-md shadow-primary/20"
+          >
+            Rozumiem i Akceptuję
+          </button>
+        </div>
+        
+        {/* Zamknięcie na desktop */}
+        <button 
+          onClick={() => setShowBanner(false)}
+          className="hidden md:flex absolute top-4 right-4 text-slate-500 hover:text-white transition-colors p-1"
+          aria-label="Zamknij"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}