Merge branch 'feature/footer' into development

src/components/Footer/FloatingIcons/FloatingIcons.module.scss

@@ -1,15 +1,13 @@
 .floating-icons-wrapper {
+  padding: 0;
   position: fixed;
   right: 16px;
-  bottom: 190px;
-
+  bottom: 198px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
 
-  padding: 0;
-
   @media screen and (width >= 2500px) {
     bottom: 229.24px;
   }
@@ -24,8 +22,8 @@
   }
 
   .whatsapp-button {
-    border: 0;
     padding: 0;
+    border: 0;
     background: transparent;
 
     img {
@@ -41,12 +39,12 @@
   }
 
   .up-button {
-    background: #c4c4c4;
-    border: 0;
-    border-radius: 50%;
-    padding: 13.5px 10.5px;
     width: 34px;
     height: 34px;
+    padding: 13.5px 10.5px;
+    border: 0;
+    border-radius: 50%;
+    background: #c4c4c4;
 
     @media screen and (width >= 2500px) {
         width: 66px;

src/components/Footer/FloatingIcons/FloatingIcons.tsx

@@ -1,16 +1,16 @@
 import React from "react";
+import { Link } from "react-router-dom";
+
+import whatsapp from "./assets/whatsapp-icon.svg";
+import arrowUp from "./assets/arrow-up.svg";
 
 import styles from "./FloatingIcons.module.scss";
 
-import whatsapp from "../assets/whatsapp-icon.svg";
-import arrowUp from "../assets/arrow-up.svg";
-import { Link } from "react-router-dom";
-
 const FloatingIcons = () => {
   return (
     <div className={styles["floating-icons-wrapper"]}>
       <button className={styles["whatsapp-button"]}>
-        <a href="web.whatsapp.com">
+        <a href="https://wa.me/551141599504" target="blank">
           <img src={whatsapp} alt="Ícone do WhatsApp" />
         </a>
       </button>

src/components/Footer/Footer.module.scss

@@ -3,24 +3,22 @@
     padding: 50px 100px;
     display: flex;
     justify-content: space-between;
-    // gap: 158px;
 
     @media screen and (width <= 1024px) {
+      padding: 24px 16px;
       flex-direction: column;
       gap: 12px;
-      padding: 24px 16px;
-
     }
 
     .social-links {
-      p {
+      a {
+        margin: 12px 0 0;
         font-family: "Roboto";
         font-style: normal;
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
         color: #303030;
-        margin: 12px 0 0;
 
         @media screen and (width >= 2500px) {
           font-size: 28px;

src/components/Footer/Footer.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import { FloatingIcons } from "./FloatingIcons/FloatingIcons";
 
-import styles from "./Footer.module.scss";
+import { FloatingIcons } from "./FloatingIcons/FloatingIcons";
 import { FooterBottom } from "./FooterBottom/FooterBottom";
 import { Newsletter } from "./Newsletter/Newsletter";
 import { SiteMap } from "./SiteMap/SiteMap";
 import { SocialMedia } from "./SocialMedia/SocialMedia";
 
+import styles from "./Footer.module.scss";
+
 const Footer = () => {
   return (
     <footer className={styles["container"]}>
@@ -15,7 +16,7 @@ const Footer = () => {
         <SiteMap />
         <div className={styles["social-links"]}>
           <SocialMedia />
-          <p>www.loremipsum.com</p>
+          <a href="https://m3ecommerce.com/">www.loremipsum.com</a>
         </div>
         <FloatingIcons />
       </div>

src/components/Footer/FooterBottom/FooterBottom.module.scss

@@ -1,19 +1,18 @@
 .container {
-  background: #000000;
+  padding: 15px 100px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  //   gap: 110.41px;
-  padding: 15px 100px;
+  background: #000000;
 
   @media screen and (width <= 1024px) {
+    padding: 15px 16px;
     display: grid;
     grid-template-areas:
       "paymentSolutions"
       "address"
       "authors";
     gap: 15px;
-    padding: 15px 16px;
   }
 
   .address {
@@ -24,7 +23,6 @@
     line-height: 12px;
     text-transform: capitalize;
     color: #ffffff;
-    // background-color: yellow;
 
     p {
       margin: 0;
@@ -43,10 +41,7 @@
   .payment-solutions {
     display: flex;
     align-items: center;
-    // justify-content: center;
     gap: 12px;
-    // justify-self: center;
-    // background-color: cyan;
 
     @media screen and (width <= 1024px) {
       grid-area: paymentSolutions;
@@ -56,11 +51,9 @@
       gap: 11px;
     }
 
-    .menu-list {
+    .payment-list {
       margin: 0;
       padding: 0;
-      list-style: none;
-      text-decoration: none;
       display: flex;
       gap: 12px;
 
@@ -69,8 +62,6 @@
       }
 
       li {
-        //   transition: all 0.2s ease-in-out;
-
         img {
           width: 35px;
           height: 20px;
@@ -85,12 +76,6 @@
             width: 100%; //30px;
             height: 17px;
           }
-
-          // &:hover {
-          //   border-radius: 50%;
-          //   background: #292929;
-          //   color: white;
-          // }
         }
       }
     }
@@ -127,17 +112,16 @@
   }
 
   .authors {
-    // background-color: magenta;
     display: flex;
-    gap: 13px;
     align-items: center;
-    // justify-self: end;
+    gap: 13px;
 
     @media screen and (width <= 1024px) {
       grid-area: authors;
     }
 
     p {
+      margin: 0;
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
@@ -145,7 +129,6 @@
       line-height: 12px;
       text-transform: capitalize;
       color: #ffffff;
-      margin: 0;
 
       @media screen and (width >= 2500px) {
         font-size: 20px;

src/components/Footer/FooterBottom/FooterBottom.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 
-import styles from "./FooterBottom.module.scss";
+import Master from "./assets/Master.svg";
+import Visa from "./assets/Visa.svg";
+import Amex from "./assets/Diners.svg";
+import Elo from "./assets/Elo.svg";
+import Hipercard from "./assets/Hiper.svg";
+import Paypal from "./assets/Pagseguro.svg";
+import Boleto from "./assets/Boleto.svg";
+import PCI from "./assets/vtex-pci-200.svg";
+import VtexIcon from "./assets/vtex-icon.svg";
+import M3Icon from "./assets/m3-icon.svg";
 
-import Master from "../assets/Master.svg";
-import Visa from "../assets/Visa.svg";
-import Amex from "../assets/Diners.svg";
-import Elo from "../assets/Elo.svg";
-import Hipercard from "../assets/Hiper.svg";
-import Paypal from "../assets/Pagseguro.svg";
-import Boleto from "../assets/Boleto.svg";
-import PCI from "../assets/vtex-pci-200.svg";
-import VtexIcon from "../assets/vtex-icon.svg";
-import M3Icon from "../assets/m3-icon.svg";
+import styles from "./FooterBottom.module.scss";
 
 const PaymentSolutions = [
   {
@@ -52,7 +52,7 @@ const FooterBottom = () => {
         <span>elit, sed do eiusmod tempor</span>
       </div>
       <div className={styles["payment-solutions"]}>
-        <ul className={styles["menu-list"]}>
+        <ul className={styles["payment-list"]}>
           {PaymentSolutions.map((item, index) => (
             <li key={index}>
               <img src={item.src} alt={item.alt} />
@@ -66,13 +66,17 @@ const FooterBottom = () => {
       </div>
       <div className={styles["authors"]}>
         <p>Powered by</p>
-        <img
-          src={VtexIcon}
-          alt="Logo da VTEX"
-          className={styles["vtex-icon"]}
-        />
+        <a href="https://vtex.com/br-pt/">
+          <img
+            src={VtexIcon}
+            alt="Logo da VTEX"
+            className={styles["vtex-icon"]}
+          />
+        </a>
         <p>Developed by</p>
-        <img src={M3Icon} alt="Logo da M3" className={styles["m3-icon"]} />
+        <a href="https://m3ecommerce.com/a-empresa/">
+          <img src={M3Icon} alt="Logo da M3" className={styles["m3-icon"]} />
+        </a>
       </div>
     </div>
   );

src/components/Footer/Newsletter/Newsletter.module.scss

@@ -1,32 +1,28 @@
 .container {
-  // width: 100%;
   display: grid;
-  grid-template-columns: 37.03%; // 474px;
+  grid-template-columns: 37.03%; //474px;
   justify-content: center;
   padding: 16px 0;
   border-top: 1px solid #000000;
   border-bottom: 1px solid #000000;
-  // background: yellow;
 
   @media screen and (width >= 2500px) {
-    grid-template-columns: 36.88%; // 474px;
+    grid-template-columns: 36.88%; //922px;
   }
 
   @media screen and (width <= 1024px) {
-    // width: calc(100% - 32px);
     grid-template-columns: 100%;
     padding: 16px;
   }
 
   .title {
-    // background-color: blue;
     margin: 0 0 8px;
     font-family: "Roboto";
     font-style: normal;
     font-weight: 500;
     font-size: 18px;
     line-height: 21px;
-    letter-spacing: 0.05em;
+    // letter-spacing: 0.05em;
     font-variant: small-caps;
     color: #303030;
     text-align: left;
@@ -40,12 +36,10 @@
       margin-bottom: 16px;
       font-size: 14px;
       line-height: 16px;
-      // text-transform: uppercase;
     }
   }
 
   .form-wrapper {
-    // background-color: green;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -58,18 +52,17 @@
 
     input {
       flex-grow: 1; // 340px;
-      // width: 78.34%;
       padding: 12px 16px;
-      background: #ffffff;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
+      background: #ffffff;
 
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;
-      color: #c4c4c4; // #000000?
+      color: #000000;
 
       @media screen and (width >= 2500px) {
         font-size: 28px;
@@ -79,21 +72,20 @@
       @media screen and (width <= 1024px) {
         width: calc(100% - 32px);
         padding: 17px 16px;
-
-        // margin-bottom: 16px;
       }
 
-      //   &::placeholder {
-      //     color: #c4c4c4;
-      //   }
+      &::placeholder {
+        color: #c4c4c4;
+      }
     }
 
     button {
-      background: #000000;
-      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-      border-radius: 4px;
       padding: 14px 40px;
       border: 0;
+      border-radius: 4px;
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+      background: #000000;
+
       font-family: "Roboto";
       font-style: normal;
       font-weight: 700;
@@ -104,18 +96,16 @@
       color: #ffffff;
 
       @media screen and (width >= 2500px) {
+        padding: 14px 77px;
         font-size: 24px;
         line-height: 28px;
-        padding: 14px 77px;
       }
 
       @media screen and (width <= 1024px) {
         width: 100%;
+        padding: 17px;
         font-size: 14px;
         line-height: 16px;
-        padding: 17px;
-
-        // margin-bottom: 16px;
       }
     }
   }

src/components/Footer/Newsletter/Newsletter.tsx

@@ -1,10 +1,10 @@
-import { Formik, FormikHelpers } from "formik";
 import React from "react";
 import { Form } from "react-router-dom";
+import { Formik, FormikHelpers } from "formik";
+
 import NewsletterSchema from "../../../schema/NewsletterSchema";
 
 import styles from "./Newsletter.module.scss";
-
 interface FormValues {
   email: string;
 }
@@ -34,10 +34,7 @@ const Newsletter = () => {
       >
         {({ resetForm }) => (
           <div className={styles["container"]}>
-            <h3 className={styles["title"]}>
-              {/* ASSINE NOSSA NEWSLETTER */}
-              assine nossa newsletter
-            </h3>
+            <h3 className={styles["title"]}>ASSINE NOSSA NEWSLETTER</h3>
             <Form className={styles["form-wrapper"]}>
               <input type="email" placeholder="E-mail" />
               <button>ENVIAR</button>

src/components/Footer/SiteMap/SiteMap.module.scss

@@ -18,8 +18,6 @@
   .submenu {
     margin: 0;
     padding: 0;
-    list-style: none;
-    text-decoration: none;
     display: flex;
     flex-direction: column;
     gap: 12px;
@@ -31,6 +29,7 @@
       }
 
       .subtitle-text {
+        margin: 0;
         font-family: "Roboto";
         font-style: normal;
         font-weight: 500;
@@ -38,7 +37,6 @@
         line-height: 16px;
         text-transform: uppercase;
         color: #303030;
-        margin: 0;
 
         @media screen and (width >= 2500px) {
           font-size: 28px;
@@ -48,9 +46,6 @@
         @media screen and (width <= 1024px) {
           text-transform: none;
         }
-
-        // &.active {
-        // }
       }
 
       .open-icon {
@@ -58,22 +53,22 @@
 
         &::before {
           content: "";
-          background: #000000;
           width: 7.8px;
           height: 1px;
           position: absolute;
           top: 50%;
           left: 50%;
+          background: #000000;
           transform: translate(-50%, -50%);
         }
         &::after {
           content: "";
-          background: #000000;
           width: 1px;
           height: 8.28px;
           position: absolute;
           top: 50%;
           left: 50%;
+          background: #000000;
           transform: translate(-50%, -50%);
         }
 
@@ -90,14 +85,13 @@
     }
 
     .list-items {
+      padding: 0;
       display: flex;
       flex-direction: column;
       gap: 12px;
-      padding: 0;
-      list-style: none;
 
       li {
-        //   transition: all 0.2s ease-in-out; hover? active?
+        transition: all 0.2s ease-in-out;
 
         a {
           font-family: "Roboto";
@@ -105,9 +99,13 @@
           font-weight: 400;
           font-size: 12px;
           line-height: 14px;
+          color: #303030;
           text-transform: capitalize;
           text-decoration: none;
-          color: #303030;
+
+          &:hover {
+            filter: brightness(2);
+          }
 
           @media screen and (width >= 2500px) {
             font-size: 24px;
@@ -122,8 +120,8 @@
           font-weight: 500;
           font-size: 12px;
           line-height: 14px;
-          text-transform: capitalize;
           color: #303030;
+          text-transform: capitalize;
 
           @media screen and (width >= 2500px) {
             font-size: 24px;
@@ -132,7 +130,6 @@
         }
 
         &:last-child {
-          // hover em vez de last-child?
           a {
             text-decoration: underline;
           }

src/components/Footer/SiteMap/SiteMap.tsx

@@ -1,57 +1,58 @@
 import React, { useState, useContext } from "react";
-import { WidthContext } from "../../../contexts/WidthContext";
+
 import { List } from "../../List/List";
+import { WidthContext } from "../../../contexts/WidthContext";
 
 import styles from "./SiteMap.module.scss";
 
 const institucionalLinks = [
   {
     name: "Quem Somos",
-    value: "sobre",
+    value: "institucionais/sobre",
   },
   {
     name: "Política de Privacidade",
-    value: "politica-de-privacidade",
+    value: "institucionais/seguranca-e-privacidade",
   },
   {
     name: "Segurança",
-    value: "seguranca-e-privacidade",
+    value: "institucionais/seguranca-e-privacidade",
   },
   {
     name: "Seja um Revendedor",
-    value: "seja-um-revendedor",
+    value: "institucionais/contato",
   },
 ];
 
 const duvidasLinks = [
   {
     name: "Entrega",
-    value: "entrega",
+    value: "institucionais/entrega",
   },
   {
     name: "Pagamento",
-    value: "forma-de-pagamento",
+    value: "institucionais/forma-de-pagamento",
   },
   {
     name: "Trocas e Devoluções",
-    value: "troca-e-devolucao",
+    value: "institucionais/troca-e-devolucao",
   },
   {
     name: "Dúvidas Frequentes",
-    value: "duvidas-frequentes",
+    value: "institucionais/troca-e-devolucao",
   },
 ];
 
 const faleConoscoLinks = [
   {
     name: "Atendimento ao Consumidor",
-    phoneNumber: "(11) 4159 9504",
-    value: "atendimento-ao-consumidor",
+    phoneNumber: "+1141599504",
+    value: "(11) 4159 9504",
   },
   {
     name: "Atendimento Online",
-    phoneNumber: "(11) 4159 9504",
-    value: "politica-de-privacidade",
+    phoneNumber: "+1141599504",
+    value: "(11) 4159 9504",
   },
 ];
 

src/components/Footer/SocialMedia/SocialMedia.module.scss

@@ -1,38 +1,29 @@
 .container {
-  // background-color: blue;
-
   .menu-list {
-    // background-color: blue;
-  
     margin: 0;
     padding: 0;
-    list-style: none;
-    text-decoration: none;
     display: flex;
     gap: 10px;
-  
+
     li {
-      //   transition: all 0.2s ease-in-out;
-  
       a {
+        transition: all 0.2s ease-in-out;
+
         svg {
           width: 35px;
           height: 35px;
-  
+
+          &:hover {
+            border-radius: 50%;
+            filter: brightness(1.8);
+          }
+
           @media screen and (width >= 2500px) {
             width: 70px;
             height: 70px;
           }
-  
-          // &:hover {
-          //   border-radius: 50%;
-          //   background: #292929;
-          //   color: white;
-          // }
         }
       }
     }
   }
 }
-
-

src/components/Footer/SocialMedia/SocialMedia.tsx

@@ -1,22 +1,21 @@
 import React from "react";
-import { Link } from "react-router-dom";
+
+import { ReactComponent as Facebook } from "./assets/facebook-icon.svg";
+import { ReactComponent as Instagram } from "./assets/instagram-icon.svg";
+import { ReactComponent as Twitter } from "./assets/twitter-icon.svg";
+import { ReactComponent as Youtube } from "./assets/youtube-icon.svg";
+import { ReactComponent as Linkedin } from "./assets/linkedin-icon.svg";
 
 import styles from "./SocialMedia.module.scss";
 
-import { ReactComponent as Facebook } from "../../../assets/svg/facebook-icon.svg";
-import { ReactComponent as Instagram } from "../../../assets/svg/instagram-icon.svg";
-import { ReactComponent as Twitter } from "../../../assets/svg/twitter-icon.svg";
-import { ReactComponent as Youtube } from "../../../assets/svg/youtube-icon.svg";
-import { ReactComponent as Linkedin } from "../../../assets/svg/linkedin-icon.svg";
-
 const socialMediaLinks = [
   {
     icon: <Facebook />,
-    value: "https://facebook.com",
+    value: "https://www.facebook.com/digitalm3",
   },
   {
     icon: <Instagram />,
-    value: "https://instagram.com",
+    value: "https://www.instagram.com/m3.ecommerce",
   },
   {
     icon: <Twitter />,
@@ -24,11 +23,11 @@ const socialMediaLinks = [
   },
   {
     icon: <Youtube />,
-    value: "https://youtube.com",
+    value: "https://www.youtube.com/@m3e-commerce796",
   },
   {
     icon: <Linkedin />,
-    value: "https://linkedin.com",
+    value: "https://www.linkedin.com/company/m3ecommerce/",
   },
 ];
 
@@ -39,8 +38,9 @@ const SocialMedia = () => {
         <ul className={styles["menu-list"]}>
           {socialMediaLinks.map((item, index) => (
             <li key={index}>
-              <a href={item.value} target="_blank">{item.icon}</a>
-              {/* <Link to={{pathname: item.value}}>{item.icon}</Link> */}
+              <a href={item.value} target="_blank" rel="noreferrer">
+                {item.icon}
+              </a>
             </li>
           ))}
         </ul>

src/components/List/List.tsx

@@ -15,7 +15,7 @@ const List = (props: ListProps) => {
         item.phoneNumber ? (
           <li key={index}>
             <p>{item.name}</p>
-            <Link to={item.value}>{item.phoneNumber}</Link>
+            <a href={`tel:${item.phoneNumber}`}>{item.value}</a>
           </li>
         ) : (
           <li key={index}>

src/global.scss

@@ -1,13 +1,17 @@
+@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',
-//     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-//     sans-serif;
-//   -webkit-font-smoothing: antialiased;
-//   -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  box-sizing: border-box;
+  height: 100%;
+
+  ul {
+    list-style: none;
+  };
+
+  a {
+    text-decoration: none;
+  }
 }
 
-// code {
-//   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-//     monospace;
-// }