🚧 Switch to monorepo with Turbo

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

@@ -0,0 +1,50 @@
+<style lang="scss">
+    @import "../../style/molecules/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 Image from '$components/atoms/Image.svelte'
+
+    export let product: any
+    export let location: { name: string, slug: string }
+    export let image: any
+</script>
+
+<div class="poster">
+    {#if image}
+        <a href="/shop/poster-{location.slug}" data-sveltekit-noscroll
+            on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
+        >
+            <Image
+                id={image.id}
+                sizeKey="product"
+                sizes={{
+                    small: { width: 326 },
+                    medium: { width: 326 },
+                    large: { width: 326 },
+                }}
+                ratio={1.5}
+                alt="Poster of {location.name}"
+            />
+        </a>
+    {/if}
+    <div class="buttons">
+        <Button
+            size="xsmall"
+            url="/shop/poster-{location.slug}"
+            text="View"
+            on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
+        />
+        <Button
+            tag="button"
+            size="xsmall"
+            text="Add to cart"
+            color="pink"
+            on:click={() => addToCart(product)}
+        />
+    </div>
+</div>