Add CTA section to homepage

with box ctas

src/routes/index.svelte

@@ -7,6 +7,7 @@
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
     import Shop from '$components/organisms/Shop.svelte'
+    import BoxCTA from '$components/atoms/BoxCTA.svelte'
 
     export let photos: any
 
@@ -36,7 +37,15 @@
         </div>
     </section>
 
-    <p>Discover {count.photos} homes from {count.locations} cities of {count.countries} countries</p>
+    <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="cards">
+            <BoxCTA text="explore the globe" image="/images/icons/explore.svg" url="#" />
+            <BoxCTA text="discover the locations" image="/images/icons/pin.svg" url="#" />
+            <BoxCTA text="shop the prints" image="/images/icons/pin.svg" url="#" />
+        </div>
+    </div>
+
 
     <Locations
         locations={location}

src/style/_typography.scss

@@ -47,7 +47,7 @@
 
 .text-label {
     font-size: rem(12px);
-    line-height: 1.4;
+    line-height: 1.5;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

src/style/pages/_homepage.scss

@@ -129,4 +129,33 @@
             }
         }
     }
+
+    // CTAS
+    &__ctas {
+        text-align: center;
+        margin-bottom: 72px;
+
+        p {
+            font-family: $font-sans;
+            font-size: rem(32px);
+            color: $color-tertiary;
+            font-weight: 300;
+            line-height: 1.5;
+
+            strong {
+                font-weight: 300;
+                color: $color-secondary;
+            }
+        }
+
+        .cards {
+            display: flex;
+            justify-content: center;
+            margin-top: 72px;
+
+            & > * {
+                margin: 0 16px;
+            }
+        }
+    }
 }