Merge branch 'dev'

apps/api/package.json

@@ -9,7 +9,7 @@
     "start": "directus start"
   },
   "dependencies": {
-    "directus": "^10.1.0",
+    "directus": "^10.2.1",
-    "pg": "^8.10.0"
+    "pg": "^8.11.0"
   }
 }

apps/website/package.json

@@ -15,41 +15,42 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@studio-freight/lenis": "^1.0.12",
+    "@studio-freight/lenis": "^1.0.14",
-    "dayjs": "^1.11.7",
+    "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-auto": "^2.1.0",
-    "@sveltejs/adapter-vercel": "^2.4.3",
+    "@sveltejs/adapter-vercel": "^3.0.1",
-    "@sveltejs/kit": "^1.16.3",
+    "@sveltejs/kit": "^1.20.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@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": "^8.42.0",
-    "eslint-plugin-svelte": "^2.28.0",
+    "eslint-plugin-svelte": "^2.30.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-focus-visible": "^8.0.2",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^8.3.2",
+    "postcss-preset-env": "^8.4.2",
-    "postcss-sort-media-queries": "^5.1.0",
+    "postcss-sort-media-queries": "^5.2.0",
-    "sass": "^1.62.1",
+    "sass": "^1.63.3",
     "svelte": "^3.59.1",
-    "svelte-check": "^3.3.2",
+    "svelte-check": "^3.4.3",
-    "svelte-preprocess": "^5.0.3",
+    "svelte-preprocess": "^5.0.4",
-    "tslib": "^2.5.0",
+    "tslib": "^2.5.3",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.3",
-    "vite": "^4.3.5"
+    "vite": "^4.3.9"
   },
   "type": "module",
   "browserslist": [

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>

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',
         })

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}

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 = () => {

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'
+    let tag: 'a' | 'button'
-    const classes = [
+    $: tag = url ? 'a' : 'button'
-        className,
+
+    $: 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
+        $$props.class,
-    ].join(' ').trim()
+    )
 
     // Define external links
     $: isExternal = /^(http|https):\/\//i.test(url)

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'}

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">

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"

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',

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}

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}

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}>

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"

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

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}

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>

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={() => {

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>

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,7 +24,6 @@
 />
 
 
-<PageTransition>
 <main class="shop-page">
     <ShopHeader />
 
@@ -40,4 +38,3 @@
 
     <PostersGrid {posters} />
 </main>
-</PageTransition>

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
+}

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
 

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
+}

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,7 +24,6 @@
 />
 
 
-<PageTransition>
 <main class="shop-page">
     <ShopHeader {product} />
 
@@ -37,4 +34,3 @@
 
     <PostersGrid {posters} />
 </main>
-</PageTransition>

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
+}

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,7 +23,6 @@
 />
 
 
-<PageTransition>
 <main class="shop-page">
     <ShopHeader product={data.product} />
 
@@ -36,4 +33,3 @@
 
     <PostersGrid {posters} />
 </main>
-</PageTransition>

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
+}

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,7 +217,6 @@
 />
 
 
-<PageTransition>
 <main class="location-page">
     <section class="location-page__intro grid" bind:this={introEl}>
         <h1 class="title" class:is-short={location.name.length <= 4}>
@@ -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}
@@ -364,4 +361,3 @@
         </div>
     {/if}
 </main>
-</PageTransition>

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
+}

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,7 +300,6 @@
 {/if}
 
 
-<PageTransition>
 <main class="photo-page">
     <div class="container grid">
         <p class="photo-page__notice text-label">Tap for fullscreen</p>
@@ -403,4 +400,3 @@
         </div>
     {/if}
 </main>
-</PageTransition>

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
+}

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,7 +180,6 @@
 />
 
 
-<PageTransition>
 <main class="about">
     <Banner
         title="About"
@@ -400,4 +397,3 @@
         </div>
     </section>
 </main>
-</PageTransition>

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
+}

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
+}

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,7 +65,6 @@
 />
 
 
-<PageTransition>
 <main class="credits">
     <Heading
         text={data.credits.text}
@@ -146,4 +143,3 @@
 
     <InteractiveGlobe type="cropped" />
 </main>
-</PageTransition>

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

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,7 +22,6 @@
 />
 
 
-<PageTransition>
 <main class="explore">
     <Heading {text} />
 
@@ -39,4 +37,3 @@
         </div>
     </section>
 </main>
-</PageTransition>

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
+}

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,7 +335,6 @@
 />
 
 
-<PageTransition>
 <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}
                     />
@@ -497,4 +494,3 @@
         </div>
     </section>
 </main>
-</PageTransition>

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
+}

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,7 +64,6 @@
 />
 
 
-<PageTransition>
 <main class="subscribe">
     <div class="subscribe__top">
         <Heading
@@ -96,4 +93,3 @@
 
     <InteractiveGlobe type="cropped" />
 </main>
-</PageTransition>

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
+}

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,7 +21,6 @@
 />
 
 
-<PageTransition>
 <main class="terms">
     <Heading text="Everything you need to know about using our website or buying our products" />
 
@@ -46,4 +43,3 @@
         </div>
     </section>
 </main>
-</PageTransition>

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,7 +34,6 @@
 />
 
 
-<PageTransition>
 <main class="page-error">
     <div class="page-error__top">
         <Heading
@@ -82,4 +80,3 @@
         </div>
     </div>
 </main>
-</PageTransition>

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
+}

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 { setContext, onMount } from 'svelte'
-    import { onMount, setContext } 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,11 +102,34 @@
 
 <Switcher />
 
+{#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}
             <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 />
 <SmoothScroll />

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
+}

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,7 +80,6 @@
 />
 
 
-<PageTransition>
 <main class="homepage">
     <section class="homepage__intro"
         use:reveal={{
@@ -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>
@@ -167,4 +169,3 @@
         </div>
     </div>
 </main>
-</PageTransition>

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
+}

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[]) => {

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;
     }

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);
+    }
+}

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;

apps/website/src/style/global.scss

@@ -7,6 +7,7 @@
 @import "tools/helpers";
 
 // Base
+@import "variables-css";
 @import "base";
 @import "fonts";
 @import "typography";

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);
+    bottom: var(--offset-sides);
-    left: var(--switcher-offset);
+    left: var(--offset-sides);
     pointer-events: none;
 
     @include bp (md) {

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);
+        }
+    }
+}

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;
+                }
             }
         }
     }

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,
+}

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": {

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: {
     },