lost page

src/containers/main/MainLayout/styles.scss

@@ -6,7 +6,7 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
-  min-height: 100vh;
+  flex: 1;
 
   @include tablet {
     padding: 0;

src/containers/pages/ErrorNotFound/index.tsx

@@ -1,16 +1,16 @@
 import React, { FC } from 'react';
 import styles from './styles.scss';
+import { createPortal } from 'react-dom';
+import { GodRays } from '~/components/main/GodRays';
 
-interface IProps {}
-
-const ErrorNotFound: FC<IProps> = ({}) => (
-  <div className={styles.wrap}>
-    <div className={styles.content}>
-      <div className={styles.sign}>НЕ НАЙДЕН</div>
-      <div>Нам очень жаль.</div>
-    </div>
-    <div className={styles.image} />
-  </div>
-);
+const ErrorNotFound: FC<{}> = () =>
+  createPortal(
+    <div className={styles.wrap}>
+      <GodRays />
+      <h2 className={styles.sign}>Страница утеряна</h2>
+      <div>Нам очень жаль</div>
+    </div>,
+    document.body
+  );
 
 export { ErrorNotFound };

src/containers/pages/ErrorNotFound/styles.scss

@@ -3,25 +3,24 @@
 
   flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
   background: $content_bg;
   border-radius: $radius;
-}
-
-.content {
-  flex: 2;
-  padding: $gap * 4;
-}
-
-.image {
-  flex: 1 1;
-  // background: red;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding-top: 120px;
   display: flex;
-  border-radius: 0 $radius $radius 0;
-}
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
 
-.sign {
-  // font: $font_24_semibold;
-  // font-size: 72px;
+  h2 {
+    text-transform: uppercase;
+    margin-bottom: $gap;
+  }
 }