Add some data on Shop page

src/routes/shop/__layout.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import SiteTitle from '$components/atoms/SiteTitle.svelte'
+    import Image from '$components/atoms/Image.svelte'
+    import PosterProduct from '$components/organisms/PosterProduct.svelte'
+    import Poster from '$components/molecules/Poster.svelte'
+    import EmailForm from '$components/molecules/EmailForm.svelte'
+
+    export let shop: any
+    export let locations: any
+</script>
+
+<Metas
+    title="Houses Of"
+    description=""
+    image=""
+/>
+
+<main class="shop-page">
+    <section class="shop-page__intro">
+        <a href="/" class="back">
+            Back to Houses Of
+        </a>
+        <span class="shop-title">Shop</span>
+
+        <SiteTitle
+            variant="inline"
+        />
+
+        <header class="shop-page__header">
+            <div class="container">
+                <p class="text-label">Shop your city</p>
+                <nav>
+                    <ul>
+                        {#each locations as { name, slug }}
+                            <li>
+                                <a href="/shop/poster-{slug}">{name}</a>
+                            </li>
+                        {/each}
+                    </ul>
+                </nav>
+                <button class="cart">
+                    <span>2</span>
+                </button>
+            </div>
+        </header>
+
+        <Image
+            id={shop.page_heroimage.id}
+            alt="photo"
+            sizeKey="hero"
+            sizes={{
+                large: { width: 1800, height: 1200 },
+                medium: { width: 1200, height: 800 },
+                small: { width: 700, height: 700 },
+            }}
+        />
+    </section>
+
+    <section class="shop-page__about grid">
+        <p class="description text-normal">
+            Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.
+        </p>
+    </section>
+
+    <PosterProduct />
+
+    <section class="shop-page__posters grid">
+        <h3>View all of our available posters</h3>
+        <div class="set">
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+            <Poster slug="melbourne" />
+        </div>
+        <div class="subscribe">
+            <p>Subscribe to be notified when new posters become available</p>
+            <EmailForm />
+        </div>
+    </section>
+</main>
+
+<slot />
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, fetch, session, stuff }) {
+        const res = await fetchAPI(`
+            query {
+                shop {
+                    page_heroimage { id }
+                }
+
+                location (
+                    filter: { has_poster: { _eq: true }},
+                    sort: "name"
+                ) {
+                    name
+                    slug
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                shop: data.shop,
+                locations: data.location,
+            }
+        }
+    }
+</script>