Add Newsletter Component and Page

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

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