feat(footer-bottom): Adiciona parte de baixo do footer

src/components/button/Button.tsx

@@ -7,7 +7,11 @@ interface ButtonProps {
 }
 
 const Button = (props: ButtonProps) => {
-  return <button className={styles["button"]}>{props.text}</button>;
+  return (
+    <button type="submit" className={styles["button"]}>
+      {props.text}
+    </button>
+  );
 };
 
 export default Button;

src/components/footer/Footer.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import FooterBottom from "./footer-bottom/footer-bottom";
 import FooterTop from "./footer-top/footerTop";
 
 import styles from "./footer.module.scss";
@@ -7,12 +8,9 @@ import Newsletter from "./newsletter/Newsletter";
 const Footer = () => {
   return (
     <footer className={styles["page-footer"]}>
-      <section className={styles["page-footer__newsletter"]}>
       <Newsletter />
-      </section>
-      <section>
       <FooterTop />
-      </section>
+      <FooterBottom />
     </footer>
   );
 };

src/components/footer/footer-bottom/assets/M3.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="31" viewBox="0 0 55 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.0509 10.5038C31.193 9.36605 30.1154 8.41986 28.8848 7.72371C27.6543 7.02756 26.2968 6.59626 24.8963 6.45646C23.4959 6.31666 22.0822 6.47133 20.7426 6.91091C19.4031 7.35049 18.1662 8.06564 17.1083 9.01217L16.1944 8.30363C9.91571 3.79137 1.12377 7.62306 0.301235 15.3517C0.0510173 19.0751 -0.0130404 22.8091 0.109311 26.5391C0.0891261 27.0178 0.1656 27.4956 0.333985 27.9428C0.502371 28.3901 0.759074 28.7972 1.08816 29.1391C1.41725 29.4809 1.8117 29.75 2.24702 29.9299C2.68235 30.1097 3.14926 30.1963 3.61878 30.1844C4.07828 30.1823 4.53264 30.0856 4.95456 29.8999C5.37647 29.7142 5.75722 29.4434 6.07393 29.1038C6.39065 28.7641 6.63678 28.3627 6.79754 27.9236C6.9583 27.4845 7.03038 27.0167 7.00943 26.5485C7.00943 23.8635 7.00943 21.1785 7.00943 18.4842C7.00204 17.6854 7.05705 16.8874 7.17394 16.0975C7.32135 15.2891 7.76335 14.5677 8.41104 14.0782C9.05873 13.5887 9.86408 13.3675 10.6651 13.4592C11.4482 13.5194 12.1828 13.8689 12.7313 14.4421C13.2798 15.0154 13.6045 15.773 13.6445 16.573C13.6902 17.5612 13.6445 18.5494 13.6445 19.5377C13.6445 21.943 13.6445 24.3483 13.6445 26.7536C13.6351 27.4512 13.8385 28.1346 14.2266 28.7091C14.6146 29.2837 15.1681 29.721 15.8105 29.9606C18.141 30.9488 20.5172 29.2148 20.5629 26.4832C20.5629 23.3041 20.5629 20.125 20.6543 16.9459C20.6851 16.1774 20.9153 15.431 21.3215 14.783C21.7082 14.2116 22.2686 13.786 22.9162 13.572C23.5637 13.358 24.2623 13.3675 24.904 13.599C25.6279 13.806 26.2608 14.2589 26.6979 14.8828C27.135 15.5067 27.3501 16.2642 27.3077 17.0298C27.3077 20.2462 27.3077 23.4626 27.3077 26.679C27.3077 27.1405 27.3968 27.5976 27.5699 28.024C27.7431 28.4504 27.9969 28.8379 28.3168 29.1643C28.6368 29.4906 29.0166 29.7495 29.4346 29.9262C29.8526 30.1028 30.3007 30.1937 30.7532 30.1937C31.2056 30.1937 31.6537 30.1028 32.0717 29.9262C32.4897 29.7495 32.8695 29.4906 33.1895 29.1643C33.5094 28.8379 33.7632 28.4504 33.9364 28.024C34.1095 27.5976 34.1986 27.1405 34.1986 26.679C34.1986 23.388 34.1986 20.153 34.1986 16.8154C34.2049 14.524 33.4476 12.2985 32.0509 10.5038Z" fill="white"/>
+<path d="M49.315 12.3683L48.2275 11.9115C49.3059 11.0538 50.3295 10.3173 51.2434 9.47821C52.0554 8.82607 52.7563 8.04174 53.318 7.15682C54.9631 4.02434 52.6417 0.379101 48.9586 0.295195C45.5588 0.248581 42.1682 0.248581 38.7684 0.248581C38.3519 0.219225 37.9341 0.280017 37.5423 0.426971C37.1505 0.573925 36.7936 0.803718 36.495 1.10128C36.1964 1.39883 35.9629 1.75743 35.8097 2.15354C35.6565 2.54965 35.5872 2.97433 35.6062 3.39971C35.5655 3.83297 35.6176 4.27008 35.759 4.68075C35.9004 5.09141 36.1276 5.4658 36.4249 5.77797C36.7223 6.09014 37.0826 6.33263 37.4809 6.48862C37.8793 6.64461 38.3061 6.71037 38.7318 6.68135C40.3952 6.68135 42.0585 6.68135 43.7218 6.68135C44.0051 6.77458 44.2976 6.77458 44.846 6.77458C42.5886 8.63915 40.5048 10.4105 38.4485 12.1632C37.1233 13.2819 36.7212 14.5032 37.1873 15.8923C37.4349 16.578 37.8962 17.1618 38.5004 17.5542C39.1047 17.9466 39.8185 18.1259 40.5322 18.0646C42.2961 18.0646 44.0691 18.0646 45.833 18.0646C46.2286 17.9899 46.6354 18.0051 47.0246 18.1088C47.4138 18.2125 47.7759 18.4024 48.0851 18.6648C48.3944 18.9273 48.6432 19.256 48.814 19.6275C48.9847 19.9991 49.0732 20.4044 49.0732 20.8148C49.0732 21.2252 48.9847 21.6305 48.814 22.0021C48.6432 22.3736 48.3944 22.7023 48.0851 22.9648C47.7759 23.2272 47.4138 23.4171 47.0246 23.5208C46.6354 23.6245 46.2286 23.6397 45.833 23.565C43.5482 23.565 41.2634 23.565 38.9786 23.565C38.1776 23.6092 37.4238 23.9649 36.8721 24.5588C36.3205 25.1528 36.013 25.9399 36.013 26.7581C36.013 27.5763 36.3205 28.3634 36.8721 28.9574C37.4238 29.5514 38.1776 29.907 38.9786 29.9512C41.3639 29.9512 43.7584 29.9512 46.1437 29.9512C48.2391 29.897 50.2525 29.1097 51.8465 27.7213C53.4406 26.3328 54.5183 24.4277 54.8991 22.3251C55.2027 20.2666 54.8165 18.1638 53.8032 16.3569C52.7898 14.55 51.2085 13.1447 49.315 12.3683Z" fill="white"/>
+</svg>

