Merge branch 'main' into dev

apps/api/extensions/hooks/robots-txt/package.json

@@ -17,6 +17,6 @@
 		"dev": "directus-extension build -w --no-minify"
 	},
 	"devDependencies": {
-		"@directus/extensions-sdk": "9.20.4"
+		"@directus/extensions-sdk": "11.0.9"
 	}
 }

apps/api/package.json

@@ -9,7 +9,7 @@
     "start": "directus start"
   },
   "dependencies": {
-    "directus": "^10.2.1",
+    "directus": "^10.13.1",
-    "pg": "^8.11.0"
+    "mysql": "^2.18.1"
   }
 }

apps/website/package.json

@@ -15,46 +15,45 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@studio-freight/lenis": "^1.0.15",
+    "classix": "^2.1.38",
-    "classix": "^2.1.32",
+    "dayjs": "^1.11.12",
-    "dayjs": "^1.11.8",
+    "embla-carousel": "^8.1.7",
-    "embla-carousel": "^7.1.0",
     "focus-visible": "^5.2.0",
-    "motion": "^10.16.2",
+    "lenis": "^1.1.6",
-    "ogl": "^0.0.117",
+    "motion": "^10.18.0",
+    "ogl": "^1.0.7",
     "sanitize.css": "^13.0.0",
-    "swell-js": "3.22.0",
+    "swell-js": "^4.2.0",
-    "tweakpane": "^3.1.9",
+    "tweakpane": "^4.0.4",
     "utils": "workspace:*"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/adapter-cloudflare": "^2.3.0",
+    "@sveltejs/adapter-cloudflare": "^4.6.1",
-    "@sveltejs/kit": "^1.20.2",
+    "@sveltejs/kit": "^2.5.18",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@typescript-eslint/parser": "^7.17.0",
     "base-64": "^1.0.0",
-    "browserslist": "^4.21.7",
+    "browserslist": "^4.23.2",
     "config": "workspace:*",
-    "cssnano": "^6.0.1",
+    "cssnano": "^7.0.4",
-    "eslint": "^8.42.0",
+    "eslint": "^9.7.0",
-    "eslint-plugin-svelte": "^2.30.0",
+    "eslint-plugin-svelte": "^2.43.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.39",
-    "postcss-focus-visible": "^8.0.2",
+    "postcss-focus-visible": "^9.0.1",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^8.4.2",
+    "postcss-preset-env": "^9.6.0",
     "postcss-sort-media-queries": "^5.2.0",
-    "sass": "^1.63.3",
+    "sass": "^1.77.8",
-    "svelte": "^3.59.1",
+    "svelte": "^4.2.18",
-    "svelte-check": "^3.4.3",
+    "svelte-check": "^3.8.4",
-    "svelte-preprocess": "^5.0.4",
+    "svelte-preprocess": "^6.0.2",
-    "tslib": "^2.5.3",
+    "tslib": "^2.6.3",
-    "typescript": "^5.1.3",
+    "typescript": "^5.5.4",
-    "vite": "^4.3.9"
+    "vite": "5.3.4"
   },
   "type": "module",
   "browserslist": [
-    "last 3 versions",
+    "> .5% and last 2 versions"
-    "> 0.3%"
   ]
 }

apps/website/src/components/SmoothScroll.svelte

@@ -1,30 +1,19 @@
 <script lang="ts">
-    import { browser } from '$app/environment'
     import { onMount } from 'svelte'
-    import Lenis from '@studio-freight/lenis'
+    import Lenis from 'lenis'
     import { smoothScroll } from '$utils/stores'
 
     let smoothScrollRAF = 0
 
-
+    onMount(() => {
         // Setup smooth scroll
-    if (browser) {
         $smoothScroll = new Lenis({
             duration: 1.2,
             easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://easings.net/
             smoothWheel: true,
             orientation: 'vertical',
         })
-    }
 
-    // Lenis RAF
-    const update = (time: number) => {
-        $smoothScroll.raf(time)
-        smoothScrollRAF = requestAnimationFrame(update)
-    }
-
-
-    onMount(() => {
         // Enable smooth scroll
         requestAnimationFrame(update)
 
@@ -34,4 +23,10 @@
             $smoothScroll.destroy()
         }
     })
+
+    // Lenis RAF
+    const update = (time: number) => {
+        $smoothScroll.raf(time)
+        smoothScrollRAF = requestAnimationFrame(update)
+    }
 </script>

apps/website/src/components/atoms/Badge.svelte

@@ -1,5 +1,25 @@
 <style lang="scss">
-    @import "../../style/atoms/badge";
+    .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 16px;
+        margin: 0 auto;
+        padding: 0 6px;
+        text-align: center;
+        background: $color-secondary-light;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        line-height: 1;
+        color: $color-primary-darker;
+        border-radius: 100vh;
+
+        // Small size
+        &--small {
+            font-size: rem(7px);
+        }
+    }
 </style>
 
 <script lang="ts">

apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/atoms/box-cta";
+    @import "./BoxCTA";
 </style>
 
 <script lang="ts">

apps/website/src/components/atoms/Button/Button.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/atoms/button";
+    @import "./Button";
 </style>
 
 <script lang="ts">

apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/atoms/button-cart";
+    @import "./ButtonCart";
 </style>
 
 <script lang="ts">
@@ -9,7 +9,7 @@
     import { sendEvent } from '$utils/analytics'
     // Components
     import Icon from '$components/atoms/Icon.svelte'
