Create homepage

Photo-card layout, button, typography

src/routes/index.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
-    import Metas from '$components/Metas.svelte'
+    import Button from '$components/atoms/Button.svelte'
     import Locations from '$components/organisms/Locations.svelte'
+    import Metas from '$components/Metas.svelte'
+    import PhotoCard from '$components/molecules/PhotoCard.svelte'
+
+    export let photos: any
 
     const globalData: any = getContext('global')
 </script>
@@ -13,8 +17,51 @@
     image=""
 />
 
-<h1>Houses Of</h1>
+<main class="homepage">
+    <section class="homepage__intro">
+        <h1 class="title-huge">Houses</h1>
+        <p class="text-medium">Houses Of is a project that showcases houses of character around the world.</p>
+        <Button text="Explore locations" url="#" tag="a">
+            <img src="/images/icons/globe.svg" alt="explore globe">
+        </Button>
+    </section>
 
-<Locations
-    locations={globalData.location}
-/>
+    <section class="homepage__photos">
+        <div class="homepage__collage">
+            {#each photos as { image: { id, title } }}
+                <PhotoCard id={id} alt={title} />
+            {/each}
+        </div>
+    </section>
+
+    <Locations
+        locations={globalData.location}
+    />
+</main>
+
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, session, fetch, context }) {
+        const res = await fetchAPI(`
+            query {
+                photo (limit: 11, sort: ["-date_created"]) {
+                    image {
+                        id
+                        title
+                    }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                photos: data.photo,
+            }
+        }
+    }
+</script>