feat(responsividade): adiciona respondividade do footer bottom em telas menores

src/components/button/Button.tsx

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

src/components/footer/Footer.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import FooterBottom from "./footer-bottom/footer-bottom";
+import { Newsletter } from "./newsletter/Newsletter";
-import FooterTop from "./footer-top/footerTop";
+import { FooterTop } from "./footer-top/footerTop";
+import { FooterBottom } from "./footer-bottom/footer-bottom";
+import { IconFixed } from "./icon-fixed/icon-fixed";
 
 import styles from "./footer.module.scss";
-import IconFixed from "./icon-fixed/icon-fixed";
-import Newsletter from "./newsletter/Newsletter";
 
 const Footer = () => {
   return (
@@ -17,4 +17,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export { Footer };

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

@@ -1,10 +1,11 @@
 import React from "react";
+import { Img } from "../img-footer/img";
+import { Text } from "../../text/Text";
+
+import Vtex from "../assets/svg/Vtex.svg";
+import M3 from "../assets/svg/M3.svg";
 
 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 (
@@ -20,4 +21,4 @@ const Autores = () => {
   );
 };
 
-export default Autores;
+export { Autores };

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

@@ -1,10 +1,9 @@
 import React from "react";
+import { Autores } from "./autores/autores";
+import { Text } from "../text/Text";
+import { Imgs } from "./pagamento/imgs";
 
 import styles from "../footer.module.scss";
-import Autores from "./autores/autores";
-import Text from "../text/Text";
-import Imgs from "./pagamento/imgs";
-
 const FooterBottom = () => {
   return (
     <section className={styles["page-footer__footer-bottom"]}>
@@ -23,4 +22,4 @@ const FooterBottom = () => {
   );
 };
 
-export default FooterBottom;
+export { FooterBottom };

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

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

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

@@ -1,17 +1,17 @@
 import React from "react";
 
 import styles from "../../footer.module.scss";
-import Img from "../img-footer/img";
+import { Img } from "../img-footer/img";
-import Master from "../assets/Master.png";
+import Master from "../assets/img/Master.png";
-import Visa from "../assets/Visa.png";
+import Visa from "../assets/img/Visa.png";
-import Diners from "../assets/Diners.png";
+import Diners from "../assets/img/Diners.png";
-import Elo from "../assets/Elo.png";
+import Elo from "../assets/img/Elo.png";
-import Hiper from "../assets/Hiper.png";
+import Hiper from "../assets/img/Hiper.png";
-import Pagseguro from "../assets/Pagseguro.png";
+import Pagseguro from "../assets/img/Pagseguro.png";
-import Boleto from "../assets/Boleto.png";
+import Boleto from "../assets/img/Boleto.png";
-import vtex from "../assets/vtex-pci-200.png";
+import vtex from "../assets/img/vtex-pci-200.png";
 
-const imgs = () => {
+const Imgs = () => {
   return (
     <section className={styles["page-footer__imgs"]}>
       <Img className={styles["img"]} img={Master} text="Cartão master" />
@@ -31,4 +31,4 @@ const imgs = () => {
   );
 };
 
-export default imgs;
+export { Imgs };

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import Link from "../../../link/Link";
+import { Link } from "../../../link/Link";
+import { ButtonFooterMobile } from "../button/button";
+import { Title } from "../title/Title";
 
 import styles from "../../footer.module.scss";
-import ButtonFooterMobile from "../button/button";
-import Title from "../title/Title";
 
 const Duvidas = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -35,4 +35,4 @@ const Duvidas = () => {
   );
 };
 
-export default Duvidas;
+export { Duvidas };

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

@@ -1,11 +1,10 @@
 import React, { useState } from "react";
-import Link from "../../../link/Link";
+import { Link } from "../../../link/Link";
+import { Text } from "../../text/Text";
+import { ButtonFooterMobile } from "../button/button";
+import { Title } from "../title/Title";
 
 import styles from "../../footer.module.scss";
-import Text from "../../text/Text";
-import ButtonFooterMobile from "../button/button";
-import Title from "../title/Title";
-
 const FaleConosco = () => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -39,4 +38,4 @@ const FaleConosco = () => {
   );
 };
 
-export default FaleConosco;
+export { FaleConosco };

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

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
-import Link from "../../../link/Link";
+import { Link } from "../../../link/Link";
+import { ButtonFooterMobile } from "../button/button";
+import { Title } from "../title/Title";
 
 import styles from "../../footer.module.scss";
-import ButtonFooterMobile from "../button/button";
-import Title from "../title/Title";
-
 const Institucional = () => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -40,4 +39,4 @@ const Institucional = () => {
   );
 };
 
-export default Institucional;
+export { Institucional };

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

@@ -9,11 +9,12 @@ interface IconProps {
 }
 
 const Icon = (props: IconProps) => {
+  const { img, text, href } = props;
   return (
-    <a href={props.href} className={styles["icon"]}>
+    <a href={href} target="_blank" className={styles["icon"]} rel="noreferrer">
-      <img src={props.img} alt={props.text} />
+      <img src={img} alt={text} />
     </a>
   );
 };
 
-export default Icon;
+export { Icon };

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

@@ -1,27 +1,44 @@
 import React from "react";
+import { Link } from "../../../link/Link";
+import { Icon } from "./Icon/Icon";
 
-import styles from "../../footer.module.scss";
-import Icon from "./Icon/Icon";
 import facebook from "./assets/icon-facebook.svg";
 import instagram from "./assets/icon-instagram.svg";
 import twitter from "./assets/icon-twitter.svg";
 import youtube from "./assets/icon-youtube.svg";
 import linkedin from "./assets/icon-linkedin.svg";
-import Link from "../../../link/Link";
+
+import styles from "../../footer.module.scss";
 
 const RedeSociais = () => {
   return (
     <div className={styles["page-footer__rede-sociais"]}>
       <div className={styles["page-footer__rede-sociais-icons"]}>
-        <Icon img={facebook} href="/" text="icone facebook" />
+        <Icon
-        <Icon img={instagram} href="/" text="icone instagram" />
+          img={facebook}
-        <Icon img={twitter} href="/" text="icone facebook" />
+          href="https://pt-br.facebook.com/digitalm3/"
-        <Icon img={youtube} href="/" text="icone youtube" />
+          text="icone facebook"
-        <Icon img={linkedin} href="/" text="icone linkedin" />
+        />
+        <Icon
+          img={instagram}
+          href="https://www.instagram.com/m3.ecommerce/"
+          text="icone instagram"
+        />
+        <Icon img={twitter} href="https://twitter.com/" text="icone facebook" />
+        <Icon
+          img={youtube}
+          href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA"
+          text="icone youtube"
+        />
+        <Icon
+          img={linkedin}
+          href="https://www.linkedin.com/company/11412599/"
+          text="icone linkedin"
+        />
       </div>
       <Link className={styles["link"]} link="/" text="www.loremipsum.com" />
     </div>
   );
 };
 
-export default RedeSociais;
+export { RedeSociais };

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

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

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

@@ -1,11 +1,10 @@
 import React from "react";
+import { Duvidas } from "./Duvidas/Duvidas";
+import { FaleConosco } from "./Fale-conosco/FaleConosco";
+import { Institucional } from "./Institucional/Institucional";
+import { RedeSociais } from "./Rede-social/RedeSociais";
 
 import styles from "../footer.module.scss";
-import Duvidas from "./Duvidas/Duvidas";
-import FaleConosco from "./Fale-conosco/FaleConosco";
-import Institucional from "./Institucional/Institucional";
-import RedeSociais from "./Rede-social/RedeSociais";
-
 const FooterTop = () => {
   return (
     <section className={styles["page-footer__top"]}>
@@ -19,4 +18,4 @@ const FooterTop = () => {
   );
 };
 
-export default FooterTop;
+export { FooterTop };

src/components/footer/footer-top/title/Title.tsx

@@ -4,7 +4,8 @@ export interface TitleProps {
 }
 
 const Title = (props: TitleProps) => {
-  return <h3 className={props.className}>{props.text}</h3>;
+  const { text, className } = props;
+  return <h3 className={className}>{text}</h3>;
 };
 
-export default Title;
+export { Title };

src/components/footer/footer.module.scss

@@ -163,15 +163,16 @@
     &__footer-bottom {
         width: 100%;
         background: $black;
-        padding: 15px 16px;
+        padding: 15px 0;
         display: flex;
+        justify-content: center;
     }
 
     &__footer-bottom-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        width: 100%;
+        width: 84.37%;
     }
 
     &__imgs {
@@ -437,11 +438,25 @@
             display: none;
         }
 
+        &__footer-bottom {
+            padding: 15px 16px;
+        }
+
         &__footer-bottom-container {
             flex-direction: column;
             gap: 15px;
             align-items: flex-start;
-            max-width: 100%;
+            width: 100%;
+        }
+
+        .img {
+            width: 3.64%;
+            min-width: 30px;
+        }
+
+        .img-grande {
+            width: 5.55%;
+            min-width: 45px;
         }
 
 
@@ -471,11 +486,13 @@
         .img {
             width: 8.75%;
             height: auto;
+            min-width: 20px;
         }
 
         .img-grande {
             width: 13.12%;
             height: auto;
+            min-width: 30px;
         }
 
         &__icon-fixed {

src/components/footer/icon-fixed/icon-fixed.tsx

@@ -1,4 +1,4 @@
-import LinkTop from "./link/Link";
+import { LinkTop } from "./link/Link";
 import Whatsapp from "./assets/whatsapp.svg";
 import Seta from "./assets/Seta.svg";
 
@@ -28,4 +28,4 @@ const IconFixed = () => {
   );
 };
 
-export default IconFixed;
+export { IconFixed };

src/components/footer/icon-fixed/link/Link.tsx

@@ -8,11 +8,12 @@ interface LinkProps {
 }
 
 const LinkTop = (props: LinkProps) => {
+  const { img, className, href, onClick } = props;
   return (
-    <a onClick={props.onClick} href={props.href} className={props.className}>
+    <a onClick={onClick} href={href} className={className}>
-      <img src={props.img} alt="" />
+      <img src={img} alt="" />
     </a>
   );
 };
 
-export default LinkTop;
+export { LinkTop };

src/components/footer/newsletter/Newsletter.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
-import Button from "../../button/Button";
+import { Button } from "../../button/Button";
 import { Formik, Form, Field, ErrorMessage } from "formik";
-import styles from "../footer.module.scss";
 import { NewsletterSchema } from "./schema/NewsletterSchema";
 
+import styles from "../footer.module.scss";
+
 interface FormikValues {
   email: string;
 }
@@ -50,4 +51,4 @@ const Newsletter = () => {
   );
 };
 
-export default Newsletter;
+export { Newsletter };

src/components/footer/text/Text.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import styles from "../../footer.module.scss";
 
 interface TextProps {
   text: string;
@@ -7,7 +6,8 @@ interface TextProps {
 }
 
 const Text = (props: TextProps) => {
-  return <p className={props.className}>{props.text}</p>;
+  const { text, className } = props;
+  return <p className={className}>{text}</p>;
 };
 
-export default Text;
+export { Text };

src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import Footer from "../components/footer/Footer";
+import { Footer } from "../components/footer/Footer";
 import { Header } from "../components/Header/Header";
 import { Main } from "../components/Main/Main";