Working

src/layouts/README.md

@@ -1,7 +0,0 @@
-# LAYOUTS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your Application Layouts.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

src/layouts/default.vue

@@ -1,62 +1,18 @@
 <template>
-  <div>
-    <Nuxt />
+  <div class="dark:bg-dark-900 dark:text-white font-sans">
+    <Header />
+    <Nuxt class="z-10 pt-16 lg:pt-24 content" />
+    <Footer />
   </div>
 </template>
 
-<style>
-html {
-  font-family:
-    'Source Sans Pro',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
+<script>
+import Header from "~/components/Header";
+import Footer from "~/components/Footer";
+export default {
+  components: {Footer, Header},
 }
+</script>
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
-
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
+<style scoped>
 </style>

src/layouts/error.vue

@@ -0,0 +1,67 @@
+<template>
+  <main class="error w-full px-5 xl:px-64">
+    <div class="mt-24 w-full h-full flex items-center justify-center">
+      <div class="flex flex-col items-center md:mb-20">
+        <div class="flex">
+          <div class="h-16 w-16 mr-4">
+            <svg class="icon inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <div class="mb-12 lining-nums">
+            <div class="mb-2">
+              <p v-if="error.statusCode === 404" class="text-3xl md:text-6xl dark:text-white font-bold">
+                {{ $t('error.error').toUpperCase() }} 404
+              </p>
+              <p v-else class="text-3xl md:text-6xl dark:text-white font-bold">
+                {{ $t('error.error').toUpperCase() }} 500
+              </p>
+            </div>
+            <div class="flex flex-col">
+              <p v-if="error.statusCode === 404" class="text-xl md:text-2xl text-gray-900 dark:text-dark-100">
+                {{ $t('error.no_page') }}
+              </p>
+              <p v-else class="text-xl md:text-2xl text-gray-900 dark:text-dark-100">
+                {{ $t('error.internal') }}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <nuxt-link class="home-btn" to="/">
+            <div class="w-full py-4 px-8 md:py-8 md:px-16 font-bold hover:bg-red-500 duration-500 rounded">
+              {{ $t('error.back') }}
+              <svg class="inline arrow-img" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+              </svg>
+            </div>
+          </nuxt-link>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+  name: "error",
+  props: ['error'],
+  head: {
+    title: 'Error - Arthur Danjou'
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.error {
+
+  .home-btn:hover .arrow-img {
+    transform: translate(3px, 0);
+  }
+
+  .arrow-img {
+    transform: translate(3px, -3px);
+    transition: .4s;
+  }
+}
+</style>