Merge branch 'dev'

2023-06-11 22:42:33 +02:00
parent f2735d7eaa fb21015f99
commit 8a81515135
62 changed files with 3604 additions and 3265 deletions
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -9,7 +9,7 @@
    "start": "directus start"
  },
  "dependencies": {
-    "directus": "^10.1.0",
-    "pg": "^8.10.0"
+    "directus": "^10.2.1",
+    "pg": "^8.11.0"
  }
 }
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -15,41 +15,42 @@
    "lint": "eslint ."
  },
  "dependencies": {
-    "@studio-freight/lenis": "^1.0.12",
-    "dayjs": "^1.11.7",
+    "@studio-freight/lenis": "^1.0.14",
+    "classix": "^2.1.32",
+    "dayjs": "^1.11.8",
    "embla-carousel": "^7.1.0",
    "focus-visible": "^5.2.0",
-    "motion": "^10.15.5",
+    "motion": "^10.16.2",
    "ogl": "^0.0.117",
    "sanitize.css": "^13.0.0",
-    "swell-js": "3.21.6",
+    "swell-js": "3.22.0",
    "tweakpane": "^3.1.9",
    "utils": "workspace:*"
  },
  "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.1",
-    "@sveltejs/adapter-vercel": "^2.4.3",
-    "@sveltejs/kit": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/adapter-vercel": "^3.0.1",
+    "@sveltejs/kit": "^1.20.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
    "base-64": "^1.0.0",
-    "browserslist": "^4.21.5",
+    "browserslist": "^4.21.7",
    "config": "workspace:*",
    "cssnano": "^6.0.1",
-    "eslint": "^8.40.0",
-    "eslint-plugin-svelte": "^2.28.0",
-    "postcss": "^8.4.23",
+    "eslint": "^8.42.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "postcss": "^8.4.24",
    "postcss-focus-visible": "^8.0.2",
    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^8.3.2",
-    "postcss-sort-media-queries": "^5.1.0",
-    "sass": "^1.62.1",
+    "postcss-preset-env": "^8.4.2",
+    "postcss-sort-media-queries": "^5.2.0",
+    "sass": "^1.63.3",
    "svelte": "^3.59.1",
-    "svelte-check": "^3.3.2",
-    "svelte-preprocess": "^5.0.3",
-    "tslib": "^2.5.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5"
+    "svelte-check": "^3.4.3",
+    "svelte-preprocess": "^5.0.4",
+    "tslib": "^2.5.3",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
  },
  "type": "module",
  "browserslist": [
--- a/apps/website/src/components/PageTransition.svelte
+++ b/apps/website/src/components/PageTransition.svelte
@@ -1,33 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores'
-    import { afterUpdate } from 'svelte'
-    import { fade } from 'svelte/transition'
-    import { scrollToTop } from 'utils/scroll'
-    import { pageLoading } from '$utils/stores'
-    import { DELAY, DURATION } from '$utils/constants'
-
-    let loadingTimeout: ReturnType<typeof setTimeout> | number = null
-
-    $: doNotScroll = !$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')
-
-    // Hide page loading indicator on page update
-    afterUpdate(() => {
-        clearTimeout(loadingTimeout)
-        loadingTimeout = setTimeout(() => $pageLoading = false, DURATION.PAGE_IN)
-    })
-</script>
-
-<div class="page"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
-    on:outrostart={() => {
-        // Show page loading indicator
-        $pageLoading = true
-    }}
-    on:outroend={() => {
-        // Scroll back to top
-        doNotScroll && requestAnimationFrame(() => scrollToTop())
-    }}
->
-    <slot />
-</div>
--- a/apps/website/src/components/SmoothScroll.svelte
+++ b/apps/website/src/components/SmoothScroll.svelte
@@ -11,7 +11,7 @@
    if (browser) {
        $smoothScroll = new Lenis({
            duration: 1.2,
-            easing: (t: number) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)), // https://easings.net/
+            easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://easings.net/
            smoothWheel: true,
            orientation: 'vertical',
        })
--- a/apps/website/src/components/SplitText.svelte
+++ b/apps/website/src/components/SplitText.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { cx } from 'classix'
    import { splitText } from 'utils/text'

    export let text: string
@@ -7,7 +8,10 @@

    $: split = splitText(text, mode)

