Google Analytics and cookie policy

frontend/.env

 REACT_APP_JOB_TEMPLATE_ID = template_bfuv1sb
 REACT_APP_CLIENT_TEMPLATE_ID = template_bd6fjli
 REACT_APP_USER_ID = 27spvSZ2Lsf2j8RKw
-REACT_APP_API_URL = "https://websitediligentapistart.azurewebsites.net"
+REACT_APP_API_URL = "https://diligentwebsiteapistart.azurewebsites.net/"
 //http://localhost:1337
 MAILCHIMP_FORM_URL = http://eepurl.com/iaRrv1
 GOOGLE_TRACKING_ID = "G-PTZC3WLTZ1"
-REACT_APP_TRACKING_ID = UA-249402473-1
+REACT_APP_MEASUREMENT_ID = G-PD7YZVDG30

frontend/package-lock.json

 {
   "name": "frontend",
-  "version": "1.1.3",
+  "version": "1.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "1.1.3",
+      "version": "1.1.6",
       "dependencies": {
         "@faceless-ui/slider": "^1.1.14",
         "@faceless-ui/window-info": "^2.1.1",
         "framer-motion": "^6.3.4",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
+        "react-cookie": "^4.1.1",
         "react-dom": "^17.0.2",
         "react-dropzone": "^12.0.5",
         "react-ga": "^3.3.1",
+        "react-ga4": "^1.4.1",
         "react-mailchimp-subscribe": "^2.1.3",
         "react-markdown": "^8.0.0",
         "react-router-dom": "^6.2.1",
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "node_modules/@types/debug": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "peer": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/q": {
       "version": "1.5.5",
       "version": "18.0.21",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
       "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "peer": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
     "node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
-      "peer": true
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
         "node": ">=14"
       }
     },
+    "node_modules/react-cookie": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+      "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
         "react": "^15.6.2 || ^16.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-ga4": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz",
+      "integrity": "sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w=="
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "dependencies": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
         "@types/node": "*"
       }
     },
