Merge pull request 'feat: Adicionado newsletter' (#3) from feature/criaFooter into main

Reviewed-on: #3

react-academy/src/Components/Footer/FooterDesktop/index.tsx

@@ -16,13 +16,9 @@ import VtexCert from "../ImagesFooter/vtexCert-icon.png";
 import VtexIcon from "../ImagesFooter/vtex-icon.png";
 import M3 from "../ImagesFooter/m3-icon.png";
 
-// type toggleStateType = {
-//   state: boolean;
-//   modifier: React.Dispatch<React.SetStateAction<boolean>>;
-// };
 const FooterDesktop = () => {
   return (
-    <section className="footer-desktop">
+    <footer className="footer-desktop">
       <div className="footer-desktop__container">
         <div className="footer-desktop__columns">
           <div className="footer-desktop__links">
@@ -300,7 +296,7 @@ const FooterDesktop = () => {
           </div>
         </div>
       </section>
-    </section>
+    </footer>
   );
 };
 export default FooterDesktop;

react-academy/src/Components/Footer/FooterTablets/index.tsx

@@ -0,0 +1,354 @@
+import React, { useState } from "react";
+import { NavLink } from "react-router-dom";
+import Facebook from "../ImagesFooter/facebook-icon.png";
+import Instagram from "../ImagesFooter/instagram-icon.png";
+import Twitter from "../ImagesFooter/twitter-icon.png";
+import Youtube from "../ImagesFooter/youtube-icon.png";
+import Linkedin from "../ImagesFooter/linkedin-icon.png";
+import Master from "../ImagesFooter/Master-icon.png";
+import Visa from "../ImagesFooter/visa-icon.png";
+import American from "../ImagesFooter/american-icon.png";
+import Elo from "../ImagesFooter/elo-icon.png";
+import Hiper from "../ImagesFooter/hiper-icon.png";
+import Paypal from "../ImagesFooter/paypal-icon.png";
+import Boleto from "../ImagesFooter/boleto-icon.png";
+import VtexCert from "../ImagesFooter/vtexCert-icon.png";
+import VtexIcon from "../ImagesFooter/vtex-icon.png";
+import M3 from "../ImagesFooter/m3-icon.png";
+import "./style.css";
+
+const FooterTablets = () => {
+  const [isActive, setActive] = useState<boolean>(false);
+  const [isDuvida, setDuvida] = useState<boolean>(false);
+  const [isContact, setContact] = useState<boolean>(false);
+
+  return (
+    <footer className="footer-desktop">
+      <div className="footer-desktop__container">
+        <div className="footer-desktop__columns">
+          <div className="footer-desktop__links">
+            <h4
+              className="footer-desktop__title"
+              onClick={() => setActive(!isActive)}
+            >
+              Institucional
+              <span>{isActive ? "-" : "+"}</span>
+            </h4>
+            {isActive && (
+              <ul className="footer-link__itemList">
+                <li className="footer-link__item">
+                  <NavLink
+                    to="/institucional/quem-somos"
+                    className="footer-links__link"
+                  >
+                    Quem somos
+                  </NavLink>
+                </li>
+
+                <li className="footer-link__item">
+                  <NavLink
+                    to="/institucional/politica-de-privacidade"
+                    className="footer-links__link"
+                  >
+                    Política de Privacidade
+                  </NavLink>
+                </li>
+
+                <li className="footer-link__item">
+                  <NavLink
+                    to="/institucional/seguranca"
+                    className="footer-links__link"
+                  >
+                    Segurança
+                  </NavLink>
+                </li>
+
+                <li className="footer-link__item">
+                  <NavLink
+                    to="/institucional/seja-um-revendedor"
+                    className="footer-links__link"
+                  >
+                    Seja um Revendedor
+                  </NavLink>
+                </li>
+              </ul>
+            )}
+          </div>
+
+          <div className="footer-desktop__links">
+            <h4
+              className="footer-desktop__title"
+              onClick={() => setDuvida(!isDuvida)}
+            >
+              Dúvidas
+              <span>{isDuvida ? "-" : "+"}</span>
+            </h4>
+
+            {isDuvida && (
+              <ul className="footer-link__itemList">
+                <li className="footer-link__item">
+                  <NavLink
+                    to="/institucional/quem-somos"
+                    className="footer-links__link"
+                  >
+                    Entrega
+                  </NavLink>
+                </li>
+
+                <li className="footer-link__item">
+                  <NavLink
+                    to="/institucional/politica-de-privacidade"
+                    className="footer-links__link"
+                  >
+                    Pagamento
+                  </NavLink>
+                </li>
+
+                <li className="footer-link__item">
+                  <NavLink
+                    to="/institucional/seguranca"
+                    className="footer-links__link"
+                  >
+                    Trocar e Devoluções
+                  </NavLink>
+                </li>
+
+                <li className="footer-link__item">
+                  <NavLink
+                    to="/institucional/seja-um-revendedor"
+                    className="footer-links__link"
+                  >
+                    Dúvidas Frequentes
+                  </NavLink>
+                </li>
+              </ul>
+            )}
+          </div>
+
+          <div className="footer-desktop__links">
+            <h4
+              className="footer-desktop__title"
+              onClick={() => setContact(!isContact)}
+            >
+              Fale Conosco
+              <span>{isContact ? "-" : "+"}</span>
+            </h4>
+            {isContact && (
+              <ul className="footer-link__itemList">
+                <li className="footer-link__item">
+                  <span className="footer-links__title">
+                    Atendimento ao Consumidor
+                  </span>
+                </li>
+
+                <li className="footer-link__item">
+                  <a className="footer-links__link" href="tel:1141599504">
+                    (11) 4159 9504
+                  </a>
+                </li>
+
+                <li className="footer-link__item">
+                  <span className="footer-links__title">
+                    Atendimento Online
+                  </span>
+                </li>
+
+                <li className="footer-link__item">
+                  <a className="footer-links__link" href="tel:11994338825">
+                    <u>(11) 1199433-8825</u>
+                  </a>
+                </li>
+              </ul>
+            )}
+          </div>
+
+          <div className="footer-desktop__links">
+            <ul
+              className="footer-link__itemList
+            social-medias"
+            >
+              <li>
+                <a
+                  href="/"
+                  target="_blank"
+                  title="Facebook"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    className="footer-links__IconSocial"
+                    src={Facebook}
+                    alt="Ícone Facebook"
+                  />
+                </a>
+              </li>
+
+              <li>
+                <a
+                  href="/"
+                  target="_blank"
+                  title="Instagram"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    className="footer-links__IconSocial"
+                    src={Instagram}
+                    alt="Ícone Instagram"
+                  />
+                </a>
+              </li>
+
+              <li>
+                <a
+                  href="/"
+                  target="_blank"
+                  title="Twitter"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    className="footer-links__IconSocial"
+                    src={Twitter}
+                    alt="Ícone Twitter"
+                  />
+                </a>
+              </li>
+
+              <li>
+                <a
+                  href="/"
+                  target="_blank"
+                  title="Youtube"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    className="footer-links__IconSocial"
+                    src={Youtube}
+                    alt="Ícone Youtube"
+                  />
+                </a>
+              </li>
+
+              <li>
+                <a
+                  href="/"
+                  target="_blank"
+                  title="Linkedin"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    className="footer-links__IconSocial"
+                    src={Linkedin}
+                    alt="Ícone Linkedin"
+                  />
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <section className="footer-desktop__infos">
+        <div className="footer-infos__container">
+          <div className="footer-infos__structure">
+            <div className="footer-infos__text">
+              <span className="footer-infos__description">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor
+              </span>
+            </div>
+
+            <ul className="footer-infos__payment">
+              <li>
+                <img
+                  className="footer-link__payment"
+                  src={Master}
+                  alt="Ícone MasterCard"
+                />
+              </li>
+
+              <li>
+                <img
+                  className="footer-link__payment"
+                  src={Visa}
+                  alt="Ícone Visa"
+                />
+              </li>
+
+              <li>
+                <img
+                  className="footer-link__payment"
+                  src={American}
+                  alt="Ícone American"
+                />
+              </li>
+
+              <li>
+                <img
+                  className="footer-link__payment"
+                  src={Elo}
+                  alt="Ícone Elo"
+                />
+              </li>
+
+              <li>
+                <img
+                  className="footer-link__payment"
+                  src={Hiper}
+                  alt="Ícone HiperCard"
+                />
+              </li>
+
+              <li>
+                <img
+                  className="footer-link__payment"
+                  src={Paypal}
+                  alt="Ícone Paypal"
+                />
+              </li>
+
+              <li>
+                <img
+                  className="footer-link__payment"
+                  src={Boleto}
+                  alt="Ícone Boleto"
+                />
+              </li>
+
+              <div className="footer-infos__divider"></div>
+
+              <ul className="footer-infos__vtexCert">
+                <li>
+                  <img className="vtexCert" src={VtexCert} alt="" />
+                </li>
+              </ul>
+            </ul>
+
+            <div className="footer-infos__contDev">
+              <div className="footer-infos__developed">
+                <a
+                  href="https://www.vtex.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span>Powered by</span>
+
+                  <img className="vtexIcon" src={VtexIcon} alt="Ícone Vtex" />
+                </a>
+
+                <a
+                  href="https://m3ecommerce.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span>Developed by</span>
+                  <img className="m3Icon" src={M3} alt="Ícone M3" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </footer>
+  );
+};
+
+export default FooterTablets;

react-academy/src/Components/Footer/FooterTablets/style.css

@@ -0,0 +1,59 @@
+@media screen and (max-width: 1024px) {
+  footer .footer-desktop__columns {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    margin: 24px 16px 24px 16px;
+  }
+
+  footer .footer-desktop__links {
+    margin: 0;
+    width: 100%;
+  }
+
+  footer .footer-desktop__title {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  footer .footer-desktop__links:last-child {
+    display: flex;
+  }
+
+  footer .footer-infos__structure {
+    flex-direction: column;
+    align-items: initial;
+    margin-left: 16px;
+  }
+
+  footer .footer-infos__text {
+    order: 2;
+    width: auto;
+  }
+
+  footer .footer-infos__payment {
+    order: 1;
+  }
+
+  footer .footer-infos__contDev {
+    order: 3;
+    margin-bottom: 15px;
+  }
+}
+
+@media screen and (max-width: 430px) {
+  footer .footer-infos__payment img {
+    width: 30px;
+    height: 16px;
+  }
+
+  footer .footer-infos__vtexCert img {
+    width: 45px;
+    height: 28px;
+    margin: 11px 0;
+  }
+}

react-academy/src/Components/Footer/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import FooterDesktop from "./FooterDesktop";
+import FooterTablets from "./FooterTablets";
 import "./style.css";
 
 const Footer = () => {
@@ -16,7 +17,9 @@ const Footer = () => {
     };
   }, []);
 
-  return <footer>{<FooterDesktop />}</footer>;
+  return (
+    <footer>{width <= 1024 ? <FooterTablets /> : <FooterDesktop />}</footer>
+  );
 };
 
 export default Footer;

react-academy/src/Components/Newsletter/index.tsx

@@ -0,0 +1,19 @@
+import "./style.css";
+
+const Newsletter = () => {
+  return (
+    <div className="footer-newsletter">
+      <div className="footer-newsletter__input">
+        <label className="footer-newsletter__title" htmlFor="email">
+          ASSINE NOSSA NEWSLETTER
+        </label>
+        <input name="email" type="email" placeholder="E-mail" />
+      </div>
+      <div className="btn-submit">
+        <button type="submit">ENVIAR</button>
+      </div>
+    </div>
+  );
+};
+
+export default Newsletter;

react-academy/src/Components/Newsletter/style.css

@@ -0,0 +1,69 @@
+.footer-newsletter {
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid var(--color-black);
+  border-bottom: 1px solid var(--color-black);
+}
+
+.footer-newsletter__title {
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 21px;
+  letter-spacing: 1.5px;
+  margin-top: 16px;
+}
+
+.footer-newsletter__input {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+}
+
+.footer-newsletter__input input {
+  padding: 13px 16px;
+  border: 1px solid var(--color-gray-300);
+  border-radius: 4px;
+}
+
+.btn-submit {
+  display: flex;
+  align-items: flex-end;
+}
+
+.btn-submit button {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  letter-spacing: 1.5px;
+  width: 126px;
+  height: 42px;
+  border: none;
+  background-color: var(--color-black);
+  color: var(--color-white);
+  border-radius: 4px;
+  margin-bottom: 16px;
+  margin-left: 8px;
+}
+
+@media screen and (max-width: 1024px) {
+  .footer-newsletter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .footer-newsletter__title {
+    margin: 16px 16px 0 16px;
+  }
+
+  .footer-newsletter__input input {
+    margin: 16px 16px 0 16px;
+  }
+
+  .btn-submit button {
+    width: 100%;
+    margin: 0 16px 16px 16px;
+  }
+}

react-academy/src/global.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&700&display=swap");
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -27,6 +29,7 @@ li {
   --color-white: #fff;
   --color-white-100: #f0f0f0;
 
-  --color-gray-200: #c4c4c4;
   --color-gray-100: #303030;
+  --color-gray-200: #c4c4c4;
+  --color-gray-300: #e5e5e5;
 }

react-academy/src/router.tsx

@@ -2,6 +2,7 @@ import ReactDOM from "react-dom/client";
 import { Routes, Route, Navigate } from "react-router-dom";
 import Header from "./Components/Header";
 import Footer from "./Components/Footer";
+import NewsLetter from "./Components/Newsletter";
 
 export default function Router() {
   return (
@@ -10,6 +11,7 @@ export default function Router() {
       <Routes>
         <Route></Route>
       </Routes>
+      <NewsLetter />
       <Footer />
     </>
   );