added page 404

src/layouts/BorisLayout/styles.module.scss

@@ -76,8 +76,7 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
-  font: $font_48_bold;
-  font-size: 72px;
+  font: $font_boris;
   line-height: 0.95em;
   flex-direction: column;
   padding: 0 0 $gap * 2;

src/layouts/NotFoundLayout/index.tsx

@@ -0,0 +1,40 @@
+import React, { useCallback, VFC } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { Button } from '~/components/input/Button';
+import { URLS } from '~/constants/urls';
+
+import styles from './styles.module.scss';
+
+interface NotFoundLayoutProps {}
+
+const NotFoundLayout: VFC<NotFoundLayoutProps> = () => {
+  const nextRouter = useRouter();
+  const goHome = useCallback(() => nextRouter.replace(URLS.BASE), [nextRouter]);
+
+  return (
+    <div className={styles.background}>
+      <div className={styles.wrap}>
+        <div className={styles.block}>
+          <div className={styles.text}>
+            <h1>Потерян навсегда</h1>
+            <p className={styles.caption}>Этой страницы никогда не существовало.</p>
+
+            <Button
+              color="outline-white"
+              size="giant"
+              className={styles.button}
+              iconLeft="left"
+              onClick={goHome}
+            >
+              Пойдём домой
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { NotFoundLayout };

src/layouts/NotFoundLayout/styles.module.scss

@@ -0,0 +1,78 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: #0b0b28 url('/images/muro_is_lost.svg') 50% 100% no-repeat;
+  background-size: cover;
+  z-index: 0;
+
+  @media (orientation: portrait) {
+    background-size: auto 50vh;
+  }
+}
+
+.wrap {
+  position: absolute;
+  z-index: 10;
+  height: 100%;
+  width: 100%;
+}
+
+.block {
+  @include container;
+
+  margin: auto;
+  height: 100%;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  width: 100%;
+  max-width: 400px;
+  padding-bottom: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  @include tablet {
+    padding: 0 $gap 75% $gap;
+    text-align: center;
+  }
+
+  @media (orientation: portrait) {
+    align-items: center;
+  }
+
+  h1 {
+    font: $font_boris;
+    line-height: 1em;
+
+    @include tablet {
+      font-size: 32px;
+      line-height: 1.4em;
+    }
+  }
+}
+
+.caption {
+  font: $font_24_regular;
+  line-height: 1.5em;
+  margin-top: 1em;
+
+  @include tablet {
+    font: $font_14_regular;
+    line-height: 2em;
+  }
+}
+
+button.button {
+  opacity: 0.5;
+  margin-top: 30px;
+}