From 80c613a2964e860e701b4175eef8e0128cc11b37 Mon Sep 17 00:00:00 2001
From: carloswinter <caduwinteer@gmail.com>
Date: Thu, 19 Jan 2023 23:29:38 -0300
Subject: [PATCH] feat(footer): adiciona logica em react e estilos em scss ao
 footer

---
 src/components/Footer/BottomFooter.tsx        |  45 ++
 src/components/Footer/ContactFooter.tsx       |  30 ++
 src/components/Footer/FooterMain.modules.scss | 468 ++++++++++++++++++
 src/components/Footer/FooterMain.tsx          |  21 +
 src/components/Footer/MenuFolder.tsx          |  26 +
 src/components/Footer/MenuListFooter.tsx      |  58 +++
 src/components/Footer/Newsletter.tsx          |  16 +
 src/components/Footer/SocialMedia.tsx         |  25 +
 src/components/Footer/wpp.tsx                 |  15 +
 9 files changed, 704 insertions(+)
 create mode 100644 src/components/Footer/BottomFooter.tsx
 create mode 100644 src/components/Footer/ContactFooter.tsx
 create mode 100644 src/components/Footer/FooterMain.modules.scss
 create mode 100644 src/components/Footer/FooterMain.tsx
 create mode 100644 src/components/Footer/MenuFolder.tsx
 create mode 100644 src/components/Footer/MenuListFooter.tsx
 create mode 100644 src/components/Footer/Newsletter.tsx
 create mode 100644 src/components/Footer/SocialMedia.tsx
 create mode 100644 src/components/Footer/wpp.tsx

