Client 404 Page (#9093)

* fix z-index of footer

* 404 page

* fixes

website/client/components/404.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+.row
+  .col-12.text-center
+    // @TODO i18n. How to setup the strings with the router-link inside?
+    img.not-found-img(src='~assets/images/404.png')
+    h1.not-found Sometimes even the bravest adventurer gets lost. 
+    h2.not-found Looks like this link is broken or the page may have moved, sorry! 
+    h2.not-found Head back to the <router-link to="/">Homepage</router-link> or <router-link :to="contactUsLink">Contact Us</router-link> about the issue.
+</template>
+
+<script>
+import { mapState } from 'client/libs/store';
+
+export default {
+  computed: {
+    ...mapState(['isUserLoggedIn']),
+    contactUsLink () {
+      if (this.isUserLoggedIn) {
+        return {name: 'guild', params: {groupId: '5481ccf3-5d2d-48a9-a871-70a7380cee5a'} };
+      } else {
+        return {name: 'contact'};
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~client/assets/scss/colors.scss';
+
+.col-12 {
+  margin-bottom: 120px;
+}
+
+.not-found-img {
+  margin-top: 152px;
+  margin-bottom: 42px;
+}
+
+h1.not-found {
+  line-height: 1.33;
+  color: $purple-200;
+  margin-bottom: 8px;
+  font-weight: normal;
+  margin-top: 0px;
+}
+
+h2.not-found {
+  line-height: 1.4;
+  font-weight: normal;
+  color: $gray-200;
+  margin-bottom: 0px;
+  margin-top: 0px;
+}
+</style>

website/client/components/appFooter.vue

@@ -119,6 +119,7 @@
     padding-top: 3em;
     margin: 0;
     color: #878190;
+    z-index: 99;
 
     a {
       color: #878190;

website/client/router.js

@@ -85,6 +85,8 @@ const QuestsPage = () => import(/* webpackChunkName: "shops-quest" */'./componen
 const SeasonalPage = () => import(/* webpackChunkName: "shops-seasonal" */'./components/shops/seasonal/index');
 const TimeTravelersPage = () => import(/* webpackChunkName: "shops-timetravelers" */'./components/shops/timeTravelers/index');
 
+import NotFoundPage from './components/404';
+
 Vue.use(VueRouter);
 
 const router = new VueRouter({
@@ -253,6 +255,7 @@ const router = new VueRouter({
         { name: 'pressKit', path: 'press-kit', component: PressKitPage, meta: {requiresLogin: false}},
         { name: 'privacy', path: 'privacy', component: PrivacyPage, meta: {requiresLogin: false}},
         { name: 'terms', path: 'terms', component: TermsPage, meta: {requiresLogin: false}},
+        { name: 'notFound', path: 'not-found', component: NotFoundPage, meta: {requiresLogin: false} },
       ],
     },
     {
@@ -263,6 +266,7 @@ const router = new VueRouter({
         { name: 'contributors', path: 'contributors', component: HeroesPage },
       ],
     },
+    { path: '*', redirect: { name: 'notFound' } },
   ],
 });