Use layout groups

src/routes/(site)/locations/+page.svelte

@@ -0,0 +1,42 @@
+<style lang="scss">
+    @import "../../../style/pages/explore";
+</style>
+
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import Locations from '$components/organisms/Locations.svelte'
+    import ShopModule from '$components/organisms/ShopModule.svelte'
+    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
+    import Heading from '$components/molecules/Heading.svelte'
+
+    const { locations }: any = getContext('global')
+    const text = "Explore the globe to discover unique locations across the world"
+</script>
+
+<Metas
+    title="Locations – Houses Of"
+    description={text}
+/>
+
+
+<PageTransition>
+    <main class="explore">
+        <Heading {text} />
+
+        <section class="explore__locations">
+            <InteractiveGlobe />
+            <Locations {locations} />
+        </section>
+
+        <section class="grid-modules is-spaced grid">
+            <div class="wrap">
+                <ShopModule />
+                <NewsletterModule />
+            </div>
+        </section>
+    </main>
+</PageTransition>