Merge pull request #71 from Quiddlee/feat/add_404_page

Feat/add 404 page

src/pages/Page404.tsx

@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom';
+
+import ROUTES from '@/shared/constants/routes';
+
+const Page404 = () => {
+  return (
+    <section className="flex h-full w-full items-center justify-center">
+      <div className="mx-4 w-full max-w-[500px] rounded-md bg-surface-container p-8 text-center text-xl text-on-surface">
+        <p className="leading-10">
+          The route you are trying to reach does not exist <span className="text-4xl">🤷‍♂️</span>
+        </p>
+        <p>
+          Try to go{' '}
+          <Link className="text-primary" to={ROUTES.WELCOME_PAGE}>
+            Home
+          </Link>{' '}
+          instead
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default Page404;

src/router/router.tsx

@@ -3,6 +3,7 @@ import { createHashRouter } from 'react-router-dom';
 import ErrorFallback from '@/components/ErrorFallback/ErrorFallback';
 import MainLayout from '@/layouts/MainLayout';
 import LoginPage from '@/pages/LoginPage';
+import Page404 from '@/pages/Page404';
 import SettignsPage from '@/pages/SettingsPage';
 import SignUpPage from '@/pages/SignUpPage';
 import WelcomePage from '@/pages/WelcomePage';
@@ -66,6 +67,10 @@ export const routes = [
           // </AuthAllowedOnly>
         ),
       },
+      {
+        path: '*',
+        element: <Page404 />,
+      },
     ],
   },
 ];