From c4ba30db6a2f1f8d0d2e5832a264a1cc881b5eba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 3 Oct 2021 13:10:57 +0200
Subject: [PATCH] Add anchor links to CTAs

---
 src/components/atoms/BoxCTA.svelte        |  2 +-
 src/components/organisms/Locations.svelte |  2 +-
 src/routes/index.svelte                   | 17 ++++++++++++-----
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/atoms/BoxCTA.svelte b/src/components/atoms/BoxCTA.svelte
index 72ffb98..9a65030 100644
--- a/src/components/atoms/BoxCTA.svelte
+++ b/src/components/atoms/BoxCTA.svelte
@@ -2,7 +2,7 @@
     export let icon: string
     export let alt: string
     export let label: string
-    export let url: string = undefined
+    export let url: string
 </script>
 
 <a href={url} class="box-cta">
diff --git a/src/components/organisms/Locations.svelte b/src/components/organisms/Locations.svelte
index 6e7eb60..aa72bd0 100644
--- a/src/components/organisms/Locations.svelte
+++ b/src/components/organisms/Locations.svelte
@@ -9,7 +9,7 @@
     const { continent, settings: { explore_list }} = getContext('global')
 </script>
 
-<div class="browse">
+<div class="browse" id="locations">
     <div class="browse__description">
         <p>{explore_list}</p>
     </div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index fa8e17a..89d7f57 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
     import { getContext } from 'svelte'
+    import { page } from '$app/stores'
     // Components
     import Metas from '$components/Metas.svelte'
     import Button from '$components/atoms/Button.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
     import PhotoCard from '$components/molecules/PhotoCard.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'
@@ -12,6 +14,7 @@
     export let photos: any
 
     const { settings, location, count }: any = getContext('global')
+    const { path } = $page
 </script>
 
 <Metas
@@ -24,7 +27,7 @@
     <section class="homepage__intro">
         <h1 class="title-huge">Houses</h1>
         <p class="text-medium">{settings.description}</p>
-        <Button text="Explore locations" url="#">
+        <Button text="Explore locations" url="{path}#ctas">
             <img src="/images/icons/globe.svg" alt="explore globe">
         </Button>
     </section>
@@ -37,11 +40,15 @@
         </div>
     </section>
 
-    <div class="homepage__ctas">
-        <p>Discover <strong>{count.photos} homes<br /></strong> from <strong>{count.locations} cities</strong> of <strong>{count.countries} countries</strong></p>
+    <div class="homepage__ctas" id="ctas">
+        <p>
+            Discover <strong>{count.photos} homes</strong><br>
+            from <strong>{count.locations} cities</strong>
+            of <strong>{count.countries} countries</strong>
+        </p>
         <div class="cards">
-            <BoxCTA url="#" icon="/images/icons/explore.svg" label="Explore the globe" alt="Globe" />
-            <BoxCTA url="#" icon="/images/icons/pin.svg" label="Discover the locations" alt="Paper pin" />
+            <BoxCTA url="{path}#globe" icon="/images/icons/explore.svg" label="Explore the globe" alt="Globe" />
+            <BoxCTA url="{path}#locations" icon="/images/icons/pin.svg" label="Discover the locations" alt="Paper pin" />
             <BoxCTA url="/shop" icon="/images/icons/bag.svg" label="Shop the prints" alt="Shopping bag" />
         </div>
     </div>