Fix BoxCTA internal layout

src/components/atoms/BoxCTA.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-    export let image: string
-    export let text: string
+    export let icon: string
+    export let alt: string
+    export let label: string
     export let url: string = undefined
 </script>
 
 <a href={url} class="box-cta">
-    <div class="box-cta__content">
-        <div class="image">
-            <img src="{image}" alt="">
-        </div>
-        <span class="text-label">{text}</span>
+    <div class="icon">
+        <img src={icon} alt={alt} width={48} height={48} loading="lazy">
     </div>
+    <span class="text-label">
+        {label}
+    </span>
 </a>

src/routes/index.svelte

@@ -3,10 +3,11 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import Button from '$components/atoms/Button.svelte'
-    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'
+    import PhotoCard from '$components/molecules/PhotoCard.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
 
@@ -39,13 +40,12 @@
     <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="#" />
+            <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="/shop" icon="/images/icons/bag.svg" label="Shop the prints" alt="Shopping bag" />
         </div>
     </div>
 
-
     <Locations
         locations={location}
     />
@@ -61,7 +61,6 @@
 </main>
 
 
-
 <script context="module" lang="ts">
     import { fetchAPI } from '$utils/api'
 

src/style/_variables.scss

@@ -2,6 +2,7 @@
 $color-primary: #3C0576;
 $color-primary-dark: #36046A;
 $color-primary-darker: #2D0458;
+$color-primary-tertiary20: #633185;
 $color-secondary: #FF6C89;
 $color-secondary-light: #FFB3C2;
 $color-secondary-bright: #FF0536;

src/style/atoms/_box-cta.scss

@@ -1,29 +1,29 @@
 .box-cta {
     display: flex;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    background-color: #633185;
     width: 144px;
     height: 176px;
+    padding: 24px 16px;
+    background-color: $color-primary-tertiary20;
     border-radius: 12px;
+    text-decoration: none;
 
-    &__content {
+    .icon {
+        margin: auto 0;
+        width: 48px;
+        height: 48px;
 
-        .image {
-            width: 48px;
-            height: 48px;
-            margin: 0 auto;
-
-            img {
-                display: block;
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-            }
-        }
-        span {
+        img {
             display: block;
-            color: $color-secondary-light;
-            margin: 28px 20px 0;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
         }
     }
+    span {
+        display: block;
+        color: $color-secondary-light;
+    }
 }