82 lines
2.4 KiB
Svelte
82 lines
2.4 KiB
Svelte
<style lang="scss">
|
||
@import "../style/pages/error";
|
||
</style>
|
||
|
||
<script lang="ts">
|
||
import { getContext } from 'svelte'
|
||
import { page } from '$app/stores'
|
||
// Components
|
||
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 InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
|
||
import ListCTAs from '$components/organisms/ListCTAs.svelte'
|
||
import Locations from '$components/organisms/Locations.svelte'
|
||
import ShopModule from '$components/organisms/ShopModule.svelte'
|
||
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
|
||
|
||
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 discover our shop.'
|
||
</script>
|
||
|
||
<Metas
|
||
title="{errors[$page.status].title} – Houses Of"
|
||
/>
|
||
|
||
<PageTransition name="page-error">
|
||
<div class="page-error__top">
|
||
<Heading
|
||
text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
|
||
/>
|
||
|
||
<ListCTAs>
|
||
<li>
|
||
<BoxCTA
|
||
url="{$page.url.pathname}#locations"
|
||
icon="globe"
|
||
label="Discover locations"
|
||
alt="Globe"
|
||
/>
|
||
</li>
|
||
<li>
|
||
<BoxCTA
|
||
url="/photos"
|
||
icon="photos"
|
||
label="Browse all photos"
|
||
alt="Photos"
|
||
/>
|
||
</li>
|
||
<li>
|
||
<BoxCTA
|
||
url="/shop"
|
||
icon="bag"
|
||
label="Shop our products"
|
||
alt="Shopping bag"
|
||
/>
|
||
</li>
|
||
</ListCTAs>
|
||
</div>
|
||
|
||
<InteractiveGlobe2 />
|
||
<Locations {locations} />
|
||
|
||
<div class="grid-modules">
|
||
<div class="container grid">
|
||
<div class="wrap">
|
||
<ShopModule />
|
||
<NewsletterModule />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</PageTransition> |