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"

src/style/molecules/_list-cta.scss

@@ -0,0 +1,14 @@
+.list-cta {
+    @include bp (sm) {
+        display: flex;
+        justify-content: center;
+    }
+
+    & > * {
+        margin: 20px auto 0;
+
+        @include bp (sm) {
+            margin: 0 16px;
+        }
+    }
+}

src/style/pages/_error.scss

@@ -0,0 +1,26 @@
+.page-error {
+    // Top
+    &__top {
+        margin-bottom: 72px;
+
+        @include bp (sm) {
+            margin-bottom: 120px;
+        }
+
+        // Heading
+        .heading {
+            padding: 0 24px;
+            margin-bottom: 40px;
+
+            @include bp (sm) {
+                margin-bottom: 72px;
+            }
+
+            p {
+                @include bp (sm, max) {
+                    max-width: 480px;
+                }
+            }
+        }
+    }
+}

src/style/pages/_homepage.scss

@@ -116,22 +116,13 @@
             margin-bottom: 160px;
         }
 
-        .cards {
-            justify-content: center;
+        // List
+        .list-cta {
             margin-top: 48px;
 
             @include bp (sm) {
-                display: flex;
                 margin-top: 72px;
             }
-
-            & > * {
-                margin: 20px auto 0;
-
-                @include bp (sm) {
-                    margin: 0 16px;
-                }
-            }
         }
     }
 

src/style/style.scss

@@ -28,6 +28,7 @@
 @import "pages/location";
 @import "pages/viewer";
 @import "pages/shop";
+@import "pages/error";
 
 // Modules
 @import "modules/globe";
@@ -53,6 +54,7 @@
 @import "molecules/location";
 @import "molecules/switcher";
 @import "molecules/heading";
+@import "molecules/list-cta";
 @import "molecules/issue";
 @import "molecules/newsletter-form";
 @import "molecules/poster";