Create Newsletter component

src/components/atoms/IconArrow.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+
+    export let color: string = undefined
+</script>
+
+<svg class="arrow arrow--{color}" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.67961 11.8224C4.34487 12.1571 4.34487 12.6999 4.67961 13.0346C5.01434 13.3693 5.55705 13.3693 5.89179 13.0346L11.3204 7.60602C11.6551 7.27129 11.6551 6.72857 11.3204 6.39384L5.89179 0.965267C5.55705 0.630532 5.01434 0.630532 4.67961 0.965267C4.34487 1.3 4.34487 1.84271 4.67961 2.17745L8.64494 6.14279L1.2857 6.14279C0.812311 6.14279 0.428555 6.52654 0.428555 6.99993C0.428555 7.47332 0.812311 7.85707 1.2857 7.85707L8.64494 7.85707L4.67961 11.8224Z" fill="#000"/>
+</svg>

src/components/organisms/Newsletter.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+import IconArrow from '$components/atoms/IconArrow.svelte'
+
+    // export let locations: any
+    const { settings: { newsletter_url, newsletter_text, newsletter_subtitle} }: any = getContext('global')
+</script>
+
+<div class="newsletter grid">
+    <div class="newsletter__wrapper grid">
+        <div class="newsletter__about">
+            <h3 class="title-small">{newsletter_subtitle}</h3>
+            <p class="text-small">{newsletter_text}</p>
+            <a href="/subscribe">
+                <img src="/images/icons/form.svg" alt="newsletter icon">
+                <span>See past issues</span>
+            </a>
+        </div>
+        <div class="newsletter__signup">
+            <form action={newsletter_url} target="_blank">
+                <div class="newsletter__email">
+                    <input type="email" placeholder="Your email address">
+                    <button type="submit">
+                        <IconArrow color="white" />
+                    </button>
+                </div>
+            </form>
+            <span>No spam, we promise!</span>
+        </div>
+    </div>
+</div>

src/routes/__layout.svelte

@@ -57,6 +57,9 @@
                     seo_description
                     instagram
                     footer_links
+                    newsletter_url
+                    newsletter_text
+                    newsletter_subtitle
                 }
 
                 # Count

src/routes/index.svelte

@@ -5,6 +5,7 @@
     import Locations from '$components/organisms/Locations.svelte'
     import Metas from '$components/Metas.svelte'
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
+    import Newsletter from '$components/organisms/Newsletter.svelte'
 
     export let photos: any
 
@@ -34,10 +35,12 @@
         </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 />
 </main>
 
 

src/style/_typography.scss

@@ -1,6 +1,7 @@
 // TYPOGRAPHY
 
 // Titles
+// Huge
 .title-huge {
     font-size: clamp(200px, 38vw, 700px);
     font-family: $font-serif;
@@ -8,18 +9,31 @@
     letter-spacing: -0.04em;
 }
 
+// Small
+.title-small {
+    color: $color-secondary;
+    font-size: rem(28px);
+    font-weight: 400;
+    line-height: 1.4;
+    font-family: $font-serif;
+}
+
 
 // Texts
+.text-large {
+    font-size: rem(32px);
+    font-family: $font-sans;
+    font-weight: 400;
+    line-height: 1.5;
+}
 .text-medium {
     font-size: rem(28px);
     font-family: $font-sans;
     font-weight: 300;
     line-height: 1.5;
 }
-
-.text-large {
-    font-size: rem(32px);
-    font-family: $font-sans;
+.text-small {
+    font-size: rem(22px);
     font-weight: 400;
     line-height: 1.5;
 }

src/style/_variables.scss

@@ -8,6 +8,7 @@ $color-secondary-bright: #FF0536;
 $color-text: #333;
 $color-tertiary: #FFE0C5;
 $color-lightpurple: #8B50B2;
+$color-lilas-bright: #C78FEC;
 $color-gray: #666;
 $color-lightgray: #999;
 $color-shadow-brown: #7A5D44;
@@ -42,7 +43,7 @@ $base-width: 1600 !default;
 
 // Grid
 $cols-m: 12 !default;
-$cols-d: 32 !default;
+$cols-d: 24 !default;
 
 
 /* Directories

src/style/atoms/_arrow.scss

@@ -0,0 +1,9 @@
+.arrow {
+    display: block;
+
+    &--white {
+        path {
+            fill: #fff;
+        }
+    }
+}

src/style/organisms/_newsletter.scss

@@ -0,0 +1,92 @@
+.newsletter {
+    margin-bottom: 88px;
+
+    &__wrapper {
+        --columns: 20;
+        background-color: $color-primary-dark;
+        grid-column: 3 / span var(--columns);
+        padding: 80px 0;
+
+        @include bp (sd) {
+            --columns: 18;
+            grid-column: 4 / span var(--columns);
+        }
+    }
+
+    // About
+    &__about {
+        grid-column: 3 / span 6;
+        margin: auto 0;
+
+        // Text
+        p {
+            margin: 16px 0;
+        }
+
+        // Past issues
+        a {
+            text-decoration: none;
+            color: $color-lilas-bright;
+            font-size: rem(14px);
+
+            span {
+                margin-left: 12px;
+                border-bottom: 1px solid $color-lilas-bright;
+            }
+        }
+    }
+    // Signup
+    &__signup {
+        grid-column: 11 / span 6;
+        margin: auto 0;
+        justify-content: center;
+
+        span {
+            font-size: rem(16px);
+            line-height: 1.2;
+            font-weight: 300;
+            color: rgba($color-tertiary, 0.6);
+        }
+    }
+
+    // Form
+    &__email {
+        position: relative;
+        box-shadow: inset 0 0 0 2px $color-secondary;
+        border-radius: 100vh;
+        padding: 0 30px;
+        margin-bottom: 8px;
+        display: flex;
+        height: 64px;
+        max-width: 400px;
+
+        input {
+            background: none;
+            font-family: $font-sans;
+            font-weight: 400;
+            font-size: rem(18px);
+            border: none;
+            color: #fff;
+
+            &::placeholder {
+                color: #fff;
+                opacity: 1;
+            }
+        }
+        button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-left: 32px;
+            background-color: $color-secondary;
+            height: 32px;
+            width: 32px;
+            flex-shrink: 0;
+            border-radius: 100vh;
+        }
+    }
+}

src/style/style.scss

@@ -25,6 +25,7 @@
 // Atoms
 @import "atoms/button";
 @import "atoms/badge";
+@import "atoms/arrow";
 
 // Molecules
 @import "molecules/photo-card";
@@ -32,6 +33,7 @@
 
 // Organisms
 @import "organisms/locations";
+@import "organisms/newsletter";
 
 
 // Pages