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

@@ -0,0 +1,306 @@
+// import React, { useState, useEffect, useCallback } 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";
+
+// type toggleStateType = {
+//   state: boolean;
+//   modifier: React.Dispatch<React.SetStateAction<boolean>>;
+// };
+const FooterDesktop = () => {
+  return (
+    <section className="footer-desktop">
+      <div className="footer-desktop__container">
+        <div className="footer-desktop__columns">
+          <div className="footer-desktop__links">
+            <h4 className="footer-link__title">INSTITUCIONAL</h4>
+
+            <ul className="footer-link__itemList">
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link" to="/">
+                  Quem Somos
+                </NavLink>
+              </li>
+
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link" to="/">
+                  Política de Privacidade
+                </NavLink>
+              </li>
+
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link" to="/">
+                  Segurança
+                </NavLink>
+              </li>
+
+              <li className="footer-link__item lastChild">
+                <NavLink className="footer-links__link" to="/">
+                  Seja um Revendedor
+                </NavLink>
+              </li>
+            </ul>
+          </div>
+
+          <div className="footer-desktop__links">
+            <h4 className="footer-link__title">DÚVIDAS</h4>
+
+            <ul className="footer-link__itemList">
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link" to="/">
+                  Entrega
+                </NavLink>
+              </li>
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link" to="/">
+                  Pagamento
+                </NavLink>
+              </li>
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link" to="/">
+                  Troca e devoluções
+                </NavLink>
+              </li>
+              <li className="footer-link__item lastChild">
+                <NavLink className="footer-links__link" to="/">
+                  Dúvidas Frequentes
+                </NavLink>
+              </li>
+            </ul>
+          </div>
+
+          <div className="footer-desktop__links">
+            <h4 className="footer-link__title">INSTITUCIONAL</h4>
+
+            <ul className="footer-link__itemList">
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link linkAtendimento" to="/">
+                  Atendimento ao Consumidor
+                </NavLink>
+              </li>
+
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link" to="/">
+                  Política de Privacidade
+                </NavLink>
+              </li>
+
+              <li className="footer-link__item">
+                <NavLink className="footer-links__link" to="/">
+                  Segurança
+                </NavLink>
+              </li>
+
+              <li className="footer-link__item lastChild">
+                <NavLink className="footer-links__link" to="/">
+                  Seja um Revendedor
+                </NavLink>
+              </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>
+            <a className="footer-link__site" href="/" rel="noopener noreferrer">
+              www.loremipsum.com
+            </a>
+          </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>
+    </section>
+  );
+};
+export default FooterDesktop;

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

@@ -0,0 +1,22 @@
+import React, { useState, useEffect } from "react";
+import FooterDesktop from "./FooterDesktop";
+import "./style.css";
+
+const Footer = () => {
+  const [width, setWidth] = useState<number>(window.innerWidth);
+
+  const handleWindow = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", handleWindow);
+    return () => {
+      window.removeEventListener("resize", handleWindow);
+    };
+  }, []);
+
+  return <footer>{<FooterDesktop />}</footer>;
+};
+
+export default Footer;

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

@@ -0,0 +1,133 @@
+.footer-desktop__columns {
+  display: grid;
+  grid-template-columns: repeat(4, max-content);
+  gap: 14px;
+  justify-content: space-around;
+}
+
+.footer-desktop__links {
+  margin: 50px 0;
+}
+
+.footer-link__title {
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--color-gray-100);
+}
+
+.footer-link__item {
+  font-family: "Roboto", sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  color: var(--color-gray-100);
+  list-style: none;
+  margin-top: 12px;
+}
+
+.footer-link__itemList {
+  margin: 0;
+}
+
+.footer-link__itemList img {
+  width: 35px;
+  height: 35px;
+}
+
+.social-medias {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 10px;
+  align-items: center;
+}
+
+.footer-links__link {
+  text-decoration: none;
+  color: var(--color-gray-100);
+}
+
+.footer-link__site {
+  text-decoration: none;
+  color: var(--color-gray-100);
+}
+
+.linkAtendimento {
+  font-family: "Roboto", sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+}
+
+.lastChild {
+  text-decoration: underline;
+}
+
+.footer-desktop__infos {
+  background-color: var(--color-black);
+}
+
+.footer-infos__structure {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.footer-infos__text {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 11px;
+  color: var(--color-white);
+  width: 234px;
+  height: 24px;
+}
+
+.footer-infos__payment {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.footer-infos__payment img {
+  width: 36px;
+  height: 20px;
+}
+
+.footer-infos__divider {
+  height: 24px;
+  border: 1px solid var(--color-gray-200);
+}
+
+.footer-infos__vtexCert img {
+  width: 54px;
+  height: 34px;
+  margin: 15px 0;
+}
+
+.footer-infos__developed {
+  display: flex;
+}
+
+.footer-infos__developed a {
+  display: flex;
+  align-items: center;
+  font-family: "Roboto", sans-serif;
+  font-size: 10px;
+  line-height: 11px;
+  text-decoration: none;
+  color: var(--color-white);
+}
+
+.footer-infos__developed .vtexIcon {
+  width: 44px;
+  height: 16px;
+  margin: 0 13px;
+}
+
+.footer-infos__developed .m3Icon {
+  width: 28px;
+  height: 15px;
+  margin: 0 13px;
+}

react-academy/src/global.css

@@ -12,6 +12,14 @@ code {
     monospace;
 }
 
+* {
+  margin: 0;
+  padding: 0;
+}
+li {
+  list-style: none;
+}
+
 /*COLORS*/
 :root {
   --color-black: #000;
@@ -20,4 +28,5 @@ code {
   --color-white-100: #f0f0f0;
 
   --color-gray-200: #c4c4c4;
+  --color-gray-100: #303030;
 }

react-academy/src/router.tsx

@@ -1,14 +1,16 @@
 import ReactDOM from "react-dom/client";
 import { Routes, Route, Navigate } from "react-router-dom";
 import Header from "./Components/Header";
+import Footer from "./Components/Footer";
 
-export default function Router(){
-    return (
-        <>
-        <Header/>
-            <Routes>
-                <Route></Route>
-            </Routes>
-        </>
-    )
-}
+export default function Router() {
+  return (
+    <>
+      <Header />
+      <Routes>
+        <Route></Route>
+      </Routes>
+      <Footer />
+    </>
+  );
+}