Style contact page

server/modules/contact-page/index.js

@@ -22,6 +22,9 @@ module.exports = {
             messageLabel: {
               type: 'string',
             },
+            sendLabel: {
+              type: 'string',
+            },
           },
         },
       },

server/modules/contact-page/ui/src/index.scss

@@ -1,19 +1,156 @@
+@import '../../../asset/ui/src/scss/settings';
+
 .pdl-contact {
   display: flex;
+  padding: 14px 20px;
+  flex-direction: column;
+  gap: 38px;
+  margin-bottom: 6px;
+  background: white;
+
+  @media (min-width: map-get($breakpoints, 'sm')) {
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  @media (min-width: map-get($breakpoints, 'md')) {
+    margin-bottom: 0;
+    justify-content: space-between;
+    gap: 70px;
+    padding: 32px;
+    padding-top: 68px;
+  }
 
   .pdl-contact__wrapper {
     display: flex;
     flex-direction: column;
     align-items: start;
-    justify-content: center;
+    justify-content: start;
+
+    @media (min-width: map-get($breakpoints, 'sm')) {
+      width: 50%;
+    }
   }
+
   .pdl-contact__heading {
-    font-size: 113px;
+    font-size: 63px;
     font-weight: 450;
-    margin-top: 50px;
-    margin-left: 32px;
-    margin-bottom: 48px;
-    letter-spacing: -1px;
+    margin: 0;
+    margin-bottom: 32px;
+    letter-spacing: 0px;
     text-align: left;
+
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      letter-spacing: -1px;
+      font-size: 113px;
+      margin-top: -12px;
+      margin-bottom: 14px;
+    }
+  }
+
+  .pdl-contact__paragraph {
+    font-weight: 450;
+    font-size: 18px;
+    max-width: 95%;
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      font-size: 32px;
+      max-width: 100%;
+    }
+  }
+
+  .pdl-contact__form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    max-width: 100%;
+
+    @media (min-width: map-get($breakpoints, 'sm')) {
+      margin-top: 102px;
+    }
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      margin: auto;
+      width: 672px;
+    }
+  }
+
+  .pdl-contact__form-group {
+    input, textarea {
+      border-radius: 4px;
+      background-color: #f1f1f1;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      color: #000;
+      justify-content: flex-start;
+      flex: 1;
+      flex-basis: 0%;
+      padding: 12px;
+      border: 0;
+      font-size: 17.5px;
+      font-weight: 500;
+      box-sizing: border-box;
+      width: 100%;
+
+      @media (min-width: map-get($breakpoints, 'md')) {
+        text-indent: 5px;
+        height: 53px;
+      }
+
+      &:focus {
+        outline: none;
+      }
+      &::placeholder {
+        color: #A9A9A9;
+        opacity: 1;
+        transition: all 0.3s;
+        @media (min-width: map-get($breakpoints, 'md')) {
+          line-height: 33px;
+        }
+      }
+      &:hover::placeholder {
+        color: black;
+      }
+    }
+
+    textarea {
+      resize: none;
+      height: 170px;
+
+      @media (min-width: map-get($breakpoints, 'md')) {
+        height: 240px;
+      }
+    }
+  }
+
+  .pdl-contact__submit {
+    align-self: stretch;
+    border-radius: 4px;
+    background-color: #000;
+    gap: 8px;
+    color: #fff;
+    // padding: 12px;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+    height: 44px;;
+
+    &:hover {
+      background-color: #222;
+    }
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      // width: 108px;
+      // padding: 2px;
+      height: 64px;
+      font-size: 26px;
+    }
   }
 }

server/modules/contact-page/views/page.html

@@ -15,18 +15,15 @@ <h1 class="pdl-contact__heading">
   <div class="pdl-contact__wrapper">
     <form class="pdl-contact__form" action="/contact" method="post">
       <div class="pdl-contact__form-group">
-        <label for="name" class="pdl-contact__label">Name</label>
-        <input type="text" id="name" name="name" class="pdl-contact__input" required>
+        <input type="text" id="name" name="name" class="pdl-contact__input" placeholder="{{ data.page.form.nameLabel }} *" required>
       </div>
       <div class="pdl-contact__form-group">
-        <label for="email" class="pdl-contact__label">Email</label>
-        <input type="email" id="email" name="email" class="pdl-contact__input" required>
+        <input type="email" id="email" name="email" class="pdl-contact__input" placeholder="{{ data.page.form.emailLabel }} *" required>
       </div>
       <div class="pdl-contact__form-group">
-        <label for="message" class="pdl-contact__label">Message</label>
-        <textarea id="message" name="message" class="pdl-contact__textarea" required></textarea>
+        <textarea id="message" name="message" class="pdl-contact__textarea" placeholder="{{ data.page.form.messageLabel }} *" required></textarea>
       </div>
-      <button type="submit" class="pdl-contact__button">Send</button>
+      <div class="pdl-contact__submit">{{ data.page.form.sendLabel }}</div>
     </form>
   </div>
 </section>

server/modules/newsletter/ui/src/index.scss

@@ -12,7 +12,7 @@
   font-weight: 500;
   justify-content: flex-start;
   flex-wrap: wrap;
-  padding: 40px 10px 26px 10px;
+  padding: 40px 20px 26px 20px;
 
   @media (min-width: map-get($breakpoints, 'sm')) {
     padding: 40px 20px 22px 20px;
@@ -111,6 +111,7 @@
     }
 
     @media (min-width: map-get($breakpoints, 'md')) {
+      text-indent: 5px;
       height: 53px;
       width: 567px;
     }
@@ -119,7 +120,7 @@
       outline: none;
     }
     &::placeholder {
-      color: grey;
+      color: #A9A9A9;
       opacity: 1;
       transition: all 0.3s;
     }
@@ -141,6 +142,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: all 0.3s;
+
+    &:hover {
+      background-color: #222;
+    }
 
     @media (min-width: map-get($breakpoints, 'md')) {
       width: 108px;