Merge branch 'main' into dev

2024-07-24 10:59:52 +02:00
parent 124e6c3f09 cb7d83978d
commit 317f56e454
127 changed files with 657 additions and 11532 deletions
--- a/apps/api/extensions/hooks/robots-txt/package.json
+++ b/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"
 	}
 }
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -9,7 +9,7 @@
    "start": "directus start"
  },
  "dependencies": {
-    "directus": "^10.2.1",
-    "pg": "^8.11.0"
+    "directus": "^10.13.1",
+    "mysql": "^2.18.1"
  }
 }
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -15,46 +15,45 @@
    "lint": "eslint ."
  },
  "dependencies": {
-    "@studio-freight/lenis": "^1.0.15",
-    "classix": "^2.1.32",
-    "dayjs": "^1.11.8",
-    "embla-carousel": "^7.1.0",
+    "classix": "^2.1.38",
+    "dayjs": "^1.11.12",
+    "embla-carousel": "^8.1.7",
    "focus-visible": "^5.2.0",
-    "motion": "^10.16.2",
-    "ogl": "^0.0.117",
+    "lenis": "^1.1.6",
+    "motion": "^10.18.0",
+    "ogl": "^1.0.7",
    "sanitize.css": "^13.0.0",
-    "swell-js": "3.22.0",
-    "tweakpane": "^3.1.9",
+    "swell-js": "^4.2.0",
+    "tweakpane": "^4.0.4",
    "utils": "workspace:*"
  },
  "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/adapter-cloudflare": "^2.3.0",
-    "@sveltejs/kit": "^1.20.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "@sveltejs/adapter-cloudflare": "^4.6.1",
+    "@sveltejs/kit": "^2.5.18",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@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",
-    "eslint": "^8.42.0",
-    "eslint-plugin-svelte": "^2.30.0",
-    "postcss": "^8.4.24",
-    "postcss-focus-visible": "^8.0.2",
+    "cssnano": "^7.0.4",
+    "eslint": "^9.7.0",
+    "eslint-plugin-svelte": "^2.43.0",
+    "postcss": "^8.4.39",
+    "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",
-    "svelte": "^3.59.1",
-    "svelte-check": "^3.4.3",
-    "svelte-preprocess": "^5.0.4",
-    "tslib": "^2.5.3",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9"
+    "sass": "^1.77.8",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.4",
+    "svelte-preprocess": "^6.0.2",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4"
  },
  "type": "module",
  "browserslist": [
-    "last 3 versions",
-    "> 0.3%"
+    "> .5% and last 2 versions"
  ]
 }
--- a/apps/website/src/components/SmoothScroll.svelte
+++ b/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

-
-    // Setup smooth scroll
-    if (browser) {
+    onMount(() => {
+        // Setup smooth scroll
        $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>
--- a/apps/website/src/components/atoms/Badge.svelte
+++ b/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">
--- a/apps/website/src/components/atoms/BoxCTA/BoxCTA.scss
+++ b/apps/website/src/components/atoms/BoxCTA/BoxCTA.scss
--- a/apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte
+++ b/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">
--- a/apps/website/src/components/atoms/Button/Button.scss
+++ b/apps/website/src/components/atoms/Button/Button.scss
--- a/apps/website/src/components/atoms/Button/Button.svelte
+++ b/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">
--- a/apps/website/src/components/atoms/ButtonCart/ButtonCart.scss
+++ b/apps/website/src/components/atoms/ButtonCart/ButtonCart.scss
--- a/apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte
+++ b/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
--- a/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss
+++ b/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.scss
--- a/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte
+++ b/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">
--- a/apps/website/src/components/atoms/DiscoverText.svelte
+++ b/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">
--- a/apps/website/src/components/atoms/IconArrow.svelte
+++ b/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">
--- a/apps/website/src/components/atoms/Image.svelte
+++ b/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 height: number = sizes && sizes.medium && sizes.medium.height
+    export let width: number = sizes?.medium?.width
+    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 }
-        medium?: { width?: number, height?: number }
-        large?: { width?: number, height?: number }
+        small?: { width?: number; height?: number }
+        medium?: { width?: number; height?: number }
+        large?: { width?: number; height?: number }
    }

-    let srcSet = { webp: [], jpg: [] }
-
-
-    /**
-     * Define height from origin ratio if not defined
-     */
-    const setHeightFromRatio = (w: number, r: number = ratio) => {
-        return Math.round(w / r)
-    }
+    const setHeightFromRatio = (w: number, r: number = ratio) => 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 => {
-                const [key, value]: [string, { width?: number, height?: number }] = size
+            for (const [key, value] of Object.entries(sizes)) {
                sizes[key].height = setHeightFromRatio(value.width)
-            })
+            }
        }
    }

