From ea269b55c0b53d0690dfef73db91d881fd59f725 Mon Sep 17 00:00:00 2001
From: Pawel <webloopbox@gmail.com>
Date: Tue, 15 Oct 2024 13:52:47 +0200
Subject: [PATCH] add cookie consent modal

---
 package-lock.json                     |  53 ++------
 website/app/globals.css               |  17 +++
 website/app/layout.tsx                |   3 +
 website/components/cookie-consent.tsx |  15 +++
 website/lib/cookie-consent-config.ts  | 167 ++++++++++++++++++++++++++
 website/package.json                  |   5 +-
 6 files changed, 218 insertions(+), 42 deletions(-)
 create mode 100644 website/components/cookie-consent.tsx
 create mode 100644 website/lib/cookie-consent-config.ts

diff --git a/package-lock.json b/package-lock.json
index 5af5ba80..fc77440b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -1753,7 +1752,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1766,7 +1764,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1775,7 +1772,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -3156,7 +3152,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -3787,8 +3783,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -4303,7 +4298,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -4762,7 +4756,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -5529,8 +5522,7 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/diff": {
       "version": "5.2.0",
@@ -5555,8 +5547,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -6651,7 +6642,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -6685,7 +6675,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -8620,7 +8609,6 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -8892,7 +8880,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -9359,7 +9346,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -10107,7 +10093,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
       "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -10876,7 +10861,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -11311,7 +11295,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11337,7 +11320,6 @@
       "version": "8.4.41",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
       "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11365,7 +11347,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -11382,7 +11363,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -11401,7 +11381,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11436,7 +11415,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
       "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -11448,7 +11426,6 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
       "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
