feat(index): add header

components/the-header.vue

@@ -0,0 +1,80 @@
+<template>
+  <!-- Header -->
+  <header class="masthead">
+    <div class="container">
+      <div class="intro-text">
+        <h1 class="xintro-lead-in">Daim</h1>
+        <h2 class="xintro-heading">
+          Innovative Marketing Technology Solutions
+        </h2>
+        <!-- <a
+          class="btn btn-primary btn-xl text-uppercase js-scroll-trigger"
+          href="#services"
+          >Tell Me More</a
+        > -->
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+header.masthead {
+  text-align: center;
+  color: white;
+  background-image: url('~assets/img/header-bg.jpg');
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+  background-position: center center;
+  background-size: cover;
+}
+
+header.masthead .intro-text {
+  padding-top: 150px;
+  padding-bottom: 100px;
+}
+
+header.masthead .intro-text .intro-lead-in {
+  font-size: 22px;
+  font-style: italic;
+  line-height: 22px;
+  margin-bottom: 25px;
+  font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+header.masthead .intro-text .intro-heading {
+  font-size: 50px;
+  font-weight: 700;
+  line-height: 50px;
+  margin-bottom: 25px;
+  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+@media (min-width: 768px) {
+  header.masthead .intro-text {
+    padding-top: 300px;
+    padding-bottom: 200px;
+  }
+  header.masthead .intro-text .intro-lead-in {
+    font-size: 40px;
+    font-style: italic;
+    line-height: 40px;
+    margin-bottom: 25px;
+    font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+      Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  }
+  header.masthead .intro-text .intro-heading {
+    font-size: 75px;
+    font-weight: 700;
+    line-height: 75px;
+    margin-bottom: 50px;
+    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+      Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  }
+}
+</style>

pages/index.vue

@@ -1,41 +1,15 @@
 <template>
-  <div class="container">
-    <div>
-      <logo />
-      <h1 class="title">
-        daim
-      </h1>
-      <h2 class="subtitle">
-        My extraordinary Nuxt.js project
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
+  <div class="xcontainer">
+    <the-header></the-header>
   </div>
 </template>
 
 <script>
-import Logo from '~/components/Logo.vue';
+import TheHeader from '~/components/the-header.vue';
 
 export default {
   components: {
-    Logo,
+    TheHeader,
   },
 };
 </script>

test/e2e/index.js

@@ -20,7 +20,7 @@ test.before(async () => {
 // Example of testing only generated html
 test('Route / exits and render HTML', async (t) => {
   const { html } = await nuxt.renderRoute('/', {});
-  t.true(html.includes('Documentation'));
+  t.true(html.includes('Daim'));
 });
 
 // Close server and ask nuxt to stop listening to file changes