Create Location and Locations sections

src/components/molecules/Location.svelte

@@ -13,5 +13,6 @@
         <h3 class="location__name">
             {name}
         </h3>
+        <span class="text-label">{country.name}</span>
     </a>
 </div>

src/routes/index.svelte

@@ -8,7 +8,7 @@
 
     export let photos: any
 
-    const globalData: any = getContext('global')
+    const { location, count }: any = getContext('global')
 </script>
 
 <Metas
@@ -34,8 +34,9 @@
         </div>
     </section>
 
+    <p>Discover {count.photos} homes from {count.locations} cities of {count.countries} countries</p>
     <Locations
-        locations={globalData.location}
+        locations={location}
     />
 </main>
 

src/style/_typography.scss

@@ -8,6 +8,7 @@
     letter-spacing: -0.04em;
 }
 
+
 // Texts
 .text-medium {
     font-size: rem(28px);
@@ -21,4 +22,12 @@
     font-family: $font-sans;
     font-weight: 400;
     line-height: 1.5;
-}
+}
+
+.text-label {
+    font-size: rem(12px);
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+

src/style/molecules/_location.scss

@@ -0,0 +1,23 @@
+.location {
+    text-align: center;
+    // Flag
+    img {
+        border-radius: 100%;
+    }
+    // Link
+    a {
+        text-decoration: none;
+    }
+    &__name {
+        display: block;
+        color: $color-secondary;
+        margin: 20px 0 -2px;
+        font-size: rem(48px);
+        font-family: $font-serif;
+        font-weight: 300;
+        line-height: 1.2;
+    }
+    span {
+        color: $color-tertiary;
+    }
+}

src/style/organisms/_locations.scss

@@ -0,0 +1,19 @@
+.browse {
+
+    &__description {
+        text-align: center;
+    }
+
+    &__locations {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        max-width: 1200px;
+        margin: 128px auto 80px;
+        justify-items: center;
+
+        .location {
+            margin: 0 40px 80px;
+        }
+    }
+}

src/style/style.scss

@@ -27,9 +27,10 @@
 
 // Molecules
 @import "molecules/photo-card";
+@import "molecules/location";
 
 // Organisms
-// @import "organisms/organism";
+@import "organisms/locations";
 
 
 // Pages