Feat: implemented Error page

Author: timelytree

components/PageFooter.vue

@@ -1,7 +1,7 @@
 <template>
   <footer id="footer" class="grid">
     <div class="col">
-      <div class="footer-content">
+      <div :class="['footer-content', recentPosts.length > 0 ? '' : 'no-recent-posts']">
 
         <div class="footer-panel left-panel">
           <nuxt-link
@@ -20,7 +20,7 @@
           </a>
         </div>
 
-        <div class="footer-panel right-panel">
+        <div v-if="recentPosts.length > 0" class="footer-panel right-panel">
           <h3 class="top-heading">
             Recent Posts
           </h3>
@@ -51,7 +51,8 @@ export default {
   props: {
     recentPosts: {
       type: Array,
-      required: true
+      default: () => [],
+      required: false
     }
   },
 
@@ -88,6 +89,20 @@ export default {
     left: 0;
     background-color: black;
   }
+  &.no-recent-posts {
+    justify-content: space-between;
+    .middle-panel {
+      align-items: flex-end;
+      @include small {
+        align-items: center;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+      }
+      .social-icons {
+        display: none;
+      }
+    }
+  }
 }
 
 .footer-panel {

layouts/error.vue

@@ -1,8 +1,47 @@
 <template>
-  <div class="error-page">
-    ERROR
+  <div class="container page-error">
+
+    <div class="top-panel">
+      <div class="grid">
+        <div class="col">
+          <Header />
+        </div>
+      </div>
+    </div>
+
+    <div class="grid">
+      <div class="col-6_sm-12">
+        <h3>Hmm, either something went wrong with the site or we can't find what you're looking for. Try again in a bit or click a link below!</h3>
+      </div>
+    </div>
+
+    <PageFooter />
+
   </div>
 </template>
 
-<style>
+<script>
+import Header from '@/components/Header'
+import PageFooter from '@/components/PageFooter'
+
+export default {
+  components: {
+    Header,
+    PageFooter
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.top-panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 38.2vh;
+  margin-bottom: 2rem;
+  position: relative;
+  @include small {
+    height: 61.8vh;
+  }
+}
 </style>