-    const classes = ['text-split', $$props.class].join(' ').trim()
+    $: classes = cx(
+        'text-split',
+        $$props.class,
+    )
 </script>

 {#if clone}
--- a/apps/website/src/components/atoms/AboutGridPhoto.svelte
+++ b/apps/website/src/components/atoms/AboutGridPhoto.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { cx } from 'classix'
    import Image from './Image.svelte'

    export let id: string
@@ -8,11 +9,11 @@
    let hovering = false
    let timer: ReturnType<typeof setTimeout> | number = null

-    $: classes = [
+    $: classes = cx(
        hovering ? 'is-hovered' : undefined,
        disabled ? 'is-disabled' : undefined,
        $$props.class
-    ].join(' ').trim()
+    )

    // Hovering functions
    const handleMouseEnter = () => {
--- a/apps/website/src/components/atoms/Button.svelte
+++ b/apps/website/src/components/atoms/Button.svelte
@@ -3,25 +3,27 @@
 </style>

 <script lang="ts">
+    import { cx } from 'classix'
    import SplitText from '$components/SplitText.svelte'

-    export let tag = 'a'
    export let text: string
    export let url: string = undefined
    export let color: string = undefined
-    export let size: string = undefined
+    export let size: 'xsmall' | 'small' | 'medium' | 'large'
    export let effect = 'link-3d'
    export let disabled: boolean = undefined
    export let slotPosition = 'before'

-    const className = 'button'
-    const classes = [
-        className,
+    let tag: 'a' | 'button'
+    $: tag = url ? 'a' : 'button'
+
+    $: classes = cx(
+        'button',
        effect ? effect : undefined,
-        ...[color, size].map(variant => variant && `${className}--${variant}`),
+        ...[color, size].map(variant => variant && `button--${variant}`),
        Object.keys($$slots).length !== 0 ? `has-icon-${slotPosition}` : undefined,
-        $$props.class
-    ].join(' ').trim()
+        $$props.class,
+    )

    // Define external links
    $: isExternal = /^(http|https):\/\//i.test(url)
--- a/apps/website/src/components/atoms/ButtonCircle.svelte
+++ b/apps/website/src/components/atoms/ButtonCircle.svelte
@@ -3,6 +3,8 @@
 </style>

 <script lang="ts">
+    import { cx } from 'classix'
+
    export let tag = 'button'
    export let url: string = undefined
    export let color: string = undefined
@@ -13,12 +15,12 @@
    export let label: string = undefined

    const className = 'button-circle'
-    const classes = [
+    $: classes = cx(
        className,
        ...[color, size].map(variant => variant && `${className}--${variant}`),
        clone ? 'has-clone' : null,
        $$props.class
-    ].join(' ').trim()
+    )
 </script>

 {#if tag === 'a'}
--- a/apps/website/src/components/atoms/Icon.svelte
+++ b/apps/website/src/components/atoms/Icon.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+    import { cx } from 'classix'
+
    export let icon: string
    export let label: string = undefined

-    const classes = [$$props.class].join(' ').trim()
+    $: classes = cx($$props.class)
 </script>

 <svg class={classes} aria-label={label} width="32" height="32">
--- a/apps/website/src/components/atoms/IconEarth.svelte
+++ b/apps/website/src/components/atoms/IconEarth.svelte
@@ -7,9 +7,14 @@
 </style>

 <script lang="ts">
+    import { cx } from 'classix'
+
    export let animate = false

-    const classes = ['icon-earth', $$props.class].join(' ').trim()
+    $: classes = cx(
+        'icon-earth',
+        $$props.class,
+    )
 </script>

 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"
--- a/apps/website/src/components/atoms/ScrollingTitle.svelte
+++ b/apps/website/src/components/atoms/ScrollingTitle.svelte
@@ -8,6 +8,7 @@
 </style>

 <script lang="ts">
+    import cx from 'classix'
    import { map } from 'utils/math'
    import reveal from '$animations/reveal'

@@ -39,11 +40,11 @@
        parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
    }

-    const classes = [
+    $: classes = cx(
        'scrolling-title',
        'title-huge',
        $$props.class
-    ].join(' ').trim()
+    )

    const revealOptions = animate ? {
        children: '.char',
--- a/apps/website/src/components/layouts/PosterLayout.svelte
+++ b/apps/website/src/components/layouts/PosterLayout.svelte
@@ -78,7 +78,7 @@
                <dd class="text-info">{shopProduct.name} – {shopProduct.price}€</dd>
            </dl>
            <Button
-                tag="button"
+                size="medium"
                text={hasStock ? 'Add to cart' : 'Sold out'}
                color="pinklight"
                disabled={!hasStock}
--- a/apps/website/src/components/molecules/Location.svelte
+++ b/apps/website/src/components/molecules/Location.svelte
@@ -6,6 +6,7 @@
    import { getContext } from 'svelte'
    import { spring } from 'svelte/motion'
    import dayjs from 'dayjs'
+    import { cx } from 'classix'
    import { lerp } from 'utils/math'
    import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
    import { seenLocations } from '$utils/stores'
@@ -110,7 +111,7 @@
        <div class="location__photos">
            {#each location.photos as { image }, index}
                {#if image}
-                    {@const classes = ['location__photo', index === photoIndex ? 'is-visible' : null].join(' ').trim()}
+                    {@const classes = cx('location__photo', index === photoIndex && 'is-visible')}
                    <Image
                        class={classes}
                        id={image.id}
--- a/apps/website/src/components/molecules/PostCard.svelte
+++ b/apps/website/src/components/molecules/PostCard.svelte
@@ -3,6 +3,7 @@
 </style>

 <script lang="ts">
+    import { cx } from 'classix'
    import Image from '$components/atoms/Image.svelte'

    export let street: string
@@ -13,11 +14,11 @@
    export let size: string = undefined

    const className = 'postcard'
-    $: classes = [
+    $: classes = cx(
        className,
        ...[size].map(variant => variant && `${className}--${variant}`),
        $$props.class
-    ].join(' ').trim()
+    )
 </script>

 <div class={classes}>
--- a/apps/website/src/components/molecules/Poster.svelte
+++ b/apps/website/src/components/molecules/Poster.svelte
@@ -40,7 +40,6 @@
            on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
        />
        <Button
-            tag="button"
            size="xsmall"
            text="Add to cart"
            color="pink"
--- a/apps/website/src/components/molecules/ShopLocationSwitcher.svelte
+++ b/apps/website/src/components/molecules/ShopLocationSwitcher.svelte
@@ -5,6 +5,7 @@
 <script lang="ts">
    import { goto } from '$app/navigation'
    import { getContext, tick } from 'svelte'
+    import { cx } from 'classix'
    import { shopCurrentProductSlug } from '$utils/stores/shop'
    import { smoothScroll } from '$utils/stores'

@@ -12,11 +13,11 @@

    const { shopLocations }: any = getContext('shop')

-    const classes = [
+    const classes = cx(
        'shop-locationswitcher',
        isOver && 'is-over',
        $$props.class
-    ].join(' ').trim()
+    )


    // Quick location change
--- a/apps/website/src/components/molecules/Toast.svelte
+++ b/apps/website/src/components/molecules/Toast.svelte
@@ -0,0 +1,111 @@
+<style lang="scss">
+    @import "../../style/molecules/toast";
+</style>
+
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import { fade, fly } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
+    import { browser } from '$app/environment'
+    import { cx } from 'classix'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+
+    export let id: string
+    export let type: 'global' | 'local'
+    export let text: string
+    export let cta: {
+        label: string
+        url: string
+        color: string
+    } = undefined
+    export let images: { id: string, title: string }[] = undefined
+    export let show = false
+
+    $: if (browser) {
+        show = !localStorage.getItem(`toast-${id}`)
+    }
+
+    // Image rotation
+    let imagesLoop: ReturnType<typeof setTimeout>
+    let currentImageIndex = 0
+
+    const incrementCurrentImageIndex = () => {
+        currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
+        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
+    }
+
+    // Close toast
+    const close = () => {
+        localStorage.setItem(`toast-${id}`, 'closed')
+        show = false
+    }
+
+    $: classes = cx(
+        'toast',
+        `toast--${type}`,
+        'shadow-small',
+        $$props.class,
+    )
+
+
+    onMount(() => {
+        if (images.length > 1) {
+            incrementCurrentImageIndex()
+        }
+
+        return () => {
+            // Clear rotating words timeout
+            if (imagesLoop) {
+                clearTimeout(imagesLoop)
+            }
+        }
+    })
+</script>
+
+{#if show}
+    <div
+        class={classes}
+        in:fly={{ y: '10%', duration: 1200, easing: quartOut }}
+        out:fade={{ duration: 800, easing: quartOut }}
+    >
+        {#if images}
+            <div class="media">
+                <a href={cta.url}>
+                    {#each images as { id, title }, index}
+                        <Image
+                            class={index === currentImageIndex ? 'is-visible' : null}
+                            {id}
+                            sizeKey="square"
+                            sizes={{
+                                small: { width: 200, height: 200 },
+                                large: { width: 350, height: 350 },
+                            }}
+                            alt={title}
+                        />
+                    {/each}
+                </a>
+            </div>
+        {/if}
+
+        <div class="content">
+            <p class="text">{@html text}</p>
+
+            {#if cta}
+                <Button
+                    size="xsmall"
+                    text={cta.label}
+                    url={cta.url}
+                    color="pink"
+                />
+            {/if}
+        </div>
+
+        <button class="close" on:click={close} title="Close">
+            <svg width="10" height="10">
+                <use xlink:href="#cross" />
+            </svg>
+        </button>
+    </div>
+{/if}
--- a/apps/website/src/components/organisms/Cart.svelte
+++ b/apps/website/src/components/organisms/Cart.svelte
@@ -132,14 +132,14 @@
                {/if}
            </div>
            <div class="cart__total--checkout">
-                <p>Free shipping worldwide!</p>
+                <p>Save 10% on your order with the code <strong>WORLDCITIZEN</strong>. Free shipping.</p>
                {#if $cartData && $cartAmount > 0 && $cartData.checkout_url}
                    <div transition:fly={{ y: 8, duration: 600, easing: quartOut }}>
                        <Button
+                            size="small"
                            url={$cartData && $cartData.checkout_url}
                            text="Checkout"
                            color="pink"
-                            size="small"
                            on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount } })}
                        />
                    </div>
--- a/apps/website/src/components/organisms/Locations.svelte
+++ b/apps/website/src/components/organisms/Locations.svelte
@@ -49,7 +49,8 @@
        {#each continents as { name, slug }}
            <li class:is-active={currentContinent === slug}>
                <Button
-                    tag="button" text={name} size="small"
+                    size="small"
+                    text={name}
                    slotPosition="after"
                    class={'is-disabled'}
                    on:click={() => {
--- a/apps/website/src/components/organisms/ShopModule.svelte
+++ b/apps/website/src/components/organisms/ShopModule.svelte
@@ -83,7 +83,7 @@
            <h2 class="title-medium">{title}</h2>
            <p class="text-small">{text}</p>
            {#if enabled}
-                <Button {url} text={buttonText} color="pinklight" />
+                <Button size="medium" {url} text={buttonText} color="pinklight" />
            {/if}
            {#if textBottom}
                <p class="detail">{textBottom}</p>
--- a/apps/website/src/routes/(shop)/shop/+error.svelte
+++ b/apps/website/src/routes/(shop)/shop/+error.svelte
@@ -3,7 +3,6 @@
    import { page } from '$app/stores'
    // Components
    import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import ShopHeader from '$components/organisms/ShopBanner.svelte'
    import PostersGrid from '$components/organisms/PostersGrid.svelte'

@@ -25,8 +24,7 @@
 />


-<PageTransition>
-    <main class="shop-page">
+<main class="shop-page">
    <ShopHeader />

    <section class="shop-page__error">
@@ -39,5 +37,4 @@
    </section>

    <PostersGrid {posters} />
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(shop)/shop/+layout.server.ts
+++ b/apps/website/src/routes/(shop)/shop/+layout.server.ts
@@ -1,10 +1,9 @@
 import { error } from '@sveltejs/kit'
-import type { LayoutServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { fetchSwell } from '$utils/functions/shopServer'


-export const load = (async () => {
+export const load = async () => {
    try {
        // Get content from API
        const res = await fetchAPI(`query {
@@ -76,4 +75,4 @@ export const load = (async () => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies LayoutServerLoad
+}
--- a/apps/website/src/routes/(shop)/shop/+layout.svelte
+++ b/apps/website/src/routes/(shop)/shop/+layout.svelte
@@ -3,14 +3,13 @@
 </style>

 <script lang="ts">
-    import type { PageData } from './$types'
    import { setContext } from 'svelte'
    import { cartNotifications } from '$utils/stores/shop'
    // Components
    import Cart from '$components/organisms/Cart.svelte'
    import NotificationCart from '$components/molecules/NotificationCart.svelte'

-    export let data: PageData
+    export let data

    const { shop, locations, posters, shopProducts, settings } = data

--- a/apps/website/src/routes/(shop)/shop/+page.server.ts
+++ b/apps/website/src/routes/(shop)/shop/+page.server.ts
@@ -1,11 +1,10 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItem } from 'utils/array'
 import { fetchSwell } from '$utils/functions/shopServer'


-export const load = (async ({ setHeaders }) => {
+export const load = async ({ setHeaders }) => {
    try {
        // Get content from API
        const data = await fetchAPI(`query {
@@ -54,4 +53,4 @@ export const load = (async ({ setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(shop)/shop/+page.svelte
+++ b/apps/website/src/routes/(shop)/shop/+page.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
-    import type { PageData } from './$types'
    import { getContext } from 'svelte'
    import { getAssetUrlKey } from '$utils/api'
    import { shopCurrentProductSlug } from '$utils/stores/shop'
    // Components
-    import PageTransition from '$components/PageTransition.svelte'
    import Metas from '$components/Metas.svelte'
    import PostersGrid from '$components/organisms/PostersGrid.svelte'
    import ShopHeader from '$components/organisms/ShopBanner.svelte'
    import PosterLayout from '$components/layouts/PosterLayout.svelte'

-    export let data: PageData
+    export let data

    const { product, shopProduct }: { product: any, shopProduct: any } = data
    const { posters, settings }: any = getContext('shop')
@@ -26,8 +24,7 @@
 />


-<PageTransition>
-    <main class="shop-page">
+<main class="shop-page">
    <ShopHeader {product} />

    <PosterLayout
@@ -36,5 +33,4 @@
    />

    <PostersGrid {posters} />
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.server.ts
+++ b/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.server.ts
@@ -1,10 +1,9 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { fetchSwell } from '$utils/functions/shopServer'


-export const load = (async ({ params, setHeaders }) => {
+export const load = async ({ params, setHeaders }) => {
    try {
        // Get content from API
        const data = await fetchAPI(`query {
@@ -51,4 +50,4 @@ export const load = (async ({ params, setHeaders }) => {
    } catch (err) {
        throw error(404)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte
+++ b/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
-    import type { PageData } from './$types'
    import { getContext } from 'svelte'
    import { getAssetUrlKey } from '$utils/api'
    import { shopCurrentProductSlug } from '$utils/stores/shop'
    import { capitalizeFirstLetter } from 'utils/string'
    // Components
-    import PageTransition from '$components/PageTransition.svelte'
    import Metas from '$components/Metas.svelte'
    import ShopHeader from '$components/organisms/ShopBanner.svelte'
    import PostersGrid from '$components/organisms/PostersGrid.svelte'
    import PosterLayout from '$components/layouts/PosterLayout.svelte'

-    export let data: PageData
+    export let data

    const { posters }: any = getContext('shop')

@@ -25,8 +23,7 @@
 />


-<PageTransition>
-    <main class="shop-page">
+<main class="shop-page">
    <ShopHeader product={data.product} />

    <PosterLayout
@@ -35,5 +32,4 @@
    />

    <PostersGrid {posters} />
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.server.ts
+++ b/apps/website/src/routes/(site)/[country]/[location]/+page.server.ts
@@ -1,10 +1,9 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
 import { fetchAPI, photoFields } from '$utils/api'


-export const load = (async ({ params, setHeaders }) => {
+export const load = async ({ params, setHeaders }) => {
    try {
        const { location: slug } = params

@@ -88,4 +87,4 @@ export const load = (async ({ params, setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
+++ b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
@@ -4,7 +4,6 @@

 <script lang="ts">
    import { page, navigating } from '$app/stores'
-    import type { PageData } from './$types'
    import { onMount } from 'svelte'
    import { stagger, timeline } from 'motion'
    import dayjs from 'dayjs'
@@ -17,7 +16,6 @@
    import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
    // Components
    import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Button from '$components/atoms/Button.svelte'
    import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -26,7 +24,7 @@
    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
    import ShopModule from '$components/organisms/ShopModule.svelte'

-    export let data: PageData
+    export let data

    let { photos, totalPhotos }: { photos: any[], totalPhotos: number } = data
    $: ({ photos, totalPhotos } = data)
@@ -219,8 +217,7 @@
 />


-<PageTransition>
-    <main class="location-page">
+<main class="location-page">
    <section class="location-page__intro grid" bind:this={introEl}>
        <h1 class="title" class:is-short={location.name.length <= 4}>
            <span class="housesof mask">
@@ -261,12 +258,12 @@
                </div>

                <div class="ctas">
-                        <Button url="/locations" text="Change location" class="shadow-small">
+                    <Button size="medium" url="/locations" text="Change location" class="shadow-small">
                        <IconEarth />
                    </Button>

                    {#if location.has_poster}
-                            <Button url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
+                        <Button size="medium" url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
                            <!-- <IconEarth /> -->
                        </Button>
                    {/if}
@@ -363,5 +360,4 @@
            </p>
        </div>
    {/if}
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.server.ts
+++ b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.server.ts
@@ -1,9 +1,8 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'


-export const load = (async ({ params, setHeaders }) => {
+export const load = async ({ params, setHeaders }) => {
    try {
        // Get the first photo ID
        const firstPhoto = await fetchAPI(`query {
@@ -89,4 +88,4 @@ export const load = (async ({ params, setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
+++ b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
@@ -6,7 +6,6 @@
    import { browser } from '$app/environment'
    import { page, navigating } from '$app/stores'
    import { goto } from '$app/navigation'
-    import type { PageData } from './$types'
    import { onMount, tick } from 'svelte'
    import { fade, scale } from 'svelte/transition'
    import { quartOut } from 'svelte/easing'
@@ -20,13 +19,12 @@
    // Components
    import Metas from '$components/Metas.svelte'
    import SplitText from '$components/SplitText.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Icon from '$components/atoms/Icon.svelte'
    import IconArrow from '$components/atoms/IconArrow.svelte'
    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'

-    export let data: PageData
+    export let data

    let { photos, currentIndex }: { photos: any[], currentIndex: number } = data
    const { location, countPhotos, limit, offset }: { location: any, countPhotos: number, limit: number, offset: number } = data
@@ -302,8 +300,7 @@
 {/if}


-<PageTransition>
-    <main class="photo-page">
+<main class="photo-page">
    <div class="container grid">
        <p class="photo-page__notice text-label">Tap for fullscreen</p>

@@ -402,5 +399,4 @@
            </div>
        </div>
    {/if}
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(site)/about/+page.server.ts
+++ b/apps/website/src/routes/(site)/about/+page.server.ts
@@ -1,10 +1,9 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItems } from 'utils/array'


-export const load = (async ({ setHeaders }) => {
+export const load = async ({ setHeaders }) => {
    try {
        // Get data and total of published photos
        const res = await fetchAPI(`query {
@@ -102,4 +101,4 @@ export const load = (async ({ setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/apps/website/src/routes/(site)/about/+page.svelte
@@ -7,7 +7,6 @@
    import { onMount, afterUpdate } from 'svelte'
    import { quartOut as quartOutSvelte } from 'svelte/easing'
    import { fade, fly } from 'svelte/transition'
-    import type { PageData } from './$types'
    import { animate, inView, stagger, timeline } from 'motion'
    import { mailtoClipboard } from '$utils/functions'
    import { getAssetUrlKey } from '$utils/api'
@@ -17,14 +16,13 @@
    import { quartOut } from '$animations/easings'
    // Components
    import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Button from '$components/atoms/Button.svelte'
    import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
    import ProcessStep from '$components/molecules/ProcessStep.svelte'
    import Banner from '$components/organisms/Banner.svelte'

-    export let data: PageData
+    export let data
    const { about, photos } = data

    let scrollY: number, innerWidth: number, innerHeight: number
@@ -182,8 +180,7 @@
 />


-<PageTransition>
-    <main class="about">
+<main class="about">
    <Banner
        title="About"
        image={{
@@ -399,5 +396,4 @@
            </div>
        </div>
    </section>
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(site)/api/data/+server.ts
+++ b/apps/website/src/routes/(site)/api/data/+server.ts
@@ -1,9 +1,8 @@
 import { error } from '@sveltejs/kit'
-import type { RequestHandler } from './$types'
 import { fetchAPI } from '$utils/api'


-export const POST = (async ({ request, setHeaders }) => {
+export const POST = async ({ request, setHeaders }) => {
    try {
        const body = await request.text()

@@ -22,4 +21,4 @@ export const POST = (async ({ request, setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies RequestHandler
+}
--- a/apps/website/src/routes/(site)/credits/+page.server.ts
+++ b/apps/website/src/routes/(site)/credits/+page.server.ts
@@ -1,9 +1,8 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'


-export const load = (async ({ setHeaders }) => {
+export const load = async ({ setHeaders }) => {
    try {
        const res = await fetchAPI(`query {
            credits {
@@ -41,4 +40,4 @@ export const load = (async ({ setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(site)/credits/+page.svelte
+++ b/apps/website/src/routes/(site)/credits/+page.svelte
@@ -4,19 +4,17 @@

 <script lang="ts">
    import { navigating } from '$app/stores'
-    import type { PageData } from './$types'
    import { onMount } from 'svelte'
    import { stagger, timeline } from 'motion'
    import { DELAY } from '$utils/constants'
    import { quartOut } from 'svelte/easing'
    // Components
    import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Heading from '$components/molecules/Heading.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'

-    export let data: PageData
+    export let data
    const { credit } = data


@@ -67,8 +65,7 @@
 />


-<PageTransition>
-    <main class="credits">
+<main class="credits">
    <Heading
        text={data.credits.text}
    />
@@ -145,5 +142,4 @@
    </section>

    <InteractiveGlobe type="cropped" />
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(site)/feed/products.xml/+server.ts
+++ b/apps/website/src/routes/(site)/feed/products.xml/+server.ts
@@ -1,5 +1,4 @@
 import { error } from '@sveltejs/kit'
-import type { RequestHandler } from './$types'
 import { fetchSwell } from '$utils/functions/shopServer'
 import { fetchAPI, getAssetUrlKey } from '$utils/api'

@@ -12,7 +11,7 @@ const gCategories = [
    }
 ]

-export const GET = (async ({ url, setHeaders }) => {
+export const GET = async ({ url, setHeaders }) => {
    try {
        const products = []

@@ -66,7 +65,7 @@ export const GET = (async ({ url, setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies RequestHandler
+}


 // Render sitemap
--- a/apps/website/src/routes/(site)/locations/+page.svelte
+++ b/apps/website/src/routes/(site)/locations/+page.svelte
@@ -6,7 +6,6 @@
    import { getContext } from 'svelte'
    // Components
    import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
    import Locations from '$components/organisms/Locations.svelte'
    import ShopModule from '$components/organisms/ShopModule.svelte'
@@ -23,8 +22,7 @@
 />


-<PageTransition>
-    <main class="explore">
+<main class="explore">
    <Heading {text} />

    <section class="explore__locations">
@@ -38,5 +36,4 @@
            <NewsletterModule />
        </div>
    </section>
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(site)/photos/+page.server.ts
+++ b/apps/website/src/routes/(site)/photos/+page.server.ts
@@ -1,10 +1,9 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public'


-export const load = (async ({ url, setHeaders }) => {
+export const load = async ({ url, setHeaders }) => {
    try {
        // Query parameters
        const queryCountry = url.searchParams.get('country') || PUBLIC_FILTERS_DEFAULT_COUNTRY
@@ -85,4 +84,4 @@ export const load = (async ({ url, setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(site)/photos/+page.svelte
+++ b/apps/website/src/routes/(site)/photos/+page.svelte
@@ -5,7 +5,6 @@
 <script lang="ts">
    import { page, navigating } from '$app/stores'
    import { goto } from '$app/navigation'
-    import type { PageData } from './$types'
    import { getContext, onMount } from 'svelte'
    import { fly } from 'svelte/transition'
    import { quartOut as quartOutSvelte } from 'svelte/easing'
@@ -20,7 +19,6 @@
    import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
    // Components
    import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import SplitText from '$components/SplitText.svelte'
    import IconEarth from '$components/atoms/IconEarth.svelte'
    import Button from '$components/atoms/Button.svelte'
@@ -32,7 +30,7 @@
    import ShopModule from '$components/organisms/ShopModule.svelte'
    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'

-    export let data: PageData
+    export let data

    let { photos, totalPhotos }: { photos: any[], totalPhotos: number } = data
    $: ({ photos, totalPhotos } = data)
@@ -337,8 +335,7 @@
 />


-<PageTransition>
-    <main class="photos-page">
+<main class="photos-page">
    <section class="photos-page__intro"
        class:is-passed={scrolledPastIntro}
    >
@@ -467,9 +464,9 @@
                    </p>

                    <Button
-                            tag="button"
+                        size="large"
+                        color="beige"
                        text={!ended ? 'See more photos' : "You've seen it all!"}
-                            size="large" color="beige"
                        on:click={loadMorePhotos}
                        disabled={ended}
                    />
@@ -496,5 +493,4 @@
            </div>
        </div>
    </section>
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(site)/subscribe/+page.server.ts
+++ b/apps/website/src/routes/(site)/subscribe/+page.server.ts
@@ -1,9 +1,8 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'


-export const load = (async ({ setHeaders }) => {
+export const load = async ({ setHeaders }) => {
    try {
        const res = await fetchAPI(`query {
            settings {
@@ -36,4 +35,4 @@ export const load = (async ({ setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(site)/subscribe/+page.svelte
+++ b/apps/website/src/routes/(site)/subscribe/+page.svelte
@@ -4,20 +4,18 @@

 <script lang="ts">
    import { navigating } from '$app/stores'
-    import type { PageData } from './$types'
    import { onMount } from 'svelte'
    import { stagger, timeline } from 'motion'
    import { DELAY } from '$utils/constants'
    import { quartOut } from '$animations/easings'
    // Components
    import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import Heading from '$components/molecules/Heading.svelte'
    import EmailForm from '$components/molecules/EmailForm.svelte'
    import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'

-    export let data: PageData
+    export let data

    const { issues } = data
    const latestIssue = issues[0]
@@ -66,8 +64,7 @@
 />


-<PageTransition>
-    <main class="subscribe">
+<main class="subscribe">
    <div class="subscribe__top">
        <Heading
            text={data.newsletter_page_text}
@@ -95,5 +92,4 @@
    </section>

    <InteractiveGlobe type="cropped" />
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/(site)/terms/+page.server.ts
+++ b/apps/website/src/routes/(site)/terms/+page.server.ts
@@ -1,9 +1,8 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'


-export const load = (async ({ setHeaders }) => {
+export const load = async ({ setHeaders }) => {
    try {
        const res = await fetchAPI(`query {
            legal {
@@ -24,4 +23,4 @@ export const load = (async ({ setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/(site)/terms/+page.svelte
+++ b/apps/website/src/routes/(site)/terms/+page.svelte
@@ -3,15 +3,13 @@
 </style>

 <script lang="ts">
-    import type { PageData } from './$types'
    import dayjs from 'dayjs'
    import relativeTime from 'dayjs/plugin/relativeTime'
    // Components
-    import PageTransition from '$components/PageTransition.svelte'
    import Metas from '$components/Metas.svelte'
    import Heading from '$components/molecules/Heading.svelte'

-    export let data: PageData
+    export let data
    const { legal } = data

    dayjs.extend(relativeTime)
@@ -23,8 +21,7 @@
 />


-<PageTransition>
-    <main class="terms">
+<main class="terms">
    <Heading text="Everything you need to know about using our website or buying our products" />

    <section class="terms__categories">
@@ -45,5 +42,4 @@
            </footer>
        </div>
    </section>
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/+error.svelte
+++ b/apps/website/src/routes/+error.svelte
@@ -7,7 +7,6 @@
    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 InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -35,8 +34,7 @@
 />


-<PageTransition>
-    <main class="page-error">
+<main class="page-error">
    <div class="page-error__top">
        <Heading
            text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
@@ -81,5 +79,4 @@
            </div>
        </div>
    </div>
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/+layout.server.ts
+++ b/apps/website/src/routes/+layout.server.ts
@@ -1,10 +1,9 @@
 import { error } from '@sveltejs/kit'
-import type { LayoutServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'


-export const load = (async () => {
+export const load = async ({ url }) => {
    try {
        const res = await fetchAPI(`query {
            locations: location (filter: { status: { _eq: "published" }}) {
@@ -97,9 +96,10 @@ export const load = (async () => {
                    locations: countLocations[0].count.id,
                    countries: countCountries[0].count.id,
                },
+                currentPath: url.pathname,
            }
        }
    } catch (err) {
        throw error(500, err || 'Failed to fetch data')
    }
-}) satisfies LayoutServerLoad
+}
--- a/apps/website/src/routes/+layout.svelte
+++ b/apps/website/src/routes/+layout.svelte
@@ -1,22 +1,41 @@
+<style lang="scss">
+    // Toast
+    :global(.toast--global) {
+        position: fixed;
+        z-index: 20;
+        max-width: 420px;
+        bottom: var(--offset-sides);
+        right: var(--offset-sides);
+        left: calc(var(--offset-sides) + 44px + 24px);
+
+        @include bp (mob-lg) {
+            left: auto;
+        }
+    }
+</style>
+
 <script lang="ts">
    import '../style/global.scss'

    import { browser } from '$app/environment'
    import { page } from '$app/stores'
-    import { beforeNavigate } from '$app/navigation'
+    import { beforeNavigate, afterNavigate } from '$app/navigation'
    import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public'
-    import type { PageData } from './$types'
-    import { onMount, setContext } from 'svelte'
+    import { setContext, onMount } from 'svelte'
+    import { fade } from 'svelte/transition'
+    import { DELAY, DURATION } from '$utils/constants'
    import { pageLoading, previousPage } from '$utils/stores'
+    import { scrollToTop } from 'utils/scroll'
    import '$utils/polyfills'
    // Components
    import SVGSprite from '$components/SVGSprite.svelte'
    import SmoothScroll from '$components/SmoothScroll.svelte'
    import Analytics from '$components/Analytics.svelte'
    import Switcher from '$components/molecules/Switcher.svelte'
+    import Toast from '$components/molecules/Toast.svelte'
    import Footer from '$components/organisms/Footer.svelte'

-    export let data: PageData
+    export let data

    let innerHeight: number
    $: innerHeight && document.body.style.setProperty('--vh', `${innerHeight}px`)
@@ -38,13 +57,30 @@
    /**
     * On page change
     */
+    beforeNavigate(({ from, to }) => {
        // Store previous page (for photo Viewer close button)
-    beforeNavigate(({ from }) => {
        $previousPage = from.url.pathname
+
+        // Enable page loading state if URL changed
+        if (from.route.id !== to.route.id) {
+            $pageLoading = true
+        }
+    })
+
+    afterNavigate(() => {
+        // Remove page loading state
+        setTimeout(() => $pageLoading = false, DELAY.PAGE_LOADING)
+
+        // Scroll back to top when new page is ready (excepted certain pages)
+        if (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')) {
+            setTimeout(scrollToTop, DELAY.PAGE_IN)
+        }
    })

    // Define page loading
-    $: browser && document.body.classList.toggle('is-loading', $pageLoading)
+    $: if (browser) {
+        document.body.classList.toggle('is-loading', $pageLoading)
+    }


    onMount(() => {
@@ -66,10 +102,33 @@

 <Switcher />

-<slot />
+{#key data.currentPath}
+    <div
+        in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
+        out:fade={{ duration: DURATION.PAGE_OUT }}
+    >
+        <slot />

-{#if !$page.params.photo}
+        {#if !$page.params.photo}
            <Footer />
+        {/if}
+    </div>
+{/key}
+
+
+{#if !['/[photo]'].some(sub => $page.route.id.includes(sub))}
+    <Toast
+        type="global"
+        id="posters-promo"
+        text="Upgrade your walls! <strong>10% off</strong> in cart with free shipping on our graphic posters."
+        cta={{
+            label: 'View posters',
+            url: '/shop',
+            color: 'pink',
+        }}
+        images={data.shop.module_images.map(({ directus_files_id: { id, title } }) => ({ id, title }))}
+        class="toast-home"
+    />
 {/if}

 <SVGSprite />
--- a/apps/website/src/routes/+page.server.ts
+++ b/apps/website/src/routes/+page.server.ts
@@ -1,10 +1,9 @@
 import { error } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItems } from 'utils/array'


-export const load = (async ({ setHeaders }) => {
+export const load = async ({ setHeaders }) => {
    try {
        // Get total of published photos
        const totalRes = await fetchAPI(`query {
@@ -53,4 +52,4 @@ export const load = (async ({ setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies PageServerLoad
+}
--- a/apps/website/src/routes/+page.svelte
+++ b/apps/website/src/routes/+page.svelte
@@ -4,7 +4,6 @@

 <script lang="ts">
    import { navigating } from '$app/stores'
-    import type { PageData } from './$types'
    import { getContext, onMount } from 'svelte'
    import { timeline, stagger } from 'motion'
    import { DELAY } from '$utils/constants'
@@ -14,7 +13,6 @@
    import { quartOut } from '$animations/easings'
    // Components
    import Metas from '$components/Metas.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import SplitText from '$components/SplitText.svelte'
    import Button from '$components/atoms/Button.svelte'
    import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -28,7 +26,7 @@
    import ShopModule from '$components/organisms/ShopModule.svelte'
    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'

-    export let data: PageData
+    export let data

    const { photos } = data
    const { settings, locations }: any = getContext('global')
@@ -82,8 +80,7 @@
 />


-<PageTransition>
-    <main class="homepage">
+<main class="homepage">
    <section class="homepage__intro"
        use:reveal={{
            animation: { opacity: [0, 1] },
@@ -107,7 +104,12 @@
                {settings.description}
            </p>

-                <Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
+            <Button
+                size="medium"
+                url="#locations"
+                text="Explore locations"
+                on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}
+            >
                <IconEarth animate={true} />
            </Button>
        </div>
@@ -166,5 +168,4 @@
            </div>
        </div>
    </div>
-    </main>
-</PageTransition>
+</main>
--- a/apps/website/src/routes/api/newsletter/+server.ts
+++ b/apps/website/src/routes/api/newsletter/+server.ts
@@ -1,8 +1,7 @@
 import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
-import type { RequestHandler } from './$types'


-export const POST = (async ({ request, fetch }) => {
+export const POST = async ({ request, fetch }) => {
    const data: { email: string } = await request.json()
    const { email } = data

@@ -38,4 +37,4 @@ export const POST = (async ({ request, fetch }) => {
    }), {
        status: 200
    })
-}) satisfies RequestHandler
+}
--- a/apps/website/src/routes/sitemap.xml/+server.ts
+++ b/apps/website/src/routes/sitemap.xml/+server.ts
@@ -1,9 +1,8 @@
 import { error } from '@sveltejs/kit'
-import type { RequestHandler } from './$types'
 import { fetchAPI } from '$utils/api'


-export const GET = (async ({ url, setHeaders }) => {
+export const GET = async ({ url, setHeaders }) => {
    try {
        const locations = []
        const products = []
@@ -72,7 +71,7 @@ export const GET = (async ({ url, setHeaders }) => {
    } catch (err) {
        throw error(500, err.message)
    }
-}) satisfies RequestHandler
+}


 const render = (origin: string, pages: any[]) => {
--- a/apps/website/src/style/_base.scss
+++ b/apps/website/src/style/_base.scss
@@ -1,29 +1,13 @@
-// CSS Variables
-:root {
-    // Sizes
-    --container-width: #{$container-width};
-
-    // Offsets
-    --switcher-offset: 16px;
-
-    // Animation
-    --ease-quart: cubic-bezier(.165, .84, .44, 1);
-    --ease-cubic: cubic-bezier(.785, .135, .15, .86);
-    --ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
-}
-@include bp (sm) {
-    :root {
-        // Offsets
-        --switcher-offset: clamp(20px, 3vw, 40px);
-    }
-}
-
 html {
    font: #{$base-font-size}/1.2 $font-sans;
    font-weight: 400;
    color: #fff;
    min-width: 320px;
    word-break: normal;
+
+    &.block-scroll {
+        overflow: hidden;
+    }
 }
 body {
    @include font-smooth;
@@ -33,9 +17,6 @@ body {
    overflow-x: hidden;
    overscroll-behavior: none;

-    &.block-scroll {
-        overflow: hidden;
-    }
    &.is-loading * {
        cursor: wait !important;
    }
--- a/apps/website/src/style/_variables-css.scss
+++ b/apps/website/src/style/_variables-css.scss
@@ -0,0 +1,17 @@
+:root {
+    // Sizes
+    --container-width: #{$container-width};
+
+    // Offsets
+    --offset-sides: 16px;
+
+    // Animation
+    --ease-quart: cubic-bezier(.165, .84, .44, 1);
+    --ease-cubic: cubic-bezier(.785, .135, .15, .86);
+    --ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
+
+    @include bp (sm) {
+        // Offsets
+        --offset-sides: clamp(20px, 3vw, 40px);
+    }
+}
--- a/apps/website/src/style/atoms/_button.scss
+++ b/apps/website/src/style/atoms/_button.scss
@@ -1,10 +1,10 @@
 .button {
    display: inline-flex;
    align-items: center;
-    height: 40px;
-    padding: 0 16px;
    background: #fff;
-    font: 900 #{rem(16px)}/1 $font-sans;
+    font-weight: 900;
+    line-height: 1;
+    font-family: $font-sans;
    color: $color-text;
    cursor: pointer;
    border-radius: 100vh;
@@ -12,12 +12,6 @@
    text-decoration: none;
    transition: background-color 0.55s var(--ease-quart), color 0.55s var(--ease-quart);

-    @include bp (md) {
-        height: 48px;
-        padding: 1px 24px 0;
-        font-size: rem(18px);
-    }
-
    // Icon
    :global(img), :global(svg) {
        display: block;
@@ -47,7 +41,7 @@
    // XSmall
    &--xsmall {
        height: 32px;
-        padding: 0 6px;
+        padding: 0 12px;

        @include bp (md) {
            height: 32px;
@@ -68,6 +62,18 @@
        }
    }

+    // Medium
+    &--medium {
+        height: 40px;
+        padding: 0 16px;
+        font-size: rem(16px);
+
+        @include bp (md) {
+            height: 48px;
+            font-size: rem(18px);
+        }
+    }
+
    // Large
    &--large {
        height: 56px;
--- a/apps/website/src/style/global.scss
+++ b/apps/website/src/style/global.scss
@@ -7,6 +7,7 @@
@import "tools/helpers";

 // Base
+@import "variables-css";
@import "base";
@import "fonts";
@import "typography";
--- a/apps/website/src/style/molecules/_switcher.scss
+++ b/apps/website/src/style/molecules/_switcher.scss
@@ -3,8 +3,8 @@
    $shadow-color: rgba(0, 0, 0, 0.05);
    position: fixed;
    z-index: 100;
-    bottom: var(--switcher-offset);
-    left: var(--switcher-offset);
+    bottom: var(--offset-sides);
+    left: var(--offset-sides);
    pointer-events: none;

    @include bp (md) {
--- a/apps/website/src/style/molecules/_toast.scss
+++ b/apps/website/src/style/molecules/_toast.scss
@@ -0,0 +1,120 @@
+.toast {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    padding-right: 28px;
+    background: #fff;
+    border-radius: 8px;
+
+    @include bp (md) {
+        padding-right: 32px;
+    }
+}
+
+// Media
+.media {
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    flex: 0 0 clamp(40px, 14vw, 64px);
+    aspect-ratio: 1 / 1.25;
+    height: 100%;
+    margin-right: 16px;
+    border-radius: 4px;
+
+    @include bp (md) {
+        flex: 0 0 min(7vw, 104px);
+        margin-right: 24px;
+    }
+
+    a {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    :global(picture) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        transform: scale(1.075);
+        transition: opacity 0.8s, transform 1.6s var(--ease-quart);
+    }
+    :global(img) {
+        object-position: center 32%;
+    }
+
+    :global(.is-visible) {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    :global(img) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+
+        @include bp (sm) {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+
+        }
+    }
+}
+
+// Content
+.content {
+    color: $color-text;
+    font-size: rem(14px);
+
+    @include bp (md) {
+        font-size: rem(16px);
+    }
+
+    .text {
+        margin-bottom: 12px;
+
+        @include bp (md) {
+            margin-bottom: 20px;
+        }
+    }
+
+    :global(strong) {
+        font-weight: normal;
+        color: $color-secondary;
+    }
+}
+
+// Close
+.close {
+    --size: 28px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--size);
+    height: var(--size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include bp (sm) {
+        --size: 32px;
+    }
+
+    :global(svg) {
+        transition: transform 0.6s var(--ease-quart);
+    }
+
+    // Hover
+    &:hover {
+        :global(svg) {
+            transform: rotate(90deg) translateZ(0);
+        }
+    }
+}
--- a/apps/website/src/style/organisms/_cart.scss
+++ b/apps/website/src/style/organisms/_cart.scss
@@ -140,6 +140,11 @@
                @include bp (md) {
                    max-width: 304px;
                }
+
+                :global(strong) {
+                    font-weight: normal;
+                    color: $color-secondary;
+                }
            }
        }
    }
--- a/apps/website/src/utils/constants.ts
+++ b/apps/website/src/utils/constants.ts
@@ -1,10 +1,11 @@
-// Delays
-export const DELAY = {
-    PAGE_LOADING: 600,
-}
-
 // Durations
 export const DURATION = {
    PAGE_IN: 400,
    PAGE_OUT: 400,
 }
+
+// Delays
+export const DELAY = {
+    PAGE_LOADING: 600,
+    PAGE_IN: DURATION.PAGE_OUT + 1,
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "housesof",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "private": true,
  "workspaces": [
    "apps/*",
@@ -13,7 +13,7 @@
  },
  "devDependencies": {
    "prettier": "^2.8.8",
-    "turbo": "^1.9.4"
+    "turbo": "^1.10.3"
  },
  "type": "module",
  "engines": {
--- a/packages/config/eslintrc.config.cjs
+++ b/packages/config/eslintrc.config.cjs
@@ -61,6 +61,10 @@ module.exports = {
            'ts-nocheck': false,
            'ts-expect-error': 'allow-with-description',
        }],
+        // Ignore some no-used-vars
+        '@typescript-eslint/no-unused-vars': ['warn', {
+            'argsIgnorePattern': '^_',
+        }],

        /* Svelte
        ========================================= */
@@ -72,6 +76,8 @@ module.exports = {
                avoidInvalidUnquotedInHTML: false,
            }
        }],
+        // Enable @html
+        'svelte/no-at-html-tags': 'off',
    },
    settings: {
    },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml