feat: add cookie consent banner

app/layout.tsx

@@ -4,6 +4,8 @@ import { Inter, Yanone_Kaffeesatz } from "next/font/google";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import Hero from "@/components/Hero";
+import CookieBanner from "@/components/CookieBanner";
+import AnalyticsInitializer from "@/components/AnalyticsInitializer";
 import LocaleProvider from "@/contexts/locale";
 import "./globals.css";
 
@@ -88,12 +90,14 @@ export default function RootLayout({
           yanone.variable,
         )}
       >
+        <AnalyticsInitializer />
         <LocaleProvider>
           <header className="tw:mb-4">
             <Hero />
           </header>
           <main className="tw:grow">{children}</main>
           <div id="portal" />
+          <CookieBanner />
         </LocaleProvider>
       </body>
     </html>

components/AnalyticsInitializer.tsx

@@ -0,0 +1,22 @@
+// components/AnalyticsInitializer.tsx
+import Script from "next/script";
+
+export default function AnalyticsInitializer() {
+  return (
+    <Script
+      id="gtag-consent-default"
+      strategy="beforeInteractive"
+    >
+      {`
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('consent', 'default', {
+          analytics_storage: 'denied',
+          ad_storage: 'denied',
+          ad_user_data: 'denied',
+          ad_personalization: 'denied',
+        });
+      `}
+    </Script>
+  );
+}

components/Button.tsx

@@ -4,7 +4,7 @@ import { HTMLProps, MouseEvent } from "react";
 
 type Props = {
   className?: string;
-  variant?: "default" | "action";
+  variant?: "default" | "action"| "secondary";
   children: React.ReactNode;
   to?: string;
   onClick?: () => void;
@@ -44,6 +44,8 @@ const Button = ({
             variant === "default",
           "tw:bg-orange-400 tw:text-white tw:hover:bg-orange-600":
             variant === "action",
+          "tw:bg-gray-200 tw:text-gray-800 tw:hover:bg-gray-300":
+            variant === "secondary",
         },
       )}
       {...props}

