Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace

packages/app/pages/404/404.scss

@@ -0,0 +1,247 @@
+@import '~app/components/ui/fonts.scss';
+
+// Original: http://codepen.io/vanderlanth/pen/rxpNMY
+
+.page {
+  margin: 80px auto 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.loading {
+  width: 200px;
+  height: 100px;
+  margin-bottom: 50px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  animation: loadStab 1s ease-out infinite;
+}
+
+.cube {
+  width: 50px;
+  height: 50px;
+  background: white;
+  animation: cubeRotate 1s ease-out infinite;
+}
+
+.road {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background: white;
+  left: 0;
+  bottom: 0;
+  animation: roadStab 1s ease-out infinite;
+}
+
+@keyframes cubeRotate {
+  0% {
+    transform: rotate(0deg) translate3D(0, 0, 0);
+  }
+  65% {
+    transform: rotate(45deg) translate3D(0, -13px, 0);
+  }
+  90% {
+    transform: rotate(70deg) translate3D(0, -8px, 0);
+  }
+  100% {
+    transform: rotate(90deg) translate3D(0, 0, 0);
+  }
+}
+
+@keyframes roadStab {
+  0% {
+    transform: translate3D(0, 0, 0);
+  }
+  60% {
+    transform: translate3D(0, 2px, 0);
+  }
+  90% {
+    transform: translate3D(0, 4px, 0);
+  }
+  100% {
+    transform: translate3D(0, 0, 0);
+  }
+}
+
+@keyframes loadStab {
+  0% {
+    transform: translate3D(0, 0, 0);
+  }
+  60% {
+    transform: translate3D(0, -2px, 0);
+  }
+  95% {
+    transform: translate3D(0, -2px, 0);
+  }
+  100% {
+    transform: translate3D(0, 0, 0);
+  }
+}
+
+//------------------ MOUNTAINS ---------------------
+
+.rocks {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: -50px;
+  left: 0;
+  overflow: hidden;
+  animation: roadStab 1s ease-out infinite;
+}
+
+@mixin rock($rockName, $bottom, $delay) {
+  .#{$rockName} {
+    position: absolute;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 4px solid white;
+    bottom: $bottom;
+    right: -2%;
+    animation: rockTravelling 10s $delay ease-out infinite;
+  }
+}
+
+@include rock('rockOne', 23px, 0s);
+@include rock('rockTwo', 40px, 2s);
+@include rock('rockThree', 30px, 6s);
+@include rock('rockFour', 10px, 4s);
+@include rock('rockFive', 18px, 8s);
+
+@keyframes rockTravelling {
+  0% {
+    right: -2%;
+  }
+  10% {
+    right: 8%;
+  }
+  20% {
+    right: 18%;
+  }
+  30% {
+    right: 29%;
+  }
+  40% {
+    right: 40%;
+  }
+  50% {
+    right: 51%;
+  }
+  60% {
+    right: 62%;
+  }
+  70% {
+    right: 72%;
+  }
+  80% {
+    right: 82%;
+  }
+  90% {
+    right: 92%;
+  }
+  100% {
+    right: 102%;
+  }
+}
+
+//------------------ CLOUDS ---------------------
+
+.clouds {
+  width: 200%;
+  height: 200%;
+  animation: roadStab 1s ease-out infinite, cloudStab 1s ease-out infinite;
+  position: absolute;
+  bottom: -50px;
+  left: -50%;
+  overflow: hidden;
+}
+
+.cloud {
+  position: absolute;
+  will-change: animation;
+
+  background-image: url('./cloud.svg');
+  background-size: cover;
+}
+
+.cloudOne {
+  composes: cloud;
+
+  top: 5px;
+  width: 100px;
+  height: 32px;
+  animation: cloudTravelling 16s linear infinite;
+}
+
+.cloudTwo {
+  composes: cloud;
+
+  top: 65px;
+  right: -30%;
+  width: 50px;
+  height: 16px;
+  animation: cloudTravelling 21s 5s linear infinite;
+}
+
+.cloudThree {
+  composes: cloud;
+
+  top: 40px;
+  right: -30%;
+  width: 70px;
+  height: 22px;
+  animation: cloudTravelling 26s 11s linear infinite;
+}
+
+@keyframes cloudTravelling {
+  0% {
+    right: -30%;
+  }
+  100% {
+    right: 110%;
+  }
+}
+
+@keyframes cloudStab {
+  0% {
+    transform: translate3D(0, 0, 0);
+  }
+  60% {
+    transform: translate3D(0, 2px, 0);
+  }
+  85% {
+    transform: translate3D(0, 2px, 0);
+  }
+  100% {
+    transform: translate3D(0, 0, 0);
+  }
+}
+
+%text {
+  font-family: $font-family-title;
+  text-align: center;
+  padding: 0 10px;
+  line-height: 1.2;
+}
+
+.text {
+  @extend %text;
+
+  font-size: 24px;
+  margin-top: 25px;
+  color: #666;
+}
+
+.subText {
+  @extend %text;
+
+  font-size: 16px;
+  margin-top: 5px;
+  color: #9a9a9a;
+}

