Add Newsletter Component and Page

- Newsletter form on Subscribe page and at the end of the photos

src/routes/_error.svelte

@@ -30,7 +30,7 @@
     <section class="page">
         <div class="wrap">
             <div class="page__top">
-                <a href="/" class="button-control button-control--pink dir-left" on:click|preventDefault={() => window.location = '/'}>
+                <a href="/" class="button-control button-control--lightpink dir-left" on:click|preventDefault={() => window.location = '/'}>
                     <IconArrow direction="left" color="#fff" class="icon" />
                     <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                 </a>

src/routes/_layout.svelte

@@ -20,6 +20,9 @@
                         seo_share_image { full_url }
                         credits_text
                         credits_list
+                        newsletter_text
+                        newsletter_subtitle
+                        newsletter_url
                     }
                 }
                 continents {

src/routes/choose.svelte

@@ -24,6 +24,7 @@
     // Variables
     const { page } = stores()
     pageAnimation.set(animateIn)
+    const pageTitle = `${$site.seo_name} - ${$site.seo_title_default} across the globe`
 
     // Reset current location
     currentLocation.set()
@@ -40,11 +41,11 @@
 </script>
 
 <svelte:head>
-	<title>{$site.seo_name} - {$site.seo_title_default} across the globe</title>
+	<title>{pageTitle}</title>
     <meta name="description" content={$site.seo_description_default}>
     <SocialMetas
-        url="https://{$page.host}"
-        title="{$site.seo_name} - {$site.seo_title_default} across the globe"
+        url="https://{$page.host}{$page.path}"
+        title="{pageTitle}"
         description={$site.seo_description_default}
         image={$site.seo_share_image.full_url}
     />
@@ -54,7 +55,7 @@
     <section class="page explore">
         <div class="wrap">
             <div class="page__top">
-                <a href="/" class="button-control button-control--pink dir-left" aria-label="Back to homepage" rel="prefetch">
+                <a href="/" class="button-control button-control--lightpink dir-left" aria-label="Back to homepage" rel="prefetch">
                     <IconArrow direction="left" color="#fff" class="icon" />
                     <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                 </a>

src/routes/credits.svelte

@@ -17,6 +17,7 @@
     // Variables
     const { page } = stores()
     pageAnimation.set(animateIn)
+    const pageTitle = `${$site.seo_name} - Credits`
 
 
     /*
@@ -29,11 +30,11 @@
 </script>
 
 <svelte:head>
-	<title>{$site.seo_name} - Credits</title>
+	<title>{pageTitle}</title>
     <meta name="description" content={$site.credits_text}>
     <SocialMetas
-        url="https://{$page.host}/credits"
-        title="{$site.seo_name} - Credits"
+        url="https://{$page.host}{$page.path}"
+        title="{pageTitle}"
         description={$site.credits_text}
         image={$site.seo_share_image.full_url}
     />
@@ -43,7 +44,7 @@
     <section class="page">
         <div class="wrap">
             <div class="page__top">
-                <a href="/" class="button-control button-control--pink dir-left">
+                <a href="/" class="button-control button-control--lightpink dir-left">
                     <IconArrow direction="left" color="#fff" class="icon" />
                     <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                 </a>

src/routes/subscribe.svelte

@@ -0,0 +1,67 @@
+<script>
+    import { onMount } from 'svelte'
+    import { stores } from '@sapper/app'
+    import { site, pageReady, pageAnimation } from 'utils/store'
+    // Dependencies
+    import Lazy from 'svelte-lazy'
+    // Components
+    import IconArrow from 'atoms/IconArrow'
+    import TitleSite from 'atoms/TitleSite'
+    import LinkTranslate from 'atoms/LinkTranslate'
+    import InteractiveGlobe from 'molecules/InteractiveGlobe'
+    import Newsletter from 'molecules/Newsletter'
+    import Footer from 'organisms/Footer'
+    import SocialMetas from 'utils/SocialMetas'
+    // Animations
+    import { animateIn } from 'animations/page'
+
+    // Variables
+    const { page } = stores()
+    pageAnimation.set(animateIn)
+    const pageTitle = `${$site.seo_name} - Keep Updated`
+
+
+    /*
+    ** Run code when mounted
+    */
+    onMount(() => {
+        // Page is loaded
+        pageReady.set(true)
+    })
+</script>
+
+<svelte:head>
+	<title>{pageTitle}</title>
+    <meta name="description" content={$site.subscribe_text}>
+    <SocialMetas
+        url="https://{$page.host}{$page.path}"
+        title="{pageTitle}"
+        description={$site.subscribe_text}
+        image={$site.seo_share_image.full_url}
+    />
+</svelte:head>
+
+<main class="housesof page--credits" class:is-transitioning={!$pageReady}>
+    <section class="page">
+        <div class="wrap">
+            <div class="page__top">
+                <a href="/" class="button-control button-control--lightpink dir-left">
+                    <IconArrow direction="left" color="#fff" class="icon" />
+                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
+                </a>
+
+                <TitleSite />
+            </div>
+
+            <Newsletter />
+        </div>
+
+        {#if process.browser}
+        <Lazy offset={window.innerHeight} fadeOption={null}>
+            <InteractiveGlobe type="part" opacity="0.5" />
+        </Lazy>
+        {/if}
+
+        <Footer />
+    </section>
+</main>

src/routes/viewer/[country]/[place]/[photo].svelte

@@ -119,7 +119,7 @@
                     </svg>
                 </a>
                 {#if $currentLocation}
-                <a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--pink dir-bottom" aria-label="Back to photos" rel="prefetch">
+                <a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--lightpink dir-bottom" aria-label="Back to photos" rel="prefetch">
                     <IconCross color="#fff" width="18" class="icon" />
                     <IconCross color="#fff" width="18" class="icon" hidden="true" />
                 </a>