Update style

src/components/SiteHeader.vue

@@ -1,6 +1,12 @@
 <template>
-  <header class="page-header">
+  <header :class="thisClass">
     <navigation/>
+    <div v-if="isTitle" class="header-info" :class="{ 'header-info-home': isHome }">
+      <h1>{{ getTitle }}</h1>
+      <p v-if="isDescription && descriptionType === 'string'">{{ getDescription }}</p>
+      <p v-else-if="isDescription && descriptionType === 'array'"
+         v-for="(desc, key) in getDescription" :key="key">{{ desc }}</p>
+    </div>
   </header>
 </template>
 
@@ -9,6 +15,30 @@ import Navigation from '@/components/Navigation'
 
 export default {
   name: 'SiteHeader',
+  computed: {
+    isHome () {
+      return this.$route.path === '/'
+    },
+    thisClass () {
+      return [this.isHome ? 'home-page' : 'sub-page']
+    },
+    getTitle () {
+      return this.$store.getters.getHeader.title
+    },
+    isTitle () {
+      return this.getTitle !== null
+    },
+    getDescription () {
+      return this.$store.getters.getHeader.description
+    },
+    descriptionType () {
+      const isArray = this.getDescription instanceof Array
+      return isArray ? 'array' : typeof this.getDescription
+    },
+    isDescription () {
+      return this.getDescription !== null
+    }
+  },
   components: {
     navigation: Navigation
   }
@@ -16,7 +46,40 @@ export default {
 </script>
 
 <style lang="scss">
-.page-header {
+.home-page {
   background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
 }
+.sub-page {
+  background-color: #EFEFEF;
+}
+.header-info {
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 10px;
+  h1 {
+    position: relative;
+    font-weight: lighter;
+    font-size: 2.5em;
+    line-height: 1.5em;
+    margin-bottom: 25px;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100px;
+      height: 2px;
+      background-color: #A2CF00;
+      left: 50%;
+      margin-left: -50px;
+    }
+  }
+  &-home {
+    color: white;
+  }
+}
+.welcome {
+  min-height: 40vh;
+}
 </style>