add "welcome" page

src/components/welcome/WelcomeSlide/index.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { Filler } from '~/components/containers/Filler';
+import { Container } from '~/containers/main/Container';
+import { useAuth } from '~/hooks/auth/useAuth';
+import markdown from '~/styles/common/markdown.module.scss';
+
+import { WelcomeSlideWrapper } from '../WelcomeSlideWrapper';
+
+import styles from './styles.module.scss';
+
+interface WelcomeSlideProps {}
+
+const WelcomeSlide: FC<WelcomeSlideProps> = () => {
+  const { isUser } = useAuth();
+  return (
+    <WelcomeSlideWrapper color="#403344">
+      <Container className={styles.wrap}>
+        <div className={styles.content}>
+          <Filler />
+          <div className={classNames(markdown.wrapper, styles.left)}>
+            <h1>Добро пожаловать!</h1>
+
+            <p>
+              <strong>Убежище</strong> - небольшой коллективный блог из глубин
+              интернета. Нашу тематику можно описать как{' '}
+              <strong>
+                меланхоличное исследование мира вокруг и внутри себя
+              </strong>
+              .
+            </p>
+
+            <p>
+              Мы существуем уже 13 лет, поэтому здесь можно увидеть и посты с
+              подростковой хандрой, и со старческим брюзжанием, доносящимся со
+              стороны кресла у камина.
+            </p>
+
+            {!isUser && (
+              <p>
+                Регистрация открыта, поэтому не стесняйся, заходи, устраивайся
+                поудобнее.
+              </p>
+            )}
+          </div>
+          <Filler />
+        </div>
+      </Container>
+    </WelcomeSlideWrapper>
+  );
+};
+
+export { WelcomeSlide };

src/components/welcome/WelcomeSlide/styles.module.scss

@@ -0,0 +1,28 @@
+@import 'src/styles/variables';
+
+.content {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  margin: auto;
+}
+
+.left {
+  @include blur();
+
+  flex: 0 1 440px;
+  padding: $gap $gap * 2 $gap * 2;
+  border-radius: $radius;
+  line-height: 1.25em;
+
+  h1 {
+    text-transform: uppercase;
+  }
+}