feat: adiciona header 2500px

src/components/header-menu/header-menu.module.scss

@@ -4,28 +4,33 @@
   width: 100%;
   background-color: #000000;
   height: 44px;
-  gap: 55px;
-}
 
-.headerMenuSpan {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 16px;
-  text-transform: uppercase;
-  color: white;
-  text-decoration: none;
-}
+  @media (min-width: 280px) and (max-width: 1024px) {
+    display: none;
+  }
 
-.headerMenuSpan1 {
-  margin-left: 100px;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 16px;
-  text-transform: uppercase;
-  color: white;
-  text-decoration: none;
+  @media (min-width: 2500px) {
+    height: 61px;
+  }
+  .headerMenuContainer {
+    display: flex;
+    margin-left: 100px;
+    gap: 55px;
+
+    & a {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 16px;
+      text-transform: uppercase;
+      color: white;
+      text-decoration: none;
+
+      @media (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
 }

src/components/header-menu/header-menu.tsx

@@ -2,15 +2,11 @@ import style from "./header-menu.module.scss";
 export function HeaderMenu() {
   return (
     <div className={style.headerMenu}>
-      <a href="/cursos" className={style.headerMenuSpan1}>
-        CURSOS
-      </a>
-      <a href="/saiba-mais" className={style.headerMenuSpan}>
-        SAIBA MAIS
-      </a>
-      <a href="/institucionais" className={style.headerMenuSpan}>
-        INSTITUCIONAIS
-      </a>
+      <div className={style.headerMenuContainer}>
+        <a href="/cursos">CURSOS</a>
+        <a href="/saiba-mais">SAIBA MAIS</a>
+        <a href="/institucionais">INSTITUCIONAIS</a>
+      </div>
     </div>
   );
 }

src/components/header/header.module.scss

@@ -6,56 +6,92 @@
   background-color: black;
   width: 100%;
   height: 76px;
-}
-
-.headerMainContainer {
-  width: 2500px;
-  max-width: 100%;
-}
-
-.headerContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 100px 0 100px;
-}
-
-.headerSearch {
-  display: flex;
-  align-items: center;
-}
-
-.searchIcon {
-  position: relative;
-  right: 34px;
-}
-
-.headerSearchPlaceholder {
   box-sizing: border-box;
-  padding-left: 16px;
-  width: 264px;
-  height: 32px;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  border: 2px solid #f2f2f2;
-  border-radius: 5px;
-  color: #c6c6c6;
-}
+  @media (min-width: 280px) and (max-width: 1024px) {
+    display: none;
+  }
+  @media (min-width: 2500px) {
+    height: 101px;
+  }
 
-.headerSafebuy {
-  display: flex;
-  align-items: center;
-  /* margin-right: 100px; */
-  gap: 55px;
-}
+  .headerMainContainer {
+    width: 100%;
+    max-width: 100%;
 
-.safeBuySpan {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  color: #ffffff;
+    .headerContainer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 100px 0 100px;
+
+      .headerLogoContainer img {
+        @media (min-width: 2500px) {
+          width: 265.62px;
+          height: 50.5px;
+        }
+      }
+
+      .headerSearch {
+        display: flex;
+        align-items: center;
+
+        & input {
+          box-sizing: border-box;
+          padding-left: 16px;
+          width: 264px;
+          height: 32px;
+          font-family: "Roboto";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          border: 2px solid #f2f2f2;
+          border-radius: 5px;
+          color: #c6c6c6;
+
+          @media (min-width: 2500px) {
+            width: 516px;
+            height: 57px;
+            font-size: 28px;
+          }
+        }
+
+        & img {
+          position: relative;
+          right: 34px;
+
+          @media (min-width: 2500px) {
+            width: 35px;
+            height: 35px;
+            right: 55px;
+          }
+        }
+      }
+    }
+
+    .headerSafebuy {
+      display: flex;
+      align-items: center;
+      gap: 55px;
+
+      & span {
+        font-family: "Roboto";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: #ffffff;
+
+        @media (min-width: 2500px) {
+          font-size: 28px;
+        }
+      }
+
+      & img {
+        @media (min-width: 2500px) {
+          width: 55px;
+          height: 55px;
+        }
+      }
+    }
+  }
 }

src/components/header/header.tsx

@@ -8,19 +8,15 @@ export function Header() {
     <header className={style.header}>
       <div className={style.headerMainContainer}>
         <div className={style.headerContainer}>
-          <div className={style.headerLogo}>
+          <div className={style.headerLogoContainer}>
             <img src={logoM3} alt="" />
           </div>
           <div className={style.headerSearch}>
-            <input
-              type="text"
-              placeholder="Buscar..."
-              className={style.headerSearchPlaceholder}
-            />
+            <input type="text" placeholder="Buscar..." />
             <img className={style.searchIcon} src={searchIcon} alt="" />
           </div>
           <div className={style.headerSafebuy}>
-            <span className={style.safeBuySpan}>ENTRAR</span>
+            <span>ENTRAR</span>
             <img src={cartBuy} alt="" />
           </div>
         </div>

src/components/info-agencia/info-agencia.tsx

@@ -1,4 +1,5 @@
 import style from "./info-agencia.module.scss";
+
 import facebook from "./assets/facebook.png";
 import instagram from "./assets/instagram.png";
 import twitter from "./assets/twitter.png";