Add tours page outline

client/layouts/dashboard.vue

@@ -176,7 +176,7 @@
         <a
         style="margin-right:.5rem !important;"
         class="text-indigo-600 flex flex-row items-center justify-center bg-indigo-100 hover:bg-indigo-200 rounded-full py-1 px-3 font-medium"
-        href="/dashboard/account"
+        href="/dashboard/tours"
         >
         <img src="/Tour.svg" class="w-4 h-auto opacity-50" style="margin-right:.45rem !important;"/>
         Tours</a>

client/pages/dashboard/tours.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="flex flex-shrink-0 flex-col p-8 items-center bg-gray-100 overflow-x-hidden overflow-y-scroll">
+    <h1 class="text-gray-800 font-semibold text-2xl w-full mb-2">
+      {{ app_name }} tours
+    </h1>
+    <p class="text-gray-600 w-full text-left mb-4">New to {{ app_name }}? Take our various product tours below to learn everything you need to know!</p>
+  </section>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: 'Tours',
+  layout: 'dashboard',
+  middleware: 'authenticated',
+  data: () => {
+    return {
+      app_name: process.env.APP_NAME
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+/**
+  Animations
+ */
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .25s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>