From 7dce3bc1f05131b45e42920eeca11830d62d4986 Mon Sep 17 00:00:00 2001
From: Izabela Balizardo <izah_rb@hotmail.com>
Date: Mon, 16 Jan 2023 23:27:24 -0300
Subject: [PATCH] feat: Adiciona footer

---
 src/components/footer/Footer.module.css | 323 ++++++++++++++++++++++++
 src/components/footer/Footer.tsx        | 203 +++++++++++++++
 2 files changed, 526 insertions(+)
 create mode 100644 src/components/footer/Footer.module.css
 create mode 100644 src/components/footer/Footer.tsx

diff --git a/src/components/footer/Footer.module.css b/src/components/footer/Footer.module.css
new file mode 100644
index 0000000..cbb4acf
--- /dev/null
+++ b/src/components/footer/Footer.module.css
@@ -0,0 +1,323 @@
+* {
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    box-sizing: border-box;
+    
+}
+
+.footer-container {
+    max-width: 100%;
+}
+
+.footer-list-abrir {
+    display: none;
+}
+
+
+.footer-bottom {
+    max-width: 100%;
+    height: 65px;
+    display: flex;
+    background: #000000;
+    margin-top: 39px;
+    justify-content: space-between;
+}
+
+.footer-wrapper {
+    display: flex;
+    justify-content: center;
+    gap: 158px;
+    padding-top: 25px;
+    
+}
+
+.footer-flex {
+    display: flex;
+    gap: 60px;
+    text-align: initial;
+}
+
+.footer-list,
+.footer-mobile-list {
+    list-style: none;
+    
+}
+
+.footer-list li,
+.footer-mobile-list li {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
+    color: #303030;
+    padding-bottom: 12px;
+}
+
+.footer-list-title,
+.footer-mobile-title {
+    display: flex;
+    flex-direction: column;
+}
+
+.footer-title {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    color: #303030;
+    padding-bottom: 10px;
+    text-transform: uppercase;
+}
+
+.footer-list-icon img {
+    padding-right: 10px;
+}
+
+.footer-list-icon p
+.fotter-mobile-list-icon {
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #303030;
+    text-align: left;
+    padding-top: 10px;
+}
+
+.footer-list-underline
+.footer-mobile-list-underline {
+    text-decoration-line: underline;
+}
+
+.footer-description-desktop {
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: capitalize;
+    color: #FFFFFF;
+    max-width: 234px;
+    max-height: 24px;
+    text-align: left;
+    margin: 22px 172px 19px 32px;
+}
+
+
+.footer-cards {
+    display: flex;
+    align-items: center;
+    gap: 13px;
+    padding: 22px 0 22px;
+}
+
+.footer-vtex {
+    border-left: 1px solid #C4C4C4;
+    padding-left: 10px;
+}
+
+.footer-by {
+    display: flex;
+    align-items: center;
+    padding-left: 189px;
+    padding-right: 32px;
+    
+}
+
+.footer-by-description {
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    color: #FFFFFF;
+    padding-right: 8px;
+}
+
+.footer-flex-list {
+    display: flex;
+    gap: 121px;
+    margin-right: 100px;
+}
+
+.footer-by img {
+    padding-right: 15px
+}
+
+.footer-bottom-wrapper {
+    display: flex;
+}
+
+.footer-description-desktop,
+.fotter-description-mobile {
+    
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: capitalize;
+    color: #FFFFFF;
+}
+
+@media screen and (max-width: 1260px) {
+    .footer-description-desktop {
+        margin-right: 12px;
+    }
+}
+
+
+@media screen and (max-width: 1117px) {
+    .footer-by {
+        padding-left: 12px;
+        padding-right: 0;
+    }
+}
+
+@media screen and (min-width: 961px) {
+    .footer-description-mobile {
+        display: none;
+    }
+    
+}
+
+@media screen and (max-width: 960px) {
+    .footer-flex-list {
+        gap: 30px;
+    }
+
+    .footer-wrapper {
+        gap: 35px;
+    }
+
+    .footer-description-desktop {
+        display: none;
+    }
+
+    .footer-description-mobile {
+        font-size: 10px;
+    }
+
+    .footer-cards {
+        gap: 6px;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .footer-mobile-flex-list {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .footer-wrapper {
+        flex-direction: column;
+        gap: 0;
+    }
+
+    .footer-flex {
+        padding-left: 27px;
+        justify-content: space-between;
+        padding-right: 23px;
+        align-items: center;
+
+    }
+
+    .footer-mobile-flex h4 {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        color: #303030;
+    }
+
+    .footer-wrapper p {
+        display: none;
+    }
+
+    .footer-list-icon {
+        justify-content: flex-start;
+        display: flex;
+        padding-left: 24px;
+    }
+
+    .footer-cards {
+        padding: 0;
+    }
+
+    .footer-list-abrir {
+        display: flex;
+        flex-direction: column;
+        gap: 35px;
+    }
+
+    .footer-flex-list {
+        display: flex;
+        flex-direction: column;
+        display: flex;
+        gap: 24px;
+        padding-bottom: 24px;
+    }
+
+    .footer-mobile-title {
+        font-family: 'Roboto';
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        color: #303030;
+        text-transform: none;
+        padding-bottom: 24px;
+    }
+
+    .footer-bottom-wrapper {
+        display: flex;
+        flex-direction: column-reverse;
+        
+    }
+
+    .footer-bottom {
+        flex-direction: column;
+        height: 124px;
+        padding: 16px 16px 16px 17px;
+    }
+
+    .footer-description-mobile {
+        margin: 0;
+        max-width: 380px;
+        height: 12px;
+        line-height: 12px;
+        padding-top: 12px;
+        font-family: 'Roboto';
+        font-weight: 400;
+        font-size: 10px;
+        text-transform: capitalize;
+        text-align: initial;
+        color: #FFFFFF;
+
+
+    }
+
+    .footer-by {
+        padding-top: 24px;
+        margin-bottom: 16px;
+        padding-left: 0;
+    }
+
+    .footer-flex-list {
+        display: none;
+    }
+
+    .footer-mobile {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: baseline;
+    }
+    
+    
+}
+
+
+    
+
+    
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
new file mode 100644
index 0000000..7d7b406
--- /dev/null
+++ b/src/components/footer/Footer.tsx
@@ -0,0 +1,203 @@
+import React, { useState } from "react";
+
+import styles from "./Footer.module.css";
+
+import Abrir from "../assets/img/abrir-icon.png";
+import Face from "../assets/img/face-icon.png";
+import Insta from "../assets/img/insta-icon.png";
+import Twitter from "../assets/img/twitter-icon.png";
+import Youtube from "../assets/img/youtube-icon.png";
+import Linkedin from "../assets/img/in-icon.png";
+import Master from "../assets/img/master-icon.png";
+import Visa from "../assets/img/visa-icon.png";
+import American from "../assets/img/american-icon.png";
+import Elo from "../assets/img/elo-icon.png";
+import Hiper from "../assets/img/hiper-icon.png";
+import Paypal from "../assets/img/paypal-icon.png";
+import Boleto from "../assets/img/boleto-icon.png";
+import Vtex from "../assets/img/vtex-icon.png";
+import M3 from "../assets/img/footer-m3-icon.png";
+import Vtex_logo from "../assets/img/footer-vtex-icon.png";
+
+const Footer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  return (
+    <div className={styles["footer-container"]}>
+      <div className={styles["footer-wrapper"]}>
+        <div className={styles["footer-flex"]}>
+          <nav className={styles["footer-flex-list"]}>
+            <div className={styles["footer-list-title"]}>
+              <h4 className={styles["footer-title"]}>Institucional</h4>
+              <ul className={styles["footer-list"]}>
+                <li>Quem Somos</li>
+                <li>Política de Privacidade</li>
+                <li>Segurança</li>
+                <li className={styles["footer-list-underline"]}>
+                  Seja um Revendedor
+                </li>
+              </ul>
+            </div>
+            <div className={styles["footer-list-title"]}>
+              <h4 className={styles["footer-title"]}>Dúvidas</h4>
+              <ul className={styles["footer-list"]}>
+                <li>Entrega</li>
+                <li>Pagamento</li>
+                <li>Trocas e Devoluções</li>
+                <li>Dúvidas Frequentes</li>
+              </ul>
+            </div>
+            <div className={styles["footer-list-title"]}>
+              <h4 className={styles["footer-title"]}>Fale Conosco</h4>
+              <ul className={styles["footer-list"]}>
+                <li>Atendimento ao Consumidor</li>
+                <li>(11) 4159 9504</li>
+                <li>Atendimento Online</li>
+                <li>(11) 99433-8825</li>
+              </ul>
+            </div>
+          </nav>
+
+          <nav className={styles["footer-mobile-flex-list"]}>
+            <div className={styles["footer-mobile-list-flex"]}>
+              <div className={styles["footer-mobile-list-title"]}>
+                <h4
+                  className={styles["footer-mobile-title"]}
+                  onClick={handleToggle}
+                >
+                  Institucional
+                </h4>
+                {isOpen === true ? (
+                  <ul className={styles["footer-mobile-list"]}>
+                    <li>Quem Somos</li>
+                    <li>Política de Privacidade</li>
+                    <li>Segurança</li>
+                    <li className={styles["footer-mobile-list-underline"]}>
+                      Seja um Revendedor
+                    </li>
+                  </ul>
+                ) : null}
+              </div>
+            </div>
+
+            <div className={styles["footer-mobile-list-title"]}>
+              <h4
+                className={styles["footer-mobile-title"]}
+                onClick={handleToggle}
+              >
+                Dúvidas
+              </h4>
+              {isOpen === true ? (
+                <ul className={styles["footer-mobile-list"]}>
+                  <li>Entrega</li>
+                  <li>Pagamento</li>
+                  <li>Trocas e Devoluções</li>
+                  <li>Dúvidas Frequentes</li>
+                </ul>
+              ) : null}
+            </div>
+            <div className={styles["footer-mobile-list-title"]}>
+              <h4
+                className={styles["footer-mobile-title"]}
+                onClick={handleToggle}
+              >
+                Fale Conosco
+              </h4>
+              {isOpen === true ? (
+                <ul className={styles["footer-mobile-list"]}>
+                  <li>Atendimento ao Consumidor</li>
+                  <li>(11) 4159 9504</li>
+                  <li>Atendimento Online</li>
+                  <li>(11) 99433-8825</li>
+                </ul>
+              ) : null}
+            </div>
+          </nav>
+
+          <div className={styles["footer-list-abrir"]}>
+            <a href="/">
+              <img src={Abrir} alt="Abrir" />
+            </a>
+            <a href="/">
+              <img src={Abrir} alt="Abrir" />
+            </a>
+            <a href="/">
+              <img src={Abrir} alt="Abrir" />
+            </a>
+          </div>
+        </div>
+
+        <div className={styles["footer-list-icon"]}>
+          <a href="/">
+            <img src={Face} alt="Facebook" />
+          </a>
+          <a href="/">
+            <img src={Insta} alt="Instagram" />
+          </a>
+          <a href="/">
+            <img src={Twitter} alt="Twitter" />
+          </a>
+          <a href="/">
+            <img src={Youtube} alt="Youtube" />
+          </a>
+          <a href="/">
+            <img src={Linkedin} alt="Linkedin" />
+          </a>
+          <p>www.loremipsum.com</p>
+        </div>
+      </div>
+
+      <div className={styles["footer-bottom"]}>
+        <div className={styles["footer-bottom-wrapper"]}>
+          <div className={styles["footer-description"]}>
+            <p className={styles["footer-description-desktop"]}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor
+            </p>
+            <p className={styles["footer-description-mobile"]}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. .
+            </p>
+          </div>
+          <div className={styles["footer-cards"]}>
+            <a href="/">
+              <img src={Master} alt="Facebook" />
+            </a>
+            <a href="/">
+              <img src={Visa} alt="Visa" />
+            </a>
+            <a href="/">
+              <img src={American} alt="American" />
+            </a>
+            <a href="/">
+              <img src={Elo} alt="Elo" />
+            </a>
+            <a href="/">
+              <img src={Hiper} alt="Hiper" />
+            </a>
+            <a href="/">
+              <img src={Paypal} alt="PayPal" />
+            </a>
+            <a href="/">
+              <img src={Boleto} alt="Boleto" />
+            </a>
+            <a className={styles["footer-vtex"]} href="/">
+              <img src={Vtex} alt="Vtex" />
+            </a>
+          </div>
+        </div>
+
+        <div className={styles["footer-by"]}>
+          <p className={styles["footer-by-description"]}>Powered by</p>
+          <img src={Vtex_logo} alt="Vtex" />
+          <p className={styles["footer-by-description"]}>Developed by</p>
+          <img src={M3} alt="Logo M3" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;