Add Newsletter Component and Page

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

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": "^2.7.3",
-    "rollup-plugin-babel": "^4.4.0",
     "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": "^3.21.0",
-    "svelte-preprocess": "^3.7.3"
+    "svelte-preprocess": "^3.7.4"
   },
   "browserslist": [
     "> 0.5%",

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-alias': 3.1.0_rollup@2.7.3
-  '@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
-  '@rollup/plugin-node-resolve': 7.1.3_rollup@2.7.1
+  '@rollup/plugin-commonjs': 11.0.2_rollup@2.7.3
-  '@rollup/plugin-replace': 2.3.2_rollup@2.7.1
+  '@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: 2.7.3
-  rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.7.1
   rollup-plugin-glslify: 1.2.0
-  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
-  rollup-plugin-terser: 5.3.0_rollup@2.7.1
+  rollup-plugin-terser: 5.3.0_rollup@2.7.3
-  sapper: 0.27.12_svelte@3.20.1
+  sapper: 0.27.12_svelte@3.21.0
-  svelte: 3.20.1
+  svelte: 3.21.0
-  svelte-preprocess: 3.7.3_480b73828c00a99ece9025e574514fef
+  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
+      resolve: 1.17.0
-      rollup: 2.7.1
+      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
+      resolve: 1.17.0
-      rollup: 2.7.1
+      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
+      caniuse-lite: 1.0.30001048
-      electron-to-chromium: 1.3.414
+      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==
+      integrity: sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
-  /mime-types/2.1.26:
+  /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==
+      integrity: sha512-0nW7TIjbav2nmw1Y7EAFRRkhNVwJ3zKN85/eITLQMkPuhqHO2i2IK0O3y4YXsSXlc0VGI5jQDVXkcXpga6zzew==
-  /svelte/3.20.1:
+  /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: ^2.7.3
-  rollup-plugin-babel: ^4.4.0
   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

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'

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'}

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>

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>

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">

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>

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}"
+        url="https://{$page.host}{$page.path}"
-        title="{$site.seo_name} - {$site.seo_title_default} across the globe"
+        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"
+        url="https://{$page.host}{$page.path}"
-        title="{$site.seo_name} - Credits"
+        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>

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);
+    }
 }

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 {

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 {

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;
+    }
+}

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);
+            }
+        }
+    }
+}

src/style/organisms/_footer.scss

@@ -83,7 +83,7 @@
             }
 
             // Hover
-            &:hover {
+            &:hover, &.is-active {
                 color: $color-secondary;
             }
         }

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);
             }
         }

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";