Merge pull request 'develop' (#24) from develop into main

Reviewed-on: #24

src/components/footer-bottom.module.scss

@@ -5,6 +5,10 @@
   height: 64px;
   background: variables.$color-black;
 
+  @media screen and (min-width: 2500px) {
+    height: 96px;
+  }
+
   @media screen and (max-width: 1024px) {
     height: 134px;
   }
@@ -37,6 +41,11 @@
       text-transform: capitalize;
       color: variables.$color-white;
 
+      @media screen and (min-width: 2500px) {
+        font-size: 20px;
+        line-height: 23px;
+      }
+
       @media screen and (max-width: 1024px) {
         order: 1;
         width: 100%;
@@ -56,11 +65,23 @@
         width: 100%;
       }
 
+      .creditcard {
+        @media screen and (min-width: 2500px) {
+          height: 40px;
+        }
+      }
+
       .footer-line {
         width: 24px;
         border: 1px solid variables.$color-grey;
         transform: rotate(90deg);
       }
+
+      .vtex-certified {
+        @media screen and (min-width: 2500px) {
+          height: 66px;
+        }
+      }
     }
 
     .footer-copyright {
@@ -76,6 +97,14 @@
         width: 100%;
       }
 
+      a {
+        img {
+          @media screen and (min-width: 2500px) {
+            height: 30px;
+          }
+        }
+      }
+
       span {
         font-weight: 400;
         font-size: 10px;
@@ -83,6 +112,11 @@
         text-transform: capitalize;
         white-space: nowrap;
         color: variables.$color-white;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 20px;
+          line-height: 23px;
+        }
       }
     }
   }

src/components/footer-top.module.scss

@@ -9,6 +9,10 @@
   display: flex;
   position: relative;
 
+  @media screen and (min-width: 2500px) {
+    height: 297px;
+  }
+
   .footer-wrapper {
     display: flex;
     justify-content: space-between;
@@ -90,6 +94,10 @@
       display: flex;
       gap: 121px;
 
+      @media screen and (min-width: 2500px) {
+        gap: 293px;
+      }
+
       @media screen and (max-width: 1024px) {
         display: none;
       }
@@ -105,6 +113,11 @@
           line-height: 16px;
           text-transform: uppercase;
           color: variables.$color-black3;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 28px;
+            line-height: 33px;
+          }
         }
 
         h4 {
@@ -113,6 +126,11 @@
           line-height: 14px;
           text-transform: capitalize;
           color: variables.$color-black3;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 24px;
+            line-height: 28px;
+          }
         }
 
         a {
@@ -122,6 +140,11 @@
           text-transform: capitalize;
           text-decoration: none;
           color: variables.$color-black3;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 24px;
+            line-height: 28px;
+          }
         }
       }
     }
@@ -141,6 +164,12 @@
     .footer-social-media-wrapper {
       display: flex;
       gap: 10px;
+
+      img {
+        @media screen and (min-width: 2500px) {
+          height: 70px;
+        }
+      }
     }
 
     a {
@@ -149,6 +178,11 @@
       line-height: 16px;
       text-decoration: none;
       color: variables.$color-black3;
+
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
     }
   }
 }

src/components/main/components/MainForm.tsx

@@ -31,6 +31,7 @@ const MainForm = () => {
         onSubmit={(values: IFormMain, { resetForm }) => {
           console.log(values);
           resetForm();
+          console.log("blah");
         }}
         initialValues={initialValues}
         validationSchema={FormMainSchema}

src/components/main/components/main-form.module.scss

@@ -4,6 +4,10 @@
   width: 100%;
   height: 650px;
 
+  @media screen and (min-width: 2500px) {
+    height: 900px;
+  }
+
   .main-form {
     width: 100%;
     height: 600px;
@@ -23,6 +27,11 @@
 
         margin-left: 15px;
         margin-bottom: 12px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
       }
 
       input {
@@ -31,6 +40,23 @@
         border-radius: 25px;
 
         margin-bottom: 12px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
+      }
+
+      input::placeholder {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: variables.$color-grey6;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
       }
 
       .form-feedback {
@@ -41,6 +67,13 @@
         font-size: 12px;
         line-height: 14px;
         color: variables.$color-red;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 24px;
+          line-height: 28px;
+
+          bottom: 80px;
+        }
       }
     }
 
@@ -49,9 +82,19 @@
       align-items: center;
       justify-content: center;
       margin-bottom: 12px;
+      margin-top: 12px;
+
+      label {
+        display: flex;
+      }
 
       input {
         margin-left: 4.28px;
+
+        @media screen and (min-width: 2500px) {
+          width: 35.15px;
+          height: 35.15px;
+        }
       }
 
       .main-form-dot,
@@ -59,6 +102,11 @@
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
       }
 
       .main-form-dot {
@@ -72,13 +120,19 @@
 
       .form-feedback {
         position: absolute;
-        // right: 100px;
-        // bottom: 0px;
+        right: 18%;
         font-weight: 400;
         font-size: 12px;
         line-height: 14px;
         color: variables.$color-red;
 
+        @media screen and (min-width: 2500px) {
+          font-size: 24px;
+          line-height: 28px;
+
+          right: 15%;
+        }
+
         @media screen and (max-width: 360px) {
           display: flex;
         }
@@ -86,6 +140,7 @@
     }
 
     .main-form-button {
+      font-style: normal;
       font-weight: 400;
       font-size: 16px;
       line-height: 19px;
@@ -99,6 +154,11 @@
       background: variables.$color-black;
       border-radius: 25px;
 
+      @media screen and (min-width: 2500px) {
+        font-size: 32px;
+        line-height: 38px;
+      }
+
       @media screen and (max-width: 360px) {
         margin-top: 4px;
       }

src/components/newsletter.module.scss

@@ -79,6 +79,9 @@
 
           @media screen and (min-width: 2500px) {
             min-width: 668px;
+
+            font-size: 28px;
+            line-height: 33px;
           }
 
           @media screen and (max-width: 1024px) {
@@ -106,6 +109,13 @@
           font-size: 12px;
           line-height: 14px;
           color: variables.$color-red;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 24px;
+            line-height: 28px;
+
+            right: -95px;
+          }
         }
       }
 

src/variables.module.scss

@@ -18,6 +18,7 @@ $color-grey2: #e5e5e5;
 $color-grey3: #7d7d7d;
 $color-grey4: #f2f2f2;
 $color-grey5: #c6c6c6;
+$color-grey6: #b9b7b7;
 
 $color-red: #ff0000;