-    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
+    import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
 
     const openCart = () => {
         $cartOpen = true

apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/atoms/button-circle";
+    @import "./ButtonCircle";
 </style>
 
 <script lang="ts">

apps/website/src/components/atoms/DiscoverText.svelte

@@ -1,5 +1,24 @@
 <style lang="scss">
-    @import "../../style/atoms/discover";
+    .discover {
+        padding: 0 20px;
+        font-family: $font-sans;
+        font-size: rem(24px);
+        font-weight: 200;
+        line-height: 1.5;
+        color: $color-tertiary;
+
+        @include bp (sm) {
+            font-size: rem(28px);
+        }
+        @include bp (md) {
+            font-size: rem(32px);
+        }
+
+        strong {
+            color: $color-secondary;
+            font-weight: 200;
+        }
+    }
 </style>
 
 <script lang="ts">

apps/website/src/components/atoms/IconArrow.svelte

@@ -1,5 +1,20 @@
 <style lang="scss">
-    @import "../../style/atoms/arrow";
+    .arrow {
+        display: block;
+
+        // Colors
+        &--white {
+            color: #fff;
+        }
+        &--pink {
+            color: $color-secondary;
+        }
+
+        // Variants
+        &--flip {
+            transform: rotate(180deg);
+        }
+    }
 </style>
 
 <script lang="ts">

apps/website/src/components/atoms/Image.svelte

@@ -5,78 +5,47 @@
     export let id: string = undefined
     export let sizeKey: string = undefined
     export let sizes: Sizes = undefined
-    export let width: number = sizes && sizes.medium && sizes.medium.width
+    export let width: number = sizes?.medium?.width
-    export let height: number = sizes && sizes.medium && sizes.medium.height
+    export let height: number = sizes?.medium?.height
     export let ratio: number = undefined
     export let alt: string
     export let lazy = true
     export let decoding: 'auto' | 'sync' | 'async' = 'auto'
 
     interface Sizes {
-        small?: { width?: number, height?: number }
+        small?: { width?: number; height?: number }
-        medium?: { width?: number, height?: number }
+        medium?: { width?: number; height?: number }
-        large?: { width?: number, height?: number }
+        large?: { width?: number; height?: number }
     }
 
-    let srcSet = { webp: [], jpg: [] }
+    const setHeightFromRatio = (w: number, r: number = ratio) => Math.round(w / r)
-
-
-    /**
-     * Define height from origin ratio if not defined
-     */
-    const setHeightFromRatio = (w: number, r: number = ratio) => {
-        return Math.round(w / r)
-    }
 
     if (ratio && !height) {
-        // Set height from width using ratio
         height = setHeightFromRatio(width)
-
-        // Add height to all sizes
         if (sizes) {
-            Object.entries(sizes).forEach(size => {
+            for (const [key, value] of Object.entries(sizes)) {
-                const [key, value]: [string, { width?: number, height?: number }] = size
                 sizes[key].height = setHeightFromRatio(value.width)
-            })
+            }
         }
     }
 
-
+    $: imgWidth = sizes?.small?.width || width
-    /**
+    $: imgHeight = sizes?.small?.height || height
-     * Image attributes
+    $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small`) : src
-     */
+    $: srcSet = sizes
-    $: imgWidth = sizes && sizes.small ? sizes.small.width : width
-    $: imgHeight = sizes && sizes.small ? sizes.small.height : height
-    $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
-    $: srcSet = {
-        // WebP
-        webp: sizes
         ? [
-                `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
+            `${getAssetUrlKey(id, `${sizeKey}-small`)} 345w`,
-                sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
+            sizes.medium && `${getAssetUrlKey(id, `${sizeKey}-medium`)} 768w`,
-                sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
+            sizes.large && `${getAssetUrlKey(id, `${sizeKey}-large`)} 1280w`,
         ]
-            : [getAssetUrlKey(id, `${sizeKey}-webp`)],
+        : [getAssetUrlKey(id, sizeKey)]
-        // JPG
-        jpg: sizes
-            ? [
-                `${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
-                sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null,
-                sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null,
-            ]
-            : [getAssetUrlKey(id, `${sizeKey}-jpg`)]
-    }
 </script>
 
 <picture class={$$props.class}>
-    <source
-        type="image/webp"
-        srcset={srcSet.webp.join(', ').trim()}
-    >
     <img
         src={imgSrc}
-        sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : null}
+        sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : undefined}
-        srcset={srcSet.jpg.join(', ').trim()}
+        srcset={srcSet.join(', ')}
         width={imgWidth}
         height={imgHeight}
         {alt}

apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/atoms/site-title";
+    @import "./SiteTitle";
 </style>
 
 <script lang="ts">

apps/website/src/components/layouts/PosterLayout/PosterLayout.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/layouts/poster";
+    @import "./PosterLayout";
 </style>
 
 <script lang="ts">
@@ -7,10 +7,10 @@
     import { capitalizeFirstLetter } from 'utils/string'
     // Components
     import SplitText from '$components/SplitText.svelte'
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
     import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
-    import Carousel from '$components/organisms/Carousel.svelte'
+    import Carousel from '$components/organisms/Carousel/Carousel.svelte'
 
     export let product: any
     export let shopProduct: any

apps/website/src/components/molecules/CartItem/CartItem.svelte

@@ -1,11 +1,11 @@
 <style lang="scss">
-    @import "../../style/molecules/cart-item";
+    @import "./CartItem";
 </style>
 
 <script lang="ts">
     import { createEventDispatcher } from 'svelte'
     // Components
-    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
+    import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
     import Select from '$components/molecules/Select.svelte'
 
     export let item: any

apps/website/src/components/molecules/EmailForm/EmailForm.scss

