added page 404

src/components/input/Button/index.tsx

@@ -15,7 +15,7 @@ type IButtonProps = DetailedHTMLProps<
   HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
-  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab';
+  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white';
   iconLeft?: IIcon;
   iconRight?: IIcon;
   title?: string;
@@ -48,8 +48,8 @@ const Button: FC<IButtonProps> = memo(
           disabled,
           stretchy,
           icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
-          has_icon_left: !!iconLeft,
+          [styles.has_icon_left]: !!iconLeft,
-          has_icon_right: !!iconRight,
+          [styles.has_icon_right]: !!iconRight,
           round,
         }),
       [

src/components/input/Button/styles.module.scss

@@ -104,12 +104,12 @@
     }
   }
 
-  &:global(.has_icon_left) {
+  &.has_icon_left {
     padding-left: $gap;
     padding-right: $gap;
   }
 
-  &:global(.has_icon_right) {
+  &.has_icon_right {
     padding-left: $gap;
     padding-right: $gap;
   }
@@ -124,6 +124,16 @@
     }
   }
 
+  &.outline-white {
+    background: transparent;
+    box-shadow: inset transparentize(white, 0) 0 0 0 2px;
+    color: transparentize(white, 0);
+
+    svg {
+      fill: transparentize(white, 0);
+    }
+  }
+
   &.gray {
     background: lighten($content_bg, 8%);
   }
@@ -191,12 +201,17 @@
 
 .giant {
   height: 50px;
-  padding: 0 15px;
+  padding: 0 30px;
   min-width: 50px;
 
   &:global(.round) {
     border-radius: 25px;
   }
+
+  &.has_icon_left {
+    padding-left: 20px;
+    padding-right: 30px;
+  }
 }
 
 .disabled {

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: $font_boris;
-  font-size: 72px;
   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;
+}

src/pages/404.tsx

@@ -0,0 +1,7 @@
+import { NotFoundLayout } from '~/layouts/NotFoundLayout';
+
+const NotFoundPage = () => {
+  return <NotFoundLayout />;
+};
+
+export default NotFoundPage;

src/styles/_fonts.scss

@@ -39,3 +39,4 @@ $font_8_semibold: $semibold 8px $font;
 
 $font_cell_title: $font_24_semibold;
 $font_hero_title: $bold 40px $font;
+$font_boris: $bold 72px $font;

src/styles/_global.scss

@@ -161,3 +161,7 @@ p {
     margin-bottom: 0;
   }
 }
+
+#__next {
+  min-height: 100vh;
+}

yarn.lock

@@ -2300,9 +2300,9 @@ react-dom@^17.0.2:
     scheduler "^0.20.2"
 
 react-dropzone@^11.4.2:
-  version "11.5.1"
+  version "11.5.3"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.5.1.tgz#f4d664437bf8af6acfccbf5040a9890c6780a49f"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.5.3.tgz#757d4980fcae839896a894e41d3e72df04981f86"
-  integrity sha512-eNhttdq4ZDe3eKbXAe54Opt+sbtqmNK5NWTHf/l5d+1TdZqShJ8gMjBrya00qx5zkI//TYxRhu1d9pemTgaWwg==
+  integrity sha512-68+T6sWW5L89qJnn3SD1aRazhuRBhTT9JOI1W8vI5YWsfegM4C7tlGbPH1AgEbmZY5s8E8L0QhX0e3VdAa0KWA==
   dependencies:
     attr-accept "^2.2.1"
     file-selector "^0.2.2"