src/components/footer/footer-bottom/assets/Vtex.svg

@@ -0,0 +1,7 @@
+<svg width="86" height="31" viewBox="0 0 86 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M61.688 11.474H58.6746V21.7206C58.6746 21.9124 58.5087 22.0768 58.3152 22.0768H55.9929C55.7994 22.0768 55.6335 21.9124 55.6335 21.7206V11.474H52.5924C52.5095 11.474 52.3989 11.4466 52.3436 11.3918C52.2883 11.337 52.233 11.2548 52.233 11.1453V9.33703C52.233 9.25484 52.2607 9.14525 52.3436 9.09046C52.3989 9.03566 52.5095 8.98087 52.5924 9.00826H61.688C61.8815 9.00826 62.0474 9.14525 62.0474 9.33703V11.1453C62.0474 11.337 61.8815 11.474 61.688 11.474Z" fill="white"/>
+<path d="M71.3915 21.9948C70.2027 22.1592 68.9863 22.2414 67.7975 22.214C65.5029 22.214 63.4847 21.6387 63.4847 18.4332V12.5975C63.4847 9.39207 65.5306 8.84412 67.8252 8.84412C69.014 8.81672 70.2027 8.89891 71.3915 9.0633C71.6403 9.0907 71.7509 9.20028 71.7509 9.41946V11.0633C71.7509 11.2551 71.585 11.4195 71.3915 11.4195H67.6593C66.8299 11.4195 66.5258 11.6934 66.5258 12.6249V14.214H71.2533C71.4468 14.214 71.6127 14.3784 71.6127 14.5702V16.2414C71.6127 16.4332 71.4468 16.5976 71.2533 16.5976H66.5258V18.4606C66.5258 19.3647 66.8299 19.666 67.6593 19.666H71.3915C71.585 19.666 71.7509 19.8304 71.7509 20.0222V21.666C71.7509 21.8578 71.6403 21.9674 71.3915 21.9948Z" fill="white"/>
+<path d="M84.7725 22.0764H81.9526C81.759 22.1038 81.5655 21.9942 81.4826 21.8025L79.0221 17.9668L76.8104 21.7203C76.6998 21.9394 76.5616 22.0764 76.368 22.0764H73.7417C73.6864 22.0764 73.6034 22.0764 73.5481 22.0216C73.4929 21.9668 73.4652 21.9121 73.4652 21.8299C73.4652 21.7751 73.4929 21.7477 73.4929 21.7203L77.3357 15.3641L73.4376 9.33672C73.4099 9.30932 73.4099 9.25452 73.4099 9.22713C73.4099 9.09014 73.5481 8.98055 73.6864 9.00795H76.5892C76.7827 9.00795 76.921 9.17233 77.0316 9.33672L79.2985 12.8984L81.5102 9.33672C81.5932 9.14494 81.759 9.03535 81.9526 9.00795H84.579C84.7172 9.00795 84.8554 9.09014 84.8554 9.22713C84.8554 9.25452 84.8278 9.30932 84.8278 9.33672L80.9573 15.4189L84.9936 21.7203C85.0213 21.7751 85.0489 21.8299 85.0489 21.8847C85.0213 21.9942 84.9107 22.0764 84.7725 22.0764Z" fill="white"/>
+<path d="M48.0031 9.03577C47.8649 9.03577 47.7543 9.11796 47.7266 9.25494L45.1555 18.707C45.1279 18.8988 45.0726 18.981 44.9067 18.981C44.7409 18.981 44.6856 18.8988 44.6579 18.707L42.0868 9.25494C42.0592 9.11796 41.9486 9.03577 41.8104 9.03577H39.2669C39.184 9.03577 39.101 9.06316 39.0458 9.14536C38.9905 9.20015 38.9628 9.28234 38.9905 9.36453C38.9905 9.36453 42.1421 20.2138 42.1698 20.3234C42.5845 21.6111 43.6074 22.2412 44.9067 22.2412C46.1508 22.296 47.2843 21.5015 47.6437 20.3234C47.699 20.1864 50.7677 9.36453 50.7677 9.36453C50.7954 9.28234 50.7677 9.20015 50.7124 9.14536C50.6571 9.09056 50.5742 9.03577 50.4912 9.03577H48.0031Z" fill="white"/>
+<path d="M33.6271 0.241211H7.16977C6.20215 0.241211 5.31748 0.761759 4.84749 1.55628C4.34986 2.3782 4.32222 3.3919 4.76455 4.21381L7.41858 9.20012H2.60816C1.99994 9.20012 1.41937 9.50148 1.08762 10.022C0.755866 10.5426 0.755866 11.2001 1.03233 11.7481L9.54733 27.6933C9.85144 28.2686 10.4597 28.6248 11.0955 28.6248C11.7314 28.6248 12.3396 28.2686 12.6437 27.6933L14.966 23.3645L17.8688 28.8166C18.3388 29.6933 19.2788 30.2412 20.274 30.2412C21.2693 30.2412 22.2093 29.6933 22.6792 28.8166L35.9494 4.07683C36.3917 3.25491 36.3641 2.26861 35.8664 1.50148C35.4241 0.706964 34.5394 0.241211 33.6271 0.241211ZM21.7946 10.6796L15.9889 21.4741C15.7954 21.8576 15.4083 22.0768 14.966 22.0768C14.5236 22.0768 14.1366 21.8303 13.9431 21.4741L8.22032 10.7892C8.05444 10.4604 8.05444 10.0768 8.24796 9.74806C8.44149 9.41929 8.80089 9.22751 9.16029 9.22751H20.8822C21.2416 9.22751 21.5734 9.3919 21.7393 9.69327C21.9604 9.99464 21.9604 10.3782 21.7946 10.6796Z" fill="white"/>
+</svg>

