Added the 404 page

src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import { NotFoundOverlay } from 'components';
+
+const NotFoundPage = () => <NotFoundOverlay>Page not found</NotFoundOverlay>;
+
+export default NotFoundPage;

src/components/NotFoundOverlay/NotFoundOverlay.module.css

@@ -0,0 +1,15 @@
+.NotFoundOverlay {
+  margin: 5% 1rem 1rem;
+  text-align: center;
+  user-select: none;
+}
+
+.NotFoundOverlayImage {
+  border-radius: 100%;
+  height: auto;
+  max-width: 100%;
+}
+
+.NotFoundOverlayText {
+  margin-top: 1rem;
+}

src/components/NotFoundOverlay/NotFoundOverlay.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import type { PropsWithChildren } from 'react';
+import image from './NotFoundOverlay.image.png';
+import styles from './NotFoundOverlay.module.css';
+
+export const NotFoundOverlay = (props: PropsWithChildren) => (
+  <div className={styles.NotFoundOverlay}>
+    <Image
+      alt="Not Found"
+      className={styles.NotFoundOverlayImage}
+      draggable={false}
+      height={400}
+      src={image}
+      width={400}
+    />
+    <h3 className={styles.NotFoundOverlayText}>{props.children}</h3>
+  </div>
+);

src/components/NotFoundOverlay/index.ts

@@ -0,0 +1 @@
+export * from 'components/NotFoundOverlay/NotFoundOverlay';

src/components/index.ts

@@ -15,6 +15,7 @@ export * from './InfoSection';
 export * from './Input';
 export * from './Layout';
 export * from './NavigationRail';
+export * from './NotFoundOverlay';
 export * from './Option';
 export * from './ReserveFishGrid';
 export * from './ReserveInfo';