404 error page

src/assets/index.tsx

@@ -109,3 +109,12 @@ export {
     MeetTheTeamBuildingLeft,
     MeetTheTeamBuildingRight,
 };
+
+/*
+ *
+ * 404 / Coming Soon SVGs
+ *
+ */
+import ExternalBalloon from './external/balloon.svg';
+
+export { ExternalBalloon };

src/pages/404.tsx

@@ -0,0 +1,43 @@
+import { ExternalBalloon, MeetTheTeamBuildingLeft } from "@assets";
+
+const ErrorPage: React.FC = () => {
+    return (
+        <section
+            className="stacked -mb-24 bg-cover relative"
+            style={{
+                background: "linear-gradient(180deg, #FDDDB7 0%, #CBAAF4 328.99%, #8B6AB6 494.83%)",
+            }}
+        >
+            <img
+                src={ExternalBalloon}
+                alt="Balloon"
+                className="absolute top-0 right-0 w-1/4 max-w-md"
+            />
+            <img
+                src={MeetTheTeamBuildingLeft}
+                alt="Building"
+                className="absolute bottom-0 left-0 w-1/4 max-w-md"
+            />
+            <div className="container mx-auto px-4 flex justify-center items-center min-h-screen">
+                <div className="text-center">
+                    <h2 className="font-bold text-white drop-shadow-md mb-4">
+                        404 Error
+                    </h2>
+
+                    <p className="text-white drop-shadow-md mb-4">
+                        Are you supposed to be here? 🤔
+                    </p>
+
+                    <a
+                        href="/"
+                        className="text-white drop-shadow-md underline hover:text-deepMarine hover:no-underline"
+                    >
+                        Return to the homepage
+                    </a>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export { ErrorPage };

src/pages/index.tsx

@@ -4,3 +4,10 @@
  *
  */
 export { Landing } from './Landing';
+
+/*
+ *
+ * @page 404
+ *
+ */
+export { ErrorPage } from './404';

src/utils/Router.tsx

@@ -1,12 +1,13 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { Landing } from '@pages'
+import { ErrorPage, Landing } from '@pages'
 
 const Router = () => (
-  <BrowserRouter>
-    <Routes>
-      <Route path="/" element={<Landing />} />
-    </Routes>
-  </BrowserRouter>
+    <BrowserRouter>
+        <Routes>
+            <Route path="/" element={<Landing />} />
+            <Route path="*" element={<ErrorPage />} />
+        </Routes>
+    </BrowserRouter>
 );
 
 export { Router };