@@ -0,0 +1,125 @@
+// Email Form
+.newsletter-form {
+    position: relative;
+}
+
+.email {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    height: 56px;
+    margin-bottom: 20px;
+    padding: 0 24px;
+    border-radius: 100vh;
+    box-shadow: inset 0 0 0 2px $color-secondary;
+    transition: box-shadow 0.6s var(--ease-quart);
+
+    @include bp (sm) {
+        height: 64px;
+        padding: 0 30px;
+    }
+
+    input {
+        display: block;
+        width: 100%;
+        height: 100%;
+        font-size: rem(16px);
+        font-family: $font-sans;
+        font-weight: 300;
+        color: $color-tertiary;
+        background: none;
+        border: none;
+
+        @include bp (sm) {
+            font-size: rem(18px);
+        }
+
+        &::placeholder {
+            color: rgba($color-tertiary, 0.6);
+            opacity: 1;
+        }
+    }
+    :global(button) {
+        position: absolute !important;
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 32px;
+        flex-shrink: 0;
+    }
+
+    // States
+    &.is-focused, &:hover {
+        box-shadow: inset 0 0 0 4px $color-secondary;
+    }
+}
+
+// Bottom details
+.bottom {
+    display: block;
+    text-align: center;
+    font-size: rem(14px);
+    max-width: 600px;
+
+    @include bp (sm) {
+        display: flex;
+        justify-content: center;
+        font-size: rem(16px);
+    }
+
+    .past-issues {
+        display: inline-flex;
+        align-items: center;
+        margin: 0 auto auto 0;
+        text-decoration: none;
+        color: $color-text;
+
+        &, span {
+            transition: color 0.2s, border-color 0.2s;
+        }
+        span {
+            display: block;
+            padding-bottom: 2px;
+            font-size: rem(14px);
+            color: $color-text;
+            margin-left: 8px;
+            border-bottom: 1px solid $color-text;
+
+            @include bp (sm) {
+                margin-left: 12px;
+                padding-bottom: 0;
+                font-size: rem(16px);
+            }
+        }
+    }
+    p {
+        color: $color-gray;
+        line-height: 1.3;
+        margin-top: 16px;
+        margin-bottom: 0;
+
+        @include bp (sm) {
+            margin-top: 0;
+        }
+    }
+}
+
+// Message
+.message {
+    padding: 24px;
+    text-align: center;
+    border-radius: 8px;
+
+    &.is-error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        color: #fff;
+        background: $color-secondary;
+    }
+    &.is-success {
+        color: $color-text;
+        background: $color-tertiary;
+    }
+}

apps/website/src/components/molecules/EmailForm/EmailForm.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/newsletter-form";
+    @import "./EmailForm";
 </style>
 
 <script lang="ts">
@@ -8,7 +8,7 @@
     import { sendEvent } from '$utils/analytics'
     // Components
     import IconArrow from '$components/atoms/IconArrow.svelte'
-    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
+    import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
 
     export let past = false
 
@@ -64,7 +64,7 @@
         <form method="POST" action="/api/newsletter" on:submit|preventDefault={handleForm}
             out:fly|local={{ y: -8, easing: quartOut, duration: 600 }}
         >
-            <div class="newsletter-form__email" class:is-focused={inputInFocus}>
+            <div class="email" class:is-focused={inputInFocus}>
                 <input type="email" placeholder="Your email address" name="email" id="newsletter_email" required
                     on:focus={toggleFocus}
                     on:blur={toggleFocus}
@@ -79,7 +79,7 @@
                 </ButtonCircle>
             </div>
 