packages/app/pages/404/PageNotFound.intl.json

@@ -0,0 +1,6 @@
+{
+  "title": "Page not found",
+  "nothingHere": "This is not a place that you are looking for",
+  "returnToTheHomePage": "Try to go back to the {link}",
+  "homePage": "main page"
+}

packages/app/pages/404/PageNotFound.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { FooterMenu } from 'app/components/footerMenu';
+
+import { Link } from 'react-router-dom';
+import { FormattedMessage as Message } from 'react-intl';
+import Helmet from 'react-helmet';
+
+import styles from './404.scss';
+import messages from './PageNotFound.intl.json';
+import profileStyles from '../profile/profile.scss';
+
+export default function PageNotFound() {
+  return (
+    <div className={styles.page}>
+      <Message {...messages.title}>
+        {pageTitle => <Helmet title={pageTitle} />}
+      </Message>
+
+      <div className={styles.loading}>
+        <div className={styles.cube} />
+        <div className={styles.road} />
+        <div className={styles.rocks}>
+          <span className={styles.rockOne} />
+          <span className={styles.rockTwo} />
+          <span className={styles.rockThree} />
+          <span className={styles.rockFour} />
+          <span className={styles.rockFive} />
+        </div>
+        <div className={styles.clouds}>
+          <span className={styles.cloudOne} />
+          <span className={styles.cloudTwo} />
+          <span className={styles.cloudThree} />
+        </div>
+      </div>
+      <p className={styles.text}>
+        <Message {...messages.nothingHere} />
+      </p>
+      <p className={styles.subText}>
+        <Message
+          {...messages.returnToTheHomePage}
+          values={{
+            link: (
+              <Link to="/">
+                <Message {...messages.homePage} />
+              </Link>
+            ),
+          }}
+        />
+      </p>
+
+      <div className={profileStyles.footer}>
+        <FooterMenu />
+      </div>
+    </div>
+  );
+}

packages/app/pages/404/cloud.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="100px" height="32px" viewBox="0 0 100 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M26.0667904,10.4823748 L60.6679035,10.4823748 L57.3747681,10.4823748 C54.4805195,10.4823748 52.1335807,12.8293135 52.1335807,15.7235622 C52.1335807,18.6178108 54.4805195,20.9647495 57.3747681,20.9647495 L60.6679035,20.9647495 L26.0667904,20.9647495 L32.6994434,20.9647495 C35.593692,20.9647495 37.9406308,18.6178108 37.9406308,15.7235622 C37.9406308,12.8293135 35.593692,10.4823748 32.6994434,10.4823748 L26.0667904,10.4823748 L26.0667904,10.4823748 Z M0,26.2059369 C0,23.3116883 2.34693878,20.9647495 5.24118738,20.9647495 L69.7124304,20.9647495 C72.606679,20.9647495 74.9536178,23.3116883 74.9536178,26.2059369 C74.9536178,29.1001855 72.606679,31.4471243 69.7124304,31.4471243 L5.24118738,31.4471243 C2.34693878,31.4471243 0,29.1001855 0,26.2059369 L0,26.2059369 Z M16.7903525,5.24118738 C16.7903525,2.34693878 19.1372913,0 22.0315399,0 L94.7588126,0 C97.6530612,0 100,2.34693878 100,5.24118738 C100,8.13543599 97.6530612,10.4823748 94.7588126,10.4823748 L22.0315399,10.4823748 C19.1372913,10.4823748 16.7903525,8.13543599 16.7903525,5.24118738 L16.7903525,5.24118738 Z" id="Shape" stroke="none" fill="#FFFFFF" fill-rule="evenodd"></path>
+</svg>