-
-    /**
-     * Image attributes
-     */
-    $: 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`,
-                sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
-                sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
-            ]
-            : [getAssetUrlKey(id, `${sizeKey}-webp`)],
-        // 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`)]
-    }
+    $: imgWidth = sizes?.small?.width || width
+    $: imgHeight = sizes?.small?.height || height
+    $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small`) : src
+    $: srcSet = sizes
+        ? [
+            `${getAssetUrlKey(id, `${sizeKey}-small`)} 345w`,
+            sizes.medium && `${getAssetUrlKey(id, `${sizeKey}-medium`)} 768w`,
+            sizes.large && `${getAssetUrlKey(id, `${sizeKey}-large`)} 1280w`,
+        ]
+        : [getAssetUrlKey(id, sizeKey)]
 </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}
-        srcset={srcSet.jpg.join(', ').trim()}
+        sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : undefined}
+        srcset={srcSet.join(', ')}
        width={imgWidth}
        height={imgHeight}
        {alt}
--- a/apps/website/src/components/atoms/SiteTitle/SiteTitle.scss
+++ b/apps/website/src/components/atoms/SiteTitle/SiteTitle.scss
--- a/apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte
+++ b/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">
--- a/apps/website/src/components/layouts/PosterLayout/PosterLayout.scss
+++ b/apps/website/src/components/layouts/PosterLayout/PosterLayout.scss
--- a/apps/website/src/components/layouts/PosterLayout/PosterLayout.svelte
+++ b/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
--- a/apps/website/src/components/molecules/CartItem/CartItem.scss
+++ b/apps/website/src/components/molecules/CartItem/CartItem.scss
--- a/apps/website/src/components/molecules/CartItem/CartItem.svelte
+++ b/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
--- a/apps/website/src/components/molecules/EmailForm/EmailForm.scss
+++ b/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;
+    }
+}
--- a/apps/website/src/components/molecules/EmailForm/EmailForm.svelte
+++ b/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 }}
--- a/apps/website/src/components/molecules/Heading/Heading.scss
+++ b/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;
+        }
+    }
+}
--- a/apps/website/src/components/molecules/Heading/Heading.svelte
+++ b/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>
--- a/apps/website/src/components/molecules/House/House.scss
+++ b/apps/website/src/components/molecules/House/House.scss
@@ -1,5 +1,6 @@
 .house {
    position: relative;
+    overflow: hidden;

    // Information
    &__info {
--- a/apps/website/src/components/molecules/House/House.svelte
+++ b/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">
--- a/apps/website/src/components/molecules/Location/Location.scss
+++ b/apps/website/src/components/molecules/Location/Location.scss
--- a/apps/website/src/components/molecules/Location/Location.svelte
+++ b/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">
--- a/apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.scss
+++ b/apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.scss
--- a/apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte
+++ b/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">
--- a/apps/website/src/components/molecules/NotificationCart/NotificationCart.scss
+++ b/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;
+        }
+    }
+}
--- a/apps/website/src/components/molecules/NotificationCart/NotificationCart.svelte
+++ b/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>
--- a/apps/website/src/components/molecules/Pagination/Pagination.scss
+++ b/apps/website/src/components/molecules/Pagination/Pagination.scss
@@ -5,7 +5,7 @@
    margin: auto 0;
    cursor: pointer;

-    &[disabled] {
+    &.is-disabled {
        cursor: not-allowed;
    }

--- a/apps/website/src/components/molecules/Pagination/Pagination.svelte
+++ b/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"
-    disabled={ended ? ended : undefined}
+<div
+    class="pagination"
+    class:is-disabled={ended ? ended : undefined}
+    role="button" tabindex="0"
    on:click
    on:keydown
 >
--- a/apps/website/src/components/molecules/PhotoCard/PhotoCard.scss
+++ b/apps/website/src/components/molecules/PhotoCard/PhotoCard.scss
--- a/apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte
+++ b/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">
--- a/apps/website/src/components/molecules/PostCard/PostCard.scss
+++ b/apps/website/src/components/molecules/PostCard/PostCard.scss
--- a/apps/website/src/components/molecules/PostCard/PostCard.svelte
+++ b/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">
--- a/apps/website/src/components/molecules/Poster/Poster.scss
+++ b/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);
-        }
-    }
-}
--- a/apps/website/src/components/molecules/Poster/Poster.svelte
+++ b/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
--- a/apps/website/src/components/molecules/ProcessStep/ProcessStep.scss
+++ b/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;
+}
--- a/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte
+++ b/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">
--- a/apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.scss
+++ b/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);
+        }
+    }
+}
--- a/apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte
+++ b/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">
--- a/apps/website/src/components/molecules/Switcher/Switcher.scss
+++ b/apps/website/src/components/molecules/Switcher/Switcher.scss
--- a/apps/website/src/components/molecules/Switcher/Switcher.svelte
+++ b/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">
--- a/apps/website/src/components/molecules/Toast/Toast.scss
+++ b/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%;
-
        }
    }
 }
--- a/apps/website/src/components/molecules/Toast/Toast.svelte
+++ b/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 () => {
--- a/apps/website/src/components/organisms/Banner/Banner.scss
+++ b/apps/website/src/components/organisms/Banner/Banner.scss
--- a/apps/website/src/components/organisms/Banner/Banner.svelte
+++ b/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">
--- a/apps/website/src/components/organisms/Carousel/Carousel.scss
+++ b/apps/website/src/components/organisms/Carousel/Carousel.scss
--- a/apps/website/src/components/organisms/Carousel/Carousel.svelte
+++ b/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 }}
--- a/apps/website/src/components/organisms/Cart/Cart.scss
+++ b/apps/website/src/components/organisms/Cart/Cart.scss
--- a/apps/website/src/components/organisms/Cart/Cart.svelte
+++ b/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 ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
+    import CartItem from '$components/molecules/CartItem/CartItem.svelte'
+    import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte'


    // Block scroll if cart is open
--- a/apps/website/src/components/organisms/Collage/Collage.scss
+++ b/apps/website/src/components/organisms/Collage/Collage.scss
--- a/apps/website/src/components/organisms/Collage/Collage.svelte
+++ b/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[] = []

--- a/apps/website/src/components/organisms/Footer/Footer.scss
+++ b/apps/website/src/components/organisms/Footer/Footer.scss
--- a/apps/website/src/components/organisms/Footer/Footer.svelte
+++ b/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>
--- a/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.scss
+++ b/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.scss
--- a/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte
+++ b/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">
--- a/apps/website/src/components/organisms/Locations/Locations.scss
+++ b/apps/website/src/components/organisms/Locations/Locations.scss
--- a/apps/website/src/components/organisms/Locations/Locations.svelte
+++ b/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 Location from '$components/molecules/Location.svelte'
+    import Button from '$components/atoms/Button/Button.svelte'
+    import Location from '$components/molecules/Location/Location.svelte'

    export let locations: any[]

--- a/apps/website/src/components/organisms/NewsletterModule/NewsletterModule.scss
+++ b/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;
        }
    }
--- a/apps/website/src/components/organisms/NewsletterModule/NewsletterModule.svelte
+++ b/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'

--- a/apps/website/src/components/organisms/PostersGrid/PostersGrid.scss
+++ b/apps/website/src/components/organisms/PostersGrid/PostersGrid.scss
--- a/apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte
+++ b/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 = []
--- a/apps/website/src/components/organisms/ShopBanner/ShopBanner.scss
+++ b/apps/website/src/components/organisms/ShopBanner/ShopBanner.scss
--- a/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
+++ b/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 ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
+    import ButtonCart from '$components/atoms/ButtonCart/ButtonCart.svelte'
+    import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte'

    export let product: any = undefined

--- a/apps/website/src/components/organisms/ShopModule/ShopModule.scss
+++ b/apps/website/src/components/organisms/ShopModule/ShopModule.scss
--- a/apps/website/src/components/organisms/ShopModule/ShopModule.svelte
+++ b/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 () => {
--- a/apps/website/src/modules/globe/pane.ts
+++ b/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,
--- a/apps/website/src/routes/(shop)/shop/+error.svelte
+++ b/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 PostersGrid from '$components/organisms/PostersGrid.svelte'
+    import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
+    import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'

    const { posters }: any = getContext('shop')
    const errors = {
--- a/apps/website/src/routes/(shop)/shop/+layout.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(shop)/shop/+layout.svelte
+++ b/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 NotificationCart from '$components/molecules/NotificationCart.svelte'
+    import Cart from '$components/organisms/Cart/Cart.svelte'
+    import NotificationCart from '$components/molecules/NotificationCart/NotificationCart.svelte'

    export let data

--- a/apps/website/src/routes/(shop)/shop/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(shop)/shop/+page.svelte
+++ b/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 ShopHeader from '$components/organisms/ShopBanner.svelte'
-    import PosterLayout from '$components/layouts/PosterLayout.svelte'
+    import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
+    import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
+    import PosterLayout from '$components/layouts/PosterLayout/PosterLayout.svelte'

    export let data

--- a/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte
+++ b/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 PostersGrid from '$components/organisms/PostersGrid.svelte'
-    import PosterLayout from '$components/layouts/PosterLayout.svelte'
+    import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
+    import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
+    import PosterLayout from '$components/layouts/PosterLayout/PosterLayout.svelte'

    export let data

--- a/apps/website/src/routes/(site)/[country]/[location]/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
+++ b/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 Pagination from '$components/molecules/Pagination.svelte'
-    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
-    import ShopModule from '$components/organisms/ShopModule.svelte'
+    import House from '$components/molecules/House/House.svelte'
+    import Pagination from '$components/molecules/Pagination/Pagination.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.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')
        }
    }

--- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
+++ b/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,
--- a/apps/website/src/routes/(site)/about/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/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 Banner from '$components/organisms/Banner.svelte'
+    import ProcessStep from '$components/molecules/ProcessStep/ProcessStep.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>
--- a/apps/website/src/routes/(site)/api/data/+server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(site)/credits/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(site)/credits/+page.svelte
+++ b/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 InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import Heading from '$components/molecules/Heading/Heading.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'

    export let data
    const { credit } = data
--- a/apps/website/src/routes/(site)/feed/products.xml/+server.ts
+++ b/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)
    }
 }

--- a/apps/website/src/routes/(site)/locations/+page.svelte
+++ b/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 Locations from '$components/organisms/Locations.svelte'
-    import ShopModule from '$components/organisms/ShopModule.svelte'
-    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
-    import Heading from '$components/molecules/Heading.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
+    import Locations from '$components/organisms/Locations/Locations.svelte'
+    import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.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'
--- a/apps/website/src/routes/(site)/photos/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(site)/photos/+page.svelte
+++ b/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 NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+    import ShopModule from '$components/organisms/ShopModule/ShopModule.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"
-        class:is-passed={scrolledPastIntro}
-    >
+    <section class="photos-page__intro">
        <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}
-        >
+        <div class="filters">
            <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>
--- a/apps/website/src/routes/(site)/subscribe/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(site)/subscribe/+page.svelte
+++ b/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 EmailForm from '$components/molecules/EmailForm.svelte'
-    import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
-    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import Heading from '$components/molecules/Heading/Heading.svelte'
+    import EmailForm from '$components/molecules/EmailForm/EmailForm.svelte'
+    import NewsletterIssue from '$components/molecules/NewsletterIssue/NewsletterIssue.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'

    export let data

--- a/apps/website/src/routes/(site)/terms/+page.server.ts
+++ b/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)
    }
 }
--- a/apps/website/src/routes/(site)/terms/+page.svelte
+++ b/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
--- a/apps/website/src/routes/+error.svelte
+++ b/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 Heading from '$components/molecules/Heading.svelte'
-    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import BoxCTA from '$components/atoms/BoxCTA/BoxCTA.svelte'
+    import Heading from '$components/molecules/Heading/Heading.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
    import ListCTAs from '$components/organisms/ListCTAs.svelte'
-    import Locations from '$components/organisms/Locations.svelte'
-    import ShopModule from '$components/organisms/ShopModule.svelte'
-    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+    import Locations from '$components/organisms/Locations/Locations.svelte'
+    import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'

    const { locations }: any = getContext('global')
    const errors = {
--- a/apps/website/src/routes/+layout.server.ts
+++ b/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')
    }
 }
--- a/apps/website/src/routes/+layout.svelte
+++ b/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 Toast from '$components/molecules/Toast.svelte'
-    import Footer from '$components/organisms/Footer.svelte'
+    import Switcher from '$components/molecules/Switcher/Switcher.svelte'
+    import Toast from '$components/molecules/Toast/Toast.svelte'
+    import Footer from '$components/organisms/Footer/Footer.svelte'

    export let data

--- a/Show More
+++ b/Show More