feat: add global Toast with 10% offer for posters

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

@@ -132,7 +132,7 @@
                 {/if}
             </div>
             <div class="cart__total--checkout">
-                <p>Free shipping worldwide!</p>
+                <p>Save 10% on your order with the code <strong>WORLDCITIZEN</strong>. Free shipping.</p>
                 {#if $cartData && $cartAmount > 0 && $cartData.checkout_url}
                     <div transition:fly={{ y: 8, duration: 600, easing: quartOut }}>
                         <Button

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

@@ -1,3 +1,19 @@
+<style lang="scss">
+    // Toast
+    :global(.toast--global) {
+        position: fixed;
+        z-index: 20;
+        max-width: 420px;
+        bottom: var(--offset-sides);
+        right: var(--offset-sides);
+        left: calc(var(--offset-sides) + 44px + 24px);
+
+        @include bp (mob-lg) {
+            left: auto;
+        }
+    }
+</style>
+
 <script lang="ts">
     import '../style/global.scss'
 
@@ -16,6 +32,7 @@
     import SmoothScroll from '$components/SmoothScroll.svelte'
     import Analytics from '$components/Analytics.svelte'
     import Switcher from '$components/molecules/Switcher.svelte'
+    import Toast from '$components/molecules/Toast.svelte'
     import Footer from '$components/organisms/Footer.svelte'
 
     export let data
@@ -99,6 +116,21 @@
 {/key}
 
 
+{#if !['/[photo]'].some(sub => $page.route.id.includes(sub))}
+    <Toast
+        type="global"
+        id="posters-promo"
+        text="Upgrade your walls! <strong>10% off</strong> in cart with free shipping on our graphic posters."
+        cta={{
+            label: 'View posters',
+            url: '/shop',
+            color: 'pink',
+        }}
+        images={data.shop.module_images.map(({ directus_files_id: { id, title } }) => ({ id, title }))}
+        class="toast-home"
+    />
+{/if}
+
 <SVGSprite />
 <SmoothScroll />
 

apps/website/src/style/organisms/_cart.scss

@@ -140,6 +140,11 @@
                 @include bp (md) {
                     max-width: 304px;
                 }
+
+                :global(strong) {
+                    font-weight: normal;
+                    color: $color-secondary;
+                }
             }
         }
     }