Moved homepage banner into its own component

src/components/Home.vue

@@ -1,24 +1,25 @@
 <template>
   <section class="home">
-    <header class="home__header" v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }">
+    <LandingBanner />
-      <div class="home__header-wrap">
+
-        <h1 class="home__header-title">Request new movies or tv shows for plex</h1>
+    <movies-list v-for="item in homepageLists" :propList="item" :shortList="true">{{item}}</movies-list>
-        <strong class="home__header-subtitle">Made with Vue.js</strong>
+    <!-- <movies-list v-for="item in homepageLists" v-if="item.isCategory" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list> -->
-      </div>
-    </header>
-    <movies-list v-for="item in listTypes" v-if="item.isCategory" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list>
   </section>
 </template>
 
 <script>
 import axios from 'axios'
 import storage from '../storage.js'
+import LandingBanner from '@/components/LandingBanner.vue'
 import MoviesList from './MoviesList.vue'
 
 export default {
-  components: { MoviesList },
+  name: 'home',
+  components: { LandingBanner, MoviesList },
   data(){
     return {
+      homepageLists: storage.homepageLists,
+
       listTypes: storage.listTypes,
       imageFile: 'dist/pulp-fiction.jpg'
     }

src/components/LandingBanner.vue

@@ -0,0 +1,89 @@
+<template>
+  <header v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }">
+    <div class="container">
+      <h1 class="title">Request new movies or tv shows for plex</h1>
+      <strong class="subtitle">Made with Vue.js</strong>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    image: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      imageFile: 'dist/pulp-fiction.jpg'
+    }
+  },
+  beforeMount() {
+    if (this.image.length > 0) {
+      this.imageFile = this.image
+    }
+  }
+}
+  
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+header {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  position: relative;
+  background-color: $c-dark;
+  // background-image: url('~assets/arrival.jpg');
+  @include tablet-min{
+    height: 284px;
+  }
+  &:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba($c-light, 0.7);
+  }
+  
+  .container{
+    text-align: center;
+    position: relative;
+  }
+  
+  .title{
+    font-weight: 500;
+    font-size: 22px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: $c-dark;
+    margin: 0;
+    @include tablet-min{
+      font-size: 28px;
+    }
+  }
+
+  .subtitle{
+    display: block;
+    font-size: 14px;
+    font-weight: 300;
+    color: $c-dark;
+    margin: 5px 0;
+    @include tablet-min{
+      font-size: 16px;
+    }
+  }
+}
+</style>