Add onboarding sub-pages

client/src/pages/onboarding.vue

@@ -1,52 +1,119 @@
 <template>
-  <div class="onboarding">
+  <div :class="['onboarding', {'onboarding--illustration': illustration}]" >
+    <div class="onboarding__illustration">
+      <component :is="illustration" />
+    </div>
     <div class="onboarding__content">
-      <logo class="onboarding__logo"/>
-      <h1 class="onboarding__heading">Herzlich willkommen!</h1>
-
-      <p class="onboarding__claim">
-        Schauen Sie sich die Einführung an und lernen Sie mySkillbox kennen.
-      </p>
-      <a class="button onboarding__button button--primary button--big">Einführung starten</a>
+      <router-view/>
+      <router-link
+        :to="next"
+        class="onboarding__button button button--primary button--big">{{ nextLabel }}
+      </router-link>
       <a class="onboarding__secondary-link">Einführung überspringen</a>
     </div>
   </div>
 </template>
 
 <script>
-  import Logo from '@/components/icons/Logo';
+  import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
+  import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
+  import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
 
   export default {
     components: {
-      Logo
+      contents: ContentsIllustration,
+      portfolio: PortfolioIllustration,
+      rooms: RoomsIllustration
+    },
+
+    computed: {
+      next() {
+        return {
+          name: this.$route.meta.next
+        }
+      },
+      nextLabel() {
+        return this.$route.name === 'onboarding-start' ? 'Einführung starten' : 'Weiter'
+      },
+      illustration() {
+        return this.$route.meta.illustration
+      }
     }
   }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
   .onboarding {
     background-color: $color-brand;
-    padding-left: 30vw;
+
     display: flex;
+    position: relative;
+
+    &--illustration {
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 50%;
+        background: $color-brand-dark;
+      }
+    }
+
+    &__illustration {
+      width: 30vw;
+      min-width: 400px;
+      align-self: center;
+      background-color: $color-brand;
+      z-index: 1;
+      display: none;
+
+      @include desktop {
+        display: block;
+      }
+    }
 
     &__content {
       background-color: $color-white;
-      padding: 2*$large-spacing;
+      padding: $medium-spacing;
       display: flex;
       flex-direction: column;
+      z-index: 1;
+
+      @include desktop {
+        padding: 2*$large-spacing;
+      }
     }
 
     &__logo {
       width: 300px;
       height: 50px;
-      margin-bottom: 70px;
+      margin-bottom: $large-spacing;
+
+      @include desktop {
+        margin-bottom: 70px;
+      }
+    }
+
+    &__page-subheading {
+      @include regular-text;
+      color: $color-brand;
+      margin-bottom: $small-spacing;
+    }
+
+    &__page-heading {
+      @include heading-2;
+      color: $color-brand;
+      margin-bottom: 2*$large-spacing;
     }
 
     &__heading {
       @include heading-2;
+      margin-bottom: $small-spacing;
     }
 
     &__claim {
@@ -54,14 +121,32 @@
       margin-bottom: 70px;
     }
 
+    &__paragraph {
+      @include regular-text;
+      margin-bottom: $medium-spacing;
+
+      &:last-of-type {
+        margin-bottom: 2*$large-spacing;
+      }
+    }
+
     &__button {
       @include regular-text;
       flex-grow: 0;
       align-self: flex-start;
+      min-width: 150px;
+      display: inline-flex;
+      box-sizing: border-box;
+      justify-content: center;
+      margin-bottom: $large-spacing;
     }
+
     &__secondary-link {
-      margin-top: auto;
       @include inline-title;
+
+      @include desktop {
+        margin-top: auto;
+      }
     }
   }
 </style>

client/src/pages/onboarding/start.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <logo class="onboarding__logo"/>
+    <h1 class="onboarding__heading">Herzlich willkommen!</h1>
+
+    <p class="onboarding__claim">
+      Schauen Sie sich die Einführung an und lernen Sie mySkillbox kennen.
+    </p>
+  </div>
+</template>
+
+<script>
+  import Logo from '@/components/icons/Logo';
+
+  export default {
+    components: {
+      Logo
+    }
+  }
+</script>

