feat: add error page

components/templates/TheHeader.vue

@@ -1,5 +1,8 @@
 <template>
-  <b-navbar>
+  <b-navbar
+    fixed-top
+    shadow
+  >
     <template #brand>
       <b-navbar-item tag="nuxt-link" :to="{ path: '/' }">
         <img
@@ -92,6 +95,11 @@ export default class TheHeader extends Vue {
         }
       ]
     },
+    {
+      title: 'Blog',
+      link: '/blog',
+      subMenu: []
+    },
     {
       title: 'eHandy Teams',
       link: '/',

components/templates/contact-us/ContactForm.vue

@@ -1 +1,62 @@
+<template>
+  <section class="hero is-fullheight">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <div class="columns is-8 is-variable ">
+          <div class="column is-two-thirds has-text-left">
+            <h1 class="title is-1">
+              Contact Us
+            </h1>
+            <p class="is-size-4">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Nulla eligendi soluta voluptate facere molestiae consequatur.
+            </p>
+            <div class="social-media">
+              <a href="https://facebook.com" target="_blank" class="button is-light is-large">
+                <i class="fa fa-facebook-square" aria-hidden="true" />
+              </a>
+              <a href="https://instagram.com" target="_blank" class="button is-light is-large">
+                <i class="fa fa-instagram" aria-hidden="true" />
+              </a>
+              <a href="https://twitter.com" target="_blank" class="button is-light is-large">
+                <i class="fa fa-twitter" aria-hidden="true" />
+              </a>
+            </div>
+          </div>
+          <div class="column is-one-third has-text-left">
+            <div class="field">
+              <label class="label">Name</label>
+              <div class="control">
+                <input class="input is-medium" type="text">
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">Email</label>
+              <div class="control">
+                <input class="input is-medium" type="text">
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">Message</label>
+              <div class="control">
+                <textarea class="textarea is-medium" />
+              </div>
+            </div>
+            <div class="control">
+              <button type="submit" class="button is-link is-fullwidth has-text-weight-medium is-medium">Send Message</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
 
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component({
+  name: 'ContactForm'
+})
+export default class ContactForm extends Vue {}
+</script>

layouts/basic.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <nuxt />
+  </div>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class BasicLayout extends Vue {}
+</script>

layouts/error.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="error-page-container">
+    <h1 class="">404</h1>
+    <div v-if="error.statusCode === 404">
+      Oop! Nothing was found
+    </div>
+    <div v-else>An error occurred</div>
+    <NuxtLink
+      to="/"
+      class="btn"
+    >
+      Go Back
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component({
+  layout: 'basic'
+})
+export default class ErrorLayout extends Vue {
+  @Prop() error;
+}
+</script>
+
+<style>
+  .error-page-container {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  h1 {
+    font-size: 6.5rem;
+  }
+
+</style>

pages/contact-us.vue

@@ -1,13 +1,18 @@
 <template>
   <div>
-    Contact
+    <contact-form />
   </div>
 </template>
 
 <script>
 import { Vue, Component } from 'nuxt-property-decorator'
+import ContactForm from '@/components/templates/contact-us/ContactForm'
 
-@Component
+@Component({
+  components: {
+    ContactForm
+  }
+})
 export default class ContactUs extends Vue {
 }
 </script>

pages/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
     <banner />
+    <banner />
+    <banner />
+    <banner />
+    <banner />
   </div>
 </template>