fix: Melhorando a semântica do código e organização

src/components/Footer/FooterBottom/FooterBottom.tsx

@@ -65,19 +65,23 @@ export default function FooterBottom() {
       <ul className={styles.containerDevelop}>
         <li>
           <span>Powered by</span>
-          <img
-            className={styles.logoVtexFooter}
-            src="/assets/icons/logoVTEXM3Academy.svg"
-            alt="Logo VTEX"
-          />
+          <a href="https://vtex.com/br-pt/">
+            <img
+              className={styles.logoVtexFooter}
+              src="/assets/icons/logoVTEXM3Academy.svg"
+              alt="Logo VTEX"
+            />
+          </a>
         </li>
         <li>
           <span>Developed by</span>
-          <img
-            className={styles.logoM3Footer}
-            src="/assets/icons/logoM3M3Academy.svg"
-            alt="Logo M3"
-          />
+          <a href="https://m3ecommerce.com/">
+            <img
+              className={styles.logoM3Footer}
+              src="/assets/icons/logoM3M3Academy.svg"
+              alt="Logo M3"
+            />
+          </a>
         </li>
       </ul>
     </div>

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

@@ -36,6 +36,7 @@
         width: 100%;
         img {
           width: 36px;
+          height: 20px;
         }
       }
     }
@@ -58,6 +59,7 @@
 
         .vtexIcon {
           width: 54.61px;
+          height: 34px;
         }
       }
     }
@@ -80,6 +82,12 @@
       line-height: 12px;
     }
 
+    li a {
+      height: 16px;
+      display: flex;
+      align-items: center;
+    }
+
     .logoVtexFooter {
       width: 44.92px;
       height: 16px;
@@ -163,34 +171,35 @@
       grid-area: address;
       width: 100%;
       max-width: 258px;
-      max-height: 12px;
-      line-height: 12px;
-
-      p {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
     }
 
     .footerPayments {
       grid-area: payments;
       max-width: 344px;
       width: auto;
+    }
 
+    .containerDevelop {
+      grid-area: develop;
+    }
+  }
+}
+
+@media screen and (max-width: 430px) {
+  .containerFooterBottom {
+    .footerPayments {
       .footerPaymentsWrapper {
         div {
           gap: 11px;
           img {
-            width: 30.27px;
-            height: 16.97px;
+            width: 30px;
+            height: 17px;
           }
         }
       }
 
       .divider {
-        height: 20.36px;
-        margin: 0 10px;
+        height: 20px;
       }
 
       .footerPaymentsWrapperVtex {
@@ -202,10 +211,6 @@
         }
       }
     }
-
-    .containerDevelop {
-      grid-area: develop;
-    }
   }
 }
 

src/components/Header/Header.tsx

@@ -16,11 +16,15 @@ export default function Header() {
     <>
       <header>
         <div className={styles.containerHeader}>
-          <div onClick={openMenuToggle} className={styles.menuToggle}>
+          <button
+            onClick={openMenuToggle}
+            className={styles.menuToggle}
+            arial-label="Abrir menu de navegação"
+          >
             <div className={styles.toggleOne}></div>
             <div className={styles.toggleTwo}></div>
             <div className={styles.toggleThree}></div>
-          </div>
+          </button>
           <img
             className={styles.logo}
             src="/assets/images/Logo-M3Academy.png"
@@ -33,7 +37,7 @@ export default function Header() {
               name="search"
               placeholder="Buscar..."
             />
-            <button type="submit">
+            <button type="submit" arial-label="Pesquisar">
               <img src="/assets/icons/search-icon.svg" alt="Buscar" />
             </button>
           </form>

src/components/Header/header.module.scss

@@ -8,6 +8,7 @@
 
   .menuToggle {
     display: none;
+    background: transparent;
   }
 
   .logo {
@@ -51,7 +52,7 @@
 
     button {
       background: transparent;
-      height: auto;
+      height: 18px;
       padding-right: 16px;
 
       img {
@@ -108,7 +109,7 @@
 
       button {
         background: transparent;
-        height: auto;
+        height: 35.5px;
         padding-right: 11px;
 
         img {

src/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./global.scss";
+import "./styles/global.scss";
 import Home from "./pages/Home";
 
 const root = ReactDOM.createRoot(

src/pages/Home.tsx

@@ -29,19 +29,21 @@ function Home() {
       <Footer />
       {pageYPosition > 140 && (
         <div className={styles.floatElementsFooter}>
-          <div className={styles.whatsappIcon}>
+          <button className={styles.whatsappIcon} arial-label="WhatsApp">
             <a href="http://api.whatsapp.com/send?1=pt_BR&phone=5582999976243">
               <img src="/assets/icons/whatsapp-icon.svg" alt="WhatsApp" />
             </a>
-          </div>
-          <div className={styles.topoSiteIcon}>
-            <button onClick={btnScrollTop}>
-              <img
-                src="/assets/icons/topo-site-icon.png"
-                alt="Voltar para o topo"
-              />
-            </button>
-          </div>
+          </button>
+          <button
+            className={styles.topoSiteIcon}
+            onClick={btnScrollTop}
+            arial-label="Voltar ao topo"
+          >
+            <img
+              src="/assets/icons/topo-site-icon.png"
+              alt="Voltar para o topo"
+            />
+          </button>
         </div>
       )}
     </div>

src/pages/home.module.scss

@@ -3,8 +3,8 @@
 
   .floatElementsFooter {
     position: fixed;
-    right: 20px;
-    bottom: 21px;
+    right: 16px;
+    bottom: 28px;
 
     width: 2.6562%;
 
@@ -14,15 +14,13 @@
     .whatsappIcon,
     .topoSiteIcon {
       width: 100%;
+      background: transparent;
+      cursor: pointer;
     }
 
     .topoSiteIcon {
-      button {
-        background: transparent;
-        cursor: pointer;
-        img {
-          width: 100%;
-        }
+      img {
+        width: 100%;
       }
     }
   }
@@ -35,12 +33,3 @@
     }
   }
 }
-
-@media screen and (max-width: 540px) {
-  .containerHome {
-    .floatElementsFooter {
-      right: 16px;
-      bottom: 16px;
-    }
-  }
-}

src/styles/global.scss

@@ -30,7 +30,3 @@ code {
 a {
   color: inherit;
 }
-
-.active {
-  display: block;
-}