-            <div class="newsletter-form__bottom">
+            <div class="bottom">
                 {#if past}
                     <a href="/subscribe" class="past-issues" data-sveltekit-noscroll>
                         <svg width="20" height="16" viewBox="0 0 20 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
@@ -94,7 +94,7 @@
     {/if}
 
     {#if formStatus && formStatus.message}
-        <div class="newsletter-form__message shadow-small"
+        <div class="message shadow-small"
             class:is-error={!isSuccess}
             class:is-success={isSuccess}
             in:fly|local={{ y: 8, easing: quartOut, duration: 600, delay: isSuccess ? 600 : 0 }}

apps/website/src/components/molecules/Heading/Heading.scss

@@ -0,0 +1,50 @@
+.heading {
+    overflow: hidden;
+    margin-bottom: 72px;
+    text-align: center;
+    color: $color-tertiary;
+
+    @include bp (sm) {
+        margin-bottom: clamp(72px, 8vw, 128px);
+    }
+
+    // Title
+    :global(h1) {
+        margin-top: 56px;
+        line-height: 1;
+        color: $color-secondary;
+
+        @include bp (sm) {
+            margin-top: clamp(80px, 9vw, 160px);
+        }
+    }
+}
+
+// Text
+.text {
+    width: 75%;
+    max-width: 360px;
+    margin: 40px auto 0;
+    font-weight: 200;
+
+    @include bp (sm) {
+        max-width: 600px;
+        margin-top: 72px;
+    }
+
+    :global(a) {
+        position: relative;
+        color: currentColor;
+        text-decoration: none;
+        display: inline-block;
+        background-image: linear-gradient(rgba($color-tertiary, 0.3), rgba($color-tertiary, 0.3));
+        background-position: 0 100%;
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        transition: color 0.4s var(--ease-quart);
+
+        &:hover {
+            color: $color-secondary-light;
+        }
+    }
+}

apps/website/src/components/molecules/Heading/Heading.svelte

@@ -1,9 +1,9 @@
 <style lang="scss">
-    @import "../../style/molecules/heading";
+    @import "./Heading";
 </style>
 
 <script lang="ts">
-    import SiteTitle from '$components/atoms/SiteTitle.svelte'
+    import SiteTitle from '$components/atoms/SiteTitle/SiteTitle.svelte'
 
     export let text: string
 </script>

apps/website/src/components/molecules/House/House.scss

@@ -1,5 +1,6 @@
 .house {
     position: relative;
+    overflow: hidden;
 
     // Information
     &__info {

apps/website/src/components/molecules/House/House.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/house";
+    @import "./House";
 </style>
 
 <script lang="ts">

apps/website/src/components/molecules/Location/Location.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/location";
+    @import "./Location";
 </style>
 
 <script lang="ts">

apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/issue";
+    @import "./NewsletterIssue";
 </style>
 
 <script lang="ts">

apps/website/src/components/molecules/NotificationCart/NotificationCart.scss

@@ -0,0 +1,61 @@
+.notification-cart {
+    display: flex;
+    background-color: #fff;
+    color: $color-gray;
+    border-radius: 6px;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+// Left Image
+.left {
+    margin-right: 20px;
+    width: 100px;
+    height: 150px;
+
+    @include bp (sm) {
+        margin-right: 24px;
+        width: 58px;
+        height: 88px;
+    }
+
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+// Details
+.right {
+    display: flex;
+    flex-direction: column;
+    margin-right: 24px;
+    justify-content: center;
+
+    // Poster Title
+    h3 {
+        font-family: $font-serif;
+        color: $color-secondary;
+        font-size: rem(20px);
+
+        @include bp (sm) {
+            font-size: rem(18px);
+        }
+    }
+    // Text
+    p {
+        font-size: rem(12px);
+        line-height: 1.4;
+        max-width: 124px;
+        margin: 4px 0;
+
+        @include bp (sm) {
+            font-size: rem(13px);
+            max-width: none;
+        }
+    }
+}

apps/website/src/components/molecules/NotificationCart/NotificationCart.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/notification-cart";
+    @import "./NotificationCart";
 </style>
 
 <script lang="ts">
@@ -22,11 +22,12 @@
     transition:fly={{ y: 20, duration: 700, easing: quartOut }}
     on:click={closeNotification}
     on:keydown
+    role="presentation"
 >
-    <div class="notification-cart__left">
+    <div class="left">
         <img src={image} width={58} height={88} alt={title}>
     </div>
-    <div class="notification-cart__right">
+    <div class="right">
         <h3>{title}</h3>
         <p>{name}</p>
     </div>

apps/website/src/components/molecules/Pagination/Pagination.scss

@@ -5,7 +5,7 @@
     margin: auto 0;
     cursor: pointer;
 
-    &[disabled] {
+    &.is-disabled {
         cursor: not-allowed;
     }
 

apps/website/src/components/molecules/Pagination/Pagination.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/pagination";
+    @import "./Pagination";
 </style>
 
 <script lang="ts">
@@ -8,8 +8,10 @@
     export let total: number
 </script>
 
-<div class="pagination" role="button" tabindex="0"
+<div
-    disabled={ended ? ended : undefined}
+    class="pagination"
+    class:is-disabled={ended ? ended : undefined}
+    role="button" tabindex="0"
     on:click
     on:keydown
 >

apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/photo-card";
+    @import "./PhotoCard";
 </style>
 
 <script lang="ts">

apps/website/src/components/molecules/PostCard/PostCard.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/organisms/postcard";
+    @import "./PostCard";
 </style>
 
 <script lang="ts">

apps/website/src/components/molecules/Poster/Poster.scss

@@ -30,6 +30,20 @@
         transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart);
     }
 
+    // Hover effect
+    &:hover {
+        :global(img) {
+            @include bp (md) {
+                transform: scale(0.8) translate3d(0, -5%, 0);
+                border-radius: 8px;
+            }
+        }
+        .buttons {
+            transform: translate3d(0,0,0);
+        }
+    }
+}
+
     // Buttons
     .buttons {
         display: flex;
@@ -85,17 +99,3 @@
             }
         }
     }
-
-    // Hover effect
-    &:hover {
-        :global(img) {
-            @include bp (md) {
-                transform: scale(0.8) translate3d(0, -5%, 0);
-                border-radius: 8px;
-            }
-        }
-        .buttons {
-            transform: translate3d(0,0,0);
-        }
-    }
-}

apps/website/src/components/molecules/Poster/Poster.svelte

@@ -1,12 +1,12 @@
 <style lang="scss">
-    @import "../../style/molecules/poster";
+    @import "./Poster";
 </style>
 
 <script lang="ts">
     import { addToCart } from '$utils/functions/shop'
     import { smoothScroll } from '$utils/stores'
     // Components
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
 
     export let product: any

apps/website/src/components/molecules/ProcessStep/ProcessStep.scss

@@ -0,0 +1,56 @@
+// About page Step
+.step {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    padding: 32px;
+    background: $color-primary-darker;
+    border-radius: 12px;
+    transform: translateZ(0);
+
+    @include bp (sm) {
+        --columns: 11;
+        display: grid;
+        grid-template-rows: repeat(2, 1fr);
+        padding: 8% 0;
+        min-height: clamp(400px, 75vh, 800px);
+        border-radius: 16px;
+    }
+}
+
+// Image
+.media {
+    position: relative;
+    z-index: 2;
+    display: block;
+    overflow: hidden;
+    width: 70%;
+    max-height: 550px;
+    margin-bottom: 28px;
+    border-radius: 6px;
+
+    @include bp (sm) {
+        grid-column: 2 / span 6;
+        grid-row: 1 / -1;
+        width: 100%;
+        height: auto;
+        margin-bottom: 48px;
+    }
+
+    :global(.image img), video {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+// Content
+.text {
+    position: relative;
+    z-index: 2;
+    line-height: 1.5;
+    font-weight: 300;
+    color: $color-secondary-light;
+    grid-column: 2 / -2;
+}

apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/process-step";
+    @import "./ProcessStep";
 </style>
 
 <script lang="ts">

apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.scss

@@ -0,0 +1,45 @@
+.shop-locationswitcher {
+    pointer-events: auto;
+
+    // Overlaid
+    &.is-over {
+        dt {
+            color: #fff;
+        }
+    }
+}
+
+dt {
+    color: $color-primary;
+    font-weight: 400;
+    line-height: 1;
+    font-size: rem(12px);
+}
+dd {
+    color: $color-secondary;
+
+    svg {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
+
+        @include bp (sm) {
+            width: 18px;
+            height: 18px;
+        }
+    }
+    select {
+        background: none;
+        border: none;
+        font-size: rem(18px);
+        color: $color-secondary;
+        font-family: $font-serif;
+        cursor: pointer;
+        appearance: none;
+
+        @include bp (sm) {
+            font-size: rem(24px);
+        }
+    }
+}

apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/shop-locationswitcher";
+    @import "./ShopLocationSwitcher";
 </style>
 
 <script lang="ts">

apps/website/src/components/molecules/Switcher/Switcher.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/switcher";
+    @import "./Switcher";
 </style>
 
 <script lang="ts">

apps/website/src/components/molecules/Toast/Toast.scss

@@ -3,7 +3,7 @@
     align-items: center;
     padding: 8px;
     padding-right: 28px;
-    background: #fff;
+    background: $color-cream;
     border-radius: 8px;
 
     @include bp (md) {
@@ -63,7 +63,6 @@
             top: 0;
             left: 0;
             height: 100%;
-
         }
     }
 }

apps/website/src/components/molecules/Toast/Toast.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/molecules/toast";
+    @import "./Toast";
 </style>
 
 <script lang="ts">
@@ -9,7 +9,7 @@
     import { browser } from '$app/environment'
     import { cx } from 'classix'
     // Components
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
 
     export let id: string
@@ -30,10 +30,11 @@
     // Image rotation
     let imagesLoop: ReturnType<typeof setTimeout>
     let currentImageIndex = 0
+    const loopDuration = 3000
 
     const incrementCurrentImageIndex = () => {
         currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
-        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
+        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), loopDuration)
     }
 
     // Close toast