src/components/footer/footer-bottom/assets/whatsapp 1.svg

@@ -0,0 +1,11 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3751_658)">
+<path d="M33.0083 0H32.9917C14.7964 0 0 14.8005 0 33C0 40.2188 2.3265 46.9095 6.28237 52.3421L2.16975 64.6016L14.8541 60.5468C20.0723 64.0035 26.2969 66 33.0083 66C51.2036 66 66 51.1954 66 33C66 14.8046 51.2036 0 33.0083 0Z" fill="#4CAF50"/>
+<path d="M52.21 46.6001C51.4139 48.8483 48.2542 50.7128 45.7338 51.2573C44.0095 51.6244 41.7573 51.9173 34.1755 48.774C24.4777 44.7563 18.2324 34.9016 17.7457 34.2623C17.2795 33.6229 13.8269 29.0441 13.8269 24.3086C13.8269 19.5731 16.2318 17.2673 17.2012 16.2773C17.9973 15.4646 19.3132 15.0934 20.5754 15.0934C20.9838 15.0934 21.3509 15.114 21.6809 15.1305C22.6503 15.1718 23.137 15.2295 23.7764 16.7599C24.5725 18.678 26.5113 23.4135 26.7423 23.9003C26.9774 24.387 27.2125 25.047 26.8825 25.6864C26.5732 26.3464 26.3009 26.6393 25.8142 27.2003C25.3274 27.7613 24.8654 28.1903 24.3787 28.7925C23.9332 29.3164 23.4299 29.8774 23.9909 30.8468C24.5519 31.7955 26.4907 34.9594 29.3452 37.5004C33.0288 40.7798 36.0153 41.8275 37.0837 42.273C37.8798 42.603 38.8285 42.5246 39.4102 41.9059C40.1485 41.1098 41.0602 39.7898 41.9883 38.4904C42.6483 37.5581 43.4815 37.4426 44.356 37.7726C45.247 38.082 49.9619 40.4126 50.9313 40.8953C51.9007 41.382 52.54 41.613 52.7752 42.0214C53.0062 42.4298 53.0062 44.3479 52.21 46.6001Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3751_658">
+<rect width="66" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/footer/footer-bottom/autores/autores.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import styles from "../../footer.module.scss";
+import Img from "../img-footer/img";
+import Text from "../text/Text";
+import Vtex from "../assets/Vtex.svg";
+import M3 from "../assets/M3.svg";
+
+const Autores = () => {
+  return (
+    <section className={styles["page-footer__footer-autores"]}>
+      <Text text="Powered by" />
+      <Img className={styles["autores-img"]} img={Vtex} text="vtex" />
+      <Text text="Developed by" />
+      <Img className={styles["autores-img"]} img={M3} text="M3" />
+    </section>
+  );
+};
+
+export default Autores;

