add popup welcome on first visit

src/pages/Home.vue

@@ -1,10 +1,21 @@
 <template>
-  <component-debug :component="this">
-  </component-debug>
+  <div class="view-home">
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'Home'
+  name: 'Home',
+
+  data () {
+    return {
+    }
+  },
+
+  created () {
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+</style>

src/pages/Introduction.vue

@@ -1,14 +1,27 @@
 <template>
-  <b-overlay
-    class="intro"
-    :show="page === undefined"
-    z-index="0"
-  >
-    <page-view v-if="page" :page="page" slug="intro" />
-  </b-overlay>
+  <div class="view-introduction" :class="{ 'overflow-hidden': visited === false }">
+    <b-overlay
+      class="intro"
+      :show="page === undefined"
+      z-index="0"
+    >
+      <page-view v-if="page" :page="page" slug="intro" />
+    </b-overlay>
+
+    <div v-if="visited === false" class="page-popup">
+      <div class="page-popup-container h-100">
+        <b-overlay :show="popup === undefined" z-index="0" class="h-100">
+          <button-close @click="onPopupClose()" />
+          <page-view v-if="popup" :page="popup" slug="welcome" />
+        </b-overlay>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import { PageView } from '@/components/layouts'
 
 
@@ -21,20 +34,42 @@ export default {
 
   data () {
     return {
-      page: undefined
+      page: undefined,
+      popup: undefined
+    }
+  },
+
+  computed: {
+    ...mapGetters(['visited']),
+  },
+
+  methods: {
+    onPopupClose () {
+      this.$store.commit('SET_VISITED', true)
     }
   },
 
   async created () {
+    if (this.visited === false) {
+      this.popup = await this.$store.dispatch('QUERY_PAGE', 'welcome')
+    }
     this.page = await this.$store.dispatch('QUERY_PAGE', 'intro')
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.view-introduction {
+  height: 100%;
+  position: relative;
+
+  &.overflow-hidden {
+    overflow: hidden;
+  }
+}
+
 .intro {
-  min-height: 100%;
-  min-width: 100%;
+  height: 100%;
 
   .page-intro {
     font-family: $font-family-text;
@@ -45,4 +80,43 @@ export default {
     }
   }
 }
+
+.page-popup {
+  border: $line;
+  background-color: $white;
+  position: absolute;
+  width: 100%;
+
+  &-container {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  @include media-breakpoint-down($size-bp-down) {
+    top: -2px;
+    height: calc(100% + 2px);
+    margin-bottom: -2px;
+  }
+
+  @include media-breakpoint-up($size-bp) {
+    height: 80%;
+    width: 80%;
+    left: 10%;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+  &-container {
+    position: relative;
+
+    .btn-close {
+      position: sticky;
+      z-index: 2;
+      float: right;
+      right: $node-view-spacer-sm-x;
+      top: $node-view-spacer-sm-y;
+    }
+  }
+}
 </style>