Create Newsletter component
This commit is contained in:
8
src/components/atoms/IconArrow.svelte
Normal file
8
src/components/atoms/IconArrow.svelte
Normal file
@@ -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>
|
||||
33
src/components/organisms/Newsletter.svelte
Normal file
33
src/components/organisms/Newsletter.svelte
Normal file
@@ -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>
|
||||
@@ -57,6 +57,9 @@
|
||||
seo_description
|
||||
instagram
|
||||
footer_links
|
||||
newsletter_url
|
||||
newsletter_text
|
||||
newsletter_subtitle
|
||||
}
|
||||
|
||||
# Count
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
9
src/style/atoms/_arrow.scss
Normal file
9
src/style/atoms/_arrow.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.arrow {
|
||||
display: block;
|
||||
|
||||
&--white {
|
||||
path {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
92
src/style/organisms/_newsletter.scss
Normal file
92
src/style/organisms/_newsletter.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
7
static/images/icons/form.svg
Normal file
7
static/images/icons/form.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.8 12.9459L16.2 12.9459C16.4485 12.9459 16.65 12.7444 16.65 12.4959L16.65 2.50406C16.65 2.25553 16.4485 2.05406 16.2 2.05406L1.8 2.05406C1.55147 2.05406 1.35 2.25553 1.35 2.50406L1.35 12.4959C1.35 12.7444 1.55147 12.9459 1.8 12.9459ZM16.2 14.2959C17.1941 14.2959 18 13.49 18 12.4959L18 2.50406C18 1.50995 17.1941 0.704061 16.2 0.704061L1.8 0.70406C0.805888 0.70406 1.11778e-06 1.50995 1.03088e-06 2.50406L1.57361e-07 12.4959C7.04529e-08 13.49 0.805889 14.2959 1.8 14.2959L16.2 14.2959Z" fill="#C78FEC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.82499 10.4711L5.62499 10.4711L5.62499 7.77109L3.82499 7.77109L3.82499 10.4711ZM5.62499 11.3711C6.12205 11.3711 6.52499 10.9682 6.52499 10.4711L6.52499 7.77109C6.52499 7.27404 6.12205 6.87109 5.62499 6.87109L3.82499 6.87109C3.32794 6.87109 2.92499 7.27404 2.92499 7.77109L2.92499 10.4711C2.92499 10.9681 3.32794 11.3711 3.82499 11.3711L5.62499 11.3711Z" fill="#C78FEC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3 8.75752C15.3 9.00605 15.0985 9.20752 14.85 9.20752L9.44999 9.20752C9.20146 9.20752 8.99999 9.00605 8.99999 8.75752C8.99999 8.50899 9.20146 8.30752 9.44999 8.30752L14.85 8.30752C15.0985 8.30752 15.3 8.50899 15.3 8.75752Z" fill="#C78FEC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 6.50752C14.625 6.75605 14.4235 6.95752 14.175 6.95752L8.775 6.95752C8.52647 6.95752 8.325 6.75605 8.325 6.50752C8.325 6.25899 8.52647 6.05752 8.775 6.05752L14.175 6.05752C14.4235 6.05752 14.625 6.25899 14.625 6.50752Z" fill="#C78FEC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.95 4.25752C13.95 4.50605 13.7485 4.70752 13.5 4.70752L8.09998 4.70752C7.85145 4.70752 7.64998 4.50605 7.64998 4.25752C7.64998 4.00899 7.85145 3.80752 8.09998 3.80752L13.5 3.80752C13.7485 3.80752 13.95 4.00899 13.95 4.25752Z" fill="#C78FEC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Reference in New Issue
Block a user