src/components/footer/footer-bottom/footer-bottom.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import styles from "../footer.module.scss";
+import Autores from "./autores/autores";
+import Text from "./text/Text";
+import Imgs from "./pagamento/imgs";
+
+const FooterBottom = () => {
+  return (
+    <div className={styles["page-footer__footer-bottom"]}>
+      <div className={styles["page-footer__footer-bottom-container"]}>
+        <section className={styles["page-footer__container-footer-text"]}>
+          <Text
+            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor"
+          />
+        </section>
+        <Imgs />
+        <Autores />
+      </div>
+    </div>
+  );
+};
+
+export default FooterBottom;

src/components/footer/footer-bottom/img-footer/img.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import styles from "../../../footer.module.scss";
+
+interface ButtonProps {
+  img: string;
+  text: string;
+  className: string;
+}
+
+const Img = (props: ButtonProps) => {
+  return <img className={props.className} src={props.img} alt={props.text} />;
+};
+
+export default Img;

src/components/footer/footer-bottom/pagamento/imgs.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import styles from "../../footer.module.scss";
+import Img from "../img-footer/img";
+import Master from "../assets/Master.png";
+import Visa from "../assets/Visa.png";
+import Diners from "../assets/Diners.png";
+import Elo from "../assets/Elo.png";
+import Hiper from "../assets/Hiper.png";
+import Pagseguro from "../assets/Pagseguro.png";
+import Boleto from "../assets/Boleto.png";
+import vtex from "../assets/vtex-pci-200.png";
+
+const imgs = () => {
+  return (
+    <section className={styles["page-footer__imgs"]}>
+      <Img className={styles["img"]} img={Master} text="Cartão master" />
+      <Img className={styles["img"]} img={Visa} text="Cartão visa" />
+      <Img
+        className={styles["img"]}
+        img={Diners}
+        text="Cartão american diners"
+      />
+      <Img className={styles["img"]} img={Elo} text="Cartão elo" />
+      <Img className={styles["img"]} img={Hiper} text="Cartão hiper" />
+      <Img className={styles["img"]} img={Pagseguro} text="Pague Seguro" />
+      <Img className={styles["img"]} img={Boleto} text="Pagamento boleto" />
+      <strong></strong>
+      <Img className={styles["img-grande"]} img={vtex} text="Vtex" />
+    </section>
+  );
+};
+
+export default imgs;

