Merge branch 'dev'

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

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

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

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,19 +24,17 @@
 />
 
 
-<PageTransition>
-    <main class="shop-page">
-        <ShopHeader />
+<main class="shop-page">
+    <ShopHeader />
 
-        <section class="shop-page__error">
-            <div class="container grid">
-                <div class="inner">
-                    <h2 class="title-big">Uh oh!</h2>
-                    <p class="text-medium">{errors[$page.status].message}</p>
-                </div>
+    <section class="shop-page__error">
+        <div class="container grid">
+            <div class="inner">
+                <h2 class="title-big">Uh oh!</h2>
+                <p class="text-medium">{errors[$page.status].message}</p>
             </div>
-        </section>
+        </div>
+    </section>
 
-        <PostersGrid {posters} />
-    </main>
-</PageTransition>
+    <PostersGrid {posters} />
+</main>

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,15 +24,13 @@
 />
 
 
-<PageTransition>
-    <main class="shop-page">
-        <ShopHeader {product} />
+<main class="shop-page">
+    <ShopHeader {product} />
 
-        <PosterLayout
-            product={product}
-            shopProduct={shopProduct}
-        />
+    <PosterLayout
+        product={product}
+        shopProduct={shopProduct}
+    />
 
-        <PostersGrid {posters} />
-    </main>
-</PageTransition>
+    <PostersGrid {posters} />
+</main>

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,15 +23,13 @@
 />
 
 
-<PageTransition>
-    <main class="shop-page">
-        <ShopHeader product={data.product} />
+<main class="shop-page">
+    <ShopHeader product={data.product} />
 
-        <PosterLayout
-            product={data.product}
-            shopProduct={data.shopProduct}
-        />
+    <PosterLayout
+        product={data.product}
+        shopProduct={data.shopProduct}
+    />
 
-        <PostersGrid {posters} />
-    </main>
-</PageTransition>
+    <PostersGrid {posters} />
+</main>

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,149 +217,147 @@
 />
 
 
-<PageTransition>
-    <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">
-                    <strong class="word">Houses</strong>
-                    <span class="of">of</span>
-                </span>
-                <strong class="city mask">
-                    <span class="word">{location.name}</span>
-                </strong>
-            </h1>
+<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">
+                <strong class="word">Houses</strong>
+                <span class="of">of</span>
+            </span>
+            <strong class="city mask">
+                <span class="word">{location.name}</span>
+            </strong>
+        </h1>
 