client/src/pages/onboarding/step1.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h3 class="onboarding__page-subheading">Einführung: Schritt 1 von 3</h3>
+    <h1 class="onboarding__page-heading">Ihr Lernbereich</h1>
+    <h2 class="onboarding__heading">Themen</h2>
+    <p class="onboarding__paragraph">In den «Themen» finden Sie aktuelle Module mit Aufträgen und Situationen.</p>
+    <h2 class="onboarding__heading">Instrumente</h2>
+    <p class="onboarding__paragraph">Die «Instrumente» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen. </p>
+    <h2 class="onboarding__heading">News</h2>
+    <p class="onboarding__paragraph">Unter «News» werden regelmässig Artikel zu aktuellen Ereignissen veröffentlicht.</p>
+  </div>
+</template>

client/src/pages/onboarding/step2.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <h3 class="onboarding__page-subheading">Einführung: Schritt 2 von 3</h3>
+    <h1 class="onboarding__page-heading">Ihr Bereich für Zusammenarbeit</h1>
+    <h2 class="onboarding__heading">Räume</h2>
+    <p class="onboarding__paragraph">In den Räumen können Sie in grossen und kleinen Gruppen zusammenarbeiten und Beiträge teilen.</p>
+  </div>
+</template>

client/src/pages/onboarding/step3.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <h3 class="onboarding__page-subheading">Einführung: Schritt 3 von 3</h3>
+    <h1 class="onboarding__page-heading">Ihr persönlicher Bereich</h1>
+    <h2 class="onboarding__heading">Portfolio</h2>
+    <p class="onboarding__paragraph">Dokumentieren Sie Ihre Arbeiten und Projekte. Reflektieren Sie Ihr Vorgehen.</p>
+  </div>
+</template>

client/src/router/index.js

@@ -40,9 +40,17 @@ import createClass from '@/pages/createClass';
 import showCode from '@/pages/showCode';
 import news from '@/pages/news';
 import onboarding from '@/pages/onboarding';
+import onboardingStart from '@/pages/onboarding/start';
+import onboardingStep1 from '@/pages/onboarding/step1';
+import onboardingStep2 from '@/pages/onboarding/step2';
+import onboardingStep3 from '@/pages/onboarding/step3';
 
 import store from '@/store/index';
 
+const ONBOARDING_STEP_1 = 'onboarding-step-1';
+const ONBOARDING_STEP_2 = 'onboarding-step-2';
+const ONBOARDING_STEP_3 = 'onboarding-step-3';
+
 const routes = [
   {
     path: '/',
@@ -197,7 +205,47 @@ const routes = [
     path: '/onboarding',
     component: onboarding,
     name: 'onboarding',
-    meta: {layout: 'blank'}
+    children: [
+      {
+        path: '',
+        component: onboardingStart,
+        name: 'onboarding-start',
+        meta: {
+          layout: 'blank',
+          next: ONBOARDING_STEP_1
+        },
+      },
+      {
+        path: 'learning',
+        component: onboardingStep1,
+        name: ONBOARDING_STEP_1,
+        meta: {
+          layout: 'blank',
+          next: ONBOARDING_STEP_2,
+          illustration: 'contents'
+        },
+      },
+      {
+        path: 'collaboration',
+        component: onboardingStep2,
+        name: ONBOARDING_STEP_2,
+        meta: {
+          layout: 'blank',
+          next: ONBOARDING_STEP_3,
+          illustration: 'rooms'
+        },
+      },
+      {
+        path: 'portfolio',
+        component: onboardingStep3,
+        name: ONBOARDING_STEP_3,
+        meta: {
+          layout: 'blank',
+          next: 'home',
+          illustration: 'portfolio'
+        },
+      },
+    ]
   },
   {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}