feat: Adiciona newsLetter responsivo

src/components/header/header.module.scss

@@ -58,6 +58,7 @@
         & img {
           position: relative;
           right: 34px;
+          top: 2px;
 
           @media (min-width: 2500px) {
             width: 35px;

src/components/header/header.tsx

@@ -13,7 +13,10 @@ export function Header() {
           </div>
           <div className={style.headerSearch}>
             <input type="text" placeholder="Buscar..." />
-            <img className={style.searchIcon} src={searchIcon} alt="" />
+            <a href="/">
+              {" "}
+              <img className={style.socialIcons} src={searchIcon} alt=""></img>
+            </a>
           </div>
           <div className={style.headerSafebuy}>
             <span>ENTRAR</span>

src/components/newsletter/newsletter.module.css

@@ -1,55 +0,0 @@
-.newsLetterContainer {
-  height: 102px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  border-style: solid;
-  border-width: 1px 0;
-}
-
-.newsLetterTitle {
-  margin: 0 0 8px 0;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 18px;
-  letter-spacing: 0.05em;
-  color: #303030;
-}
-
-.newsLetterPlaceholder {
-  width: 340px;
-  height: 42px;
-  background: #ffffff;
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-  padding-left: 16px;
-  box-sizing: border-box;
-}
-
-.newsLetterButton {
-  width: 126px;
-  height: 42px;
-  background: #000000;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 4px;
-  color: #ffffff;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 700;
-  font-size: 12px;
-  letter-spacing: 0.05em;
-  margin-left: 8px;
-  box-sizing: border-box;
-}
-
-/* .newsLetterButton :hover {
-  background-color: #ffffff;
-  cursor: pointer;
-}
-
-.newsLetterButton :active {
-  background-color: aqua;
-}
- */

src/components/newsletter/newsletter.module.scss

@@ -0,0 +1,108 @@
+.newsLetter {
+  height: 102px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  border-style: solid;
+  border-width: 1px 0;
+  box-sizing: border-box;
+
+  @media (min-width: 280px) and (max-width: 1024px) {
+    height: 182px;
+  }
+
+  @media (min-width: 2500px) {
+    height: 141px;
+  }
+
+  .newsLetterContainer button:active {
+    filter: brightness(80%);
+    /* & :active {
+      background-color: #ffffff;
+    } */
+  }
+  .newsLetterContainer {
+    @media (min-width: 280px) and (max-width: 1024px) {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+    & h2 {
+      margin: 0 0 8px 0;
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 18px;
+      letter-spacing: 0.05em;
+      color: #303030;
+
+      @media (min-width: 2500px) {
+        font-size: 36px;
+      }
+
+      @media (min-width: 280px) and (max-width: 1024px) {
+        font-size: 14px;
+        margin: 0;
+      }
+    }
+
+    & input {
+      width: 340px;
+      height: 42px;
+      background: #ffffff;
+      border: 1px solid #e5e5e5;
+      border-radius: 4px;
+      padding-left: 16px;
+      box-sizing: border-box;
+      font-size: 14px;
+      color: #c4c4c4;
+      font-weight: 400;
+
+      @media (min-width: 2500px) {
+        width: 668px;
+        height: 59px;
+        font-size: 28px;
+        color: #c4c4c4;
+      }
+
+      @media (min-width: 280px) and (max-width: 1024px) {
+        width: 100%;
+        height: 50px;
+      }
+    }
+
+    & button {
+      width: 126px;
+      height: 42px;
+      background: #000000;
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+      border-radius: 4px;
+      color: #ffffff;
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 700;
+      font-size: 12px;
+      letter-spacing: 0.05em;
+      margin-left: 8px;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      @media (min-width: 2500px) {
+        width: 246px;
+        height: 69px;
+        font-size: 24px;
+      }
+      @media (min-width: 280px) and (max-width: 1024px) {
+        width: 100%;
+        margin: 0;
+        height: 50px;
+        font-size: 14px;
+      }
+    }
+  }
+}

src/components/newsletter/newsletter.tsx

@@ -1,15 +1,11 @@
-import style from "./newsletter.module.css";
+import style from "./newsletter.module.scss";
 export function Newsletter() {
   return (
-    <div className={style.newsLetterContainer}>
-      <div>
-        <h2 className={style.newsLetterTitle}>ASSINE NOSSA NEWSLETTER</h2>
-        <input
-          className={style.newsLetterPlaceholder}
-          type="text"
-          placeholder="E-mail"
-        />
-        <button className={style.newsLetterButton}>ENVIAR</button>
+    <div className={style.newsLetter}>
+      <div className={style.newsLetterContainer}>
+        <h2>ASSINE NOSSA NEWSLETTER</h2>
+        <input type="text" placeholder="E-mail" />
+        <button>ENVIAR</button>
       </div>
     </div>
   );