avoid confusion rename header to hero

app/header/login.vue

@@ -8,6 +8,7 @@
     #login-bar .nav-link {
         padding-left: 1em;
         padding-right: 1em;
+        color: inherit;
     }
 
     #login-bar .nav-link {

app/landing-page/header/header.vue → app/landing-page/hero/hero.vue

@@ -1,36 +1,36 @@
 <style>
-    #header {
+    #hero {
         background-color: #f7f7f7;
         color: #323232;
     }
 
-    #header a {
+    #hero a {
         color: inherit;
     }
 
-    #header #header__title {
+    #hero #hero__title {
         text-transform: uppercase;
         font-size: 2.1rem;
         padding-top: .70rem;
     }
 
     @media (min-width: 480px) {
-        #header .header__headlines {
+        #hero .hero__headlines {
             padding-top: 12vh;
             padding-bottom: 17vh;
         }
 
-        #header #header__title {
+        #hero #hero__title {
             font-size: 2.5rem;
         }
     }
 </style>
 <template>
-    <div id="header">
+    <div id="hero">
         <div class="container">
-            <div class="row header__headlines">
+            <div class="row hero__headlines">
                 <div class="col-md-6">
-                    <h1 id="header__title">{{{ $t('headlines.title') }}}</h1>
+                    <h1 id="hero__title">{{{ $t('headlines.title') }}}</h1>
                     <p class="lead hidden-xs-down">
                         <b>LessPass</b> {{ $t('headlines.subtitle') }}
                     </p>

app/landing-page/index.vue

@@ -9,7 +9,7 @@
     </div>
 </template>
 <script>
-    import LesspassHeader from './header/header.vue';
+    import LesspassHeader from './hero/hero.vue';
     import LesspassFeatures from './features/features.vue';
     import LesspassHowitworks from './howitworks/howitworks.vue';
     import LesspassFeedback from './feedback/feedback.vue';