add "welcome" page

src/components/welcome/HistorySlide/index.tsx

@@ -0,0 +1,95 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import { WelcomeSlideWrapper } from '../WelcomeSlideWrapper';
+
+import styles from './styles.module.scss';
+
+const HistorySlide = () => {
+  return (
+    <WelcomeSlideWrapper color="#334044">
+      <div className={styles.wrapper}>
+        <Swiper
+          slidesPerView="auto"
+          observeSlideChildren
+          observeParents
+          observer
+          resizeObserver
+          watchOverflow
+          spaceBetween={10}
+        >
+          <SwiperSlide className={styles.card}>
+            <h2>Сегодня</h2>
+            Убежище поддерживается и регулярно обновляется. Часто, при очередном
+            Хроническом Обострении Хандры Роботов внезапно появляются новые
+            штуки и контент.
+          </SwiperSlide>
+
+          <SwiperSlide className={styles.card}>
+            <h2>2009</h2>
+            Появилась концепция сайта как он есть сейчас. Он был написан на
+            примитивных инструментах, популярных в двухтысячные и был
+            значительно более населённым.
+          </SwiperSlide>
+          <SwiperSlide className={styles.card}>
+            <h2>2008</h2>
+            <p>
+              Убежище появилось из идеи создать сайт, посвященный тяжёлой
+              музыке. Он должен был называться &laquo;Metal Vault&raquo;.
+            </p>
+            <p>
+              Эта идея не закончилась ничем серьёзным, но именно на него
+              переехали блоги и аудитория с предыдущих версий сайта, начавшая
+              создавать своё уникальное сообщество.
+            </p>
+          </SwiperSlide>
+          <SwiperSlide className={styles.card}>
+            <h2>2006</h2>
+            <p>
+              Во времена развития локальных сетей сайт назывался сначала
+              Blashyrkh и содержал только текстовые записи.
+            </p>
+
+            <p>
+              Затем он поменял дизайн на более простой и начал называться
+              Gotham, сменив тематику на посвященную готической музыке. Именно в
+              этот момент он впервые появился в интернете.
+            </p>
+          </SwiperSlide>
+          <SwiperSlide className={styles.card}>
+            <h2>2005</h2>
+
+            <p>
+              Появилась первая веб-версия сайта. Чтобы попасть на неё, нужно
+              было позвонить на один из двух серверов модемом.
+            </p>
+
+            <p>
+              На сайте хранились файлы, была возможность добавлять тексты и
+              сидеть в чате с оператором станции.
+            </p>
+          </SwiperSlide>
+          <SwiperSlide className={styles.card}>
+            <h2>2003</h2>
+
+            <p>
+              Существовала текстовая версия, которая называлась Private BBS.
+            </p>
+
+            <p>
+              В те времена инернет был очень дорогим и люди соединяли
+              компьютеры, звоня друг другу с помощью модема.
+            </p>
+
+            <p>
+              Станции, работавшие постоянно, публиковались в еженедельном
+              списке, но так же были закрытые станции, номер телефона на которых
+              был помечен как &laquo;Private&raquo;
+            </p>
+          </SwiperSlide>
+        </Swiper>
+      </div>
+    </WelcomeSlideWrapper>
+  );
+};
+
+export { HistorySlide };

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

@@ -0,0 +1,15 @@
+@import 'src/styles/variables';
+
+.card {
+  @include blur();
+
+  flex: 1;
+  padding: $gap;
+  border-radius: $radius;
+  font-size: 0.9em;
+  flex: 0 0 360px;
+}
+
+.wrapper {
+  overflow: hidden;
+}

src/components/welcome/PersonsSlide/index.tsx

@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+
+import { Container } from '~/containers/main/Container';
+import markdown from '~/styles/common/markdown.module.scss';
+
+import { WelcomeSlideWrapper } from '../WelcomeSlideWrapper';
+
+import styles from './styles.module.scss';
+
+const PersonsSlide = () => (
+  <WelcomeSlideWrapper color="#333344">
+    <Container className={styles.container}>
+      <div className={styles.cards}>
+        <div className={classNames(styles.card, markdown.wrapper)}>
+          <h2>Boris</h2>
+          <p>
+            Единственный оставшийся ремонтный робот. Круглый, немногословный и
+            добродушно-железный.
+          </p>
+          <p>
+            Благодаря своим небольшим размерам и меланхоличному настроению,
+            часто бывает замечен в заброшенных секторах Убежища собирающим
+            записи, созданные до Катаклизма.
+          </p>
+        </div>
+
+        <div className={classNames(styles.card, markdown.wrapper)}>
+          <h2>Юниты</h2>
+          <p>
+            Обитатели и персонал Убежища, состоящий из людей, притворяющихся
+            роботами и роботов, притворяющихся людьми.
+          </p>
+          <p>
+            Юниты носят одинаковые защитные костюмы и маски, в которых
+            выбираются из Убежища для исследования окружающих территорий, поиска
+            продовальствия и артефактов.
+          </p>
+        </div>
+
+        <div className={classNames(styles.card, markdown.wrapper)}>
+          <h2>Muro</h2>
+          <p>
+            Доподлинно неизвестно, является ли Muro одним из юнитов, или группой
+            существ, поддерживающих работу Убежища.
+          </p>
+          <p>
+            Бывает замечен в отдалённых коридорах меняющим лампочку или паяющим
+            какие-то детальки в очередном щитке.
+          </p>
+        </div>
+      </div>
+    </Container>
+  </WelcomeSlideWrapper>
+);
+
+export { PersonsSlide };

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

