Add global error page

src/routes/__error.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // Components
+    import { page } from '$app/stores'
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import BoxCTA from '$components/atoms/BoxCTA.svelte'
+    import Heading from '$components/molecules/Heading.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import Locations from '$components/organisms/Locations.svelte'
+    import Shop from '$components/organisms/Shop.svelte'
+    import Newsletter from '$components/organisms/Newsletter.svelte'
+
+    export let status: number
+
+    const { locations }: any = getContext('global')
+    const errors = {
+        404: {
+            title: 'Page not found',
+            message: 'You seem lost…',
+        },
+        500: {
+            title: 'Error',
+            message: 'Server error…',
+        },
+    }
+    const defaultMessage = 'You are welcome to explore our locations or shop some products'
+</script>
+
+<Metas
+    title="{errors[status].title} – Houses Of"
+/>
+
+<PageTransition name="page-error">
+    <div class="page-error__top">
+        <Heading
+            text="{errors[status].message} {defaultMessage}"
+        />
+
+        <div class="list-cta">
+            <BoxCTA
+                url="{$page.url.pathname}#locations"
+                icon="globe"
+                label="Discover locations"
+                alt="Globe"
+            />
+            <BoxCTA
+                url="/photos"
+                icon="photos"
+                label="Browse all photos"
+                alt="Photos"
+            />
+            <BoxCTA
+                url="/shop"
+                icon="bag"
+                label="Shop our products"
+                alt="Shopping bag"
+            />
+        </div>
+    </div>
+
+    <InteractiveGlobe />
+    <Locations {locations} />
+
+    <div class="grid-modules">
+        <div class="container grid">
+            <div class="wrap">
+                <Shop />
+                <Newsletter />
+            </div>
+        </div>
+    </div>
+</PageTransition>
+
+
+<script context="module" lang="ts">
+    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
+
+    export async function load ({ fetch, status }: LoadEvent): Promise<LoadOutput> {
+        console.log(status)
+
+        return {
+            props: {
+                status,
+            },
+        }
+    }
+</script>

src/routes/index.svelte

@@ -104,7 +104,7 @@
     <div class="homepage__ctas" id="ctas">
         <DiscoverText />
 
-        <div class="cards">
+        <div class="list-cta">
             <BoxCTA
                 url="{$page.url.pathname}#locations"
                 icon="globe"