Add error page

src/routes/_error.svelte

@@ -1,17 +1,64 @@
 <script>
-	export let status
-	export let error
+    import { onMount } from 'svelte'
 
-	const dev = process.env.NODE_ENV === 'development'
+    // Dependencies
+    import AOS from 'aos'
+
+    // Components
+    import IconArrow from '../atoms/IconArrow'
+    import TitleSite from '../atoms/TitleSite'
+    import Button from '../atoms/Button'
+    import InteractiveGlobe from '../molecules/InteractiveGlobe'
+    import Footer from '../organisms/Footer'
+
+    // Props
+    export let status
+    export let error
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // Scroll apparitions
+        if (process.browser) {
+            AOS.init()
+        }
+    })
 </script>
 
 <svelte:head>
-	<title>{status}</title>
+    <title>Houses Of - {error.message}</title>
 </svelte:head>
 
-<h1>{status}</h1>
-<p>{error.message}</p>
+<section class="page">
+    <div class="wrap">
+        <div class="page__top">
+            <a href="/" class="button-control button-control--pink dir-left">
+                <IconArrow direction="left" color="#fff" class="icon" />
+                <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
+            </a>
 
-{#if dev && error.stack}
-	<pre>{error.stack}</pre>
+            <TitleSite />
+        </div>
+
+        <div class="page__description style-description">
+            <p>
+                Oh no…
+                Looks like something wrong just happened. Like a nasty error {status}.
+            </p>
+            <Button href="/" class="button" text="Go back to the homepage" on:click={() => window.location.href = '/'} />
+        </div>
+
+        <InteractiveGlobe type="part" />
+    </div>
+
+    <Footer />
+</section>
+
+
+{#if process.env.NODE_ENV === 'development' && error.stack}
+<div class="wrap">
+    <pre>{error.stack}</pre>
+</div>
 {/if}