src/components/footer/footer-bottom/text/Text.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "../../footer.module.scss";
+
+interface TextProps {
+  text: string;
+}
+
+const Text = (props: TextProps) => {
+  return (
+    <strong className={styles["page-footer__footer-text"]}>{props.text}</strong>
+  );
+};
+
+export default Text;

src/components/footer/footer-top/Duvidas/Duvidas.tsx

@@ -1,13 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "../../../link/Link";
 
 import styles from "../../footer.module.scss";
+import ButtonFooterMobile from "../button/button";
 import Title from "../title/Title";
 
 const Duvidas = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleMenuFooter = () => {
+    setIsOpen(!isOpen);
+  };
   return (
     <section className={styles["page-footer__container"]}>
+      <div onClick={handleMenuFooter} className={styles["container-title"]}>
         <Title className={styles["title"]} text="DÚVIDAS" />
+        <ButtonFooterMobile
+          className={
+            isOpen ? styles["link-mobile-active"] : styles["link-mobile"]
+          }
+        />
+      </div>
+      <div className={isOpen ? styles["active"] : styles["container-link"]}>
         <Link className={styles["link"]} link="/" text="Entrega" />
         <Link className={styles["link"]} link="/" text="Pagamento" />
         <Link className={styles["link"]} link="/" text="Trocas e Devoluções" />
@@ -16,6 +30,7 @@ const Duvidas = () => {
           link="/"
           text="Dúvidas Frequentes"
         />
+      </div>
     </section>
   );
 };

src/components/footer/footer-top/Fale-conosco/FaleConosco.tsx

@@ -1,29 +1,44 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "../../../link/Link";
 
 import styles from "../../footer.module.scss";
+import ButtonFooterMobile from "../button/button";
 import Title from "../title/Title";
 
 const FaleConosco = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleMenuFooter = () => {
+    setIsOpen(!isOpen);
+  };
   return (
     <section className={styles["page-footer__container"]}>
+      <div className={styles["container-title"]} onClick={handleMenuFooter}>
         <Title className={styles["title"]} text="FALE CONOSCO" />
+        <ButtonFooterMobile
+          className={
+            isOpen ? styles["link-mobile-active"] : styles["link-mobile"]
+          }
+        />
+      </div>
+      <div className={isOpen ? styles["active"] : styles["container-link"]}>
         <Link
           className={styles["link-negrito"]}
           link="/"
           text="Atendimento Ao Consumidor"
         />
+        <Link className={styles["link"]} link="/" text="(11) 4159-9504" />
         <Link
-        className={styles["link"]}
+          className={styles["link-negrito"]}
           link="/"
-        text="Política de Privacidade"
+          text="Atendimento Online"
         />
-      <Link className={styles["link"]} link="/" text="Segurança" />
         <Link
           className={styles["link-underline"]}
           link="/"
-        text="Seja um Revendedor"
+          text="(11) 99433-8825"
         />
+      </div>
     </section>
   );
 };