diff --git a/src/components/Footer/BottomFooter.tsx b/src/components/Footer/BottomFooter.tsx
new file mode 100644
index 0000000..b53f679
--- /dev/null
+++ b/src/components/Footer/BottomFooter.tsx
@@ -0,0 +1,45 @@
+import Vtex from "../assets/imgs/SVGs/Vtex-logo.svg";
+import M3 from "../assets/imgs/SVGs/M3-logo.svg";
+
+import Master from "../assets/imgs/SVGs/credit-cards/Master.svg";
+import Visa from "../assets/imgs/SVGs/credit-cards/Visa.svg";
+import Diners from "../assets/imgs/SVGs/credit-cards/Diners.svg";
+import Elo from "../assets/imgs/SVGs/credit-cards/Elo.svg";
+import Hiper from "../assets/imgs/SVGs/credit-cards/Hiper.svg";
+import Pagseguro from "../assets/imgs/SVGs/credit-cards/Pagseguro.svg";
+import Boleto from "../assets/imgs/SVGs/credit-cards/Boleto.svg";
+import vtex from "../assets/imgs/SVGs/credit-cards/vtex-pci-200.svg";
+
+export const BottomFooter = () => {
+  return (
+    <>
+      <div className="Bottom_Wrapper">
+        <span className="corporateName">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor
+        </span>
+
+        <div className="Payment_methods">
+          <img className="carts_icons" src={Master} alt="Master-icon" />
+          <img className="carts_icons" src={Visa} alt="Visa-icon" />
+          <img className="carts_icons" src={Diners} alt="Diners-icon" />
+          <img className="carts_icons" src={Elo} alt="Elo-icon" />
+          <img className="carts_icons" src={Hiper} alt="Hiper-icon" />
+          <img className="carts_icons" src={Pagseguro} alt="Pagseguro-icon" />
+          <img className="carts_icons" src={Boleto} alt="Boleto-icon" />
+
+          <span className="div_icons"> </span>
+          <img className="vtex_icon" src={vtex} alt="vtex-icon" />
+        </div>
+
+        <div className="Authors">
+          <span className="Powered_by"> Powered by </span>
+          <img className="vtex_logo" src={Vtex} alt="Vtex-logo" />
+
+          <span className="Developed_by"> Developed by </span>
+          <img className="m3_logo" src={M3} alt="M3-logo" />
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Footer/ContactFooter.tsx b/src/components/Footer/ContactFooter.tsx
new file mode 100644
index 0000000..d16755b
--- /dev/null
+++ b/src/components/Footer/ContactFooter.tsx
@@ -0,0 +1,30 @@
+import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
+
+export const Contact = () => {
+  return (
+    <>
+      <div className="Contact_wrapper">
+        <div className="Menu_folder">
+          {window.innerWidth > 1024 ? (
+            <>
+              <h5>INSTITUCIONAL</h5>
+              <MenuList1 />
+            </>
+          ) : (
+            ""
+          )}
+          <h5> INSTITUCIONAL </h5>
+          <MenuList1 />
+        </div>
+        <div className="Menu_folder">
+          <h5> DÚVIDAS </h5>
+          <MenuList2 />
+        </div>
+        <div className="Menu_folder">
+          <h5> FALE CONOSCO </h5>
+          <MenuList3 />
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Footer/FooterMain.modules.scss b/src/components/Footer/FooterMain.modules.scss
new file mode 100644
index 0000000..f6d6faf
--- /dev/null
+++ b/src/components/Footer/FooterMain.modules.scss
@@ -0,0 +1,468 @@
+@import "../Variables.scss";
+
+.Footer_container {
+  display: flex;
+  flex-direction: column;
+
+  .Newsletter_Container {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid $color-black;
+    border-bottom: 1px solid $color-black;
+    padding: 16px;
+
+    @media (min-width: 1025px) {
+      padding: 16px 31.485%;
+    }
+
+    .Newsletter_wrapper {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+
+      .News_title {
+        font-family: $fontFamily;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.05em;
+        font-variant: small-caps;
+        color: $color-gray-700;
+        margin: 0 0 16px 0;
+        text-transform: uppercase;
+
+        @media (min-width: 2500px) {
+          font-weight: 500;
+          font-size: 36px;
+          line-height: 42px;
+        }
+
+        @media (min-width: 1025px) {
+          margin: 0 0 8px 0;
+        }
+
+        @media (max-width: 1024px) {
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+        }
+      }
+
+      .Submite_wrapper {
+        display: flex;
+
+        @media (max-width: 1024px) {
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        @media (min-width: 1025px) {
+          width: 100%;
+        }
+
+        .Input_News {
+          padding: 13px 16px;
+          border: 1px solid $color-white-500;
+          border-radius: 4px;
+          font-family: $fontFamily;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          color: $color-gray;
+
+          @media (max-width: 375px) {
+            height: 14px;
+          }
+
+          @media (max-width: 1024px) {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            padding: 17px 16px;
+          }
+
+          @media (min-width: 2500px) {
+            height: 31px !important;
+            width: 668px !important;
+            font-weight: 400;
+            font-size: 28px;
+            line-height: 33px;
+          }
+
+          @media (min-width: 1025px) {
+            height: 14px;
+            margin-right: 8px;
+            width: 24.376%;
+            min-width: 306px;
+          }
+
+          &::placeholder {
+            color: $color-gray;
+          }
+        }
+        .Button_News {
+          padding: 14px 20px;
+          background: $color-black;
+          box-shadow: 0px 4px 4px rgba($color-black, 0.25);
+          border-radius: 4px;
+          border: none;
+          font-family: $fontFamily;
+          font-style: normal;
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 14px;
+          color: $color-white;
+
+          @media (max-width: 1024px) {
+            padding: 17px 0;
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 16px;
+            letter-spacing: 0.05em;
+          }
+
+          @media (min-width: 2500px) {
+            width: 246px !important;
+            height: 59px !important;
+            font-weight: 700;
+            font-size: 24px;
+            line-height: 28px;
+          }
+
+          @media (min-width: 1025px) {
+            height: 42px;
+            width: 9.844%;
+            min-width: 126px;
+          }
+        }
+      }
+    }
+  }
+  .Footer_top {
+    display: flex;
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      padding: 24px 16px;
+    }
+
+    @media (min-width: 1025px) {
+      position: relative;
+      padding: 50px 0;
+    }
+
+    .Contact_wrapper {
+      display: flex;
+      gap: 121px;
+      width: 55.235%;
+      margin: 0 12.11% 0 100px;
+
+      @media (min-width: 2500px) {
+        gap: 293px;
+        margin: 0 15.16% 0 100px;
+        width: 61.24%;
+      }
+
+      .Menu_folder {
+        display: flex;
+        flex-direction: column;
+        min-width: 20.51%;
+
+        @media (min-width: 2500px) {
+          min-width: 20.575%;
+        }
+
+        h5 {
+          margin-top: 0;
+          font-family: $fontFamily;
+          font-style: normal;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          color: $color-gray-700;
+
+          @media (min-width: 2500px) {
+            font-weight: 500;
+            font-size: 28px;
+            line-height: 33px;
+          }
+        }
+
+        .links_footer {
+          text-decoration: none;
+          font-family: $fontFamily;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 14px;
+          text-transform: capitalize;
+          color: $color-gray-700;
+          margin-bottom: 12px;
+          width: 155px;
+
+          @media (min-width: 2500px) {
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 28px;
+          }
+        }
+
+        .last {
+          text-decoration-line: underline;
+        }
+      }
+    }
+  }
+
+  .SocialMedia {
+    .Img_wrappers {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 12px;
+
+      img {
+        @media (min-width: 2500px) {
+          width: 70px;
+          height: 70px;
+        }
+      }
+    }
+    .Site {
+      font-family: $fontFamily;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      color: $color-gray-700;
+
+      @media (min-width: 2500px) {
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+
+    .Wpp-Icon {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      @media (min-width: 1025px) {
+        position: absolute;
+        right: 16px;
+        top: 50px;
+      }
+
+      @media (min-width: 2500px) {
+        width: 66px;
+        height: 66px;
+        top: 542px;
+        position: fixed;
+      }
+
+      .button_wrapper {
+        position: relative;
+        img {
+          @media (min-width: 2500px) {
+            width: 70px;
+            height: 70px;
+          }
+        }
+      }
+      .button_wrapper::after {
+        content: " ";
+        width: 13px;
+        height: 7px;
+        top: 33%;
+        right: 31%;
+        position: absolute;
+        background-image: url("../assets/imgs/SVGs/Vector.svg");
+
+        @media (min-width: 2500px) {
+          background-repeat: no-repeat;
+          height: 24.14px;
+          width: 24.14px;
+          background-size: contain;
+          top: 37%;
+        }
+      }
+
+      .button {
+        display: flex;
+        background-image: url("../assets/imgs/SVGs/Vector.svg");
+      }
+    }
+  }
+
+  .Bottom_Wrapper {
+    justify-content: space-between;
+    display: flex;
+    padding: 15px;
+    background: $color-black;
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      gap: 15px;
+      padding: 15px 16px;
+    }
+
+    @media (min-width: 1025px) {
+      padding: 15px 100px;
+    }
+
+    .corporateName {
+      display: flex;
+      align-self: center;
+      width: 236px;
+      height: 24px;
+      font-family: $fontFamily;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      color: $color-white;
+      text-transform: capitalize;
+
+      @media (max-width: 1024px) {
+        align-self: baseline;
+      }
+
+      @media (min-width: 2500px) {
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 23px;
+        width: 471px;
+        height: 47px;
+      }
+    }
+
+    .Payment_methods {
+      align-items: center;
+      display: flex;
+      gap: 12px;
+
+      @media (max-width: 1024px) {
+        order: -1;
+      }
+
+      .carts_icons {
+        width: 36px;
+        height: 20px;
+
+        @media (max-width: 375px) {
+          width: 30px;
+        }
+
+        @media (min-width: 2500px) {
+          width: 70px;
+          height: 39.27px;
+        }
+      }
+
+      .div_icons {
+        content: "";
+        border: 1px solid $color-gray;
+        transform: rotate(90deg);
+        width: 24px;
+        height: 0px;
+
+        @media (max-width: 1024px) {
+          width: 22px;
+        }
+      }
+
+      .vtex_icon {
+        width: 54.61px;
+        height: 34px;
+
+        @media (max-width: 375px) {
+          width: 45px;
+          height: 28px;
+        }
+
+        @media (min-width: 2500px) {
+          width: 106px;
+          height: 66px;
+        }
+      }
+    }
+
+    .Authors {
+      display: flex;
+      gap: 13px;
+
+      @media (min-width: 2500px) {
+        width: 406px;
+      }
+
+      .Powered_by {
+        display: flex;
+        align-items: center;
+        width: 53px;
+        font-family: $fontFamily;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-transform: capitalize;
+        color: $color-white;
+
+        @media (min-width: 2500px) {
+          font-weight: 400;
+          font-size: 20px;
+          line-height: 23px;
+          width: 110px;
+        }
+      }
+
+      .Developed_by {
+        display: flex;
+        align-items: center;
+        width: 61px;
+        font-family: $fontFamily;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-transform: capitalize;
+        color: $color-white;
+
+        @media (min-width: 2500px) {
+          font-weight: 400;
+          font-size: 20px;
+          line-height: 23px;
+          width: 125px;
+        }
+      }
+
+      .vtex_logo {
+        display: flex;
+        align-self: center;
+        width: 44.92px;
+        height: 16px;
+
+        @media (min-width: 2500px) {
+          font-weight: 400;
+          font-size: 20px;
+          line-height: 23px;
+          width: 84.22px;
+          height: 30px;
+        }
+      }
+
+      .m3_logo {
+        display: flex;
+        align-self: center;
+        width: 28.66px;
+        height: 15.65px;
+
+        @media (min-width: 2500px) {
+          width: 54.95px;
+          height: 30px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/Footer/FooterMain.tsx b/src/components/Footer/FooterMain.tsx
new file mode 100644
index 0000000..a79699c
--- /dev/null
+++ b/src/components/Footer/FooterMain.tsx
@@ -0,0 +1,21 @@
+import { Newsletter } from "./Newsletter";
+import { Contact } from "./ContactFooter";
+import { SocialMedia } from "./SocialMedia";
+import { BottomFooter } from "./BottomFooter";
+
+import "./FooterMain.modules.scss";
+
+export const MainFooter = () => {
+  return (
+    <>
+      <section className="Footer_container">
+        <Newsletter />
+        <div className="Footer_top">
+          <Contact />
+          <SocialMedia />
+        </div>
+        <BottomFooter />
+      </section>
+    </>
+  );
+};
diff --git a/src/components/Footer/MenuFolder.tsx b/src/components/Footer/MenuFolder.tsx
new file mode 100644
index 0000000..95ea799
--- /dev/null
+++ b/src/components/Footer/MenuFolder.tsx
@@ -0,0 +1,26 @@
+import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
+
+// export const MenuFolder = () => {
+//   return (
+//     <>
+//       <div className="Menu_folder">
+//         <h5> INSTITUCIONAL </h5>
+//         <div>
+//           <MenuList1 />
+//         </div>
+//       </div>
+//       <div className="Menu_folder">
+//         <h5> DÚVIDAS </h5>
+//         <div>
+//           <MenuList2 />
+//         </div>
+//       </div>
+//       <div className="Menu_folder">
+//         <h5> FALE CONOSCO </h5>
+//         <div>
+//           <MenuList3 />
+//         </div>
+//       </div>
+//     </>
+//   );
+// };
diff --git a/src/components/Footer/MenuListFooter.tsx b/src/components/Footer/MenuListFooter.tsx
new file mode 100644
index 0000000..48e5a4a
--- /dev/null
+++ b/src/components/Footer/MenuListFooter.tsx
@@ -0,0 +1,58 @@
+import { NavLink } from "react-router-dom";
+
+export const MenuList1 = () => {
+  return (
+    <>
+      <NavLink className={"links_footer"} to={"/"}>
+        Quem Somos
+      </NavLink>
+      <NavLink className={"links_footer"} to={"/"}>
+        Política de Privacidade
+      </NavLink>
+      <NavLink className={"links_footer"} to={"/"}>
+        Segurança
+      </NavLink>
+      <NavLink className={"links_footer last"} to={"/"}>
+        Seja um Revendedor
+      </NavLink>
+    </>
+  );
+};
+
+export const MenuList2 = () => {
+  return (
+    <>
+      <NavLink className={"links_footer"} to={"/"}>
+        Entrega
+      </NavLink>
+      <NavLink className={"links_footer"} to={"/"}>
+        Pagamento
+      </NavLink>
+      <NavLink className={"links_footer"} to={"/"}>
+        Trocas e Devoluções
+      </NavLink>
+      <NavLink className={"links_footer last"} to={"/"}>
+        Dúvidas Frequentes
+      </NavLink>
+    </>
+  );
+};
+
+export const MenuList3 = () => {
+  return (
+    <>
+      <NavLink className={"links_footer"} to={"/"}>
+        Atendimento ao Consumidor
+      </NavLink>
+      <NavLink className={"links_footer"} to={"/"}>
+        (11) 4159-9504
+      </NavLink>
+      <NavLink className={"links_footer"} to={"/"}>
+        Atendimento Online
+      </NavLink>
+      <NavLink className={"links_footer last"} to={"/"}>
+        (11) 99433-8825
+      </NavLink>
+    </>
+  );
+};
diff --git a/src/components/Footer/Newsletter.tsx b/src/components/Footer/Newsletter.tsx
new file mode 100644
index 0000000..a635f75
--- /dev/null
+++ b/src/components/Footer/Newsletter.tsx
@@ -0,0 +1,16 @@
+export const Newsletter = () => {
+  return (
+    <>
+      <section className="Newsletter_Container">
+        <div className="Newsletter_wrapper">
+          <h4 className="News_title"> Assine nossa Newsletter </h4>
+
+          <div className="Submite_wrapper">
+            <input className="Input_News" type="text" placeholder="E-mail" />
+            <button className="Button_News"> ENVIAR </button>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
diff --git a/src/components/Footer/SocialMedia.tsx b/src/components/Footer/SocialMedia.tsx
new file mode 100644
index 0000000..4b88291
--- /dev/null
+++ b/src/components/Footer/SocialMedia.tsx
@@ -0,0 +1,25 @@
+import Facebook from "../assets/imgs/SVGs/Facebook.svg";
+import Instagram from "../assets/imgs/SVGs/Instagram.svg";
+import Twitter from "../assets/imgs/SVGs/Twitter.svg";
+import YouTube from "../assets/imgs/SVGs/YouTube.svg";
+import Linkedin from "../assets/imgs/SVGs/Linkedin.svg";
+
+import { WppIcon } from "./wpp";
+
+export const SocialMedia = () => {
+  return (
+    <>
+      <div className="SocialMedia">
+        <div className="Img_wrappers">
+          <img src={Facebook} alt="Facebook-logo" />
+          <img src={Instagram} alt="Instagram-logo" />
+          <img src={Twitter} alt="Twitter-logo" />
+          <img src={YouTube} alt="YouTube-logo" />
+          <img src={Linkedin} alt="Linkedin-logo" />
+        </div>
+        <span className="Site"> www.loremipsum.com </span>
+        <div>{window.innerWidth > 1024 ? <WppIcon /> : ""}</div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Footer/wpp.tsx b/src/components/Footer/wpp.tsx
new file mode 100644
index 0000000..0a23738
--- /dev/null
+++ b/src/components/Footer/wpp.tsx
@@ -0,0 +1,15 @@
+import Wpp from "../assets/imgs/SVGs/whatsapp.svg";
+import Ellipse from "../assets/imgs/SVGs/Ellipse.svg";
+
+export const WppIcon = () => {
+  return (
+    <>
+      <div className="Wpp-Icon">
+        <img src={Wpp} alt="Wpp-logo" />
+        <div className="button_wrapper">
+          <img className="Button_wpp" src={Ellipse} alt="Ellipse-logo" />
+        </div>
+      </div>
+    </>
+  );
+};
-- 
2.34.1