Add a new 404 page, separate from error page

packages/frontend/src/navigation/Routes.tsx

@@ -6,7 +6,7 @@ import { ActiveTokenSet, DecodedAccessToken } from '@/model/auth/auth';
 import { MainLayout } from '../layouts/MainLayout';
 
 const ActivatePage = React.lazy(() => import('@/pages/Activate/ActivatePage'));
-const ErrorPage = React.lazy(() => import('@/pages/ErrorPage'));
+const NotFoundPage = React.lazy(() => import('@/pages/NotFoundPage'));
 
 export const Routes = (): JSX.Element => {
   const [tokenSet, setTokenSet] = useRecoilState(ActiveTokenSet);
@@ -26,7 +26,7 @@ export const Routes = (): JSX.Element => {
         <ActivatePage />
       </Route>
       <Route exact path="/404">
-        <ErrorPage error={{ message: 'Not found' }} />
+        <NotFoundPage />
       </Route>
 
       <MainLayout />

packages/frontend/src/pages/NotFoundPage.tsx

@@ -0,0 +1,26 @@
+import { faHeartCrack } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'react-router-dom';
+
+const NotFoundPage = (): JSX.Element => {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="flex flex-col gap-4 text-2xl text-center">
+        <FontAwesomeIcon
+          icon={faHeartCrack}
+          size="3x"
+          className="text-themecolor-3"
+        />
+        <div className="font-semibold">
+          We couldn&apos;t find what you were looking for
+        </div>
+        <div>
+          <Link to="/">Go to start page</Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default NotFoundPage;