src/components/footer/footer-top/Institucional/Institucional.tsx

@@ -1,13 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "../../../link/Link";
 
 import styles from "../../footer.module.scss";
+import ButtonFooterMobile from "../button/button";
 import Title from "../title/Title";
 
 const Institucional = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleMenuFooter = () => {
+    setIsOpen(!isOpen);
+  };
   return (
     <section className={styles["page-footer__container"]}>
+      <div className={styles["container-title"]} onClick={handleMenuFooter}>
         <Title className={styles["title"]} text="INSTITUCIONAL" />
+        <ButtonFooterMobile
+          className={
+            isOpen ? styles["link-mobile-active"] : styles["link-mobile"]
+          }
+        />
+      </div>
+
+      <div className={isOpen ? styles["active"] : styles["container-link"]}>
         <Link className={styles["link"]} link="/" text="Quem Somos" />
         <Link
           className={styles["link"]}
@@ -20,6 +35,7 @@ const Institucional = () => {
           link="/"
           text="Seja um Revendedor"
         />
+      </div>
     </section>
   );
 };

src/components/footer/footer-top/Rede-social/RedeSociais.tsx

@@ -11,7 +11,7 @@ import Link from "../../../link/Link";
 
 const RedeSociais = () => {
   return (
-    <section className={styles["page-footer__rede-sociais"]}>
+    <div className={styles["page-footer__rede-sociais"]}>
       <div className={styles["page-footer__rede-sociais-icons"]}>
         <Icon img={facebook} href="/" text="icone facebook" />
         <Icon img={instagram} href="/" text="icone instagram" />
@@ -20,7 +20,7 @@ const RedeSociais = () => {
         <Icon img={linkedin} href="/" text="icone linkedin" />
       </div>
       <Link className={styles["link"]} link="/" text="www.loremipsum.com" />
-    </section>
+    </div>
   );
 };
 

src/components/footer/footer-top/button/button.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import styles from "../../footer.module.scss";
+
+interface ButtonProps {
+  className: string;
+}
+
+const ButtonFooterMobile = (props: ButtonProps) => {
+  return <a className={props.className}></a>;
+};
+
+export default ButtonFooterMobile;

src/components/footer/footer-top/footerTop.tsx

@@ -8,14 +8,14 @@ import RedeSociais from "./Rede-social/RedeSociais";
 
 const FooterTop = () => {
   return (
-    <div className={styles["page-footer__top"]}>
+    <section className={styles["page-footer__top"]}>
       <div className={styles["page-footer__top-container"]}>
         <Institucional />
         <Duvidas />
         <FaleConosco />
       </div>
       <RedeSociais />
-    </div>
+    </section>
   );
 };
 

src/components/footer/footer.module.scss

@@ -67,7 +67,7 @@
     &__top {
         padding: 50px 0;
         display: flex;
-        gap: 158px;
+        justify-content: space-between;
     }
 
     &__top-container {
@@ -86,7 +86,13 @@
         font-weight: 500;
         font-size: 14px;
         line-height: 16px;
-        color: $black-200;
+        color: $gray-200;
+    }
+
+    .container-link {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
     }
 
     .link,
@@ -95,7 +101,7 @@
         font-weight: 400;
         font-size: 12px;
         line-height: 14px;
-        color: $black-200;
+        color: $gray-200;
         text-decoration: none;
     }
 
@@ -129,10 +135,121 @@
         justify-content: center;
         width: 35px;
         height: 35px;
