Push

2025-12-14 00:11:56 +03:00
parent 448cc1cc17
commit 174f49f921
36 changed files with 0 additions and 0 deletions
--- a/src/components/CookieBanner.tsx
+++ b/src/components/CookieBanner.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+
+interface CookieBannerProps {
+  onAccept?: () => void;
+  onDecline?: () => void;
+}
+
+export const CookieBanner: React.FC<CookieBannerProps> = ({ onAccept, onDecline }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Check if user has already made a choice
+    const consent = localStorage.getItem('cookie-consent');
+    if (!consent) {
+      // Small delay for better UX
+      setTimeout(() => setIsVisible(true), 1500);
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem('cookie-consent', 'accepted');
+    setIsVisible(false);
+    onAccept?.();
+  };
+
+  const handleDecline = () => {
+    localStorage.setItem('cookie-consent', 'declined');
+    setIsVisible(false);
+    onDecline?.();
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6">
+      <div className="max-w-4xl mx-auto bg-zsl-card/95 backdrop-blur-md border border-zsl-primary/20 rounded-2xl p-6 shadow-2xl shadow-black/50">
+        <div className="flex flex-col md:flex-row items-start md:items-center gap-4">
+          {/* Icon */}
+          <div className="w-12 h-12 rounded-xl bg-zsl-primary/10 flex items-center justify-center shrink-0">
+            <svg className="w-6 h-6 text-zsl-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+          </div>
+
+          {/* Text */}
+          <div className="flex-1">
+            <h3 className="font-semibold text-white mb-1">🍪 Çerez Kullanımı & KVKK</h3>
+            <p className="text-sm text-zsl-muted leading-relaxed">
+              Web sitemizde deneyiminizi iyileştirmek için çerezler kullanıyoruz. 
+              Kişisel verileriniz 6698 sayılı KVKK kapsamında korunmaktadır. 
+              Devam ederek{' '}
+              <a href="#" className="text-zsl-primary hover:underline">Gizlilik Politikamızı</a>
+              {' '}kabul etmiş olursunuz.
+            </p>
+          </div>
+
+          {/* Buttons */}
+          <div className="flex gap-3 shrink-0 w-full md:w-auto">
+            <button
+              onClick={handleDecline}
+              className="flex-1 md:flex-none px-5 py-2.5 text-sm font-medium text-zsl-muted border border-zsl-primary/20 rounded-lg hover:border-zsl-primary/40 hover:text-white transition-all duration-300"
+            >
+              Reddet
+            </button>
+            <button
+              onClick={handleAccept}
+              className="flex-1 md:flex-none px-5 py-2.5 text-sm font-medium bg-zsl-primary text-zsl-bg rounded-lg hover:bg-zsl-primary/90 transition-all duration-300"
+            >
+              Kabul Et
+            </button>
+          </div>
+        </div>
+
+        {/* Close button */}
+        <button
+          onClick={handleDecline}
+          className="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center text-zsl-muted hover:text-white hover:bg-zsl-primary/10 transition-all duration-300"
+          aria-label="Kapat"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+};