From 62338a5ddb84b87ff39fda1e30ad9fc1d56ded62 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 7 Jul 2020 09:42:03 +0200
Subject: [PATCH] Add onboarding page with first layout implementation

---
 client/src/App.vue                 |  2 +
 client/src/layouts/BlankLayout.vue | 14 +++++++
 client/src/pages/onboarding.vue    | 67 ++++++++++++++++++++++++++++++
 client/src/router/index.js         |  7 ++++
 4 files changed, 90 insertions(+)
 create mode 100644 client/src/layouts/BlankLayout.vue
 create mode 100644 client/src/pages/onboarding.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 21e500bd..acbc6700 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -20,6 +20,7 @@
   import SimpleLayout from '@/layouts/SimpleLayout';
   import FullScreenLayout from '@/layouts/FullScreenLayout';
   import PublicLayout from '@/layouts/PublicLayout';
+  import BlankLayout from '@/layouts/BlankLayout';
   import Modal from '@/components/Modal';
   import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
   import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
@@ -48,6 +49,7 @@
       SimpleLayout,
       FullScreenLayout,
       PublicLayout,
+      BlankLayout,
       Modal,
       NewContentBlockWizard,
       EditContentBlockWizard,
diff --git a/client/src/layouts/BlankLayout.vue b/client/src/layouts/BlankLayout.vue
new file mode 100644
index 00000000..b6652eaf
--- /dev/null
+++ b/client/src/layouts/BlankLayout.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="blank-layout">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="scss">
+  .blank-layout {
+    /*
+      For IE11
+    */
+    display: flex;
+  }
+</style>
diff --git a/client/src/pages/onboarding.vue b/client/src/pages/onboarding.vue
new file mode 100644
index 00000000..06ca0f2b
--- /dev/null
+++ b/client/src/pages/onboarding.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="onboarding">
+    <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>
+      <a class="onboarding__secondary-link">Einführung überspringen</a>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Logo from '@/components/icons/Logo';
+
+  export default {
+    components: {
+      Logo
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .onboarding {
+    background-color: $color-brand;
+    padding-left: 30vw;
+    display: flex;
+
+    &__content {
+      background-color: $color-white;
+      padding: 2*$large-spacing;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__logo {
+      width: 300px;
+      height: 50px;
+      margin-bottom: 70px;
+    }
+
+    &__heading {
+      @include heading-2;
+    }
+
+    &__claim {
+      @include heading-2;
+      margin-bottom: 70px;
+    }
+
+    &__button {
+      @include regular-text;
+      flex-grow: 0;
+      align-self: flex-start;
+    }
+    &__secondary-link {
+      margin-top: auto;
+      @include inline-title;
+    }
+  }
+</style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 58f96b2e..d6438859 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -39,6 +39,7 @@ import oldClasses from '@/pages/oldClasses';
 import createClass from '@/pages/createClass';
 import showCode from '@/pages/showCode';
 import news from '@/pages/news';
+import onboarding from '@/pages/onboarding';
 
 import store from '@/store/index';
 
@@ -192,6 +193,12 @@ const routes = [
     component: news,
     name: 'news'
   },
+  {
+    path: '/onboarding',
+    component: onboarding,
+    name: 'onboarding',
+    meta: {layout: 'blank'}
+  },
   {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];