add cookie consent modal

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;

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>
   );

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;