From 7eb7e72c554db1ec74e4fa4da3784198a9e172b6 Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Mon, 28 Jun 2021 01:07:31 +0700
Subject: [PATCH] feat: add error page

---
 components/templates/TheHeader.vue            | 10 ++-
 .../templates/contact-us/ContactForm.vue      | 61 +++++++++++++++++++
 layouts/basic.vue                             | 12 ++++
 layouts/error.vue                             | 42 +++++++++++++
 pages/contact-us.vue                          |  9 ++-
 pages/index.vue                               |  4 ++
 6 files changed, 135 insertions(+), 3 deletions(-)
 create mode 100644 layouts/basic.vue
 create mode 100644 layouts/error.vue

diff --git a/components/templates/TheHeader.vue b/components/templates/TheHeader.vue
index 03316ee..c1c1714 100644
--- a/components/templates/TheHeader.vue
+++ b/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: '/',
diff --git a/components/templates/contact-us/ContactForm.vue b/components/templates/contact-us/ContactForm.vue
index 8b13789..7daefbc 100644
--- a/components/templates/contact-us/ContactForm.vue
+++ b/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>
diff --git a/layouts/basic.vue b/layouts/basic.vue
new file mode 100644
index 0000000..176b535
--- /dev/null
+++ b/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>
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..30b8057
--- /dev/null
+++ b/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>
diff --git a/pages/contact-us.vue b/pages/contact-us.vue
index 524a010..d19c466 100644
--- a/pages/contact-us.vue
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index 3548504..efff516 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
     <banner />
+    <banner />
+    <banner />
+    <banner />
+    <banner />
   </div>
 </template>