Added custom 404 not found page. Fixes : #4

components/ImageWithButton.js

@@ -0,0 +1,30 @@
+import Start from './buttons/Start'
+import Link from 'next/link'
+import Button from './buttons/Primary'
+
+export default function ImageWithButton({ type, button, buttonText, title, description, image, redirect, buttonTitle }) {
+  return (
+    <section className="flex flex-col md:flex-row container-style justify-center items-center">
+      <div className="basis-6/12 flex flex-col text-center md:text-left">
+        <div className={`${type === 'hero' ? 'text-h1' : 'text-subtitle-1 md:text-h2'}`}>
+          {title}
+        </div>
+        <div className="text-body-regular text-[#404040] mt-10">{description}</div>
+        <div className={`${button === 'true' ? 'block' : 'hidden'} mt-10`}>
+          <Start text={buttonText} />
+        </div>
+        <div>
+          <Link href={redirect}>
+            <Button type="submit" className="mt-12">
+              {buttonTitle}
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <div className="text-body-regular shrink-0 basis-6/12 flex justify-center">
+        <img src={image} className="w-max md:w-auto" />
+      </div>
+    </section>
+  )
+}

pages/404.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import Navbar from '@/components/Navbar';
+import ImageWithButton from '@/components/ImageWithButton';
+
+export default function NotFound() {
+  useEffect(() => {
+    // Add class to body to hide overflow when component mounts
+    document.body.classList.add('noscroll');
+    // Remove class from body to restore overflow when component unmounts
+    return () => {
+      document.body.classList.remove('noscroll');
+    };
+  }, []);
+
+  return (
+    <div className="background-styling">
+      <Navbar />
+      <section className="lg:mt-[100px] md:mt-[35px] background-rectangle-wavy md:hidden xl:block mdm:mt-36">
+        <div className="text-center">
+          <ImageWithButton  
+            title="The page you're looking for doesn't exist."
+            description="Try going back to the previous page or visit our homepage."
+            image="/png/404.png"
+            redirect="/"
+            buttonTitle="Go to homepage"
+          />
+        </div>
+      </section>
+    </div>
+  )
+}

styles/globals.css

@@ -11,6 +11,11 @@
   @apply text-[#131313];
 }
 
+.noscroll {
+  overflow: hidden;
+}
+
+
 .text-dark-gray {
   @apply text-[#404040];
 }