+    "@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "@types/debug": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
         "@types/unist": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "peer": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "@types/q": {
       "version": "1.5.5",
       "version": "18.0.21",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
       "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
-      "peer": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "peer": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "@types/serve-index": {
       "version": "1.9.1",
     "csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
-      "peer": true
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-cookie": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+      "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^4.0.0"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
       "integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==",
       "requires": {}
     },
+    "react-ga4": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz",
+      "integrity": "sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
         "unist-util-is": "^5.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "requires": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",

frontend/package.json

     "framer-motion": "^6.3.4",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
+    "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-dropzone": "^12.0.5",
     "react-ga": "^3.3.1",
+    "react-ga4": "^1.4.1",
     "react-mailchimp-subscribe": "^2.1.3",
     "react-markdown": "^8.0.0",
     "react-router-dom": "^6.2.1",

frontend/public/index.html

     <link rel="icon" href="%PUBLIC_URL%/favicon_diligent.png" />
     <meta name="viewport" content="width=device-width, height=device-height" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Diligent Software's Website"
-    />
+    <meta name="description" content="Diligent Software's Website" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
     <title>Diligent Software</title>
 
     <!-- Google tag (gtag.js) -->
-    <!-- <script async src='https://www.googletagmanager.com/gtag/js?id=G-PTZC3WLTZ1'></script>
+    <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-PD7YZVDG30"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag() { dataLayer.push(arguments); }
-      gtag('js', new Date());
-  
-      gtag('config', 'G-PTZC3WLTZ1');
-    </script> -->
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
+      gtag("config", "G-PD7YZVDG30");
+    </script> -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

frontend/src/App.js

 import './App.css';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import Navigation from './components/shared/Navigation';
+import CookieBanner from './components/shared/CookieBanner';
 import Footer from './components/shared/Footer';
 import Loader from './components/shared/Loader';
 import ScrollToTop from './components/root/ScrollToTop';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
+import { useCookies, Cookies } from 'react-cookie';
 import routes from './routes';
 
 const Home = lazy(() => import('./pages/Home'));
 // Navigation Links
 const links = routes.filter(item => item.nav === true);
 
-ReactGA.initialize(process.env.REACT_APP_TRACKING_ID);
-
 function App() {
   //tabs for contact form
   const link = useNavigate();
-
+  const [cookies, setCookie, removeCookie] = useCookies(['user']);
+  const [diligentCookie, setDiligentCookie] = useState(cookies.diligent_ga);
   //scroll to Contact segment
   const forwardedRef = useRef(null);
 
-  //initialize analytics page tracking
-  //usePageTracking();
+  useEffect(() => {
+    if (diligentCookie === 'true') {
+      ReactGA.initialize(process.env.REACT_APP_MEASUREMENT_ID);
+    }
+  }, [diligentCookie]);
 
   //scroll to Contact fn
   function scrollToView(event) {
     }
   }
 
+  const handleAccept = () => {
+    setCookie('diligent_ga', 'true', { path: '/' });
+    setDiligentCookie(prevValue => !prevValue);
+  };
+
+  const handleDecline = () => {
+    setCookie('diligent_ga', 'false', { path: '/' });
+    setDiligentCookie(prevValue => !prevValue);
+  };
+
   return (
     <div>
       <ScrollToTop />
         activeLinks={activeLinks}
         forwardedRef={forwardedRef}
       ></Navigation>
+      {diligentCookie === undefined && (
+        <CookieBanner handleAccept={handleAccept} handleDecline={handleDecline} />
+      )}
       <Suspense fallback={<Loader />}>
         <Routes>
           <Route exact path="/" element={<Home forwardedRef={forwardedRef} />} />

frontend/src/components/shared/ClientForm.jsx

 import { useContext, useState } from 'react';
 import * as emailjs from 'emailjs-com';
 import { motion } from 'framer-motion';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 
 export default function ClientForm() {
   //search context for prevous entry TODO
                     console.log(error.text);
                   },
                 );
-              ReactGA.event({
+              ReactGA.event('contact', {
                 category: 'Contact',
                 action: 'Business Inquiry',
               });

frontend/src/components/shared/CookieBanner.jsx

+import '../../App.css';
+import Wrapper from '../../layout/Wrapper';
+import Cookie from './../../assets/Cookie.png';
+
+const cookie_p =
+  'We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.';
+
+const CookieBanner = ({ handleAccept, handleDecline }) => {
+  return (
+    <Wrapper>
+      <div className="flex flex-row items-start gap-8 xl:mr-0 mr-4 md:p-8 px-2 py-4 isolate max-w-banner fixed bg-dg-primary-75 shadow-custom z-50 bottom-0 rounded-2xl mb-3">
+        <img
+          src={Cookie}
+          alt="Diligent Cookie"
+          className="hidden md:block w-44 h-48 flex-none z-0 grow-0 order-none"
+        />
+        <div className="flex flex-col items-start p-0 gap-2.5 max-w-banner">
+          <div className="flex flex-col items-start p-0 gap-4 max-w-banner ">
+            <p className="md:text-title text-banner-mobile text-dark-gray font-secondary font-semibold">
+              Our Website uses Cookies
+            </p>
+            <p className="flex items-center text-dark-gray font-secondary md:text-banner-p text-banner-p-mobile">
+              {cookie_p}
+            </p>
+          </div>
+          <div className="max-w-banner w-full flex items-center justify-end p-0 gap-2.5">
+            <button
+              onClick={handleDecline}
+              className="flex items-start p-0 text-dg-primary-900 bg-dg-primary-75 font-semibold font-secondary md:px-64p px-42p md:py-20p py-15p md:w-max w-36 whitespace-nowrap"
+            >
+              DECLINE
+            </button>
+            <button
+              onClick={handleAccept}
+              className="btn-primary flex flex-row items-start md:px-64p px-42p md:py-20p py-15p md:w-max w-36 whitespace-nowrap"
+            >
+              Accept
+            </button>
+          </div>
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default CookieBanner;

frontend/src/components/shared/JobForm.jsx

 import { useContext, useState, useRef, useEffect } from 'react';
 import * as emailjs from 'emailjs-com';
 import { motion } from 'framer-motion';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import MyDropzone from './MyDropzone';
 import HashPositions from './HashPositions';
 
                     );
                 });
               }
-              ReactGA.event({
+              ReactGA.event('contact', {
                 category: 'Contact',
                 action: 'Job application',
               });

frontend/src/hooks/useAnalytics.js

-import React, { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import ReactGA from 'react-ga';
+import { useEffect } from 'react';
+import { useCookies } from 'react-cookie';
+import ReactGA from 'react-ga4';
 
 const useAnalytics = pageTitle => {
-  const location = useLocation();
-
+  const [cookies] = useCookies(['user']);
   useEffect(() => {
-    ReactGA.pageview(location.pathname, null, pageTitle);
-    console.log(`Google Analytics running for ${pageTitle}`);
+    if (cookies.diligent_ga === 'true')
+      ReactGA.send({ hitType: 'pageview', page: pageTitle });
   }, []);
 };
 

frontend/src/index.js

 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+import { CookiesProvider } from 'react-cookie';
 import { BrowserRouter } from 'react-router-dom';
 
-if (module.hot) module.hot.accept()
-
+if (module.hot) module.hot.accept();
 
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <CookiesProvider>
+        <App />
+      </CookiesProvider>
     </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root'),
 );
 
-
-
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

frontend/tailwind.config.js

   darkMode: 'class',
   theme: {
     fontFamily: {
-      'primary' : ['"Abril Fatface"','serif'],
-      'secondary' : ['"Poppins"', 'sans-serif'],
+      primary: ['"Abril Fatface"', 'serif'],
+      secondary: ['"Poppins"', 'sans-serif'],
     },
     fontSize: {
-      'head' : ['56px', {
-        letterSpacing: '1px',
-        lineHeight: '74px',
-      }],
-      'subhead' : ['12px', {
-        letterSpacing: '28px',
-        lineHeight: 'normal',
-      }],
-      'head-mobile' : ['30px', {
-        letterSpacing: '1px',
-        lineHeight: 'normal',
-      }],
-      'title' : ['30px', {
-        letterSpacing: '1px',
-        lineHeight: '40px',
-      }],
-      'title-24' : ['24px', {
-        letterSpacing: '1px',
-        lineHeight: 'normal',
-      }],
-      'p' : ['16px', {
-        letterSpacing: '0px',
-        lineHeight: '28px',
-      }],
-      'p-italic': ['16px', {
-        letterSpacing: 'opx',
-        lineHeight: '22px'
-      }],
-      'btn' : ['16px', {
-        letterSpacing: '0px',
-        lineHeight: '16px',
-      }],
-      'input-label' : ['14px', {
-        letterSpacing: '0px',
-        lineHeight: 'normal',
-      }],
-      'p-mobile' : ['14px', {
-        letterSpacing: '0px',
-        lineHeight: 'normal',
-      }],
-      'title-mobile' : ['24px', {
-        letterSpacing: '0px',
-        lineHeight: '40px',
-      }],
-      'italic-p-mobile' : ['14px', {
-        letterSpacing: '0px',
-        lineHeight: 'normal',
-      }],
-      'italic-title': ['30px', {
-        letterSpacing: '1px',
-        lineHeight: 'normal'
-      }],
-      'italic-title-mobile' : ['18px', {
-        letterSpacing: '0px',
-        lineHeight: '28px',
-      }],
-      'input-label-mobile' : ['12px', {
-        letterSpacing: '0px',
-        lineHeight: 'normal',
-      }],
-      'display-numb' : ['56px', {
-        letterSpacing: '2px',
-        lineHeight: 'normal'
-      }],
-      'subtitle-48' : ['48px', {
-        letterSpacing: '0px',
-        lineHeight: 'normal'
-      }]
-
+      head: [
+        '56px',
+        {
+          letterSpacing: '1px',
+          lineHeight: '74px',
+        },
+      ],
+      subhead: [
+        '12px',
+        {
+          letterSpacing: '28px',
+          lineHeight: 'normal',
+        },
+      ],
+      'head-mobile': [
+        '30px',
+        {
+          letterSpacing: '1px',
+          lineHeight: 'normal',
+        },
+      ],
+      title: [
+        '30px',
+        {
+          letterSpacing: '1px',
+          lineHeight: '40px',
+        },
+      ],
+      'title-24': [
+        '24px',
+        {
+          letterSpacing: '1px',
+          lineHeight: 'normal',
+        },
+      ],
+      p: [
+        '16px',
+        {
+          letterSpacing: '0px',
+          lineHeight: '28px',
+        },
+      ],
+      'p-italic': [
+        '16px',
+        {
+          letterSpacing: 'opx',
+          lineHeight: '22px',
+        },
+      ],
+      btn: [
+        '16px',
+        {
+          letterSpacing: '0px',
+          lineHeight: '16px',
+        },
+      ],
+      'input-label': [
+        '14px',
+        {
+          letterSpacing: '0px',
+          lineHeight: 'normal',
+        },
+      ],
+      'p-mobile': [
+        '14px',
+        {
+          letterSpacing: '0px',
+          lineHeight: 'normal',
+        },
+      ],
+      'title-mobile': [
+        '24px',
+        {
+          letterSpacing: '0px',
+          lineHeight: '40px',
+        },
+      ],
+      'italic-p-mobile': [
+        '14px',
+        {
+          letterSpacing: '0px',
+          lineHeight: 'normal',
+        },
+      ],
+      'italic-title': [
+        '30px',
+        {
+          letterSpacing: '1px',
+          lineHeight: 'normal',
+        },
+      ],
+      'italic-title-mobile': [
+        '18px',
+        {
+          letterSpacing: '0px',
+          lineHeight: '28px',
+        },
+      ],
+      'input-label-mobile': [
+        '12px',
+        {
+          letterSpacing: '0px',
+          lineHeight: 'normal',
+        },
+      ],
+      'display-numb': [
+        '56px',
+        {
+          letterSpacing: '2px',
+          lineHeight: 'normal',
+        },
+      ],
+      'subtitle-48': [
+        '48px',
+        {
+          letterSpacing: '0px',
+          lineHeight: 'normal',
+        },
+      ],
+      'banner-mobile': [
+        '18.66px',
+        {
+          letterSpacing: '0px',
+          lineHeight: '24px',
+        },
+      ],
+      'banner-p': [
+        '14px',
+        {
+          letterSpacing: '0px',
+          lineHeight: '21px',
+        },
+      ],
+      'banner-p-mobile': [
+        '12px',
+        {
+          letterSpacing: '0px',
+          lineHeight: '18px',
+        },
+      ],
     },
     minHeight: {
-      '12': '3rem',
+      12: '3rem',
     },
     maxWidth: {
-      '780p':'780px',
-      'wrapper': '1150px',
-      'custom': '1150px',
-      'dropzone': '110px',
+      '780p': '780px',
+      wrapper: '1150px',
+      custom: '1150px',
+      dropzone: '110px',
+      banner: '1118px',
+      banner_m: '309px',
     },
     transitionDuration: {
       DEFAULT: '300ms',
         'baby-blue': '#f0f3f9',
         'dg-primary': {
           50: '#f4e9f4',
+          75: '#fafafa',
           100: '#e9d4e9',
           200: '#debedd',
           300: '#d3a9d2',
         black: '#000000',
       },
       spacing: {
-        '2p': "2px",
-        '4p':'4px',
+        '2p': '2px',
+        '4p': '4px',
         '8p': '8px',
-        '12p':'12px',
+        '12p': '12px',
+        '15p': '15px',
         '16p': '16px',
-        '20p':'20px',
-        '32p':'32px',
-        '48p':'48px',
-        '64p':'64px',
-        '72p':'72px',
-        '90p':'90px',
-        '140p':'140px',
+        '20p': '20px',
+        '32p': '32px',
+        '42p': '42px',
+        '48p': '48px',
+        '64p': '64px',
+        '72p': '72px',
+        '90p': '90px',
+        '140p': '140px',
         '164p': '164px',
         '200p': '200px',
-        '240p':'240px'
-
-
+        '240p': '240px',
       },
       borderRadius: {
-        '8': '8px',
-        '16': '16px',
-        '32' : '32px'
-      }
+        8: '8px',
+        16: '16px',
+        32: '32px',
+      },
+      boxShadow: {
+        custom: '0 0px 9px 9px rgba(0, 0, 0, 0.09)',
+      },
     },
   },
   plugins: [

frontend/yarn.lock

   dependencies:
     "@types/node" "*"
 
+"@types/cookie@^0.3.3":
+  "integrity" "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+  "resolved" "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz"
+  "version" "0.3.3"
+
 "@types/debug@^4.0.0":
   "integrity" "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg=="
   "resolved" "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz"
   dependencies:
     "@types/unist" "*"
 
+"@types/hoist-non-react-statics@^3.0.1":
+  "integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
+  "resolved" "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
+  "version" "3.3.1"
+  dependencies:
+    "@types/react" "*"
+    "hoist-non-react-statics" "^3.3.0"
+
 "@types/html-minifier-terser@^6.0.0":
   "integrity" "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
   "resolved" "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz"
   "resolved" "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz"
   "version" "1.2.4"
 
-"@types/react@>=16":
+"@types/react@*", "@types/react@>=16":
   "integrity" "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA=="
   "resolved" "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz"
   "version" "18.0.21"
   "resolved" "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
   "version" "1.0.6"
 
-"cookie@0.4.1":
+"cookie@^0.4.0", "cookie@0.4.1":
   "integrity" "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
   "resolved" "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz"
   "version" "0.4.1"
     "regenerator-runtime" "^0.13.9"
     "whatwg-fetch" "^3.6.2"
 
+"react-cookie@^4.1.1":
+  "integrity" "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A=="
+  "resolved" "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz"
+  "version" "4.1.1"
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.0.1"
+    "hoist-non-react-statics" "^3.0.0"
+    "universal-cookie" "^4.0.0"
+
 "react-dev-utils@^12.0.0":
   "integrity" "sha512-xBQkitdxozPxt1YZ9O1097EJiVpwHr9FoAuEVURCKV0Av8NBERovJauzP7bo1ThvuhZ4shsQ1AJiu4vQpoT1AQ=="
   "resolved" "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz"
   "resolved" "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz"
   "version" "3.3.1"
 
+"react-ga4@^1.4.1":
+  "integrity" "sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w=="
+  "resolved" "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz"
+  "version" "1.4.1"
+
 "react-is@^16.13.1", "react-is@^16.7.0", "react-is@>= 16.8.0":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   optionalDependencies:
     "fsevents" "^2.3.2"
 
-"react@*", "react@^15.6.2 || ^16.0 || ^17 || ^18", "react@^16 || ^17 || ^18", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
+"react@*", "react@^15.6.2 || ^16.0 || ^17 || ^18", "react@^16 || ^17 || ^18", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.3.0", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"
     "unist-util-is" "^5.0.0"
     "unist-util-visit-parents" "^5.0.0"
 
+"universal-cookie@^4.0.0":
+  "integrity" "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw=="
+  "resolved" "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz"
+  "version" "4.0.4"
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    "cookie" "^0.4.0"
+
 "universalify@^0.1.2":
   "integrity" "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
   "resolved" "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"