@@ -0,0 +1,21 @@
+@import 'src/styles/variables';
+
+.container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+
+.cards {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: $gap;
+}
+
+.card {
+  @include blur;
+
+  border-radius: $radius;
+  padding: $gap $gap * 2 $gap * 2;
+}

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;
+  }
+}

src/components/welcome/WelcomeSlideWrapper/index.tsx

@@ -0,0 +1,31 @@
+import { FC, PropsWithChildren, useMemo } from 'react';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  background?: string;
+  color?: string;
+}
+
+const WelcomeSlideWrapper: FC<PropsWithChildren<Props>> = ({
+  children,
+  color,
+  background = '',
+}) => {
+  const style = useMemo(
+    () =>
+      background || color
+        ? {
+            backgroundImage: background && `url(${background})`,
+            backgroundColor: color,
+          }
+        : undefined,
+    [background, color],
+  );
+  return (
+    <div className={styles.layout} style={style}>
+      {children}
+    </div>
+  );
+};
+export { WelcomeSlideWrapper };

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

@@ -0,0 +1,9 @@
+@import 'src/styles/variables';
+
+.layout {
+  min-height: 100vh;
+  width: 100vw;
+  background-size: cover;
+  background-position: 50% 50%;
+  padding: $header_height 0;
+}

src/containers/boris/BorisSuperpowers/index.tsx

@@ -1,8 +1,9 @@
 import { FC } from 'react';
 
+import { Anchor } from '~/components/common/Anchor';
 import { Card } from '~/components/containers/Card';
 import { Group } from '~/components/containers/Group';
-import { Markdown } from '~/components/containers/Markdown';
+import markdown from '~/styles/common/markdown.module.scss';
 
 export interface BorisSuperpowersProps {}
 
@@ -12,12 +13,23 @@ const BorisSuperpowers: FC<BorisSuperpowersProps> = () => {
       <Group>
         <h3>Сейчас в разработке</h3>
 
-        <Markdown>
+        <div className={markdown.wrapper}>
-          - Раздел [рум](/room) в начальной стадии, смотрю как будет работать
+          <ul>
-          концепт. Суть идеи можно посмотреть на
+            <li>
-          [гитхабе](https://github.com/muerwre/vault-frontend/issues/158).
+              Раздел <Anchor href="/room">рум</Anchor> в начальной стадии,
-          Предложения можно оставлять здесь.
+              смотрю как будет работать концепт. Суть идеи можно посмотреть на{' '}
-        </Markdown>
+              <Anchor href="https://github.com/muerwre/vault-frontend/issues/158">
+                гитхабе
+              </Anchor>
+              . Предложения можно оставлять здесь.
+            </li>
+            <li>
+              Раздел <Anchor href="/welcome">&laquo;где я?&raquo;</Anchor>,
+              немного рассказывающий историю и мифологию Убежища. Ждёт текстов и
+              иллюстраций.
+            </li>
+          </ul>
+        </div>
       </Group>
     </Card>
   );

src/containers/main/BottomContainer/styles.module.scss

@@ -1,7 +1,7 @@
 @import 'src/styles/variables';
 
 .wrap {
-  position: sticky;
+  position: fixed;
   bottom: 0;
   pointer-events: none;
   touch-action: none;

src/layouts/BorisLayout/styles.module.scss

@@ -5,6 +5,7 @@
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
+  padding-bottom: $bar_height + $gap;
 }
 
 .grid {

src/layouts/MainLayout/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrapper {
   width: 100%;
@@ -15,7 +15,6 @@
   position: relative;
   width: 100%;
   display: flex;
-  padding-bottom: 29px;
   flex-direction: column;
   align-items: center;
 }

src/layouts/NodeLayout/styles.module.scss

@@ -6,6 +6,7 @@
   justify-content: flex-start;
   align-items: center;
   flex-direction: column;
+  margin-bottom: $bar_height + $gap;
 }
 
 .content {

src/layouts/WelcomeLayout/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { HistorySlide } from '~/components/welcome/HistorySlide';
+import { PersonsSlide } from '~/components/welcome/PersonsSlide';
+import { WelcomeSlide } from '~/components/welcome/WelcomeSlide';
+
+import styles from './styles.module.scss';
+
+const WelcomeLayout = () => (
+  <div className={styles.layout}>
+    <WelcomeSlide />
+    <HistorySlide />
+    <PersonsSlide />
+  </div>
+);
+
+export { WelcomeLayout };

src/layouts/WelcomeLayout/styles.module.scss

@@ -0,0 +1,5 @@
+@import 'src/styles/variables';
+
+.layout {
+  margin-top: -$header_height;
+}

src/pages/welcome/index.tsx

@@ -0,0 +1,5 @@
+import { WelcomeLayout } from '~/layouts/WelcomeLayout';
+
+const WelcomePage = () => <WelcomeLayout />;
+
+export default WelcomePage;