-            <div class="location-page__description grid">
-                <div class="wrap">
-                    <div class="text-medium">
-                        Houses of {location.name} {location.description ?? 'has no description yet'}
-                    </div>
-                    <div class="info">
-                        <p class="text-label">
-                            Photos by
-                            {#each location.credits as { credit_id: { name, website } }}
-                                {#if website}
-                                    <a href={website} target="_blank" rel="noopener external">
-                                        {name}
-                                    </a>
-                                {:else}
-                                    <span>{name}</span>
-                                {/if}
-                            {/each}
+        <div class="location-page__description grid">
+            <div class="wrap">
+                <div class="text-medium">
+                    Houses of {location.name} {location.description ?? 'has no description yet'}
+                </div>
+                <div class="info">
+                    <p class="text-label">
+                        Photos by
+                        {#each location.credits as { credit_id: { name, website } }}
+                            {#if website}
+                                <a href={website} target="_blank" rel="noopener external">
+                                    {name}
+                                </a>
+                            {:else}
+                                <span>{name}</span>
+                            {/if}
+                        {/each}
+                    </p>
+                    {#if latestPhoto}
+                        &middot;
+                        <p class="text-label" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
+                            Updated <time datetime={dayjs(latestPhoto.date_created).format('YYYY-MM-DD')}>
+                                {dayjs().to(dayjs(latestPhoto.date_created))}
+                            </time>
                         </p>
-                        {#if latestPhoto}
-                            &middot;
-                            <p class="text-label" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
-                                Updated <time datetime={dayjs(latestPhoto.date_created).format('YYYY-MM-DD')}>
-                                    {dayjs().to(dayjs(latestPhoto.date_created))}
-                                </time>
-                            </p>
-                        {/if}
-                    </div>
+                    {/if}
+                </div>
 
-                    <div class="ctas">
-                        <Button url="/locations" text="Change location" class="shadow-small">
-                            <IconEarth />
+                <div class="ctas">
+                    <Button size="medium" url="/locations" text="Change location" class="shadow-small">
+                        <IconEarth />
+                    </Button>
+
+                    {#if location.has_poster}
+                        <Button size="medium" url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
+                            <!-- <IconEarth /> -->
                         </Button>
-
-                        {#if location.has_poster}
-                            <Button url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
-                                <!-- <IconEarth /> -->
-                            </Button>
-                        {/if}
-                    </div>
+                    {/if}
                 </div>
             </div>
+        </div>
 
-            {#if hasIllustration}
-                <picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px">
-                    <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
-                    <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
-                    <img
-                        src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
-                        width={320}
-                        height={824}
-                        alt="Illustration for {location.name}"
-                        decoding="async"
-                    />
-                </picture>
-            {/if}
+        {#if hasIllustration}
+            <picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px">
+                <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
+                <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
+                <img
+                    src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
+                    width={320}
+                    height={824}
+                    alt="Illustration for {location.name}"
+                    decoding="async"
+                />
+            </picture>
+        {/if}
+    </section>
+
+    {#if photos.length}
+        <section class="location-page__houses" bind:this={photosListEl} data-sveltekit-noscroll>
+            {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index}
+                <House
+                    {title}
+                    photoId={id}
+                    photoAlt={alt}
+                    url="/{params.country}/{params.location}/{slug}"
+                    {city}
+                    location={location.name}
+                    ratio={width / height}
+                    date={date_taken}
+                    index="{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}"
+                />
+            {/each}
         </section>
 
-        {#if photos.length}
-            <section class="location-page__houses" bind:this={photosListEl} data-sveltekit-noscroll>
-                {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index}
-                    <House
-                        {title}
-                        photoId={id}
-                        photoAlt={alt}
-                        url="/{params.country}/{params.location}/{slug}"
-                        {city}
-                        location={location.name}
-                        ratio={width / height}
-                        date={date_taken}
-                        index="{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}"
-                    />
-                {/each}
-            </section>
+        <section class="location-page__next container">
+            <Pagination
+                ended={ended}
+                current={currentPhotosAmount}
+                total={totalPhotos}
+                on:click={() => !ended && loadMorePhotos()}
+            >
+                {#if !ended}
+                    <p class="more">See more photos</p>
+                {:else}
+                    <p>You've seen it all!</p>
+                {/if}
+            </Pagination>
 
-            <section class="location-page__next container">
-                <Pagination
-                    ended={ended}
-                    current={currentPhotosAmount}
-                    total={totalPhotos}
-                    on:click={() => !ended && loadMorePhotos()}
-                >
-                    {#if !ended}
-                        <p class="more">See more photos</p>
-                    {:else}
-                        <p>You've seen it all!</p>
-                    {/if}
-                </Pagination>
-
-                {#if ended}
-                    <div class="grid-modules">
-                        <div class="container grid">
-                            <div class="wrap">
-                                {#if location.has_poster}
-                                    <ShopModule
-                                        title="Poster available"
-                                        text="Houses of {location.name} is available as a poster on our shop."
-                                        images={product.photos_product}
-                                        textBottom={null}
-                                        buttonText="Buy"
-                                        url="/shop/poster-{location.slug}"
-                                    />
-                                {:else}
-                                    <ShopModule />
-                                {/if}
-                                <NewsletterModule theme="light" />
-                            </div>
+            {#if ended}
+                <div class="grid-modules">
+                    <div class="container grid">
+                        <div class="wrap">
+                            {#if location.has_poster}
+                                <ShopModule
+                                    title="Poster available"
+                                    text="Houses of {location.name} is available as a poster on our shop."
+                                    images={product.photos_product}
+                                    textBottom={null}
+                                    buttonText="Buy"
+                                    url="/shop/poster-{location.slug}"
+                                />
+                            {:else}
+                                <ShopModule />
+                            {/if}
+                            <NewsletterModule theme="light" />
                         </div>
                     </div>
-                {/if}
+                </div>
+            {/if}
 
-                {#if location.acknowledgement}
-                    <div class="acknowledgement">
-                        <Image
-                            class="flag"
-                            id={location.country.flag.id}
-                            sizeKey="square-small"
-                            width={32} height={32}
-                            alt="Flag of {location.country.name}"
-                        />
-                        <p>{location.acknowledgement}</p>
-                    </div>
-                {/if}
-            </section>
-        {:else}
-            <div class="location-page__message">
-                <p>
-                    No photos available for {location.name}.<br>
-                    Come back later!
-                </p>
-            </div>
-        {/if}
-    </main>
-</PageTransition>
+            {#if location.acknowledgement}
+                <div class="acknowledgement">
+                    <Image
+                        class="flag"
+                        id={location.country.flag.id}
+                        sizeKey="square-small"
+                        width={32} height={32}
+                        alt="Flag of {location.country.name}"
+                    />
+                    <p>{location.acknowledgement}</p>
+                </div>
+            {/if}
+        </section>
+    {:else}
+        <div class="location-page__message">
+            <p>
+                No photos available for {location.name}.<br>
+                Come back later!
+            </p>
+        </div>
+    {/if}
+</main>

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,105 +300,103 @@
 {/if}
 
 
-<PageTransition>
-    <main class="photo-page">
-        <div class="container grid">
-            <p class="photo-page__notice text-label">Tap for fullscreen</p>
+<main class="photo-page">
+    <div class="container grid">
+        <p class="photo-page__notice text-label">Tap for fullscreen</p>
 
-            <ButtonCircle
-                tag="a"
-                url={previousUrl}
-                color="purple"
-                class="close shadow-box-dark"
-                label="Close"
+        <ButtonCircle
+            tag="a"
+            url={previousUrl}
+            color="purple"
+            class="close shadow-box-dark"
+            label="Close"
+        >
+            <svg width="12" height="12">
+                <use xlink:href="#cross">
+            </svg>
+        </ButtonCircle>
+
+        <div class="photo-page__carousel">
+            <div class="photo-page__images"
+                use:swipe
+                on:swipe={handleSwipe}
+                on:tap={toggleFullscreen}
             >
-                <svg width="12" height="12">
-                    <use xlink:href="#cross">
-                </svg>
-            </ButtonCircle>
-
-            <div class="photo-page__carousel">
-                <div class="photo-page__images"
-                    use:swipe
-                    on:swipe={handleSwipe}
-                    on:tap={toggleFullscreen}
-                >
-                    {#each visiblePhotos as { id, image, title }, index (id)}
-                        <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
-                            <Image
-                                class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
-                                id={image.id}
-                                alt={title}
-                                sizeKey="photo-list"
-                                sizes={{
-                                    small: { width: 500 },
-                                    medium: { width: 850 },
-                                    large: { width: 1280 },
-                                }}
-                                ratio={1.5}
-                            />
-                        </div>
-                    {/each}
-
-                    <div class="photo-page__controls">
-                        <ButtonCircle class="prev shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
-                            <IconArrow color="pink" flip={true} />
-                        </ButtonCircle>
-                        <ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} on:click={goToNext}>
-                            <IconArrow color="pink" />
-                        </ButtonCircle>
+                {#each visiblePhotos as { id, image, title }, index (id)}
+                    <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
+                        <Image
+                            class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
+                            id={image.id}
+                            alt={title}
+                            sizeKey="photo-list"
+                            sizes={{
+                                small: { width: 500 },
+                                medium: { width: 850 },
+                                large: { width: 1280 },
+                            }}
+                            ratio={1.5}
+                        />
                     </div>
+                {/each}
 
-
-                    <div class="photo-page__index title-index">
-                        <SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
-                    </div>
+                <div class="photo-page__controls">
+                    <ButtonCircle class="prev shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
+                        <IconArrow color="pink" flip={true} />
+                    </ButtonCircle>
+                    <ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} on:click={goToNext}>
+                        <IconArrow color="pink" />
+                    </ButtonCircle>
                 </div>
 
-                <div class="photo-page__info">
-                    <h1 class="title-medium">{currentPhoto.title}</h1>
 
-                    <div class="detail text-info">
-                        <a href="/{location.country.slug}/{location.slug}" data-sveltekit-noscroll>
-                            <Icon class="icon" icon="map-pin" label="Map pin" />
-                            <span>
-                                {#if currentPhoto.city}
-                                    {currentPhoto.city}, {location.name}, {location.country.name}
-                                {:else}
-                                    {location.name}, {location.country.name}
-                                {/if}
-                            </span>
-                        </a>
-                        {#if currentPhoto.date_taken}
-                            <span class="sep">&middot;</span>
-                            <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM YYYY')}</time>
-                        {/if}
-                    </div>
+                <div class="photo-page__index title-index">
+                    <SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
+                </div>
+            </div>
+
+            <div class="photo-page__info">
+                <h1 class="title-medium">{currentPhoto.title}</h1>
+
+                <div class="detail text-info">
+                    <a href="/{location.country.slug}/{location.slug}" data-sveltekit-noscroll>
+                        <Icon class="icon" icon="map-pin" label="Map pin" />
+                        <span>
+                            {#if currentPhoto.city}
+                                {currentPhoto.city}, {location.name}, {location.country.name}
+                            {:else}
+                                {location.name}, {location.country.name}
+                            {/if}
+                        </span>
+                    </a>
+                    {#if currentPhoto.date_taken}
+                        <span class="sep">&middot;</span>
+                        <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM YYYY')}</time>
+                    {/if}
                 </div>
             </div>
         </div>
+    </div>
 
-        {#if isFullscreen}
-            <div class="photo-page__fullscreen" bind:this={fullscreenEl}
-                on:click={toggleFullscreen} on:keydown
-                in:fade={{ easing: quartOut, duration: 1000 }}
-                out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
-            >
-                <div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}>
-                    <Image
-                        id={currentPhoto.image.id}
-                        sizeKey="photo-grid-large"
-                        width={1266}
-                        height={844}
-                        alt={currentPhoto.title}
-                    />
-                    <ButtonCircle color="gray-medium" class="close">
-                        <svg width="18" height="18" viewBox="0 0 18 18" fill="#fff" xmlns="http://www.w3.org/2000/svg">
-                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.751 0c4.274 0 7.752 3.477 7.752 7.751 0 1.846-.65 3.543-1.73 4.875l3.99 3.991a.81.81 0 1 1-1.146 1.146l-3.99-3.991a7.714 7.714 0 0 1-4.876 1.73C3.477 15.503 0 12.027 0 7.753 0 3.476 3.477 0 7.751 0Zm0 1.62a6.138 6.138 0 0 0-6.13 6.131 6.138 6.138 0 0 0 6.13 6.132 6.138 6.138 0 0 0 6.131-6.132c0-3.38-2.75-6.13-6.13-6.13Zm2.38 5.321a.81.81 0 1 1 0 1.62h-4.76a.81.81 0 1 1 0-1.62h4.76Z" />
-                        </svg>
-                    </ButtonCircle>
-                </div>
+    {#if isFullscreen}
+        <div class="photo-page__fullscreen" bind:this={fullscreenEl}
+            on:click={toggleFullscreen} on:keydown
+            in:fade={{ easing: quartOut, duration: 1000 }}
+            out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
+        >
+            <div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}>
+                <Image
+                    id={currentPhoto.image.id}
+                    sizeKey="photo-grid-large"
+                    width={1266}
+                    height={844}
+                    alt={currentPhoto.title}
+                />
+                <ButtonCircle color="gray-medium" class="close">
+                    <svg width="18" height="18" viewBox="0 0 18 18" fill="#fff" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.751 0c4.274 0 7.752 3.477 7.752 7.751 0 1.846-.65 3.543-1.73 4.875l3.99 3.991a.81.81 0 1 1-1.146 1.146l-3.99-3.991a7.714 7.714 0 0 1-4.876 1.73C3.477 15.503 0 12.027 0 7.753 0 3.476 3.477 0 7.751 0Zm0 1.62a6.138 6.138 0 0 0-6.13 6.131 6.138 6.138 0 0 0 6.13 6.132 6.138 6.138 0 0 0 6.131-6.132c0-3.38-2.75-6.13-6.13-6.13Zm2.38 5.321a.81.81 0 1 1 0 1.62h-4.76a.81.81 0 1 1 0-1.62h4.76Z" />
+                    </svg>
+                </ButtonCircle>
             </div>
-        {/if}
-    </main>
-</PageTransition>
+        </div>
+    {/if}
+</main>

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,222 +180,220 @@
 />
 
 
-<PageTransition>
-    <main class="about">
-        <Banner
-            title="About"
-            image={{
-                id: '699b4050-6bbf-4a40-be53-d84aca484f9d',
-                alt: 'Photo caption',
-            }}
-        />
+<main class="about">
+    <Banner
+        title="About"
+        image={{
+            id: '699b4050-6bbf-4a40-be53-d84aca484f9d',
+            alt: 'Photo caption',
+        }}
+    />
 
-        <section class="about__introduction">
-            <div class="container grid">
-                <h2 class="title-small">{about.intro_title}</h2>
-                <div class="heading text-big">
-                    {@html about.intro_heading}
-                </div>
-
-                <div class="text text-small">
-                    {@html about.intro_text}
-                </div>
+    <section class="about__introduction">
+        <div class="container grid">
+            <h2 class="title-small">{about.intro_title}</h2>
+            <div class="heading text-big">
+                {@html about.intro_heading}
             </div>
-        </section>
 
-        <section class="about__creation">
-            <div class="container grid">
-                <figure class="first-photo">
-                    <Image
-                        class="picture shadow-box-dark"
-                        id={about.intro_firstphoto.id}
-                        alt={about.intro_firstphoto.title}
-                        sizeKey="photo-list"
-                        sizes={{
-                            small: { width: 400 },
-                            medium: { width: 600 },
-                            large: { width: 800 },
-                        }}
-                        ratio={1.5}
-                    />
-                    <figcaption class="text-info">
-                        {about.intro_firstphoto_caption}<br>
-                        in
-                        <a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
-                            <img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
-                            <span>Naarm Australia (Melbourne)</span>
-                        </a>
-                    </figcaption>
-                </figure>
-
-                <h2 class="title-small" data-reveal>{about.creation_title}</h2>
-                <div class="heading text-huge" data-reveal>
-                    {@html about.creation_heading}
-                </div>
-
-                <div class="text text-small" data-reveal>
-                    {@html about.creation_text}
-                </div>
-
-                <figure class="picture portrait-photo" data-reveal-image>
-                    <Image
-                        class="shadow-box-dark"
-                        id={about.creation_portrait.id}
-                        alt={about.creation_portrait.title}
-                        sizeKey="photo-list"
-                        sizes={{
-                            small: { width: 400 },
-                            medium: { width: 750 },
-                        }}
-                        ratio={1.425}
-                    />
-                </figure>
-                <span class="portrait-photo__caption text-info">
-                    {about.creation_portrait_caption}
-                </span>
+            <div class="text text-small">
+                {@html about.intro_text}
             </div>
-        </section>
+        </div>
+    </section>
 
-        <section class="about__present">
-            <div class="container grid">
-                <figure class="picture" data-reveal-image>
-                    <Image
-                        class="shadow-box-dark"
-                        id={about.present_image.id}
-                        alt={about.present_image.title}
-                        sizeKey="photo-list"
-                        sizes={{
-                            small: { width: 400 },
-                            medium: { width: 600 },
-                            large: { width: 800 },
-                        }}
-                        ratio={1.5}
-                    />
-                </figure>
-
-                <h2 class="title-small" data-reveal>{about.present_title}</h2>
-                <div class="text text-small" data-reveal>
-                    <p>{about.present_text}</p>
-                </div>
-
-                <div class="heading text-big" data-reveal>
-                    {@html about.present_heading}
-                </div>
-
-                <div class="conclusion text-small" data-reveal>
-                    <p>{about.present_conclusion}</p>
-                </div>
-            </div>
-        </section>
-
-        {#if about.image_showcase}
-            <div class="about__showcase container grid">
+    <section class="about__creation">
+        <div class="container grid">
+            <figure class="first-photo">
                 <Image
-                    id={about.image_showcase.id}
-                    alt={about.image_showcase.title}
-                    sizeKey="showcase"
+                    class="picture shadow-box-dark"
+                    id={about.intro_firstphoto.id}
+                    alt={about.intro_firstphoto.title}
+                    sizeKey="photo-list"
                     sizes={{
                         small: { width: 400 },
-                        medium: { width: 1000 },
-                        large: { width: 1800 },
+                        medium: { width: 600 },
+                        large: { width: 800 },
                     }}
-                    ratio={1.2}
+                    ratio={1.5}
                 />
+                <figcaption class="text-info">
+                    {about.intro_firstphoto_caption}<br>
+                    in
+                    <a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
+                        <img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
+                        <span>Naarm Australia (Melbourne)</span>
+                    </a>
+                </figcaption>
+            </figure>
+
+            <h2 class="title-small" data-reveal>{about.creation_title}</h2>
+            <div class="heading text-huge" data-reveal>
+                {@html about.creation_heading}
             </div>
-        {/if}
 
-        <section class="about__process">
-            <div class="container grid">
-                <aside>
-                    <div class="heading">
-                        <h2 class="title-medium">{about.process_title}</h2>
-                        <p class="text-xsmall">{about.process_subtitle}</p>
-                    </div>
+            <div class="text text-small" data-reveal>
+                {@html about.creation_text}
+            </div>
 
-                    <ol>
-                        {#each about.process_steps as { title }, index}
-                            <li class:is-active={index === currentStep}>
-                                <a href="#step-{index + 1}" class="title-big"
-                                    on:click|preventDefault={() => {
-                                        currentStep = index
-                                        sendEvent('aboutStepSwitch')
+            <figure class="picture portrait-photo" data-reveal-image>
+                <Image
+                    class="shadow-box-dark"
+                    id={about.creation_portrait.id}
+                    alt={about.creation_portrait.title}
+                    sizeKey="photo-list"
+                    sizes={{
+                        small: { width: 400 },
+                        medium: { width: 750 },
+                    }}
+                    ratio={1.425}
+                />
+            </figure>
+            <span class="portrait-photo__caption text-info">
+                {about.creation_portrait_caption}
+            </span>
+        </div>
+    </section>
+
+    <section class="about__present">
+        <div class="container grid">
+            <figure class="picture" data-reveal-image>
+                <Image
+                    class="shadow-box-dark"
+                    id={about.present_image.id}
+                    alt={about.present_image.title}
+                    sizeKey="photo-list"
+                    sizes={{
+                        small: { width: 400 },
+                        medium: { width: 600 },
+                        large: { width: 800 },
+                    }}
+                    ratio={1.5}
+                />
+            </figure>
+
+            <h2 class="title-small" data-reveal>{about.present_title}</h2>
+            <div class="text text-small" data-reveal>
+                <p>{about.present_text}</p>
+            </div>
+
+            <div class="heading text-big" data-reveal>
+                {@html about.present_heading}
+            </div>
+
+            <div class="conclusion text-small" data-reveal>
+                <p>{about.present_conclusion}</p>
+            </div>
+        </div>
+    </section>
+
+    {#if about.image_showcase}
+        <div class="about__showcase container grid">
+            <Image
+                id={about.image_showcase.id}
+                alt={about.image_showcase.title}
+                sizeKey="showcase"
+                sizes={{
+                    small: { width: 400 },
+                    medium: { width: 1000 },
+                    large: { width: 1800 },
+                }}
+                ratio={1.2}
+            />
+        </div>
+    {/if}
+
+    <section class="about__process">
+        <div class="container grid">
+            <aside>
+                <div class="heading">
+                    <h2 class="title-medium">{about.process_title}</h2>
+                    <p class="text-xsmall">{about.process_subtitle}</p>
+                </div>
+
+                <ol>
+                    {#each about.process_steps as { title }, index}
+                        <li class:is-active={index === currentStep}>
+                            <a href="#step-{index + 1}" class="title-big"
+                                on:click|preventDefault={() => {
+                                    currentStep = index
+                                    sendEvent('aboutStepSwitch')
+                                }}
+                            >
+                                <span>{title}</span>
+                            </a>
+                        </li>
+                    {/each}
+                </ol>
+            </aside>
+
+            <div class="steps">
+                {#each about.process_steps as { text, image, video_mp4, video_webm }, index}
+                    {#if index === currentStep}
+                        <ProcessStep
+                            {index} {text}
+                            image={image ?? undefined}
+                            video={{
+                                mp4: video_mp4?.id,
+                                webm: video_webm?.id
+                            }}
+                        />
+                    {/if}
+                {/each}
+            </div>
+        </div>
+    </section>
+
+    <section class="about__photos" bind:this={photosGridEl}>
+        <div class="container-wide">
+            <div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
+                {#each photos as { image: { id }, title }, index}
+                    <AboutGridPhoto class="grid-photo"
+                        {id}
+                        alt={title}
+                        disabled={fadedPhotosIndexes.includes(index)}
+                    />
+                {/each}
+            </div>
+        </div>
+    </section>
+
+    <section class="about__interest container grid">
+        <div class="container grid">
+            <h2 class="title-xl">{about.contact_title}</h2>
+            <div class="blocks">
+                {#each about.contact_blocks as { title, text, link, button }}
+                    <div class="block">
+                        <h3 class="text-label">{title}</h3>
+                        <div class="text text-normal">
+                            {@html text}
+                        </div>
+                        <div class="button-container">
+                            {#if link}
+                            {#key emailCopied === link}
+                                <div class="wrap"
+                                    in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
+                                    out:fade={{ duration: 250, easing: quartOutSvelte }}
+                                    use:mailtoClipboard
+                                    on:copied={({ detail }) => {
+                                        emailCopied = detail.email
+                                        // Clear timeout and add timeout to hide message
+                                        clearTimeout(emailCopiedTimeout)
+                                        emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)
                                     }}
                                 >
-                                    <span>{title}</span>
-                                </a>
-                            </li>
-                        {/each}
-                    </ol>
-                </aside>
-
-                <div class="steps">
-                    {#each about.process_steps as { text, image, video_mp4, video_webm }, index}
-                        {#if index === currentStep}
-                            <ProcessStep
-                                {index} {text}
-                                image={image ?? undefined}
-                                video={{
-                                    mp4: video_mp4?.id,
-                                    webm: video_webm?.id
-                                }}
-                            />
-                        {/if}
-                    {/each}
-                </div>
-            </div>
-        </section>
-
-        <section class="about__photos" bind:this={photosGridEl}>
-            <div class="container-wide">
-                <div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
-                    {#each photos as { image: { id }, title }, index}
-                        <AboutGridPhoto class="grid-photo"
-                            {id}
-                            alt={title}
-                            disabled={fadedPhotosIndexes.includes(index)}
-                        />
-                    {/each}
-                </div>
-            </div>
-        </section>
-
-        <section class="about__interest container grid">
-            <div class="container grid">
-                <h2 class="title-xl">{about.contact_title}</h2>
-                <div class="blocks">
-                    {#each about.contact_blocks as { title, text, link, button }}
-                        <div class="block">
-                            <h3 class="text-label">{title}</h3>
-                            <div class="text text-normal">
-                                {@html text}
-                            </div>
-                            <div class="button-container">
-                                {#if link}
-                                {#key emailCopied === link}
-                                    <div class="wrap"
-                                        in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
-                                        out:fade={{ duration: 250, easing: quartOutSvelte }}
-                                        use:mailtoClipboard
-                                        on:copied={({ detail }) => {
-                                            emailCopied = detail.email
-                                            // Clear timeout and add timeout to hide message
-                                            clearTimeout(emailCopiedTimeout)
-                                            emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)
-                                        }}
-                                    >
-                                        {#if emailCopied !== link}
-                                            <Button size="small" url="mailto:{link}" text={button} />
-                                        {:else}
-                                            <span class="clipboard">Email copied in clipboard</span>
-                                        {/if}
-                                    </div>
-                                {/key}
-                                {/if}
-                            </div>
+                                    {#if emailCopied !== link}
+                                        <Button size="small" url="mailto:{link}" text={button} />
+                                    {:else}
+                                        <span class="clipboard">Email copied in clipboard</span>
+                                    {/if}
+                                </div>
+                            {/key}
+                            {/if}
                         </div>
-                    {/each}
-                </div>
+                    </div>
+                {/each}
             </div>
-        </section>
-    </main>
-</PageTransition>
+        </div>
+    </section>
+</main>

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,44 +65,18 @@
 />
 
 
-<PageTransition>
-    <main class="credits">
-        <Heading
-            text={data.credits.text}
-        />
-
-        <section class="credits__list">
-            <div class="grid container">
-                {#each data.credits.list as { title, credits }}
-                    <div class="credits__category grid">
-                        <h2 class="title-small">{title}</h2>
-                        <ul>
-                            {#each credits as { name, role, website }}
-                            <li>
-                                <dl>
-                                    <dt>
-                                        {#if website}
-                                            <h3>
-                                                <a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
-                                            </h3>
-                                        {:else}
-                                            <h3>{name}</h3>
-                                        {/if}
-                                    </dt>
-                                    <dd>
-                                        {role}
-                                    </dd>
-                                </dl>
-                            </li>
-                            {/each}
-                        </ul>
-                    </div>
-                {/each}
+<main class="credits">
+    <Heading
+        text={data.credits.text}
+    />
 
+    <section class="credits__list">
+        <div class="grid container">
+            {#each data.credits.list as { title, credits }}
                 <div class="credits__category grid">
-                    <h2 class="title-small">Photography</h2>
+                    <h2 class="title-small">{title}</h2>
                     <ul>
-                        {#each credit as { name, website, location }}
+                        {#each credits as { name, role, website }}
                         <li>
                             <dl>
                                 <dt>
@@ -117,33 +89,57 @@
                                     {/if}
                                 </dt>
                                 <dd>
-                                    <ul data-sveltekit-noscroll>
-                                        {#each location as loc}
-                                            {#if loc.location_id}
-                                                <li>
-                                                    <a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" tabindex="0">
-                                                        <Image
-                                                            id={loc.location_id.country.flag.id}
-                                                            sizeKey="square-small"
-                                                            width={16}
-                                                            height={16}
-                                                            alt="Flag of {loc.location_id.country.slug}"
-                                                        />
-                                                        <span>{loc.location_id.name}</span>
-                                                    </a>
-                                                </li>
-                                            {/if}
-                                        {/each}
-                                    </ul>
+                                    {role}
                                 </dd>
                             </dl>
                         </li>
                         {/each}
                     </ul>
                 </div>
-            </div>
-        </section>
+            {/each}
 
-        <InteractiveGlobe type="cropped" />
-    </main>
-</PageTransition>
+            <div class="credits__category grid">
+                <h2 class="title-small">Photography</h2>
+                <ul>
+                    {#each credit as { name, website, location }}
+                    <li>
+                        <dl>
+                            <dt>
+                                {#if website}
+                                    <h3>
+                                        <a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
+                                    </h3>
+                                {:else}
+                                    <h3>{name}</h3>
+                                {/if}
+                            </dt>
+                            <dd>
+                                <ul data-sveltekit-noscroll>
+                                    {#each location as loc}
+                                        {#if loc.location_id}
+                                            <li>
+                                                <a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" tabindex="0">
+                                                    <Image
+                                                        id={loc.location_id.country.flag.id}
+                                                        sizeKey="square-small"
+                                                        width={16}
+                                                        height={16}
+                                                        alt="Flag of {loc.location_id.country.slug}"
+                                                    />
+                                                    <span>{loc.location_id.name}</span>
+                                                </a>
+                                            </li>
+                                        {/if}
+                                    {/each}
+                                </ul>
+                            </dd>
+                        </dl>
+                    </li>
+                    {/each}
+                </ul>
+            </div>
+        </div>
+    </section>
+
+    <InteractiveGlobe type="cropped" />
+</main>

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,20 +22,18 @@
 />
 
 
-<PageTransition>
-    <main class="explore">
-        <Heading {text} />
+<main class="explore">
+    <Heading {text} />
 
-        <section class="explore__locations">
-            <InteractiveGlobe />
-            <Locations {locations} />
-        </section>
+    <section class="explore__locations">
+        <InteractiveGlobe />
+        <Locations {locations} />
+    </section>
 
-        <section class="grid-modules is-spaced grid">
-            <div class="wrap">
-                <ShopModule />
-                <NewsletterModule />
-            </div>
-        </section>
-    </main>
-</PageTransition>
+    <section class="grid-modules is-spaced grid">
+        <div class="wrap">
+            <ShopModule />
+            <NewsletterModule />
+        </div>
+    </section>
+</main>

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,164 +335,162 @@
 />
 
 
-<PageTransition>
-    <main class="photos-page">
-        <section class="photos-page__intro"
-            class:is-passed={scrolledPastIntro}
+<main class="photos-page">
+    <section class="photos-page__intro"
+        class:is-passed={scrolledPastIntro}
+    >
+        <ScrollingTitle tag="h1" text="Houses">
+            <SplitText text="Houses" mode="chars" />
+        </ScrollingTitle>
+
+        <DiscoverText />
+
+        <div class="filters"
+            class:is-over={filtersOver}
+            class:is-transitioning={filtersTransitioning}
+            class:is-visible={filtersVisible}
         >
-            <ScrollingTitle tag="h1" text="Houses">
-                <SplitText text="Houses" mode="chars" />
-            </ScrollingTitle>
+            <div class="filters__bar">
+                <span class="text-label filters__label">Filter photos</span>
+                <ul>
+                    <li>
+                        <Select
+                            name="country" id="filter_country"
+                            options={[
+                                {
+                                    value: defaultCountry,
+                                    name: 'Worldwide',
+                                    default: true,
+                                    selected: filterCountry === defaultCountry,
+                                },
+                                ...countries.map(({ slug, name }) => ({
+                                    value: slug,
+                                    name,
+                                    selected: filterCountry === slug,
+                                }))
+                            ]}
+                            on:change={handleCountryChange}
+                            value={filterCountry}
+                        >
+                            {#if countryFlagId}
+                                <Image
+                                    class="icon"
+                                    id={countryFlagId}
+                                    sizeKey="square-small"
+                                    width={26} height={26}
+                                    alt="{filterCountry} flag"
+                                />
+                            {:else}
+                                <IconEarth class="icon" />
+                            {/if}
+                        </Select>
+                    </li>
+                    <li>
+                        <Select
+                            name="sort" id="filter_sort"
+                            options={[
+                                {
+                                    value: 'latest',
+                                    name: 'Latest',
+                                    default: true,
+                                    selected: filterSort === defaultSort
+                                },
+                                {
+                                    value: 'oldest',
+                                    name: 'Oldest',
+                                    selected: filterSort === 'oldest'
+                                },
+                            ]}
+                            on:change={handleSortChange}
+                            value={filterSort}
+                        >
+                            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Sort icon">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.878 15.93h-4.172c-.638 0-1.153.516-1.153 1.154 0 .639.515 1.154 1.153 1.154h4.172c.638 0 1.153-.515 1.153-1.154a1.152 1.152 0 0 0-1.153-1.153Zm3.244-5.396h-7.405c-.639 0-1.154.515-1.154 1.153 0 .639.515 1.154 1.154 1.154h7.405c.639 0 1.154-.515 1.154-1.154a1.145 1.145 0 0 0-1.154-1.153Zm3.244-5.408h-10.65c-.638 0-1.153.515-1.153 1.154 0 .639.515 1.154 1.154 1.154h10.65c.638 0 1.153-.515 1.153-1.154 0-.639-.515-1.154-1.154-1.154ZM7.37 20.679V3.376c0-.145-.03-.289-.082-.433a1.189 1.189 0 0 0-.628-.618 1.197 1.197 0 0 0-.886 0 1.045 1.045 0 0 0-.36.237c-.01 0-.01 0-.021.01L.82 7.145a1.156 1.156 0 0 0 0 1.638 1.156 1.156 0 0 0 1.637 0l2.596-2.596v11.7l-2.596-2.595a1.156 1.156 0 0 0-1.637 0 1.156 1.156 0 0 0 0 1.638l4.573 4.573c.103.103.237.185.37.247.135.062.289.082.433.082h.02c.145 0 .3-.03.433-.093a1.14 1.14 0 0 0 .629-.628.987.987 0 0 0 .092-.432Z" />
+                            </svg>
+                        </Select>
+                    </li>
+                </ul>
 
-            <DiscoverText />
-
-            <div class="filters"
-                class:is-over={filtersOver}
-                class:is-transitioning={filtersTransitioning}
-                class:is-visible={filtersVisible}
-            >
-                <div class="filters__bar">
-                    <span class="text-label filters__label">Filter photos</span>
-                    <ul>
-                        <li>
-                            <Select
-                                name="country" id="filter_country"
-                                options={[
-                                    {
-                                        value: defaultCountry,
-                                        name: 'Worldwide',
-                                        default: true,
-                                        selected: filterCountry === defaultCountry,
-                                    },
-                                    ...countries.map(({ slug, name }) => ({
-                                        value: slug,
-                                        name,
-                                        selected: filterCountry === slug,
-                                    }))
-                                ]}
-                                on:change={handleCountryChange}
-                                value={filterCountry}
-                            >
-                                {#if countryFlagId}
-                                    <Image
-                                        class="icon"
-                                        id={countryFlagId}
-                                        sizeKey="square-small"
-                                        width={26} height={26}
-                                        alt="{filterCountry} flag"
-                                    />
-                                {:else}
-                                    <IconEarth class="icon" />
-                                {/if}
-                            </Select>
-                        </li>
-                        <li>
-                            <Select
-                                name="sort" id="filter_sort"
-                                options={[
-                                    {
-                                        value: 'latest',
-                                        name: 'Latest',
-                                        default: true,
-                                        selected: filterSort === defaultSort
-                                    },
-                                    {
-                                        value: 'oldest',
-                                        name: 'Oldest',
-                                        selected: filterSort === 'oldest'
-                                    },
-                                ]}
-                                on:change={handleSortChange}
-                                value={filterSort}
-                            >
-                                <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Sort icon">
-                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.878 15.93h-4.172c-.638 0-1.153.516-1.153 1.154 0 .639.515 1.154 1.153 1.154h4.172c.638 0 1.153-.515 1.153-1.154a1.152 1.152 0 0 0-1.153-1.153Zm3.244-5.396h-7.405c-.639 0-1.154.515-1.154 1.153 0 .639.515 1.154 1.154 1.154h7.405c.639 0 1.154-.515 1.154-1.154a1.145 1.145 0 0 0-1.154-1.153Zm3.244-5.408h-10.65c-.638 0-1.153.515-1.153 1.154 0 .639.515 1.154 1.154 1.154h10.65c.638 0 1.153-.515 1.153-1.154 0-.639-.515-1.154-1.154-1.154ZM7.37 20.679V3.376c0-.145-.03-.289-.082-.433a1.189 1.189 0 0 0-.628-.618 1.197 1.197 0 0 0-.886 0 1.045 1.045 0 0 0-.36.237c-.01 0-.01 0-.021.01L.82 7.145a1.156 1.156 0 0 0 0 1.638 1.156 1.156 0 0 0 1.637 0l2.596-2.596v11.7l-2.596-2.595a1.156 1.156 0 0 0-1.637 0 1.156 1.156 0 0 0 0 1.638l4.573 4.573c.103.103.237.185.37.247.135.062.289.082.433.082h.02c.145 0 .3-.03.433-.093a1.14 1.14 0 0 0 .629-.628.987.987 0 0 0 .092-.432Z" />
-                                </svg>
-                            </Select>
-                        </li>
-                    </ul>
-
-                    <div class="filters__actions">
-                        {#if filtered}
-                            <button class="reset button-link"
-                                on:click={resetFiltered}
-                                transition:fly={{ y: 4, duration: 600, easing: quartOutSvelte }}
-                            >
-                                Reset
-                            </button>
-                        {/if}
-                    </div>
+                <div class="filters__actions">
+                    {#if filtered}
+                        <button class="reset button-link"
+                            on:click={resetFiltered}
+                            transition:fly={{ y: 4, duration: 600, easing: quartOutSvelte }}
+                        >
+                            Reset
+                        </button>
+                    {/if}
                 </div>
             </div>
-        </section>
+        </div>
+    </section>
 
-        <section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
-            <div class="grid container">
-                {#if photos}
-                    <div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll>
-                        {#each photos as { id, image, slug, location, title, city }, index (id)}
-                            <figure class="photo shadow-photo">
-                                <a href="/{location.country.slug}/{location.slug}/{slug}" tabindex="0">
-                                    <Image
-                                        id={image.id}
-                                        sizeKey="photo-grid"
-                                        sizes={{
-                                            small: { width: 500 },
-                                            medium: { width: 900 },
-                                            large: { width: 1440 },
-                                        }}
-                                        ratio={1.5}
-                                        alt={image.title}
-                                    />
-                                </a>
-                                <figcaption>
-                                    <PostCard
-                                        street={title}
-                                        location={city ? `${city}, ${location.name}` : location.name}
-                                        region={location.region}
-                                        country={location.country.name}
-                                        flagId={location.country.flag.id}
-                                        size={isSmall(index) ? 'small' : null}
-                                    />
-                                </figcaption>
-                            </figure>
-                        {/each}
-                    </div>
+    <section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
+        <div class="grid container">
+            {#if photos}
+                <div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll>
+                    {#each photos as { id, image, slug, location, title, city }, index (id)}
+                        <figure class="photo shadow-photo">
+                            <a href="/{location.country.slug}/{location.slug}/{slug}" tabindex="0">
+                                <Image
+                                    id={image.id}
+                                    sizeKey="photo-grid"
+                                    sizes={{
+                                        small: { width: 500 },
+                                        medium: { width: 900 },
+                                        large: { width: 1440 },
+                                    }}
+                                    ratio={1.5}
+                                    alt={image.title}
+                                />
+                            </a>
+                            <figcaption>
+                                <PostCard
+                                    street={title}
+                                    location={city ? `${city}, ${location.name}` : location.name}
+                                    region={location.region}
+                                    country={location.country.name}
+                                    flagId={location.country.flag.id}
+                                    size={isSmall(index) ? 'small' : null}
+                                />
+                            </figcaption>
+                        </figure>
+                    {/each}
+                </div>
 
-                    <div class="controls grid">
-                        <p class="controls__date" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
-                            Last updated: <time datetime={dayjs(latestPhoto.date_created).format('YYYY-MM-DD')}>{dayjs().to(dayjs(latestPhoto.date_created))}</time>
-                        </p>
+                <div class="controls grid">
+                    <p class="controls__date" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
+                        Last updated: <time datetime={dayjs(latestPhoto.date_created).format('YYYY-MM-DD')}>{dayjs().to(dayjs(latestPhoto.date_created))}</time>
+                    </p>
 
-                        <Button
-                            tag="button"
-                            text={!ended ? 'See more photos' : "You've seen it all!"}
-                            size="large" color="beige"
-                            on:click={loadMorePhotos}
-                            disabled={ended}
-                        />
+                    <Button
+                        size="large"
+                        color="beige"
+                        text={!ended ? 'See more photos' : "You've seen it all!"}
+                        on:click={loadMorePhotos}
+                        disabled={ended}
+                    />
 
-                        <div class="controls__count">
-                            <span class="current">{currentPhotosAmount}</span>
-                            <span>/</span>
-                            <span class="total">{totalPhotos}</span>
-                        </div>
-                    </div>
-                {:else if !filteredCountryExists}
-                    <div class="photos-page__message">
-                        <p>
-                            <strong>{$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
-                        </p>
-                    </div>
-                {/if}
-
-                <div class="grid-modules">
-                    <div class="wrap">
-                        <ShopModule />
-                        <NewsletterModule theme="light" />
+                    <div class="controls__count">
+                        <span class="current">{currentPhotosAmount}</span>
+                        <span>/</span>
+                        <span class="total">{totalPhotos}</span>
                     </div>
                 </div>
+            {:else if !filteredCountryExists}
+                <div class="photos-page__message">
+                    <p>
+                        <strong>{$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
+                    </p>
+                </div>
+            {/if}
+
+            <div class="grid-modules">
+                <div class="wrap">
+                    <ShopModule />
+                    <NewsletterModule theme="light" />
+                </div>
             </div>
-        </section>
-    </main>
-</PageTransition>
+        </div>
+    </section>
+</main>

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,34 +64,32 @@
 />
 
 
-<PageTransition>
-    <main class="subscribe">
-        <div class="subscribe__top">
-            <Heading
-                text={data.newsletter_page_text}
-            />
+<main class="subscribe">
+    <div class="subscribe__top">
+        <Heading
+            text={data.newsletter_page_text}
+        />
 
-            <EmailForm />
+        <EmailForm />
+    </div>
+
+    <section class="subscribe__issues">
+        <h2 class="title-small">Latest Issue</h2>
+        <div class="issue-container">
+            <NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
         </div>
 
-        <section class="subscribe__issues">
-            <h2 class="title-small">Latest Issue</h2>
-            <div class="issue-container">
-                <NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
-            </div>
+        {#if issues.length > 1}
+            <h2 class="title-small">Past Issues</h2>
+            <ul>
+                {#each issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
+                    <li class="issue-container">
+                        <NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
+                    </li>
+                {/each}
+            </ul>
+        {/if}
+    </section>
 
-            {#if issues.length > 1}
-                <h2 class="title-small">Past Issues</h2>
-                <ul>
-                    {#each issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
-                        <li class="issue-container">
-                            <NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
-                        </li>
-                    {/each}
-                </ul>
-            {/if}
-        </section>
-
-        <InteractiveGlobe type="cropped" />
-    </main>
-</PageTransition>
+    <InteractiveGlobe type="cropped" />
+</main>

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,27 +21,25 @@
 />
 
 
-<PageTransition>
-    <main class="terms">
-        <Heading text="Everything you need to know about using our website or buying our products" />
+<main class="terms">
+    <Heading text="Everything you need to know about using our website or buying our products" />
 
-        <section class="terms__categories">
-            <div class="container grid">
-                {#each legal.terms as { title, text }, index}
-                    <article class="terms__section grid">
-                        <h2 class="title-small">{index + 1}. {title}</h2>
-                        <div class="text text-info">
-                            {@html text}
-                        </div>
-                    </article>
-                {/each}
+    <section class="terms__categories">
+        <div class="container grid">
+            {#each legal.terms as { title, text }, index}
+                <article class="terms__section grid">
+                    <h2 class="title-small">{index + 1}. {title}</h2>
+                    <div class="text text-info">
+                        {@html text}
+                    </div>
+                </article>
+            {/each}
 
-                <footer>
-                    <p class="text-info">
-                        Updated: <time datetime={dayjs(legal.date_updated).format('YYYY-MM-DD')}>{dayjs().to(dayjs(legal.date_updated))}</time>
-                    </p>
-                </footer>
-            </div>
-        </section>
-    </main>
-</PageTransition>
+            <footer>
+                <p class="text-info">
+                    Updated: <time datetime={dayjs(legal.date_updated).format('YYYY-MM-DD')}>{dayjs().to(dayjs(legal.date_updated))}</time>
+                </p>
+            </footer>
+        </div>
+    </section>
+</main>

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,51 +34,49 @@
 />
 
 
-<PageTransition>
-    <main class="page-error">
-        <div class="page-error__top">
-            <Heading
-                text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
-            />
+<main class="page-error">
+    <div class="page-error__top">
+        <Heading
+            text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
+        />
 
-            <ListCTAs>
-                <li>
-                    <BoxCTA
-                        url="/photos"
-                        icon="photos"
-                        label="Browse all photos"
-                        alt="Photos"
-                    />
-                </li>
-                <li>
-                    <BoxCTA
-                        url="/shop"
-                        icon="bag"
-                        label="Shop our products"
-                        alt="Shopping bag"
-                    />
-                </li>
-                <li>
-                    <BoxCTA
-                        url="/about"
-                        icon="compass"
-                        label="Learn about the project"
-                        alt="Compass"
-                    />
-                </li>
-            </ListCTAs>
-        </div>
+        <ListCTAs>
+            <li>
+                <BoxCTA
+                    url="/photos"
+                    icon="photos"
+                    label="Browse all photos"
+                    alt="Photos"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/shop"
+                    icon="bag"
+                    label="Shop our products"
+                    alt="Shopping bag"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/about"
+                    icon="compass"
+                    label="Learn about the project"
+                    alt="Compass"
+                />
+            </li>
+        </ListCTAs>
+    </div>
 
-        <InteractiveGlobe />
-        <Locations {locations} />
+    <InteractiveGlobe />
+    <Locations {locations} />
 
-        <div class="grid-modules">
-            <div class="container grid">
-                <div class="wrap">
-                    <ShopModule />
-                    <NewsletterModule />
-                </div>
+    <div class="grid-modules">
+        <div class="container grid">
+            <div class="wrap">
+                <ShopModule />
+                <NewsletterModule />
             </div>
         </div>
-    </main>
-</PageTransition>
+    </div>
+</main>

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 { 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
      */
-    // Store previous page (for photo Viewer close button)
-    beforeNavigate(({ from }) => {
+    beforeNavigate(({ from, to }) => {
+        // Store previous page (for photo Viewer close button)
         $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}
-    <Footer />
+        {#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 />

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,89 +80,92 @@
 />
 
 
-<PageTransition>
-    <main class="homepage">
-        <section class="homepage__intro"
-            use:reveal={{
-                animation: { opacity: [0, 1] },
-                options: {
-                    duration: 1,
-                },
-            }}
+<main class="homepage">
+    <section class="homepage__intro"
+        use:reveal={{
+            animation: { opacity: [0, 1] },
+            options: {
+                duration: 1,
+            },
+        }}
+    >
+        <ScrollingTitle
+            tag="h1"
+            class="title-houses"
+            label="Houses of the World"
+            offsetStart={-300}
+            offsetEnd={400}
         >
-            <ScrollingTitle
-                tag="h1"
-                class="title-houses"
-                label="Houses of the World"
-                offsetStart={-300}
-                offsetEnd={400}
+            <SplitText text="Houses" mode="chars" />
+        </ScrollingTitle>
+
+        <div class="homepage__headline">
+            <p class="text-medium">
+                {settings.description}
+            </p>
+
+            <Button
+                size="medium"
+                url="#locations"
+                text="Explore locations"
+                on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}
             >
-                <SplitText text="Houses" mode="chars" />
-            </ScrollingTitle>
-
-            <div class="homepage__headline">
-                <p class="text-medium">
-                    {settings.description}
-                </p>
-
-                <Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
-                    <IconEarth animate={true} />
-                </Button>
-            </div>
-        </section>
-
-        <section class="homepage__photos">
-            <Collage {photos} />
-        </section>
-
-        <div class="homepage__ctas">
-            <DiscoverText />
-
-            <ListCTAs>
-                <li>
-                    <BoxCTA
-                        url="/photos"
-                        icon="photos"
-                        label="Browse all photos"
-                        alt="Photos"
-                    />
-                </li>
-                <li>
-                    <BoxCTA
-                        url="/shop"
-                        icon="bag"
-                        label="Shop our products"
-                        alt="Shopping bag"
-                    />
-                </li>
-                <li>
-                    <BoxCTA
-                        url="/about"
-                        icon="compass"
-                        label="Learn about the project"
-                        alt="Compass"
-                    />
-                </li>
-            </ListCTAs>
+                <IconEarth animate={true} />
+            </Button>
         </div>
+    </section>
 
-        <section class="homepage__locations" id="locations">
-            <InteractiveGlobe />
+    <section class="homepage__photos">
+        <Collage {photos} />
+    </section>
 
-            <ScrollingTitle tag="p" class="title-world mask">
-                <SplitText text="World" mode="chars" />
-            </ScrollingTitle>
+    <div class="homepage__ctas">
+        <DiscoverText />
 
-            <Locations {locations} />
-        </section>
+        <ListCTAs>
+            <li>
+                <BoxCTA
+                    url="/photos"
+                    icon="photos"
+                    label="Browse all photos"
+                    alt="Photos"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/shop"
+                    icon="bag"
+                    label="Shop our products"
+                    alt="Shopping bag"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/about"
+                    icon="compass"
+                    label="Learn about the project"
+                    alt="Compass"
+                />
+            </li>
+        </ListCTAs>
+    </div>
 
-        <div class="grid-modules">
-            <div class="container grid">
-                <div class="wrap">
-                    <ShopModule />
-                    <NewsletterModule />
-                </div>
+    <section class="homepage__locations" id="locations">
+        <InteractiveGlobe />
+
+        <ScrollingTitle tag="p" class="title-world mask">
+            <SplitText text="World" mode="chars" />
+        </ScrollingTitle>
+
+        <Locations {locations} />
+    </section>
+
+    <div class="grid-modules">
+        <div class="container grid">
+            <div class="wrap">
+                <ShopModule />
+                <NewsletterModule />
             </div>
         </div>
-    </main>
-</PageTransition>
+    </div>
+</main>

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);
-    left: var(--switcher-offset);
+    bottom: var(--offset-sides);
+    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: {
     },