Create Shop component and add to homepage

src/components/organisms/Shop.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+</script>
+
+<div class="shop shadow-box-dark">
+    <div class="content">
+        <div class="shop__image">
+            <img src="/images/poster-display.jpg" alt="">
+        </div>
+        <div class="shop__info">
+            <h3 class="title-medium">Browse our products</h3>
+            <p class="text-small">Discover our graphic posters and prints of your favouite locations.</p>
+            <Button
+                class="button--pink"
+                text="Shop"
+                url="/shop"
+            />
+            <p class="detail">Posters available for Melbourne, Brisbane, Montpellier and Bordeaux.</p>
+        </div>
+    </div>
+</div>

src/routes/index.svelte

@@ -6,6 +6,7 @@
     import Metas from '$components/Metas.svelte'
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
+    import Shop from '$components/organisms/Shop.svelte'
 
     export let photos: any
 
@@ -35,12 +36,20 @@
         </div>
     </section>
 
-    <!-- <p>Discover {count.photos} homes from {count.locations} cities of {count.countries} countries</p> -->
+    <p>Discover {count.photos} homes from {count.locations} cities of {count.countries} countries</p>
+
     <Locations
         locations={location}
     />
 
-    <Newsletter />
+    <div class="grid-modules">
+        <div class="container grid">
+            <div class="wrap">
+                <Shop />
+                <Newsletter />
+            </div>
+        </div>
+    </div>
 </main>
 
 

src/style/_effects.scss

@@ -0,0 +1,18 @@
+/**
+ * Box shadows
+ */
+// Box: Dark
+.shadow-box-dark {
+    box-shadow:
+        0 6px 6px rgba(#000, 0.05),
+        0 12px 12px rgba(#000, 0.05),
+        0 24px 24px rgba(#000, 0.05);
+}
+
+// Box: Light
+.shadow-box-light {
+    box-shadow:
+        0 6px 6px rgba(#736356, 0.05),
+        0 12px 12px rgba(#736356, 0.05),
+        0 24px 24px rgba(#736356, 0.05);
+}

src/style/_typography.scss

@@ -8,13 +8,20 @@
     font-weight: 200;
     letter-spacing: -0.04em;
 }
+// Medium
+.title-medium {
+    font-family: $font-serif;
+    font-size: rem(32px);
+    line-height: 1.3;
+    font-weight: 400;
+}
 
 // Small
 .title-small {
     color: $color-secondary;
     font-size: rem(28px);
     font-weight: 400;
-    line-height: 1.4;
+    line-height: 1.5;
     font-family: $font-serif;
 }
 

src/style/atoms/_button.scss

@@ -15,4 +15,8 @@
         display: block;
         margin-right: 12px;
     }
+
+    &--pink {
+        background: $color-secondary-light;
+    }
 }

src/style/layout/_modules.scss

@@ -0,0 +1,22 @@
+.grid-modules {
+    margin-bottom: 72px;
+
+    .wrap {
+        @include bp (sd) {
+            display: grid;
+        }
+
+        display: block;
+        grid-column: 2 / span 22;
+        grid-template-columns: 1fr 40%;
+        grid-column-gap: 48px;
+        padding: 0;
+
+        & > *:first-child {
+            margin-bottom: 32px;
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}

src/style/organisms/_shop.scss

@@ -0,0 +1,61 @@
+.shop {
+    overflow: hidden;
+    background: #fff;
+    color: $color-text;
+    border-radius: 12px;
+
+    .content {
+        display: grid;
+        grid-template-columns: 40% 1fr;
+        grid-template-rows: 1fr;
+        // grid-auto-rows: minmax(min-content, max-content);
+        height: 100%;
+    }
+
+    // Image
+    &__image {
+        position: relative;
+        overflow: hidden;
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    // Info
+    &__info {
+        display: flex;
+        flex-direction: column;
+        padding: 64px 72px 40px 64px;
+        border-radius: 12px;
+
+        .button {
+            margin-right: auto;
+        }
+    }
+
+    // Title
+    .title-medium {
+        color: $color-lightpurple;
+        margin-bottom: 8px;
+    }
+
+    p {
+        font-weight: 300;
+        margin-bottom: 28px;
+    }
+
+    .detail {
+        margin: auto 0 0;
+        padding-top: 24px;
+        color: $color-gray;
+        line-height: 1.4;
+        font-size: rem(14px);
+    }
+}

src/style/style.scss

@@ -13,9 +13,11 @@
 @import "base";
 @import "fonts";
 @import "typography";
+@import "effects";
 
 // Layout
 @import "layout/grid";
+@import "layout/modules";
 
 // Pages
 @import "pages/homepage";
@@ -35,6 +37,7 @@
 // Organisms
 @import "organisms/locations";
 @import "organisms/newsletter";
+@import "organisms/shop";
 @import "organisms/footer";
 
 

src/style/tools/_helpers.scss

@@ -21,33 +21,13 @@
 /* Containers
 ========================================================================== */
 // Wrap (global)
-.wrap {
+.container {
     width: 100%;
-    max-width: 1648px;
+    max-width: var(--container-width);
     margin: 0 auto;
-    padding: 0 16px;
-
-    @include bp (mob) {
-        padding: 0 24px;
-    }
-    @include bp (sm) {
-        padding: 0 60px;
-    }
-    @include bp (md) {
-        padding: 0 128px;
-    }
 }
 
 // Wrapper (inside and more spaced)
 .wrapper {
-    max-width: calc(892px + 32vw);
-    margin: 0 auto;
-    padding: 0 pxVW(128);
 
-    @include bp (sm) {
-        padding: 0 pxVW(224);
-    }
-    @include bp (xxl) {
-        padding: 0 224px;
-    }
 }