Add hello illustration

client/src/layouts/SplitLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="['split-view', {'split-view--illustration': illustration}]">
-    <div class="split-view__illustration">
+    <div :class="['split-view__illustration', illustrationAlignment]">
       <component :is="illustration"/>
     </div>
     <div class="split-view__content">
@@ -13,17 +13,22 @@
   import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
   import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
   import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
+  import HelloIllustration from '@/components/illustrations/HelloIllustration';
 
   export default {
     components: {
       contents: ContentsIllustration,
       portfolio: PortfolioIllustration,
-      rooms: RoomsIllustration
+      rooms: RoomsIllustration,
+      hello: HelloIllustration
     },
 
     computed: {
       illustration() {
         return this.$route.meta.illustration;
+      },
+      illustrationAlignment() {
+        return this.$route.meta.illustrationAlign ? `split-view__illustration--${this.$route.meta.illustrationAlign}` : '';
       }
     },
   };
@@ -59,6 +64,11 @@
       z-index: 1;
       display: none;
 
+      &--top {
+        align-self: start;
+        margin-top: $large-spacing;
+      }
+
       @include desktop {
         display: flex;
         justify-content: center;

client/src/pages/hello.vue

@@ -4,16 +4,6 @@
     data-cy="hello-page">
     <div class="about">
       <div class="about__logos">
-        <a
-          href="https://www.hep-verlag.ch/"
-          target="_blank">
-          <hep-logo class="about__logo-hep"/>
-        </a>
-        <a
-          href="https://www.ehb.swiss/"
-          target="_blank">
-          <ehb-logo class="about__logo-ehb"/>
-        </a>
       </div>
       <p class="about__text">mySkillbox ist ein Angebot des hep Verlags in
       Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für Berufsbildung.</p>
@@ -66,11 +56,14 @@
   import HepLogo from '@/components/icons/HepLogo';
   import EhbLogo from '@/components/icons/EhbLogo';
   import Logo from '@/components/icons/Logo';
+  import HelloIllustration from '@/components/illustrations/HelloIllustration';
+
 
   export default {
     mixins: [pageTitleMixin],
     components: {
       LoadingButton,
+      HelloIllustration,
       HepLogo,
       EhbLogo,
       Logo
@@ -121,21 +114,21 @@
       }
     }
 
-    &__logo-hep {
-      width: auto;
-      height: 30px;
-      margin-bottom: $large-spacing;
-
-      @include desktop {
-        width: 147px;
-        margin-bottom: 0;
-      }
-    }
-
-    &__logo-ehb {
-      width: 100px;
-      height: 30px;
-    }
+    //&__logo-hep {
+    //  width: auto;
+    //  height: 30px;
+    //  margin-bottom: $large-spacing;
+    //
+    //  @include desktop {
+    //    width: 147px;
+    //    margin-bottom: 0;
+    //  }
+    //}
+    //
+    //&__logo-ehb {
+    //  width: 100px;
+    //  height: 30px;
+    //}
   }
 
   .login-actions {

client/src/router/auth.routes.js

@@ -9,6 +9,8 @@ export default [
     meta: {
       layout: 'split',
       public: true,
+      illustration: 'hello',
+      illustrationAlign: 'top'
     },
   },
   {