@@ -52,7 +53,7 @@
 
     onMount(() => {
         if (images.length > 1) {
-            incrementCurrentImageIndex()
+            imagesLoop = setTimeout(incrementCurrentImageIndex, loopDuration)
         }
 
         return () => {

apps/website/src/components/organisms/Banner/Banner.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/organisms/banner";
+    @import "./Banner";
 </style>
 
 <script lang="ts">

apps/website/src/components/organisms/Carousel/Carousel.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/organisms/carousel";
+    @import "./Carousel";
 </style>
 
 <script lang="ts">
@@ -49,8 +49,6 @@
 
     /** Go to prev or next slide depending on direction */
     const handleArrowClick = () => {
-        if (!carousel.clickAllowed()) return
-
         // Define direction
         if (isFirstSlide) {
             arrowDirection = 'next'
@@ -90,6 +88,7 @@
             on:mousemove={handleArrowMove}
             on:click={handleArrowClick}
             on:keydown
+            role="presentation"
         >
             <div class="carousel__slides">
                 {#each slides as { id, alt }}

apps/website/src/components/organisms/Cart/Cart.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/organisms/cart";
+    @import "./Cart";
 </style>
 
 <script lang="ts">
@@ -12,10 +12,10 @@
     import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop'
     import { sendEvent } from '$utils/analytics'
     // Components
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
     import Icon from '$components/atoms/Icon.svelte'
-    import CartItem from '$components/molecules/CartItem.svelte'
+    import CartItem from '$components/molecules/CartItem/CartItem.svelte'
-    import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
+    import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte'
 
 
     // Block scroll if cart is open

apps/website/src/components/organisms/Collage/Collage.svelte

@@ -1,9 +1,9 @@
 <style lang="scss">
-    @import "../../style/organisms/collage";
+    @import "./Collage";
 </style>
 
 <script lang="ts">
-    import PhotoCard from '$components/molecules/PhotoCard.svelte'
+    import PhotoCard from '$components/molecules/PhotoCard/PhotoCard.svelte'
 
     export let photos: any[] = []
 

apps/website/src/components/organisms/Footer/Footer.svelte

@@ -1,12 +1,12 @@
 <style lang="scss">
-    @import "../../style/organisms/footer";
+    @import "./Footer";
 </style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
     import SplitText from '$components/SplitText.svelte'
-    import SiteTitle from '$components/atoms/SiteTitle.svelte'
+    import SiteTitle from '$components/atoms/SiteTitle/SiteTitle.svelte'
 
     const { settings: { instagram, footer_links } }: any = getContext('global')
 </script>

apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/modules/globe";
+    @import "./InteractiveGlobe";
 </style>
 
 <script lang="ts">

apps/website/src/components/organisms/Locations/Locations.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/organisms/locations";
+    @import "./Locations";
 </style>
 
 <script lang="ts">
@@ -11,8 +11,8 @@
     import { throttle } from 'utils/actions'
     import { sendEvent } from '$utils/analytics'
     // Components
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
-    import Location from '$components/molecules/Location.svelte'
+    import Location from '$components/molecules/Location/Location.svelte'
 
     export let locations: any[]
 

apps/website/src/components/organisms/NewsletterModule/NewsletterModule.scss

@@ -47,7 +47,7 @@
     }
 
     // Form input
-    :global(.newsletter-form__email) {
+    :global(.email) {
         :global(input) {
             color: $color-text;
         }
@@ -56,7 +56,7 @@
         }
     }
     // Form message
-    :global(.newsletter-form__message.is-success) {
+    :global(.message.is-success) {
         color: #fff;
         background: $color-primary-tertiary20;
     }
@@ -69,7 +69,7 @@
     &--default {
         background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;
 
-        :global(.newsletter-form__email) {
+        :global(.email) {
             background: $color-tertiary;
         }
      }
@@ -77,7 +77,7 @@
     &--light {
         background: $color-cream 50% 0 / cover url(#{$dir-img}/newsletter-cream.jpg) no-repeat;
 
-        :global(.newsletter-form__email) {
+        :global(.email) {
             background: $color-cream;
         }
     }

apps/website/src/components/organisms/NewsletterModule/NewsletterModule.svelte

@@ -1,11 +1,11 @@
 <style lang="scss">
-    @import "../../style/organisms/newsletter";
+    @import "./NewsletterModule";
 </style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
-    import EmailForm from '$components/molecules/EmailForm.svelte'
+    import EmailForm from '$components/molecules/EmailForm/EmailForm.svelte'
 
     export let theme = 'default'
 

apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte

@@ -1,12 +1,12 @@
 <style lang="scss">
-    @import "../../style/pages/shop/posters";
+    @import "./PostersGrid";
 </style>
 
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'
     // Components
-    import Poster from '$components/molecules/Poster.svelte'
+    import Poster from '$components/molecules/Poster/Poster.svelte'
     import { debounce } from 'utils/actions'
 
     export let posters: any = []

apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/shop/banner";
+    @import "./ShopBanner";
 </style>
 
 <script lang="ts">
@@ -12,8 +12,8 @@
     import { quartOut } from '$animations/easings'
     // Components
     import Image from '$components/atoms/Image.svelte'
-    import ButtonCart from '$components/atoms/ButtonCart.svelte'
+    import ButtonCart from '$components/atoms/ButtonCart/ButtonCart.svelte'
-    import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
+    import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte'
 
     export let product: any = undefined
 

apps/website/src/components/organisms/ShopModule/ShopModule.svelte

@@ -1,11 +1,11 @@
 <style lang="scss">
-    @import "../../style/organisms/shop";
+    @import "./ShopModule";
 </style>
 
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     // Components
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
 
     const { locations, shop }: any = getContext('global')
@@ -38,15 +38,16 @@
     // Image rotation
     let imagesLoop: ReturnType<typeof setTimeout>
     let currentImageIndex = 0
+    const loopDuration = 3000
 
     const incrementCurrentImageIndex = () => {
         currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
-        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
+        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), loopDuration)
     }
 
     onMount(() => {
         if (images.length > 1) {
-            incrementCurrentImageIndex()
+            imagesLoop = setTimeout(incrementCurrentImageIndex, loopDuration)
         }
 
         return () => {

apps/website/src/modules/globe/pane.ts

@@ -13,10 +13,10 @@ export const createPane = (ctx: any) => {
     const rotation = ctx.pane.addFolder({
         title: 'Rotation',
     })
-    rotation.addInput(ctx.params, 'autoRotate', {
+    rotation.addBinding(ctx.params, 'autoRotate', {
         label: 'Auto-rotate',
     })
-    rotation.addInput(ctx.params, 'speed', {
+    rotation.addBinding(ctx.params, 'speed', {
         label: 'Rotation speed',
         min: 0.01,
         max: 2,
@@ -31,10 +31,10 @@ export const createPane = (ctx: any) => {
         const markers = ctx.pane.addFolder({
             title: 'Markers',
         })
-        markers.addInput(ctx.params, 'enableMarkers', {
+        markers.addBinding(ctx.params, 'enableMarkers', {
             label: 'Enable markers',
         })
-        markers.addInput(ctx.params, 'enableMarkersLinks', {
+        markers.addBinding(ctx.params, 'enableMarkersLinks', {
             label: 'Interactive',
         })
     }
@@ -47,7 +47,7 @@ export const createPane = (ctx: any) => {
         title: 'Misc',
     })
     // Sun position
-    misc.addInput(ctx.params, 'sunAngle', {
+    misc.addBinding(ctx.params, 'sunAngle', {
         label: 'Sun angle',
         min: 0,
         max: 1,

apps/website/src/routes/(shop)/shop/+error.svelte

@@ -3,8 +3,8 @@
     import { page } from '$app/stores'
     // Components
     import Metas from '$components/Metas.svelte'
-    import ShopHeader from '$components/organisms/ShopBanner.svelte'
+    import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
-    import PostersGrid from '$components/organisms/PostersGrid.svelte'
+    import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
 
     const { posters }: any = getContext('shop')
     const errors = {

apps/website/src/routes/(shop)/shop/+layout.server.ts

@@ -73,6 +73,6 @@ export const load = async () => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(shop)/shop/+layout.svelte

@@ -6,8 +6,8 @@
     import { setContext } from 'svelte'
     import { cartNotifications } from '$utils/stores/shop'
     // Components
-    import Cart from '$components/organisms/Cart.svelte'
+    import Cart from '$components/organisms/Cart/Cart.svelte'
-    import NotificationCart from '$components/molecules/NotificationCart.svelte'
+    import NotificationCart from '$components/molecules/NotificationCart/NotificationCart.svelte'
 
     export let data
 

apps/website/src/routes/(shop)/shop/+page.server.ts

@@ -51,6 +51,6 @@ export const load = async ({ setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(shop)/shop/+page.svelte

@@ -4,9 +4,9 @@
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     // Components
     import Metas from '$components/Metas.svelte'
-    import PostersGrid from '$components/organisms/PostersGrid.svelte'
+    import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
-    import ShopHeader from '$components/organisms/ShopBanner.svelte'
+    import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
-    import PosterLayout from '$components/layouts/PosterLayout.svelte'
+    import PosterLayout from '$components/layouts/PosterLayout/PosterLayout.svelte'
 
     export let data
 

apps/website/src/routes/(shop)/shop/[type]-[name]/+page.server.ts

@@ -48,6 +48,6 @@ export const load = async ({ params, setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(404)
+        error(404)
     }
 }

apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte

@@ -5,9 +5,9 @@
     import { capitalizeFirstLetter } from 'utils/string'
     // Components
     import Metas from '$components/Metas.svelte'
-    import ShopHeader from '$components/organisms/ShopBanner.svelte'
+    import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
-    import PostersGrid from '$components/organisms/PostersGrid.svelte'
+    import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
-    import PosterLayout from '$components/layouts/PosterLayout.svelte'
+    import PosterLayout from '$components/layouts/PosterLayout/PosterLayout.svelte'
 
     export let data
 

apps/website/src/routes/(site)/[country]/[location]/+page.server.ts

@@ -73,7 +73,7 @@ export const load = async ({ params, setHeaders }) => {
         const { data: { location: location, photos, total_published, product } } = res
 
         if (!location.length || location.length && params.country !== location[0].country.slug) {
-            throw error(404, 'This location is not available… yet!')
+            error(404, 'This location is not available… yet!')
         }
 
         setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
@@ -85,6 +85,6 @@ export const load = async ({ params, setHeaders }) => {
             product: product[0],
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(site)/[country]/[location]/+page.svelte

@@ -17,12 +17,12 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
-    import House from '$components/molecules/House.svelte'
+    import House from '$components/molecules/House/House.svelte'
-    import Pagination from '$components/molecules/Pagination.svelte'
+    import Pagination from '$components/molecules/Pagination/Pagination.svelte'
-    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
-    import ShopModule from '$components/organisms/ShopModule.svelte'
+    import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
 
     export let data
 
@@ -95,7 +95,7 @@
             // Return new photos
             return photos
         } else {
-            throw new Error('Error while loading new photos')
+            new Error('Error while loading new photos')
         }
     }
 

apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.server.ts

@@ -86,6 +86,6 @@ export const load = async ({ params, setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte

@@ -22,7 +22,7 @@
     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'
+    import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
 
     export let data
 
@@ -209,7 +209,7 @@
                 }
             }
         } else {
-            throw new Error('Error while loading new photos')
+            new Error('Error while loading new photos')
         }
     }
 
@@ -228,7 +228,7 @@
             }],
             // Other photos
             ['.photo-page__picture:not(.is-1)', {
-                x: ['-150%', 0],
+                x: ['-15%', '0%'],
                 opacity: [0, 1],
             }, {
                 at: 0.4,

apps/website/src/routes/(site)/about/+page.server.ts

@@ -99,6 +99,6 @@ export const load = async ({ setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(site)/about/+page.svelte

@@ -17,10 +17,10 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
-    import ProcessStep from '$components/molecules/ProcessStep.svelte'
+    import ProcessStep from '$components/molecules/ProcessStep/ProcessStep.svelte'
-    import Banner from '$components/organisms/Banner.svelte'
+    import Banner from '$components/organisms/Banner/Banner.svelte'
 
     export let data
     const { about, photos } = data
@@ -221,7 +221,7 @@
                     {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}>
+                        <img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
                         <span>Naarm Australia (Melbourne)</span>
                     </a>
                 </figcaption>

apps/website/src/routes/(site)/api/data/+server.ts

@@ -19,6 +19,6 @@ export const POST = async ({ request, setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(site)/credits/+page.server.ts

@@ -38,6 +38,6 @@ export const load = async ({ setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(site)/credits/+page.svelte

@@ -11,8 +11,8 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
-    import Heading from '$components/molecules/Heading.svelte'
+    import Heading from '$components/molecules/Heading/Heading.svelte'
-    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
 
     export let data
     const { credit } = data

apps/website/src/routes/(site)/feed/products.xml/+server.ts

@@ -47,7 +47,7 @@ export const GET = async ({ url, setHeaders }) => {
                     slug: siteProduct.location.slug,
                     description: siteProduct.description,
                     price: product.price,
-                    images: siteProduct.photos_product.map(({ directus_files_id: { id } }: any) => getAssetUrlKey(id, `product-large-jpg`)),
+                    images: siteProduct.photos_product.map(({ directus_files_id: { id } }: any) => getAssetUrlKey(id, `product-large`)),
                     gCategory: category.value,
                     gType: category.type,
                 })
@@ -63,7 +63,7 @@ export const GET = async ({ url, setHeaders }) => {
 
         return new Response(sitemap)
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }
 

apps/website/src/routes/(site)/locations/+page.svelte

@@ -6,11 +6,11 @@
     import { getContext } from 'svelte'
     // Components
     import Metas from '$components/Metas.svelte'
-    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
-    import Locations from '$components/organisms/Locations.svelte'
+    import Locations from '$components/organisms/Locations/Locations.svelte'
-    import ShopModule from '$components/organisms/ShopModule.svelte'
+    import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
-    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
-    import Heading from '$components/molecules/Heading.svelte'
+    import Heading from '$components/molecules/Heading/Heading.svelte'
 
     const { locations }: any = getContext('global')
     const text = 'Explore the globe to discover unique locations across the world'

apps/website/src/routes/(site)/photos/+page.server.ts

@@ -82,6 +82,6 @@ export const load = async ({ url, setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(site)/photos/+page.svelte

@@ -21,14 +21,14 @@
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
-    import Button from '$components/atoms/Button.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
     import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
     import DiscoverText from '$components/atoms/DiscoverText.svelte'
-    import PostCard from '$components/molecules/PostCard.svelte'
+    import PostCard from '$components/molecules/PostCard/PostCard.svelte'
     import Select from '$components/molecules/Select.svelte'
-    import ShopModule from '$components/organisms/ShopModule.svelte'
+    import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
-    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
 
     export let data
 
@@ -39,19 +39,11 @@
 
     dayjs.extend(relativeTime)
 
-    let photosContentEl: HTMLElement
     let photosGridEl: HTMLElement
     let observerPhotos: IntersectionObserver
     let mutationPhotos: MutationObserver
     let scrollY: number
     let innerWidth: number, innerHeight: number
-    // Filters related
-    let scrollDirection = 0
-    let lastScrollTop = 0
-    let scrolledPastIntro: boolean
-    let filtersOver: boolean
-    let filtersVisible: boolean
-    let filtersTransitioning: boolean
 
 
     /**
@@ -198,7 +190,7 @@
             // Return new photos
             return photos
         } else {
-            throw new Error('Error while loading new photos')
+            new Error('Error while loading new photos')
         }
     }
 
@@ -222,37 +214,6 @@
     }
 
 
-    /**
-     * Scroll detection when entering content
-     */
-    $: if (scrollY) {
-        // Detect scroll direction
-        throttle(() => {
-            scrollDirection = scrollY > lastScrollTop ? 1 : -1
-            lastScrollTop = scrollY
-
-            // Show filters bar when scrolling back up
-            filtersVisible = scrollDirection < 0
-
-            // Scrolled past grid of photos
-            if (scrollY > photosContentEl.offsetTop) {
-                if (!scrolledPastIntro) {
-                    filtersOver = true
-                    // Hacky: Set filters as transitioning after a little delay to avoid an transition jump
-                    setTimeout(() => filtersTransitioning = true, 30)
-                }
-                scrolledPastIntro = true
-            } else {
-                if (scrolledPastIntro) {
-                    filtersOver = false
-                    filtersTransitioning = false
-                }
-                scrolledPastIntro = false
-            }
-        }, 200)()
-    }
-
-
     onMount(() => {
         /**
          * Observers
@@ -336,20 +297,14 @@
 
 
 <main class="photos-page">
-    <section class="photos-page__intro"
+    <section class="photos-page__intro">
-        class:is-passed={scrolledPastIntro}
-    >
         <ScrollingTitle tag="h1" text="Houses">
             <SplitText text="Houses" mode="chars" />
         </ScrollingTitle>
 
         <DiscoverText />
 
-        <div class="filters"
+        <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>
@@ -425,7 +380,7 @@
         </div>
     </section>
 
-    <section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
+    <section class="photos-page__content" style:--margin-sides="{sideMargins}px">
         <div class="grid container">
             {#if photos}
                 <div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll>

apps/website/src/routes/(site)/subscribe/+page.server.ts

@@ -33,6 +33,6 @@ export const load = async ({ setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(site)/subscribe/+page.svelte

@@ -10,10 +10,10 @@
     import { quartOut } from '$animations/easings'
     // Components
     import Metas from '$components/Metas.svelte'
-    import Heading from '$components/molecules/Heading.svelte'
+    import Heading from '$components/molecules/Heading/Heading.svelte'
-    import EmailForm from '$components/molecules/EmailForm.svelte'
+    import EmailForm from '$components/molecules/EmailForm/EmailForm.svelte'
-    import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
+    import NewsletterIssue from '$components/molecules/NewsletterIssue/NewsletterIssue.svelte'
-    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
 
     export let data
 

apps/website/src/routes/(site)/terms/+page.server.ts

@@ -21,6 +21,6 @@ export const load = async ({ setHeaders }) => {
             }
         }
     } catch (err) {
-        throw error(500, err.message)
+        error(500, err.message)
     }
 }

apps/website/src/routes/(site)/terms/+page.svelte

@@ -7,7 +7,7 @@
     import relativeTime from 'dayjs/plugin/relativeTime'
     // Components
     import Metas from '$components/Metas.svelte'
-    import Heading from '$components/molecules/Heading.svelte'
+    import Heading from '$components/molecules/Heading/Heading.svelte'
 
     export let data
     const { legal } = data

apps/website/src/routes/+error.svelte

@@ -7,13 +7,13 @@
     import { page } from '$app/stores'
     // Components
     import Metas from '$components/Metas.svelte'
-    import BoxCTA from '$components/atoms/BoxCTA.svelte'
+    import BoxCTA from '$components/atoms/BoxCTA/BoxCTA.svelte'
-    import Heading from '$components/molecules/Heading.svelte'
+    import Heading from '$components/molecules/Heading/Heading.svelte'
-    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
     import ListCTAs from '$components/organisms/ListCTAs.svelte'
-    import Locations from '$components/organisms/Locations.svelte'
+    import Locations from '$components/organisms/Locations/Locations.svelte'
-    import ShopModule from '$components/organisms/ShopModule.svelte'
+    import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
-    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
 
     const { locations }: any = getContext('global')
     const errors = {

apps/website/src/routes/+layout.server.ts

@@ -100,6 +100,6 @@ export const load = async ({ url }) => {
             }
         }
     } catch (err) {
-        throw error(500, err || 'Failed to fetch data')
+        error(500, err || 'Failed to fetch data')
     }
 }

apps/website/src/routes/+layout.svelte

@@ -31,9 +31,9 @@
     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 Switcher from '$components/molecules/Switcher/Switcher.svelte'
-    import Toast from '$components/molecules/Toast.svelte'
+    import Toast from '$components/molecules/Toast/Toast.svelte'
-    import Footer from '$components/organisms/Footer.svelte'
+    import Footer from '$components/organisms/Footer/Footer.svelte'
 
     export let data