feat: enhance landing page, Telegram webhook, SEO suite, and cookie consent banner

2026-08-22 22:57:03 +03:00
parent 5ac5988a3a
commit 61dd85133c
26 changed files with 3264 additions and 896 deletions
@@ -0,0 +1,97 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { Cookie, X, ShieldCheck } from 'lucide-react'
+
+export default function CookieBanner() {
+  const [mounted, setMounted] = useState(false)
+  const [visible, setVisible] = useState(false)
+  const params = useParams()
+  const locale = (params?.locale as string) || 'tr'
+
+  useEffect(() => {
+    setMounted(true)
+    const consent = localStorage.getItem('ayris_cookie_consent')
+    if (!consent) {
+      // Sayfa yüklendikten kısa bir süre sonra pürüzsüzce aç
+      const timer = setTimeout(() => {
+        setVisible(true)
+      }, 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [])
+
+  const handleAcceptAll = () => {
+    localStorage.setItem('ayris_cookie_consent', 'accepted_all')
+    setVisible(false)
+  }
+
+  const handleAcceptEssential = () => {
+    localStorage.setItem('ayris_cookie_consent', 'essential_only')
+    setVisible(false)
+  }
+
+  if (!mounted || !visible) return null
+
+  return (
+    <aside
+      aria-label="Çerez ve Gizlilik Bildirimi"
+      role="region"
+      className="fixed bottom-4 left-4 right-4 z-50 mx-auto max-w-[540px] animate-in fade-in slide-in-from-bottom-5 duration-300 sm:bottom-6 sm:right-6 sm:left-auto"
+    >
+      <div className="rounded-2xl border border-zinc-200/90 bg-white/95 p-5 shadow-[0_20px_50px_-15px_rgba(24,24,27,0.2)] backdrop-blur-md">
+        <div className="flex items-start gap-3.5">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[#FDEEEC] text-[#B8140F]">
+            <Cookie size={18} strokeWidth={2.2} aria-hidden="true" />
+          </div>
+
+          <div className="flex-1">
+            <div className="flex items-center justify-between gap-2">
+              <h3 className="text-sm font-bold text-zinc-950 flex items-center gap-1.5">
+                Çerez ve Veri Politikası
+              </h3>
+              <button
+                type="button"
+                onClick={handleAcceptEssential}
+                aria-label="Bildirimi Kapat"
+                className="rounded-lg p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 transition-colors"
+              >
+                <X size={15} />
+              </button>
+            </div>
+
+            <p className="mt-1.5 text-xs leading-relaxed text-zinc-600">
+              Sitemizde gezinme deneyiminizi iyileştirmek, temel işlevleri sunmak ve güvenliği sağlamak amacıyla çerezler kullanılmaktadır. Ayrıntılı bilgi için{' '}
+              <Link
+                href={`/${locale}/privacy`}
+                className="font-semibold text-zinc-900 underline underline-offset-2 hover:text-[#E61919]"
+              >
+                Gizlilik Politikası
+              </Link>
+              'nı inceleyebilirsiniz.
+            </p>
+
+            <div className="mt-4 flex flex-wrap items-center gap-2">
+              <button
+                type="button"
+                onClick={handleAcceptAll}
+                className="flex-1 rounded-full bg-[#E61919] px-4 py-2 text-xs font-bold text-white shadow-sm transition-all hover:bg-[#B8140F] active:scale-[0.98] sm:flex-initial"
+              >
+                Tümünü Kabul Et
+              </button>
+              <button
+                type="button"
+                onClick={handleAcceptEssential}
+                className="flex-1 rounded-full border border-zinc-200 bg-white px-3.5 py-2 text-xs font-semibold text-zinc-700 transition-all hover:bg-zinc-50 hover:text-zinc-950 active:scale-[0.98] sm:flex-initial"
+              >
+                Yalnızca Zorunlular
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </aside>
+  )
+}