-        border: 2px solid $black-200;
+        border: 2px solid $gray-200;
         border-radius: 50%;
     }
 
+    &__footer-bottom {
+        width: 100%;
+        background: $black;
+        padding: 15px 0;
+        display: flex;
+        justify-content: center;
+    }
+
+    &__footer-bottom-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 84.4%;
+    }
+
+    &__imgs {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+
+        strong {
+            width: 1px;
+            background: $gray-900;
+            height: 24px;
+        }
+    }
+
+    .img {
+        width: 36px;
+        height: auto;
+    }
+
+    .img-grande {
+        width: 55px;
+        height: auto;
+    }
+
+    &__footer-autores {
+        display: flex;
+        align-items: center;
+        gap: 13px;
+    }
+
+    &__container-footer-text {
+        max-width: 234px;
+    }
+
+    &__footer-text {
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-transform: capitalize;
+        color: $white;
+
+    }
+
+    .autores-img {
+        height: 16px;
+    }
+
+    @media screen and (min-width: 2500px) {
+        &__newsletter {
+            padding: 16px 0;
+
+            &-title {
+                font-size: 36px;
+                line-height: 42px;
+            }
+
+            .input {
+                width: 668px;
+                height: 59px;
+                font-size: 28px;
+                line-height: 33px;
+            }
+
+            .button {
+                width: 246px;
+                height: 59px;
+                font-size: 24px;
+                line-height: 28px;
+            }
+        }
+
+        &__container {
+            width: 315px;
+        }
+
+        .title {
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        .link,
+        .link-underline,
+        .link-negrito {
+            font-size: 24px;
+            line-height: 28px;
+        }
+
+        .icon {
+            width: 70px;
+            height: 70px;
+
+            img {
+                width: 67.9%;
+            }
+        }
+    }
+
     @media screen and (max-width: 1024px) {
         &__newsletter {
             width: 100%;
@@ -162,5 +279,101 @@
                 line-height: 16px;
             }
         }
+
+        &__top {
+            width: 100%;
+            flex-direction: column;
+            gap: 12px;
+            padding: 24px 16px;
+        }
+
+        &__top-container {
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        &__container {
+            width: 100%;
+        }
+
+        .container-title {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .link-mobile {
+            &::after {
+                content: '+';
+                color: $gray-200;
+                font-size: 14px;
+            }
+        }
+
+        .link-mobile-active {
+            &::after {
+                content: '-';
+                color: $gray-200;
+                font-size: 14px;
+            }
+        }
+
+        .active {
+            display: flex;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            margin-bottom: 12px;
+        }
+
+        .container-link {
+            display: none;
+        }
+
+        &__rede-sociais {
+            .link {
+                display: none;
+            }
+        }
+
+        &__footer-bottom {
+            padding: 16px;
+            justify-content: flex-start;
+        }
+
+        &__footer-bottom-container {
+            flex-direction: column;
+            gap: 15px;
+            align-items: flex-start;
+            width: 100%;
+        }
+
+
+        &__imgs {
+            order: 1;
+        }
+
+        &__container-footer-text {
+            order: 2;
+        }
+
+        &__footer-autores {
+            order: 3;
+        }
+
+    }
+
+    @media screen and (max-width: 375px) {
+        .img {
+            width: 30px;
+            height: auto;
+        }
+
+        .img-grande {
+            width: 45px;
+            height: auto;
+        }
     }
 }

src/components/footer/newsletter/Newsletter.tsx

@@ -6,15 +6,17 @@ import Input from "./input/Input";
 
 const Newsletter = () => {
   return (
+    <section className={styles["page-footer__newsletter"]}>
       <div className={styles["page-footer__newsletter-container"]}>
         <h3 className={styles["page-footer__newsletter-title"]}>
           ASSINE NOSSA NEWSLETTER
         </h3>
-      <section className={styles["page-footer__newsletter-section"]}>
+        <form className={styles["page-footer__newsletter-section"]}>
           <Input placeholder="E-mail" />
           <Button text="ENVIAR" />
-      </section>
+        </form>
       </div>
+    </section>
   );
 };