components/CookieBanner.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { getCookieConsent, setCookieConsent } from '@/utils/cookieUtils'
+import Button from '@/components/Button'
+
+export default function CookieBanner() {
+  const [showBanner, setShowBanner] = useState(false)
+
+  useEffect(() => {
+    const consent = getCookieConsent()
+    if (!consent) {
+      setShowBanner(true)
+    }
+  }, [])
+
+  const handleAccept = () => {
+    setCookieConsent('accepted')
+    setShowBanner(false)
+  }
+
+  const handleReject = () => {
+    setCookieConsent('rejected')
+    setShowBanner(false)
+  }
+
+  if (!showBanner) return null
+
+  return (
+    <div className="tw:fixed tw:bottom-0 tw:left-0 tw:right-0 tw:z-50 tw:rounded-t-3xl tw:bg-white tw:shadow-lg tw:border-t tw:border-gray-200">
+      <div className="tw:mx-auto tw:w-11/12 tw:tablet:w-3/4 tw:py-4 tw:tablet:py-6">
+        <div className="tw:flex tw:flex-col tw:gap-4 tw:tablet:flex-row tw:tablet:items-center tw:tablet:justify-between">
+          <div className="tw:flex-1">
+            <h3 className="tw:font-yk tw:font-semibold tw:text-xl tw:mb-2 tw:tracking-wide">
+              We value your privacy
+            </h3>
+            <p className="tw:text-base tw:text-gray-600">
+              We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking Accept All, you consent to our use of cookies.{' '}
+              <a href="/code-of-conduct" className="tw:text-rose-500 tw:underline hover:tw:text-rose-700">
+                Cookie Policy
+              </a>
+            </p>
+          </div>
+          <div className="tw:flex tw:gap-3 tw:flex-wrap">
+            <Button variant="secondary" onClick={handleReject}>
+              Reject All
+            </Button>
+            <Button variant="default" onClick={handleAccept}>
+              Accept All
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

configurations/constants.ts

@@ -5,3 +5,5 @@ export const REGISTER_URL =
   'https://sciwork.kktix.cc/events/sciwork-conference-20251213-ntu';
 export const CFP_URL =
   'https://pretalx.sciwork.dev/sw25/submit';
+export type CookieConsentValue = 'accepted' | 'rejected' | undefined;
+export const COOKIE_NAME = 'cookieConsent';

utils/cookieUtils.ts

@@ -0,0 +1,112 @@
+// utils/cookieUtils.ts
+import Cookies from 'js-cookie';
+import { COOKIE_NAME, CookieConsentValue } from '@/configurations/constants';
+
+export const COOKIE_EXPIRY_DAYS = 365; // 1 year
+
+/**
+ * Get the current cookie consent value
+ */
+export const getCookieConsent = (): CookieConsentValue => {
+  const value = Cookies.get(COOKIE_NAME);
+  if (value === 'accepted' || value === 'rejected') {
+    return value;
+  }
+  return undefined;
+};
+
+/**
+ * Set cookie consent value
+ */
+export const setCookieConsent = (value: 'accepted' | 'rejected'): void => {
+  Cookies.set(COOKIE_NAME, value, {
+    expires: COOKIE_EXPIRY_DAYS,
+    sameSite: 'strict',
+    path: '/',
+  });
+
+  // Trigger analytics based on consent
+  if (value === 'accepted') {
+    enableAnalytics();
+  } else {
+    disableAnalytics();
+  }
+};
+
+/**
+ * Check if user has made a consent choice
+ */
+export const hasCookieConsent = (): boolean => {
+  return getCookieConsent() !== undefined;
+};
+
+/**
+ * Delete cookie consent (for testing/reset)
+ */
+export const deleteCookieConsent = (): void => {
+  Cookies.remove(COOKIE_NAME);
+  disableAnalytics();
+  console.log('🗑️ Cookie consent deleted');
+};
+
+/**
+ * Enable analytics and tracking
+ */
+export const enableAnalytics = (): void => {
+  console.log('✅ Analytics ENABLED');
+
+  // Google Analytics (gtag.js)
+  if (typeof window !== 'undefined' && (window as any).gtag) {
+    (window as any).gtag('consent', 'update', {
+      analytics_storage: 'granted',
+      ad_storage: 'granted',
+      ad_user_data: 'granted',
+      ad_personalization: 'granted',
+    });
+    console.log('✅ Google Analytics consent granted');
+  }
+
+  // Google Tag Manager
+  if (typeof window !== 'undefined' && (window as any).dataLayer) {
+    (window as any).dataLayer.push({
+      event: 'cookie_consent_granted',
+    });
+    console.log('✅ GTM event pushed');
+  }
+
+  // Add other analytics services here
+  // Example: Facebook Pixel, Hotjar, etc.
+};
+
+/**
+ * Disable analytics and tracking
+ */
+export const disableAnalytics = (): void => {
+  console.log('❌ Analytics DISABLED');
+
+  // Google Analytics (gtag.js)
+  if (typeof window !== 'undefined' && (window as any).gtag) {
+    (window as any).gtag('consent', 'update', {
+      analytics_storage: 'denied',
+      ad_storage: 'denied',
+      ad_user_data: 'denied',
+      ad_personalization: 'denied',
+    });
+    console.log('❌ Google Analytics consent denied');
+  }
+
+  // Google Tag Manager
+  if (typeof window !== 'undefined' && (window as any).dataLayer) {
+    (window as any).dataLayer.push({
+      event: 'cookie_consent_denied',
+    });
+    console.log('❌ GTM event pushed');
+  }
+};
+
+/**
+ * Get all cookies for debugging
+ */
+export const getAllCookies = (): Record<string, string> => {
+  return Cookies.get();
+};