feat: Responsividade telas 2500 > finalizada

public/assets/icons/search-icon.svg

@@ -1,3 +1,3 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.2094 11.6186C14.0951 10.409 14.6249 8.92328 14.6249 7.31261C14.6249 3.28064 11.3444 0.00012207 7.31245 0.00012207C3.28048 0.00012207 0 3.28064 0 7.31261C0 11.3446 3.28052 14.6251 7.31248 14.6251C8.92315 14.6251 10.409 14.0952 11.6186 13.2094L16.4092 18L18 16.4092C18 16.4092 13.2094 11.6186 13.2094 11.6186ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1042 2.25001 7.31261C2.25001 4.52098 4.52086 2.25013 7.31248 2.25013C10.1041 2.25013 12.375 4.52098 12.375 7.31261C12.375 10.1042 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
 </svg>

src/components/Footer/FooterBottom/footerBottom.module.scss

@@ -92,6 +92,62 @@
   }
 }
 
+@media screen and (min-width: 2500px) {
+  .containerFooterBottom {
+    .footerAdress {
+      width: 20.3043%;
+      max-width: 467px;
+
+      span {
+        font-size: 20px;
+        line-height: 23px;
+      }
+    }
+
+    .footerPayments {
+      width: 692px;
+
+      .footerPaymentsWrapper {
+        div {
+          img {
+            width: 70px;
+            height: 39.27px;
+          }
+        }
+      }
+
+      .footerPaymentsWrapperVtex {
+        div {
+          .vtexIcon {
+            width: 106px;
+            height: 66px;
+          }
+        }
+      }
+    }
+
+    .containerDevelop {
+      max-width: 404.17px;
+      gap: 12px;
+
+      li span {
+        font-size: 20px;
+        line-height: 23px;
+      }
+
+      .logoVtexFooter {
+        width: 84.22px;
+        height: 30px;
+      }
+
+      .logoM3Footer {
+        width: 54.95px;
+        height: 30px;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 1024px) {
   .containerFooterBottom {
     padding: 19px 16px 15px 16px;

src/components/Footer/FooterTop/footerTop.module.scss

@@ -1,5 +1,4 @@
 .containerFooterTop {
-  position: relative;
   display: flex;
   justify-content: space-between;
 
@@ -69,6 +68,34 @@
   }
 }
 
+@media screen and (min-width: 2500px) {
+  .containerFooterTop {
+    div h4 {
+      font-size: 28px;
+      line-height: 33px;
+    }
+
+    div ul li {
+      font-size: 24px;
+      line-height: 28px;
+    }
+
+    .containerSocialIcons {
+      width: 16.9565%;
+      .wrapperSocialIcons {
+        a {
+          width: 17.9487%;
+        }
+      }
+
+      .linkSocial {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 1024px) {
   .containerFooterTop {
     padding: 24px 16px;

src/components/Header/header.module.scss

@@ -1,6 +1,5 @@
 .containerHeader {
   background: var(--black);
-  // height: 76px;
 
   display: flex;
   align-items: center;
@@ -52,8 +51,12 @@
 
     button {
       background: transparent;
-      height: 18px;
+      height: auto;
       padding-right: 16px;
+
+      img {
+        height: 18px;
+      }
     }
   }
 
@@ -79,6 +82,58 @@
   }
 }
 
+@media screen and (min-width: 2500px) {
+  .containerHeader {
+    .logo {
+      width: 11.5486%;
+    }
+
+    .formSearch {
+      width: 22.3913%;
+      height: 57px;
+
+      border: 2px solid #f0f0f0;
+
+      input {
+        padding: 0 16px;
+
+        font-size: 28px;
+        line-height: 33px;
+
+        &::placeholder {
+          font-size: 28px;
+          line-height: 33px;
+        }
+      }
+
+      button {
+        background: transparent;
+        height: auto;
+        padding-right: 11px;
+
+        img {
+          height: 35.5px;
+        }
+      }
+    }
+
+    .entrarContainer {
+      width: 9.3339%;
+
+      span {
+        color: var(--white);
+
+        font-size: 28px;
+        line-height: 33px;
+      }
+
+      img {
+        width: 25.4704%;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 1024px) {
   .containerHeader {
     padding: 0 16px;

src/components/Institucional/Contato/contato.module.scss

@@ -112,3 +112,49 @@
     color: #008000;
   }
 }
+
+@media screen and (min-width: 2500px) {
+  .formContato {
+    h3 {
+      font-size: 48px;
+      line-height: 56px;
+    }
+
+    label,
+    input {
+      font-size: 28px;
+      line-height: 33px;
+    }
+
+    input {
+      height: 63px;
+      &::placeholder {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+
+    .containerTermos {
+      input {
+        min-width: 36.4px;
+        height: 35.15px;
+      }
+    }
+
+    button {
+      font-size: 32px;
+      line-height: 38px;
+    }
+
+    .errorForm {
+      font-size: 24px;
+      line-height: 28px;
+      top: 17px;
+    }
+
+    .sucessSubmit {
+      font-size: 24px;
+      line-height: 28px;
+    }
+  }
+}

src/components/Institucional/Sobre/sobre.module.scss

@@ -19,6 +19,20 @@
   }
 }
 
+@media screen and (min-width: 2500px) {
+  .contentInfo {
+    h3 {
+      font-size: 48px;
+      line-height: 56px;
+    }
+
+    p {
+      font-size: 26px;
+      line-height: 30px;
+    }
+  }
+}
+
 @media screen and (max-width: 1024px) {
   .contentInfo {
     padding: 0;

src/components/Institucional/institucional.module.scss

@@ -82,6 +82,56 @@
   }
 }
 
+@media screen and (min-width: 2500px) {
+  .containerInstitucional {
+    .containerBreadcrumb {
+      .homeIcon,
+      .arrowIcon {
+        margin-right: 12px;
+      }
+
+      .homeIcon {
+        width: 31px;
+
+        a {
+          width: 100%;
+        }
+      }
+
+      .arrowIcon {
+        img {
+          width: 8.9px;
+          height: 15.62px;
+        }
+      }
+
+      a {
+        font-size: 24px;
+        line-height: 28px;
+      }
+    }
+
+    .titleInstitucional {
+      font-size: 48px;
+      line-height: 56px;
+    }
+
+    .containerInfo {
+      nav {
+        min-width: 25.6521%;
+        height: 465px;
+
+        ul {
+          li {
+            font-size: 32px;
+            line-height: 38px;
+          }
+        }
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 1024px) {
   .containerInstitucional {
     padding: 0 16px;

src/components/MenuNav/menuNav.module.scss

@@ -19,6 +19,15 @@
   }
 }
 
+@media screen and (min-width: 2500px) {
+  .menuNav {
+    li {
+      font-size: 28px;
+      line-height: 33px;
+    }
+  }
+}
+
 @media screen and (max-width: 1024px) {
   .menuNav {
     border: 0;

src/components/Newsletter/newsletter.module.scss

@@ -63,6 +63,36 @@
   }
 }
 
+@media screen and (min-width: 2500px) {
+  .formNewsletter {
+    .containerForm {
+      width: 37.3581%;
+
+      h3 {
+        font-size: 36px;
+        line-height: 42px;
+      }
+
+      .containerInputNewsletter {
+        input {
+          font-size: 28px;
+          line-height: 33px;
+
+          &::placeholder {
+            font-size: 28px;
+            line-height: 33px;
+          }
+        }
+
+        button {
+          font-size: 24px;
+          line-height: 28px;
+        }
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 1024px) {
   .formNewsletter {
     padding: 16px;

src/pages/Home.tsx

@@ -30,7 +30,7 @@ function Home() {
       {pageYPosition > 140 && (
         <div className={styles.floatElementsFooter}>
           <div className={styles.whatsappIcon}>
-            <a href="/">
+            <a href="http://api.whatsapp.com/send?1=pt_BR&phone=5582999976243">
               <img src="/assets/icons/whatsapp-icon.svg" alt="WhatsApp" />
             </a>
           </div>