locale/en.json

@@ -10,6 +10,11 @@
         "disclaimer_5": "No banners or annoying popups. You can jerk off with no hassle!",
         "disclaimer_6": "You're choosing image over imagination. What if they're not in antithesis?"
     },
+    "NotFound": {
+        "uh_oh": "Uh Oh...",
+        "something_wrong": "Something went wrong :|",
+        "back_to_home": "Back to homepage"
+    },
     "Search": {
         "placeholder": "categories, pornostars, etc...",
         "submit": "Search"

locale/it.json

@@ -10,6 +10,11 @@
         "disclaimer_5": "Niente banner o popup fastidiosi. Puoi masturbarti in santa pace.",
         "disclaimer_6": "Stai preferendo l'immagine all'immaginazione. E se immagine e immaginazione non fossero in antitesi?"
     },
+    "NotFound": {
+        "uh_oh": "Uh Oh...",
+        "something_wrong": "Qualcosa è andato storto :|",
+        "back_to_home": "Torna alla home"
+    },
     "Search": {
         "placeholder": "categorie, pornostar, ecc...",
         "submit": "Cerca"

src/app/[locale]/404/page.tsx

@@ -0,0 +1,11 @@
+import Layout from "@/components/Layout";
+import NotFound from "@/components/Pages/NotFound";
+
+export default function NotFoundPage() {
+  
+  return (
+    <Layout>
+      <NotFound />
+    </Layout>
+  );
+}

src/components/Pages/NotFound/Msg/Msg.module.scss

@@ -0,0 +1,13 @@
+@import 'fontsize';
+
+.header {
+    font-size: $font-size-xlarge;
+}
+
+.msg {
+    font-size: $font-size-large;
+}
+
+.link {
+    color: var(--primary);
+}

src/components/Pages/NotFound/Msg/index.tsx

@@ -0,0 +1,22 @@
+import React, { } from 'react';
+
+import style from './Msg.module.scss';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+const Msg: React.FC = () => {
+
+    const t = useTranslations('NotFound');
+
+    return (
+        <div className={style.container}>
+            <div className={style.header}>{t('uh_oh')}</div>
+            <p className={style.msg}>{t('something_wrong')}</p>
+            <Link className={style.link} href="/">{t('back_to_home')}</Link>
+        </div>
+    );
+
+};
+
+export default Msg;

src/components/Pages/NotFound/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Header from '@/components/Layout/Header';
+import SearchBar from '@/components/Layout/SearchBar';
+import Msg from './Msg';
+
+const NotFound: React.FC = (props) => {
+
+  return (
+    <>
+      <Header />
+      <SearchBar />
+      <Msg />
+    </>
+  );
+};
+
+export default NotFound;