Add error page

src/organisms/Footer.svelte

@@ -19,11 +19,13 @@
                     <li>
                         <LinkTranslate href="/credits" text="Credits" rel="prefetch" />
                     </li>
+                    {#if $site}
                     <li class="instagram">
                         <LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
                             <img src="/img/icons/instagram.svg" alt="Instagram">
                         </LinkTranslate>
                     </li>
+                    {/if}
                 </ul>
             </li>
             <li class="cetrucflotte">

src/routes/_error.svelte

@@ -1,17 +1,64 @@
 <script>
+    import { onMount } from 'svelte'
+
+    // 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
 
-	const dev = process.env.NODE_ENV === 'development'
+
+    /*
+    ** 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>
+<section class="page">
-<p>{error.message}</p>
+    <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}
+            <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}

src/style/pages/_page.scss

@@ -38,6 +38,14 @@
             max-width: 472px;
             margin-bottom: 120px;
         }
+
+        // Some margins
+        h1 + p {
+            margin-top: 24px;
+        }
+        p + .button {
+            margin-top: 40px;
+        }
     }
 
     // Category