From 4691c190bc2df55dcfd320a688a5cbcaecfe5bbb Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Mon, 4 Oct 2021 19:44:07 +0200
Subject: [PATCH] Create Locations page

---
 src/routes/locations.svelte   | 67 +++++++++++++++++++++++++++++++++++
 src/style/pages/_explore.scss | 49 +++++++++++++++++++++++++
 src/style/style.scss          |  1 +
 3 files changed, 117 insertions(+)
 create mode 100644 src/routes/locations.svelte
 create mode 100644 src/style/pages/_explore.scss

diff --git a/src/routes/locations.svelte b/src/routes/locations.svelte
new file mode 100644
index 0000000..b0ec0f5
--- /dev/null
+++ b/src/routes/locations.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    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 Shop from '$components/organisms/Shop.svelte'
+    import Newsletter from '$components/organisms/Newsletter.svelte'
+
+    export let photos: any
+
+    const { location }: any = getContext('global')
+</script>
+
+<Metas
+    title="Locations"
+    description=""
+    image=""
+/>
+
+<main class="explore">
+    <section class="explore__intro">
+        <h1 class="title-huge">Houses</h1>
+        <p class="text-medium">Explore the globe to discover unique locations across the world</p>
+    </section>
+
+    <section class="explore__locations" id="locations">
+        <InteractiveGlobe />
+
+        <Locations
+            locations={location}
+        />
+    </section>
+
+    <section class="grid-modules grid">
+            <div class="wrap">
+                <Shop />
+                <Newsletter />
+            </div>
+    </section>
+</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>
diff --git a/src/style/pages/_explore.scss b/src/style/pages/_explore.scss
new file mode 100644
index 0000000..ed69673
--- /dev/null
+++ b/src/style/pages/_explore.scss
@@ -0,0 +1,49 @@
+// Explore Page
+.explore {
+    // Intro Section
+    &__intro {
+        overflow: hidden;
+        margin-bottom: 72px;
+        color: $color-tertiary;
+        text-align: center;
+
+        // Title
+        h1 {
+            color: $color-secondary;
+            line-height: 1;
+            margin-top: -20px;
+
+            @include bp (sm) {
+                margin-top: -100px;
+            }
+        }
+        // Text
+        p {
+            max-width: 350px;
+            margin: 20px auto 56px;
+
+            @include bp (sm) {
+                margin: 50px auto 72px;
+                max-width: 524px;
+            }
+        }
+    }
+
+    // Locations
+    &__locations {
+        .browse {
+            margin-bottom: 0;
+        }
+    }
+
+    // Modules
+    .grid-modules {
+        grid-column: 1 / span var(--columns);
+        margin-bottom: 0;
+
+        @include bp (sm) {
+            grid-column: 2 / span 22;
+            margin: 200px 0 72px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index ec59c25..4d08ef8 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -22,6 +22,7 @@
 // Pages
 @import "pages/homepage";
 @import "pages/photos";
+@import "pages/explore";
 
 // Modules
 @import "modules/globe";