From a0aaf4260024cbc6a6b48955d9aad83ee319c278 Mon Sep 17 00:00:00 2001
From: Eleonora Otz <nora_otz@hotmail.com>
Date: Wed, 4 Jan 2023 11:35:03 -0300
Subject: [PATCH] feat: Cria footer desktop

---
 src/components/footer/index.tsx         | 201 +++++++++++-
 src/components/footer/style.module.scss | 406 ++++++++++++++++++++++++
 src/pages/Institucional.tsx             |   3 +
 3 files changed, 606 insertions(+), 4 deletions(-)

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 438b9fe..a248415 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -1,7 +1,200 @@
 import React from "react";
 
-const Footer = () => {
-    return <div></div>
-} 
+import styles from "../footer/style.module.scss";
 
-export { Footer };
\ No newline at end of file
+// Social media icons
+
+import Facebook from "../../assets/svgs/facebook-icon.svg";
+import Instagram from "../../assets/svgs/instagram-icon.svg";
+import Twitter from "../../assets/svgs/twitter-icon.svg";
+import Youtube from "../../assets/svgs/youtube-icon.svg";
+import LinkedIn from "../../assets/svgs/linkedin-icon.svg";
+
+// Creditcard icons
+
+import MasterCard from "../../assets/svgs/master.svg";
+import Visa from "../../assets/svgs/visa.svg";
+import Amex from "../../assets/svgs/american-express.svg";
+import Elo from "../../assets/svgs/elo.svg";
+import Hipercard from "../../assets/svgs/hiper.svg";
+import PayPal from "../../assets/svgs/paypal.svg";
+import Boleto from "../../assets/svgs/boleto.svg";
+
+import PCIVtex from "../../assets/svgs/vtex-pci-200.svg";
+
+// Vtex e M3 logo
+
+import Vtex from "../../assets/svgs/vtex-logo.svg";
+import M3 from "../../assets/svgs/m3-logo.svg";
+
+const Footer = () => {
+  return (
+    <div>
+      <section className={styles["newsletter"]}>
+        <div className={styles["newsletter__wrapper"]}>
+          <h2 className={styles["newsletter__title"]}>
+            Assine nossa newsletter
+          </h2>
+          <input type="text" placeholder="E-mail" />
+          <button type="submit">Enviar</button>
+        </div>
+      </section>
+
+      <section className={styles["footer-top"]}>
+        <div className={styles["footer-top__menu-list"]}>
+          <div className={styles["menu"]}>
+            <h3>Institucional</h3>
+            <ul>
+              <li>
+                <a href="/">Quem Somos</a>
+              </li>
+              <li>
+                <a href="/">Política de Privacidade</a>
+              </li>
+              <li>
+                <a href="/">Segurança</a>
+              </li>
+              <li>
+                <a className={styles["line"]} href="/">
+                  Seja um Revendedor
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className={styles["menu"]}>
+            <h3>Dúvidas</h3>
+            <ul>
+              <li>
+                <a href="/">Entrega</a>
+              </li>
+              <li>
+                <a href="/">Pagamento</a>
+              </li>
+              <li>
+                <a href="/">Trocas e Devoluções</a>
+              </li>
+              <li>
+                <a className={styles["line"]} href="/">
+                  Dúvidas Frequentes
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className={styles["menu"]}>
+            <h3>Fale Conosco</h3>
+            <ul>
+              <li>
+                <p className={styles["atendimento"]}>
+                Atendimento ao Consumidor
+                </p>
+                </li>
+              <li>(11) 4159 9504</li>
+              <li>
+                <p className={styles["atendimento"]}>Atendimento Online</p>
+                </li>
+              <li>(11) 99433-8825</li>
+            </ul>
+          </div>
+
+          <div className={styles["social-media-icons"]}>
+            <ul>
+              <li>
+                <a href="/">
+                  <img src={Facebook} alt="Link para o Facebook" />
+                </a>
+              </li>
+
+              <li>
+                <a href="/">
+                  <img src={Instagram} alt="Link para o Instagram" />
+                </a>
+              </li>
+
+              <li>
+                <a href="/">
+                  <img src={Twitter} alt="Link para o Twitter" />
+                </a>
+              </li>
+
+              <li>
+                <a href="/">
+                  <img src={Youtube} alt="Link para o Youtube" />
+                </a>
+              </li>
+
+              <li>
+                <a href="/">
+                  <img src={LinkedIn} alt="Link para o LinkedIn" />
+                </a>
+              </li>
+            </ul>
+
+            <p>www.loremipsum.com</p>
+          </div>
+        </div>
+      </section>
+
+      <section className={styles["footer-bottom"]}>
+        <div className={styles["footer-bottom__wrapper"]}>
+            <div className={styles["address"]}>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor
+              </p>
+            </div>
+            <ul className={styles["stamps"]}>
+              <li className={styles["creditcard"]}>
+                <img src={MasterCard} alt="Mastercard" />
+              </li>
+              <li className={styles["creditcard"]}>
+                <img src={Visa} alt="Visa" />
+              </li>
+              <li className={styles["creditcard"]}>
+                <img src={Amex} alt="American Express" />
+              </li>
+              <li className={styles["creditcard"]}>
+                <img src={Elo} alt="Elo" />
+              </li>
+              <li className={styles["creditcard"]}>
+                <img src={Hipercard} alt="Hipercard" />
+              </li>
+              <li className={styles["creditcard"]}>
+                <img src={PayPal} alt="PayPal" />
+              </li>
+              <li className={styles["creditcard"]}>
+                <img src={Boleto} alt="Boleto" />
+              </li>
+              <li>
+                <span className={styles["stamps__divider"]}></span>
+              </li>
+              <li  className={styles["vtex"]} >
+                <img className={styles["vtex-pci"]} src={PCIVtex} alt="PCI VTEX" />
+              </li>
+            </ul>
+            <ul className={styles["developedBy"]}>
+              <li>
+                <div className={styles["by-vtex"]}>
+                  <a href="https://vtex.com.br-pt/">
+                    <span>Powered By</span>
+                  </a>
+                  <img className={styles["vtex-logo"]} src={Vtex} alt="VTEX" />
+                </div>
+              </li>
+              <li>
+                <div className={styles["by-m3"]}>
+                  <a href="https://m3ecommerce.com/">
+                    <span>Developed By</span>
+                  </a>
+                  <img className={styles["m3-logo"]} src={M3} alt="M3" />
+                </div>
+              </li>
+            </ul>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export { Footer };
diff --git a/src/components/footer/style.module.scss b/src/components/footer/style.module.scss
index e69de29..5ee4d05 100644
--- a/src/components/footer/style.module.scss
+++ b/src/components/footer/style.module.scss
@@ -0,0 +1,406 @@
+.newsletter {
+  width: 100%;
+  border-width: 1px 0px;
+  border-style: solid;
+  border-color: var(--black);
+  background: var(--white);
+  margin-top: 70px;
+
+  &__wrapper {
+    width: 37.032%;
+    margin: 16px auto;
+
+    @media (min-width: 2500px) {
+      width: 36.88%;
+    }
+
+    @media (max-width: 1024px) {
+      width: 96.88%;
+      margin: 16px;
+    }
+
+    @media (max-width: 599px) {
+      width: 91.6%;
+    }
+  }
+
+  &__title {
+    margin: 0 0 8px;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 21px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--dark-gray-100);
+
+    @media (min-width: 2500px) {
+      font-size: 36px;
+      line-height: 42px;
+    }
+
+    @media (max-width: 1024px) {
+      margin: 0 0 16px;
+      font-size: 14px;
+      line-height: 16px;
+    }
+  }
+
+  input {
+    width: 64.557%;
+    border: 1px solid var(--light-gray-400);
+    border-radius: 4px;
+    padding: 13px 16px;
+    color: var(--light-gray-500);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
+    &::placeholder {
+      color: var(--light-gray-500);
+    }
+
+    @media (min-width: 2500px) {
+      font-size: 28px;
+      line-height: 33px;
+    }
+
+    @media (max-width: 1024px) {
+      width: 96.88%;
+      margin: 0 0 16px;
+      border-radius: 0;
+    }
+
+    @media (max-width: 599px) {
+      width: 90%;
+    }
+  }
+
+  button {
+    width: 26.585%;
+    padding: 14px 20px;
+    margin-left: 8px;
+    background: var(--black);
+    color: var(--white);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border: none;
+    border-radius: 4px;
+    font-family: "Roboto", sans-serif;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.05em;
+    text-align: center;
+    text-transform: uppercase;
+
+    @media (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28px;
+    }
+
+    @media (max-width: 1024px) {
+      width: 100%;
+      margin: 0;
+      border-radius: 0;
+      font-size: 14px;
+      line-height: 16px;
+      box-shadow: none;
+    }
+  }
+}
+
+.footer-top {
+  &__menu-list {
+    display: flex;
+    margin: 38px 100px 38px;
+    justify-content: space-between;
+
+    @media (min-width: 2500px) {
+    }
+
+    .menu {
+      h3 {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        text-transform: uppercase;
+        color: var(--dark-gray-100);
+        margin: 12px 0;
+
+        @media (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
+      }
+
+      ul {
+        padding: 0;
+        margin: 0;
+
+        li {
+          list-style: none;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 14px;
+          text-transform: capitalize;
+          color: var(--dark-gray-100);
+          margin-bottom: 12px;
+
+          @media (min-width: 2500px) {
+            font-size: 24px;
+            line-height: 28px;
+          }
+
+          a {
+            text-decoration: none;
+            color: var(--dark-gray-100);
+          }
+
+          .atendimento {
+            margin: 0;
+            font-weight: 500;
+          }
+
+          .line {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+
+  .social-media-icons {
+    ul {
+      display: flex;
+      gap: 10px;
+      margin: 0 0 12px 0;
+      padding: 0;
+
+      li {
+        list-style: none;
+
+        img {
+          width: 35px;
+
+          @media (min-width: 2500px) {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    p {
+      margin: 0;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+
+      @media (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+}
+
+.footer-bottom {
+  width: 100%;
+  background-color: var(--black);
+  display: flex;
+
+  &__wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 84.38%;
+    margin: auto;
+    gap: 110.41px;
+
+    @media (min-width: 2500px) {
+      width: 92%;
+    }
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      align-items: flex-start !important;
+      gap: 0;
+      margin: 0;
+    }
+
+    .address {
+      color: var(--white);
+      font-style: normal;
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      text-transform: capitalize;
+      width: 20%;
+
+      p {
+        @media (max-width: 1024px) {
+          margin: 0;
+        }
+      }
+
+      // max-width: 40%;
+
+      // @include mq(md, max) {
+      //     max-width: 100%;
+      // }
+
+      @media (min-width: 2500px) {
+        width: 22.15%;
+        font-size: 20px;
+        line-height: 27px;
+      }
+
+      @media (max-width: 1024px) {
+        order: 2;
+        margin: 0 0 17px 16px;
+        width: 27.083%;
+      }
+    }
+
+    .stamps {
+      margin: 0;
+      padding: 0;
+      width: 40.62%;
+      align-items: center;
+      display: flex;
+      justify-self: center;
+      list-style: none;
+      gap: 12px;
+
+      @media (min-width: 2500px) {
+        width: 32.815%;
+        margin: 15px 0;
+      }
+
+      @media (min-width: 768px) and (max-width: 1024px) {
+        width: 46.134%;
+        margin: 21.94px 0 21.94px 16px;
+      }
+
+      @media (min-width: 376px) and (max-width: 767px) {
+        width: 87%;
+        margin: 22px 0 23px 8px;
+      }
+
+      @media (max-width: 375px) {
+        width: 91.2%;
+        order: 1;
+        gap: 4px;
+        margin: 22px 0 23px 8px;
+      }
+
+      .creditcard {
+        width: 20.27%;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .vtex {
+        width: 31%;
+
+        .vtex-pci {
+          width: 100%;
+        }
+      }
+
+      &__divider {
+        content: "";
+        background-color: var(--light-gray-500);
+        display: inline-block;
+        height: 24px;
+        width: 1px;
+
+        @media (min-width: 2500px) {
+          height: 42px;
+        }
+      }
+    }
+
+    .developedBy {
+      align-items: center;
+      display: flex;
+      list-style-type: none;
+      color: var(--white);
+      margin: 27px 0 22px;
+      padding: 0;
+
+      @media (max-width: 1024px) {
+        width: 26.2%;
+        order: 3;
+        margin: 0;
+        margin: 0 0 17px 16px;
+      }
+
+      div {
+        display: flex;
+      }
+
+      .vtex-logo {
+        width: 32.86%;
+
+        @media (min-width: 2500px) {
+          width: 87.73px;
+        }
+
+        @media (max-width: 1024px) {
+          width: 36.615%;
+        }
+      }
+
+      .m3-logo {
+        width: 23.699%;
+
+        @media (min-width: 2500px) {
+          width: 55.98px;
+        }
+
+        @media (max-width: 1024px) {
+          width: 26.4%;
+        }
+      }
+
+      li .by-vtex {
+        gap: 13px;
+      }
+
+      li .by-m3 {
+        gap: 13px;
+      }
+
+      li:last-child {
+        margin-left: 13px;
+
+        @media (max-width: 1024px) {
+          margin: 0;
+        }
+      }
+
+      a {
+        align-items: center;
+        color: var(--white);
+        display: flex;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-transform: capitalize;
+        text-decoration: none;
+
+        span {
+          font-size: 10px;
+          line-height: 12px;
+          // margin-right: 8px;
+
+          @media (min-width: 2500px) {
+              font-size: 20px;
+              line-height: 23px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/Institucional.tsx b/src/pages/Institucional.tsx
index bf83fe7..dab5dd8 100644
--- a/src/pages/Institucional.tsx
+++ b/src/pages/Institucional.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import { Header } from "../components/header";
 
+import { Footer } from "../components/footer";
+
 const Institucional = () => {
   return (
     <div>
       <Header />
+      <Footer />
     </div>
   );
 };