Add Newsletter Component and Page

- Newsletter form on Subscribe page and at the end of the photos
2020-04-28 22:10:29 +02:00
parent 955de7d1e4
commit 6fe4df4189
22 changed files with 478 additions and 137 deletions
--- a/package.json
+++ b/package.json
@@ -35,24 +35,24 @@
    "@babel/preset-env": "^7.9.5",
    "@babel/runtime": "^7.9.2",
    "@rollup/plugin-alias": "^3.1.0",
+    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-commonjs": "11.0.2",
    "@rollup/plugin-node-resolve": "^7.1.3",
    "@rollup/plugin-replace": "^2.3.2",
    "autoprefixer": "^9.7.6",
    "dotenv": "^8.2.0",
    "node-fetch": "^2.6.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.0",
    "postcss": "^7.0.27",
    "postcss-load-config": "^2.1.0",
    "postcss-preset-env": "^6.7.0",
-    "rollup": "^2.7.2",
-    "rollup-plugin-babel": "^4.4.0",
+    "rollup": "^2.7.3",
    "rollup-plugin-glslify": "^1.2.0",
    "rollup-plugin-svelte": "^5.2.1",
    "rollup-plugin-terser": "^5.3.0",
    "sapper": "^0.27.12",
-    "svelte": "^3.20.1",
-    "svelte-preprocess": "^3.7.3"
+    "svelte": "^3.21.0",
+    "svelte-preprocess": "^3.7.4"
  },
  "browserslist": [
    "> 0.5%",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,25 +16,25 @@ devDependencies:
  '@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0
  '@babel/preset-env': 7.9.5_@babel+core@7.9.0
  '@babel/runtime': 7.9.2
-  '@rollup/plugin-alias': 3.1.0_rollup@2.7.1
-  '@rollup/plugin-commonjs': 11.0.2_rollup@2.7.1
-  '@rollup/plugin-node-resolve': 7.1.3_rollup@2.7.1
-  '@rollup/plugin-replace': 2.3.2_rollup@2.7.1
+  '@rollup/plugin-alias': 3.1.0_rollup@2.7.3
+  '@rollup/plugin-babel': 5.0.0_@babel+core@7.9.0+rollup@2.7.3
+  '@rollup/plugin-commonjs': 11.0.2_rollup@2.7.3
+  '@rollup/plugin-node-resolve': 7.1.3_rollup@2.7.3
+  '@rollup/plugin-replace': 2.3.2_rollup@2.7.3
  autoprefixer: 9.7.6
  dotenv: 8.2.0
  node-fetch: 2.6.0
-  node-sass: 4.13.1
+  node-sass: 4.14.0
  postcss: 7.0.27
  postcss-load-config: 2.1.0
  postcss-preset-env: 6.7.0
-  rollup: 2.7.1
-  rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.7.1
+  rollup: 2.7.3
  rollup-plugin-glslify: 1.2.0
-  rollup-plugin-svelte: 5.2.1_rollup@2.7.1+svelte@3.20.1
-  rollup-plugin-terser: 5.3.0_rollup@2.7.1
-  sapper: 0.27.12_svelte@3.20.1
-  svelte: 3.20.1
-  svelte-preprocess: 3.7.3_480b73828c00a99ece9025e574514fef
+  rollup-plugin-svelte: 5.2.1_rollup@2.7.3+svelte@3.21.0
+  rollup-plugin-terser: 5.3.0_rollup@2.7.3
+  sapper: 0.27.12_svelte@3.21.0
+  svelte: 3.21.0
+  svelte-preprocess: 3.7.4_44e9bd38b1a414594b4fcbf91839036f
 lockfileVersion: 5.1
 packages:
  /@babel/code-frame/7.8.3:
@@ -66,7 +66,7 @@ packages:
      gensync: 1.0.0-beta.1
      json5: 2.1.3
      lodash: 4.17.15
-      resolve: 1.16.1
+      resolve: 1.17.0
      semver: 5.7.1
      source-map: 0.5.7
    dev: true
@@ -692,7 +692,7 @@ packages:
      '@babel/core': 7.9.0
      '@babel/helper-module-imports': 7.8.3
      '@babel/helper-plugin-utils': 7.8.3
-      resolve: 1.16.1
+      resolve: 1.17.0
      semver: 5.7.1
    dev: true
    peerDependencies:
@@ -894,9 +894,9 @@ packages:
    dev: false
    resolution:
      integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
-  /@rollup/plugin-alias/3.1.0_rollup@2.7.1:
+  /@rollup/plugin-alias/3.1.0_rollup@2.7.3:
    dependencies:
-      rollup: 2.7.1
+      rollup: 2.7.3
      slash: 3.0.0
    dev: true
    engines:
@@ -905,14 +905,28 @@ packages:
      rollup: ^1.20.0||^2.0.0
    resolution:
      integrity: sha512-IzoejtAqdfwAvx4D0bztAJFoL5Js36kJgnbO00zfI1B9jf9G80vWysyG0C4+E6w5uG5hz0EeetPpoBWKdNktCQ==
-  /@rollup/plugin-commonjs/11.0.2_rollup@2.7.1:
+  /@rollup/plugin-babel/5.0.0_@babel+core@7.9.0+rollup@2.7.3:
    dependencies:
-      '@rollup/pluginutils': 3.0.9_rollup@2.7.1
+      '@babel/core': 7.9.0
+      '@babel/helper-module-imports': 7.8.3
+      '@rollup/pluginutils': 3.0.9_rollup@2.7.3
+      rollup: 2.7.3
+    dev: true
+    engines:
+      node: '>= 10.0.0'
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      rollup: ^1.20.0||^2.0.0
+    resolution:
+      integrity: sha512-YpVnwdUeVj/fDFN75Y3CAzJTMYNcqbH05SJs551wqj+BSwLT9pS3dqJrVDPYl3eH4OrI8ueiEseX5VgUn+0HLA==
+  /@rollup/plugin-commonjs/11.0.2_rollup@2.7.3:
+    dependencies:
+      '@rollup/pluginutils': 3.0.9_rollup@2.7.3
      estree-walker: 1.0.1
      is-reference: 1.1.4
      magic-string: 0.25.7
-      resolve: 1.16.1
-      rollup: 2.7.1
+      resolve: 1.17.0
+      rollup: 2.7.3
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -920,14 +934,14 @@ packages:
      rollup: ^1.20.0
    resolution:
      integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
-  /@rollup/plugin-node-resolve/7.1.3_rollup@2.7.1:
+  /@rollup/plugin-node-resolve/7.1.3_rollup@2.7.3:
    dependencies:
-      '@rollup/pluginutils': 3.0.9_rollup@2.7.1
+      '@rollup/pluginutils': 3.0.9_rollup@2.7.3
      '@types/resolve': 0.0.8
      builtin-modules: 3.1.0
      is-module: 1.0.0
-      resolve: 1.16.1
-      rollup: 2.7.1
+      resolve: 1.17.0
+      rollup: 2.7.3
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -935,22 +949,22 @@ packages:
      rollup: ^1.20.0||^2.0.0
    resolution:
      integrity: sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==
-  /@rollup/plugin-replace/2.3.2_rollup@2.7.1:
+  /@rollup/plugin-replace/2.3.2_rollup@2.7.3:
    dependencies:
-      '@rollup/pluginutils': 3.0.9_rollup@2.7.1
+      '@rollup/pluginutils': 3.0.9_rollup@2.7.3
      magic-string: 0.25.7
-      rollup: 2.7.1
+      rollup: 2.7.3
    dev: true
    peerDependencies:
      rollup: ^1.20.0 || ^2.0.0
    resolution:
      integrity: sha512-KEEL7V2tMNOsbAoNMKg91l1sNXBDoiP31GFlqXVOuV5691VQKzKBh91+OKKOG4uQWYqcFskcjFyh1d5YnZd0Zw==
-  /@rollup/pluginutils/3.0.9_rollup@2.7.1:
+  /@rollup/pluginutils/3.0.9_rollup@2.7.3:
    dependencies:
      '@types/estree': 0.0.39
      estree-walker: 1.0.1
      micromatch: 4.0.2
-      rollup: 2.7.1
+      rollup: 2.7.3
    dev: true
    engines:
      node: '>= 8.0.0'
@@ -962,23 +976,23 @@ packages:
    dev: true
    resolution:
      integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
-  /@types/node/13.13.2:
+  /@types/node/13.13.4:
    dev: true
    resolution:
-      integrity: sha512-LB2R1Oyhpg8gu4SON/mfforE525+Hi/M1ineICEDftqNVTyFg1aRIeGuTvXAoWHc4nbrFncWtJgMmoyRvuGh7A==
+      integrity: sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==
  /@types/pug/2.0.4:
    dev: true
    resolution:
      integrity: sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
  /@types/resolve/0.0.8:
    dependencies:
-      '@types/node': 13.13.2
+      '@types/node': 13.13.4
    dev: true
    resolution:
      integrity: sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
  /@types/sass/1.16.0:
    dependencies:
-      '@types/node': 13.13.2
+      '@types/node': 13.13.4
    dev: true
    resolution:
      integrity: sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
@@ -988,7 +1002,7 @@ packages:
      integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
  /accepts/1.3.7:
    dependencies:
-      mime-types: 2.1.26
+      mime-types: 2.1.27
      negotiator: 0.6.2
    dev: false
    engines:
@@ -1087,12 +1101,12 @@ packages:
  /autoprefixer/9.7.6:
    dependencies:
      browserslist: 4.12.0
-      caniuse-lite: 1.0.30001045
+      caniuse-lite: 1.0.30001048
      chalk: 2.4.2
      normalize-range: 0.1.2
      num2fraction: 1.2.2
      postcss: 7.0.27
-      postcss-value-parser: 4.0.3
+      postcss-value-parser: 4.1.0
    dev: true
    engines:
      node: '>=6.0.0'
@@ -1155,8 +1169,8 @@ packages:
      integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
  /browserslist/4.12.0:
    dependencies:
-      caniuse-lite: 1.0.30001045
-      electron-to-chromium: 1.3.414
+      caniuse-lite: 1.0.30001048
+      electron-to-chromium: 1.3.421
      node-releases: 1.1.53
      pkg-up: 2.0.0
    dev: true
@@ -1229,10 +1243,10 @@ packages:
      node: '>=0.10.0'
    resolution:
      integrity: sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
-  /caniuse-lite/1.0.30001045:
+  /caniuse-lite/1.0.30001048:
    dev: true
    resolution:
-      integrity: sha512-Y8o2Iz1KPcD6FjySbk1sPpvJqchgxk/iow0DABpGyzA1UeQAuxh63Xh0Enj5/BrsYbXtCN32JmR4ZxQTCQ6E6A==
+      integrity: sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==
  /caseless/0.12.0:
    dev: true
    resolution:
@@ -1305,7 +1319,7 @@ packages:
      integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
  /compressible/2.0.18:
    dependencies:
-      mime-db: 1.43.0
+      mime-db: 1.44.0
    dev: false
    engines:
      node: '>= 0.6'
@@ -1509,10 +1523,10 @@ packages:
    dev: true
    resolution:
      integrity: sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  /electron-to-chromium/1.3.414:
+  /electron-to-chromium/1.3.421:
    dev: true
    resolution:
-      integrity: sha512-UfxhIvED++qLwWrAq9uYVcqF8FdeV9sU2S7qhiHYFODxzXRrd1GZRl/PjITHsTEejgibcWDraD8TQqoHb1aCBQ==
+      integrity: sha512-ogxgmvHGfDuLA+GtgfK0jkFWlBb4MCZK2U1MM+l98sf4U3Ixtrfw1iC9w4mQqNvo+lHgM4pR62TqoT4QrvKJCw==
  /end-of-stream/1.4.4:
    dependencies:
      once: 1.4.0
@@ -1656,7 +1670,7 @@ packages:
    dependencies:
      asynckit: 0.4.0
      combined-stream: 1.0.8
-      mime-types: 2.1.26
+      mime-types: 2.1.27
    dev: true
    engines:
      node: '>= 0.12'
@@ -1684,7 +1698,7 @@ packages:
      integrity: sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
  /fstream/1.0.12:
    dependencies:
-      graceful-fs: 4.2.3
+      graceful-fs: 4.2.4
      inherits: 2.0.4
      mkdirp: 0.5.5
      rimraf: 2.7.1
@@ -1852,10 +1866,10 @@ packages:
      events: 1.1.1
      glsl-resolve: 0.0.1
      glsl-tokenizer: 2.1.5
-      graceful-fs: 4.2.3
+      graceful-fs: 4.2.4
      inherits: 2.0.4
      map-limit: 0.0.1
-      resolve: 1.16.1
+      resolve: 1.17.0
    dev: true
    resolution:
      integrity: sha512-Ogm179MCazwIRyEqs3g3EOY4Y3XIAa0yl8J5RE9rJC6QH1w8weVOp2RZu0mvnYy/2xIas1w166YR2eZdDkWQxg==
@@ -1871,7 +1885,7 @@ packages:
      glslify-bundle: 5.1.1
      glslify-deps: 1.3.1
      minimist: 1.2.5
-      resolve: 1.16.1
+      resolve: 1.17.0
      stack-trace: 0.0.9
      static-eval: 2.0.5
      through2: 2.0.5
@@ -1880,10 +1894,10 @@ packages:
    hasBin: true
    resolution:
      integrity: sha512-yw8jDQIe9FlSH5NiZEqSAsCPj9HI7nhXgXLAgSv2Nm9eBPsFJmyN9+rNwbiozJapcj9xtc/71rMYlN9cxp1B8Q==
-  /graceful-fs/4.2.3:
+  /graceful-fs/4.2.4:
    dev: true
    resolution:
-      integrity: sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+      integrity: sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
  /har-schema/2.0.0:
    dev: true
    engines:
@@ -2217,7 +2231,7 @@ packages:
      integrity: sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
  /load-json-file/1.1.0:
    dependencies:
-      graceful-fs: 4.2.3
+      graceful-fs: 4.2.4
      parse-json: 2.2.0
      pify: 2.3.0
      pinkie-promise: 2.0.1
@@ -2332,18 +2346,18 @@ packages:
      node: '>=8'
    resolution:
      integrity: sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  /mime-db/1.43.0:
+  /mime-db/1.44.0:
    engines:
      node: '>= 0.6'
    resolution:
-      integrity: sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
-  /mime-types/2.1.26:
+      integrity: sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+  /mime-types/2.1.27:
    dependencies:
-      mime-db: 1.43.0
+      mime-db: 1.44.0
    engines:
      node: '>= 0.6'
    resolution:
-      integrity: sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==
+      integrity: sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
  /mime/2.4.4:
    dev: false
    engines:
@@ -2412,7 +2426,7 @@ packages:
    dependencies:
      fstream: 1.0.12
      glob: 7.1.6
-      graceful-fs: 4.2.3
+      graceful-fs: 4.2.4
      mkdirp: 0.5.5
      nopt: 3.0.6
      npmlog: 4.1.2
@@ -2432,7 +2446,7 @@ packages:
    dev: true
    resolution:
      integrity: sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
-  /node-sass/4.13.1:
+  /node-sass/4.14.0:
    dependencies:
      async-foreach: 0.1.3
      chalk: 1.1.3
@@ -2457,7 +2471,7 @@ packages:
    hasBin: true
    requiresBuild: true
    resolution:
-      integrity: sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==
+      integrity: sha512-AxqU+DFpk0lEz95sI6jO0hU0Rwyw7BXVEv6o9OItoXLyeygPeaSpiV4rwQb10JiTghHaa0gZeD21sz+OsQluaw==
  /nopt/3.0.6:
    dependencies:
      abbrev: 1.1.1
@@ -2468,7 +2482,7 @@ packages:
  /normalize-package-data/2.5.0:
    dependencies:
      hosted-git-info: 2.8.8
-      resolve: 1.16.1
+      resolve: 1.17.0
      semver: 5.7.1
      validate-npm-package-license: 3.0.4
    dev: true
@@ -2659,7 +2673,7 @@ packages:
      integrity: sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
  /path-type/1.1.0:
    dependencies:
-      graceful-fs: 4.2.3
+      graceful-fs: 4.2.4
      pify: 2.3.0
      pinkie-promise: 2.0.1
    dev: true
@@ -2937,7 +2951,7 @@ packages:
    dependencies:
      autoprefixer: 9.7.6
      browserslist: 4.12.0
-      caniuse-lite: 1.0.30001045
+      caniuse-lite: 1.0.30001048
      css-blank-pseudo: 0.1.4
      css-has-pseudo: 0.10.0
      css-prefers-color-scheme: 3.1.1
@@ -3026,10 +3040,10 @@ packages:
      node: '>=4'
    resolution:
      integrity: sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
-  /postcss-value-parser/4.0.3:
+  /postcss-value-parser/4.1.0:
    dev: true
    resolution:
-      integrity: sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==
+      integrity: sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
  /postcss-values-parser/2.0.1:
    dependencies:
      flatten: 1.0.3
@@ -3220,7 +3234,7 @@ packages:
      is-typedarray: 1.0.0
      isstream: 0.1.2
      json-stringify-safe: 5.0.1
-      mime-types: 2.1.26
+      mime-types: 2.1.27
      oauth-sign: 0.9.0
      performance-now: 2.1.0
      qs: 6.5.2
@@ -3258,12 +3272,12 @@ packages:
    dev: true
    resolution:
      integrity: sha1-3ZV5gufnNt699TtYpN2RdUV13UY=
-  /resolve/1.16.1:
+  /resolve/1.17.0:
    dependencies:
      path-parse: 1.0.6
    dev: true
    resolution:
-      integrity: sha512-rmAglCSqWWMrrBv/XM6sW0NuRFiKViw/W4d9EbC4pt+49H8JwHy+mcGmALTEg504AUDcLTvb1T2q3E9AnmY+ig==
+      integrity: sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
  /rimraf/2.7.1:
    dependencies:
      glob: 7.1.6
@@ -3271,18 +3285,6 @@ packages:
    hasBin: true
    resolution:
      integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.7.1:
-    dependencies:
-      '@babel/core': 7.9.0
-      '@babel/helper-module-imports': 7.8.3
-      rollup: 2.7.1
-      rollup-pluginutils: 2.8.2
-    dev: true
-    peerDependencies:
-      '@babel/core': 7 || ^7.0.0-rc.2
-      rollup: '>=0.60.0 <3'
-    resolution:
-      integrity: sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==
  /rollup-plugin-glslify/1.2.0:
    dependencies:
      glslify: 7.0.0
@@ -3290,27 +3292,27 @@ packages:
    dev: true
    resolution:
      integrity: sha512-EqUFINMICD9U3MJ4jsxBcCRhzWNZJBWyAK2ol+2ClWIPaIWOuz0OY/Ml8rdT81F4aufwxJN5I9N7QvCth0OrUQ==
-  /rollup-plugin-svelte/5.2.1_rollup@2.7.1+svelte@3.20.1:
+  /rollup-plugin-svelte/5.2.1_rollup@2.7.3+svelte@3.21.0:
    dependencies:
      require-relative: 0.8.7
-      rollup: 2.7.1
+      rollup: 2.7.3
      rollup-pluginutils: 2.8.2
      sourcemap-codec: 1.4.8
-      svelte: 3.20.1
+      svelte: 3.21.0
    dev: true
    peerDependencies:
      rollup: '>=0.60.0'
      svelte: '*'
    resolution:
      integrity: sha512-wc93cN66sRpX6uFljVFqvWT6NU3V5ab/uLXKt2UiARuexFU/ctolzkmdXM7WM5iKdTX9scToS9sabJTJV4DUMA==
-  /rollup-plugin-terser/5.3.0_rollup@2.7.1:
+  /rollup-plugin-terser/5.3.0_rollup@2.7.3:
    dependencies:
      '@babel/code-frame': 7.8.3
      jest-worker: 24.9.0
-      rollup: 2.7.1
+      rollup: 2.7.3
      rollup-pluginutils: 2.8.2
      serialize-javascript: 2.1.2
-      terser: 4.6.11
+      terser: 4.6.12
    dev: true
    peerDependencies:
      rollup: '>=0.66.0 <3'
@@ -3322,7 +3324,7 @@ packages:
    dev: true
    resolution:
      integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  /rollup/2.7.1:
+  /rollup/2.7.3:
    dev: true
    engines:
      node: '>=10.0.0'
@@ -3330,7 +3332,7 @@ packages:
    optionalDependencies:
      fsevents: 2.1.3
    resolution:
-      integrity: sha512-c1FCjY8HK1nAq0bTZHaR72ZknpP7p0EjxbcVc6BcmtOosurK//P5jtwxX+f/4fgtbrjczqf0uvR+EdtxpriE8g==
+      integrity: sha512-lAWJGZ5BQzcu/5fhMKGJrh5oy9LQUoaCid8cQV8k+E2vE9E/UWptzcM+bSBg+u8akORsvnybsqQUE/wVChIazg==
  /safe-buffer/5.1.2:
    resolution:
      integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -3342,14 +3344,14 @@ packages:
    dev: true
    resolution:
      integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-  /sapper/0.27.12_svelte@3.20.1:
+  /sapper/0.27.12_svelte@3.21.0:
    dependencies:
      html-minifier: 4.0.0
      http-link-header: 1.0.2
      shimport: 1.0.1
      sourcemap-codec: 1.4.8
      string-hash: 1.1.3
-      svelte: 3.20.1
+      svelte: 3.21.0
    dev: true
    hasBin: true
    peerDependencies:
@@ -3427,13 +3429,13 @@ packages:
      node: '>=8'
    resolution:
      integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-  /source-map-support/0.5.18:
+  /source-map-support/0.5.19:
    dependencies:
      buffer-from: 1.1.1
      source-map: 0.6.1
    dev: true
    resolution:
-      integrity: sha512-9luZr/BZ2QeU6tO2uG8N2aZpVSli4TSAOAqFOyTO51AJcD9P99c0K1h6dD6r6qo5dyT44BR5exweOaLLeldTkQ==
+      integrity: sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
  /source-map/0.4.4:
    dependencies:
      amdefine: 1.0.1
@@ -3604,17 +3606,17 @@ packages:
    dev: false
    resolution:
      integrity: sha512-3MobAvIUe345ZNREDvy/3tsfZMzPcSW+fE7osCVtGOAFeQ25haqQoZhT2c6qxxnWB7oVlTXTHCfEatzAGJi0fQ==
-  /svelte-preprocess/3.7.3_480b73828c00a99ece9025e574514fef:
+  /svelte-preprocess/3.7.4_44e9bd38b1a414594b4fcbf91839036f:
    dependencies:
      '@babel/core': 7.9.0
      '@types/pug': 2.0.4
      '@types/sass': 1.16.0
      detect-indent: 6.0.0
-      node-sass: 4.13.1
+      node-sass: 4.14.0
      postcss: 7.0.27
      postcss-load-config: 2.1.0
      strip-indent: 3.0.0
-      svelte: 3.20.1
+      svelte: 3.21.0
    dev: true
    engines:
      node: '>= 7.6.0'
@@ -3635,6 +3637,8 @@ packages:
        optional: true
      coffeescript:
        optional: true
+      less:
+        optional: true
      node-sass:
        optional: true
      postcss:
@@ -3653,13 +3657,13 @@ packages:
        optional: true
    requiresBuild: true
    resolution:
-      integrity: sha512-Ak2S1osFgu4Gf+4Fqya1zZ3sAcAcjv38RYvt7m0syKQwqd8ITsgsVRWcUysC1MjQMvrDqqTD3slFFnI6C0oOHA==
-  /svelte/3.20.1:
+      integrity: sha512-0nW7TIjbav2nmw1Y7EAFRRkhNVwJ3zKN85/eITLQMkPuhqHO2i2IK0O3y4YXsSXlc0VGI5jQDVXkcXpga6zzew==
+  /svelte/3.21.0:
    dev: true
    engines:
      node: '>= 8'
    resolution:
-      integrity: sha512-m/dw52BZf+p6KYnyKLErIcGalu4pwJrQbUM7VZriRw6ZlJj1qMAZsLcIWzEB3I0hhdJwkKb7LrrvUIeqmbO92Q==
+      integrity: sha512-smh3LZKPCGJ+UXa0iZvUmuDctPYCwPY1opmClTWTm+l6e4y9FHLoCZMiue8YIeyc9JvlGT/EK0xry0diXjFDZQ==
  /swipe-listener/1.1.0:
    dev: false
    resolution:
@@ -3672,17 +3676,17 @@ packages:
    dev: true
    resolution:
      integrity: sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==
-  /terser/4.6.11:
+  /terser/4.6.12:
    dependencies:
      commander: 2.20.3
      source-map: 0.6.1
-      source-map-support: 0.5.18
+      source-map-support: 0.5.19
    dev: true
    engines:
      node: '>=6.0.0'
    hasBin: true
    resolution:
-      integrity: sha512-76Ynm7OXUG5xhOpblhytE7X58oeNSmC8xnNhjWVo8CksHit0U0kO4hfNbPrrYwowLWFgM2n9L176VNx2QaHmtA==
+      integrity: sha512-fnIwuaKjFPANG6MAixC/k1TDtnl1YlPLUlLVIxxGZUn1gfUx2+l3/zGNB72wya+lgsb50QBi2tUV75RiODwnww==
  /through2/0.6.5:
    dependencies:
      readable-stream: 1.0.34
@@ -3931,6 +3935,7 @@ specifiers:
  '@babel/preset-env': ^7.9.5
  '@babel/runtime': ^7.9.2
  '@rollup/plugin-alias': ^3.1.0
+  '@rollup/plugin-babel': ^5.0.0
  '@rollup/plugin-commonjs': 11.0.2
  '@rollup/plugin-node-resolve': ^7.1.3
  '@rollup/plugin-replace': ^2.3.2
@@ -3941,22 +3946,21 @@ specifiers:
  imagesloaded: ^4.1.4
  lazysizes: ^5.2.0
  node-fetch: ^2.6.0
-  node-sass: ^4.13.1
+  node-sass: ^4.14.0
  normalize.css: ^8.0.1
  polka: ^1.0.0-next.11
  postcss: ^7.0.27
  postcss-load-config: ^2.1.0
  postcss-preset-env: ^6.7.0
  rellax: ^1.12.1
-  rollup: ^2.7.1
-  rollup-plugin-babel: ^4.4.0
+  rollup: ^2.7.3
  rollup-plugin-glslify: ^1.2.0
  rollup-plugin-svelte: ^5.2.1
  rollup-plugin-terser: ^5.3.0
  sapper: ^0.27.12
  scroll-out: ^2.2.8
  sirv: ^0.4.2
-  svelte: ^3.20.1
+  svelte: ^3.21.0
  svelte-lazy: ^0.1.10
-  svelte-preprocess: ^3.7.3
+  svelte-preprocess: ^3.7.4
  swipe-listener: ^1.1.0
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,8 +3,8 @@ import resolve from '@rollup/plugin-node-resolve'
 import alias from '@rollup/plugin-alias'
 import replace from '@rollup/plugin-replace'
 import commonjs from '@rollup/plugin-commonjs'
+import babel from '@rollup/plugin-babel'
 import svelte from 'rollup-plugin-svelte'
-import babel from 'rollup-plugin-babel'
 import autoPreprocess from 'svelte-preprocess'
 import { terser } from 'rollup-plugin-terser'
 import glslify from 'rollup-plugin-glslify'
--- a/src/atoms/IconArrow.svelte
+++ b/src/atoms/IconArrow.svelte
@@ -1,10 +1,17 @@
 <script>
    export let direction = 'left'
    export let color = '#fff'
+    export let width = 20
    export let hidden = undefined
 </script>

-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 20 20" width="20" height="20" fill={color} class={$$props.class} aria-hidden={hidden}>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 20 20"
+    width={width} height={width}
+    fill={color}
+    class={$$props.class}
+    aria-hidden={hidden}
+    data-width={width}
+>
    {#if direction === 'left'}
    <path fill-rule="nonzero" d="M.26 10.85l-.06-.11-.08-.15-.05-.16-.04-.13a1.5 1.5 0 010-.6c0-.05.03-.09.04-.13l.05-.16.08-.15.06-.1c.06-.1.13-.17.2-.25L9.2.45c.61-.6 1.61-.6 2.23 0 .62.6.62 1.57 0 2.17L5.4 8.47h13.02c.87 0 1.58.68 1.58 1.53s-.7 1.53-1.58 1.53H5.4l6.03 5.85c.62.6.62 1.57 0 2.17-.3.3-.71.45-1.12.45-.4 0-.8-.15-1.11-.45L.46 11.08a1.5 1.5 0 01-.2-.23"/>
    {:else if direction === 'right'}
--- a/src/atoms/LinkTranslate.svelte
+++ b/src/atoms/LinkTranslate.svelte
@@ -3,10 +3,11 @@
    export let text = ''
    export let target = null
    export let rel = null
+    export let active = false
    export let noScroll = undefined
 </script>

-<a class="link-translate" {href} {target} {rel} sapper-noscroll={noScroll}>
+<a {href} {target} {rel} class="link-translate" class:is-active={!!active} sapper-noscroll={noScroll}>
    <slot />
    <div class="text" data-text={text}>
        <span>{text}</span>
--- a/src/molecules/Newsletter.svelte
+++ b/src/molecules/Newsletter.svelte
@@ -0,0 +1,46 @@
+<script>
+    import { site } from 'utils/store'
+    // Components
+    import IconArrow from 'atoms/IconArrow'
+
+    // Props
+    export let title = true
+    export let small = false
+    export let brightness = 'dark'
+</script>
+
+<div class="newsletter" class:newsletter--small={small} class:newsletter--light={brightness === 'light'}>
+    <div class="newsletter__text style-description" class:style-description--small={small} class:style-description--dark={brightness === 'light'} class:page__part={!small}>
+        <p>{$site.newsletter_text}</p>
+    </div>
+
+    <form method="POST" action={$site.newsletter_url} target="_blank" id="sib-form" class="form"
+        class:form--light={brightness === 'light'}
+        class:page__part={!small}
+    >
+        {#if title}
+        <h2 class="style-location">
+            <label for="EMAIL">{$site.newsletter_subtitle}</label>
+        </h2>
+        {/if}
+
+        <div class="newsletter__input form__group form__inputgroup">
+            <input type="email" id="EMAIL" name="EMAIL" value="" placeholder="Your email address..." class="input__text" required>
+            <button type="submit" form="sib-form" class="button-control dir-right"
+                class:button-control--pink={brightness === 'light'}
+                class:button-control--lightpink={brightness === 'dark'}
+            >
+                <IconArrow direction="right" color="#fff" class="icon" width="12" />
+                <IconArrow direction="right" color="#fff" class="icon" width="12" hidden="true" />
+            </button>
+        </div>
+
+        <div class="newsletter__notice">
+            <p class="style-notice">No spam, promised!</p>
+        </div>
+
+        <input type="text" name="email_address_check" value="" style="display: none;">
+        <input type="hidden" name="locale" value="en">
+        <input type="hidden" name="html_type" value="simple">
+    </form>
+</div>
--- a/src/organisms/Footer.svelte
+++ b/src/organisms/Footer.svelte
@@ -1,8 +1,12 @@
 <script>
+    import { stores } from '@sapper/app'
    import { site, currentLocation } from 'utils/store'
    // Components
    import LinkTranslate from 'atoms/LinkTranslate'
    import Switcher from 'molecules/Switcher'
+
+    // Variables
+    const { page } = stores()
 </script>

 <footer class="footer">
@@ -16,7 +20,10 @@
                <li>
                    <ul>
                        <li>
-                            <LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll />
+                            <LinkTranslate href="/subscribe" text="Keep Updated" active={$page.path.includes('subscribe')} rel="prefetch" noScroll />
+                        </li>
+                        <li>
+                            <LinkTranslate href="/credits" text="Credits" active={$page.path.includes('credits')} rel="prefetch" noScroll />
                        </li>
                        {#if $site}
                        <li class="instagram">
--- a/src/organisms/Pagination.svelte
+++ b/src/organisms/Pagination.svelte
@@ -1,7 +1,8 @@
 <script>
    import { onMount, createEventDispatcher } from 'svelte'
-    import { currentLocation } from 'utils/store'
-
+    import { site, currentLocation } from 'utils/store'
+    // Components
+    import Newsletter from 'molecules/Newsletter'
    // Props
    export let photos
    export let paginatedPhotos
@@ -58,7 +59,12 @@
    {:else if $currentLocation}
    <div class="pagination__message">
        <h3>That's all folks!</h3>
-        <p class="pagination__caption style-caps">Come back later to check out <br>new photos of {$currentLocation.name}</p>
+
+        <Newsletter
+            small={true}
+            brightness="light"
+            title={false}
+        />
    </div>
    {/if}
 </section>
--- a/src/routes/_error.svelte
+++ b/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>
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -20,6 +20,9 @@
                        seo_share_image { full_url }
                        credits_text
                        credits_list
+                        newsletter_text
+                        newsletter_subtitle
+                        newsletter_url
                    }
                }
                continents {
--- a/src/routes/choose.svelte
+++ b/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>
--- a/src/routes/credits.svelte
+++ b/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>
--- a/src/routes/subscribe.svelte
+++ b/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>
--- a/src/routes/viewer/[country]/[place]/[photo].svelte
+++ b/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>
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -230,7 +230,35 @@ button {

    @include breakpoint (sm) {
        max-width: 572px;
+        margin: 0 auto;
        font-size: rem(28px);
        line-height: 1.64;
    }
+
+    // Dark text
+    &--dark {
+        color: $color-text;
+    }
+
+    // Small text variant
+    &--small {
+        font-size: rem(16px);
+        line-height: 1.4;
+
+        @include breakpoint (sm) {
+            font-size: rem(20px);
+            line-height: 1.5;
+        }
+    }
+}
+
+// Notice
+.style-notice {
+    color: rgba($color-tertiary, 0.5);
+    font-family: $font-sans-light;
+    font-size: rem(14px);
+
+    @include breakpoint (sm) {
+        font-size: rem(16px);
+    }
 }
--- a/src/style/atoms/_button-control.scss
+++ b/src/style/atoms/_button-control.scss
@@ -27,13 +27,18 @@
        position: relative;
        overflow: hidden;
        display: block;
-        width: 13px;
        height: auto;
        transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
        will-change: transform;

+        &:not([data-width]) {
+            width: 13px;
+        }
+
        @include breakpoint (sm) {
-            width: 20px;
+            &:not([data-width]) {
+                width: 20px;
+            }
        }
    }
    .icon[aria-hidden] {
@@ -54,11 +59,18 @@
            background-color: $color-secondary;
        }
    }
-    &--pink {
+    &--lightpink {
        background-color: rgba($color-secondary, 0.4);

        &:hover, &.hover {
-            background-color: rgba($color-secondary, 0.75);
+            background-color: rgba($color-secondary, 0.85);
+        }
+    }
+    &--pink {
+        background-color: rgba($color-secondary, 0.85);
+
+        &:hover, &.hover {
+            background-color: $color-secondary;
        }
    }
    &--gray {
--- a/src/style/atoms/_link.scss
+++ b/src/style/atoms/_link.scss
@@ -1,4 +1,6 @@
-// Change link
+/*
+** Link: Change location
+*/
 .link-change {
    position: relative;
    display: inline-block;
@@ -65,7 +67,9 @@
 }


-// Link with animated letters
+/*
+** Link: Translation effect
+*/
 .link-translate {
    display: inline-block;

@@ -95,7 +99,7 @@
        }
    }

-    // Hover
+    // States
    &:hover {
        .text {
            &:after {
--- a/src/style/molecules/_form.scss
+++ b/src/style/molecules/_form.scss
@@ -0,0 +1,89 @@
+// Form
+.form {
+    label {
+        cursor: pointer;
+    }
+
+    // Group item
+    // &__group {
+    // }
+
+    // Input group
+    &__inputgroup {
+        position: relative;
+
+        button {
+            position: absolute;
+            top: 50%;
+            right: 10px;
+            transform: translateY(-50%);
+            width: 32px;
+            height: 32px;
+
+            @include breakpoint (sm) {
+                right: 20px;
+            }
+        }
+
+        // Hover
+        &:hover {
+            .input__text {
+                @extend %input__text--active;
+            }
+        }
+    }
+
+
+    /*
+    ** Light version
+    */
+    &--light {
+        // Text input
+        .input__text {
+            &, &::placeholder {
+                color: $color-text;
+            }
+        }
+    }
+}
+
+// Text input
+.input__text {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 48px;
+    padding: 0 24px;
+    color: #fff;
+    font-size: rem(16px);
+    font-family: $font-sans-light;
+    border: 2px solid rgba($color-secondary, 0.6);
+    border-radius: 50vh;
+    transition: border 300ms $ease-quart;
+    background: none;
+    outline: none;
+
+    @include breakpoint (sm) {
+        font-size: rem(18px);
+        height: 64px;
+        padding: 0 32px;
+    }
+
+    // States
+    &::placeholder {
+        color: #fff;
+        opacity: 0.75;
+        transition: all 300ms $ease-quart;
+    }
+    &:focus {
+        @extend %input__text--active;
+    }
+}
+
+%input__text--active {
+    border-color: $color-secondary;
+
+    &::placeholder {
+        opacity: 1;
+    }
+}
--- a/src/style/molecules/_newsletter.scss
+++ b/src/style/molecules/_newsletter.scss
@@ -0,0 +1,62 @@
+// Newsletter
+.newsletter {
+    max-width: 360px;
+    margin: 0 auto;
+    text-align: center;
+
+    @include breakpoint (sm) {
+        max-width: 444px;
+    }
+
+    // Title
+    h2 {
+        margin-bottom: 40px;
+        color: $color-secondary;
+    }
+
+    // Text
+    &__text {
+        margin-bottom: 72px;
+
+        @include breakpoint (sm) {
+            margin-bottom: 96px;
+        }
+    }
+
+    // Form
+    .form {
+
+    }
+
+    // Notice
+    &__notice {
+        margin-top: 32px;
+    }
+
+
+    /*
+    ** Small version
+    */
+    &--small {
+        .newsletter__text {
+            max-width: 344px;
+            margin-bottom: 56px;
+
+            @include breakpoint (sm) {
+                margin-bottom: 72px;
+            }
+        }
+    }
+
+
+    /*
+    ** Light version
+    */
+    &--light {
+        .newsletter__notice {
+            p {
+                color: rgba($color-text, 0.5);
+            }
+        }
+    }
+}
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -83,7 +83,7 @@
            }

            // Hover
-            &:hover {
+            &:hover, &.is-active {
                color: $color-secondary;
            }
        }
--- a/src/style/organisms/_pagination.scss
+++ b/src/style/organisms/_pagination.scss
@@ -105,9 +105,10 @@
            font-family: $font-serif;
            font-size: rem(32px);
            color: $color-secondary;
-            margin-bottom: 16px;
+            margin-bottom: 24px;

            @include breakpoint (sm) {
+                margin-bottom: 32px;
                font-size: rem(40px);
            }
        }
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -27,6 +27,8 @@
@import "molecules/location";
@import "molecules/photo";
@import "molecules/globe";
+@import "molecules/newsletter";
+@import "molecules/form";

 // Organisms
@import "organisms/carousel";