-      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -11460,7 +11437,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11485,7 +11461,6 @@
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
       "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -11497,8 +11472,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -11613,7 +11587,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11797,7 +11770,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -12129,7 +12101,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -12280,7 +12251,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -13015,7 +12985,6 @@
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz",
       "integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -13060,7 +13029,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -13788,8 +13756,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/uuid": {
       "version": "10.0.0",
@@ -13829,6 +13796,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/vanilla-cookieconsent": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vanilla-cookieconsent/-/vanilla-cookieconsent-3.0.1.tgz",
+      "integrity": "sha512-gqc4x7O9t1I4xWr7x6/jtQWPr4PZK26SmeA0iyTv1WyoECfAGnu5JEOExmMEP+5Fz66AT9OiCBO3GII4wDQHLw=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -15682,7 +15654,8 @@
         "react-icons": "^4.12.0",
         "react-live": "^4.1.5",
         "tailwind-merge": "^2.5.2",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "vanilla-cookieconsent": "^3.0.1"
       },
       "devDependencies": {
         "@types/node": "^20",
diff --git a/website/app/globals.css b/website/app/globals.css
index 5b12d337..b184147a 100644
--- a/website/app/globals.css
+++ b/website/app/globals.css
@@ -67,6 +67,23 @@ body {
   filter: invert(1);
 }
 
+#cc-main {
+  /** Change font **/
+  --cc-font-family: Roboto;
+
+  /** Change button primary color to black **/
+  --cc-btn-primary-bg: var(--green-primary);
+  --cc-btn-primary-border-color: transparent;
+  --cc-btn-primary-hover-bg: #444444;
+  --cc-btn-primary-hover-border-color: #444444;
+
+  /** Also make toggles the same color as the button **/
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg);
+
+  /** Make the buttons a bit rounder **/
+  --cc-btn-border-radius: 10px;
+}
+
 @media (min-width: 780px) {
   .flex-none {
     display: none;
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
index 9c138c7a..486098ea 100644
--- a/website/app/layout.tsx
+++ b/website/app/layout.tsx
@@ -3,6 +3,8 @@ import { DM_Mono, DM_Sans } from "next/font/google";
 import "./globals.css";
 import Header from "../components/header";
 import { Footer } from "@/components/footer";
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import CookieConsentComponent from "../components/cookie-consent";
 
 const dm_sans = DM_Sans({
   subsets: ["latin"],
@@ -34,6 +36,7 @@ export default function RootLayout({
           {children}
           <Footer />
         </Header>
+        <CookieConsentComponent />
       </body>
     </html>
   );
diff --git a/website/components/cookie-consent.tsx b/website/components/cookie-consent.tsx
new file mode 100644
index 00000000..97cb6321
--- /dev/null
+++ b/website/components/cookie-consent.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+import * as CookieConsent from "vanilla-cookieconsent";
+import pluginConfig from "../lib/cookie-consent-config";
+
+const CookieConsentComponent = () => {
+  useEffect(() => {
+    CookieConsent.run(pluginConfig);
+  }, []);
+
+  return null;
+};
+
+export default CookieConsentComponent;
diff --git a/website/lib/cookie-consent-config.ts b/website/lib/cookie-consent-config.ts
new file mode 100644
index 00000000..74c59610
--- /dev/null
+++ b/website/lib/cookie-consent-config.ts
@@ -0,0 +1,167 @@
+import type { CookieConsentConfig } from "vanilla-cookieconsent";
+
+const pluginConfig: CookieConsentConfig = {
+  guiOptions: {
+    consentModal: {
+      layout: "box",
+      position: "bottom right",
+      equalWeightButtons: true,
+      flipButtons: false,
+    },
+    preferencesModal: {
+      layout: "box",
+      position: "left",
+      equalWeightButtons: true,
+      flipButtons: false,
+    },
+  },
+
+  onFirstConsent: function () {
+    // console.log("onFirstAction fired");
+  },
+
+  onConsent: function ({ cookie }) {
+    // console.log("onConsent fired ...");
+  },
+
+  onChange: function ({ changedCategories, cookie }) {
+    // console.log("onChange fired ...");
+  },
+
+  categories: {
+    necessary: {
+      readOnly: true,
+      enabled: true,
+    },
+    analytics: {
+      autoClear: {
+        cookies: [
+          {
+            name: /^(_ga|_gid|color_mode|preferred_color_mode|disabled_global_site_banners|fileTreeExpanded)$/,
+          },
+        ],
+      },
+    },
+  },
+
+  language: {
+    default: "en",
+
+    translations: {
+      en: {
+        consentModal: {
+          description:
+            'Our website uses tracking cookies to understand how you interact with it. The tracking will be enabled only if you accept explicitly. <a href="#" data-cc="show-preferencesModal" class="cc__link">Manage preferences</a>',
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          showPreferencesBtn: "Manage preferences",
+          closeIconLabel: "Close",
+          footer: `
+            <a href="${process.env.NEXT_PUBLIC_BASE_PATH}/privacy-policy">Privacy Policy</a>
+          `,
+        },
+        preferencesModal: {
+          title: "Cookie preferences",
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          savePreferencesBtn: "Save preferences",
+          closeIconLabel: "Close",
+          sections: [
+            {
+              title: "Cookie Usage",
+              description: `We're using cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="${process.env.NEXT_PUBLIC_BASE_PATH}/privacy-policy" class="cc__link">privacy policy</a>.`,
+            },
+            {
+              title: "Strictly necessary cookies",
+              description:
+                "These cookies are essential for our website to work. They help you customize your experience and cannot be turned off.",
+              linkedCategory: "necessary",
+              cookieTable: {
+                headers: {
+                  name: "Name",
+                  domain: "Service",
+                  description: "Description",
+                },
+                body: [
+                  {
+                    name: "_octo",
+                    domain: ".github.com",
+                    description: "Session management",
+                  },
+                  {
+                    name: "logged_in",
+                    domain: ".github.com",
+                    description: "Maintains login status",
+                  },
+                  {
+                    name: "GHCC",
+                    domain: ".github.com",
+                    description: "Content customization",
+                  },
+                  {
+                    name: "dotcom_user",
+                    domain: ".github.com",
+                    description: "Identifies the logged-in user",
+                  },
+                  {
+                    name: "tz",
+                    domain: ".github.com",
+                    description: "Stores timezone setting",
+                  },
+                ],
+              },
+            },
+            {
+              title: "Performance and Analytics cookies",
+              linkedCategory: "analytics",
+              cookieTable: {
+                headers: {
+                  name: "Name",
+                  domain: "Service",
+                },
+                body: [
+                  {
+                    name: "_ga",
+                    domain: "Google Analytics",
+                  },
+                  {
+                    name: "_gid",
+                    domain: "Google Analytics",
+                  },
+                  {
+                    name: "color_mode",
+                    domain: ".github.com",
+                    description: "Saves your preferred color scheme",
+                  },
+                  {
+                    name: "preferred_color_mode",
+                    domain: ".github.com",
+                    description: "Remembers your display preferences",
+                  },
+                  {
+                    name: "disabled_global_site_banners",
+                    domain: ".github.com",
+                    description: "Keeps track of your banner preferences",
+                  },
+
+                  {
+                    name: "fileTreeExpanded",
+                    domain: ".github.com",
+                    description: "Remembers your file tree preferences",
+                  },
+                ],
+              },
+            },
+            {
+              title: "More information",
+              description:
+                'For any queries in relation to our policy on cookies and your choices, please <a class="cc__link" href="mailto:hello@silevis.com">contact us</a>.',
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export default pluginConfig;
diff --git a/website/package.json b/website/package.json
index 6a63f6ed..a825f2b3 100644
--- a/website/package.json
+++ b/website/package.json
@@ -29,7 +29,8 @@
     "react-icons": "^4.12.0",
     "react-live": "^4.1.5",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vanilla-cookieconsent": "^3.0.1"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -43,4 +44,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
\ No newline at end of file
+}