feat : made aside menu

src/App.tsx

@@ -5,6 +5,8 @@ import Header from "./components/Header";
 import Home from "./components/Home";
 import Institutional from "./components/Institutional";
 import Footer from "./components/Footer";
+import { AsideMenuContextProvider } from "./contexts/asideMenuContext";
+import AsideMenu from "./components/AsideMenu";
 
 const router = createBrowserRouter([
   {
@@ -20,9 +22,12 @@ const router = createBrowserRouter([
 function App() {
   return (
     <div className="App">
-      <Header />
-      <RouterProvider router={router} />
-      <Footer />
+      <AsideMenuContextProvider>
+        <Header />
+        <AsideMenu />
+        <RouterProvider router={router} />
+        <Footer />
+      </AsideMenuContextProvider>
     </div>
   );
 }

src/assets/svg/Aside.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
+<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
+<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
+</svg>

src/assets/svg/Exit.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
+<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
+</svg>

src/components/AsideMenu/index.tsx

@@ -0,0 +1,37 @@
+import styles from "./styles.module.scss";
+import Exit from "../../assets/svg/Exit.svg";
+import { useAside } from "../../contexts/asideMenuContext";
+
+export default function AsideMenu() {
+  const { setAsideMenuOpen, isAsideMenuOpen } = useAside();
+  return (
+    <div
+      className={`${styles.blackout} ${
+        isAsideMenuOpen ? "" : styles.invisible
+      }`}
+    >
+      <div
+        className={`${styles.container} ${
+          isAsideMenuOpen ? "" : styles.closed
+        }`}
+      >
+        <div className={styles.in_out}>
+          <button className={styles.in_button}>ENTRAR</button>
+          <button
+            onClick={() => {
+              setAsideMenuOpen(false);
+            }}
+            className={styles.out_button}
+          >
+            <img src={Exit} alt="botão de sair" />
+          </button>
+        </div>
+        <div className={styles.aside_buttons_div}>
+          <button className={styles.aside_buttons}>CURSOS</button>
+          <button className={styles.aside_buttons}>SAIBA MAIS</button>
+          <button className={styles.aside_buttons}>INSTITUCIONAIS</button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AsideMenu/styles.module.scss

@@ -0,0 +1,64 @@
+.blackout {
+  position: fixed;
+  inset: 0;
+  background: rgba(69, 69, 69, 0.7);
+  z-index: 999;
+}
+
+.closed {
+  transform: translateX(-100%);
+}
+
+.invisible {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.container {
+  position: absolute;
+  transition: 0.3s;
+  left: 0%;
+  right: 3.52%;
+  top: 0%;
+  bottom: 57.02%;
+}
+
+.in_out {
+  display: flex;
+  justify-content: space-between;
+  background-color: black;
+  padding: 31px 0 31px 16px;
+
+  .in_button {
+    background-color: black;
+    color: white;
+    border: 0;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+  }
+  .out_button {
+    background-color: black;
+    color: white;
+    border: 0;
+    padding-right: 16px;
+  }
+}
+.aside_buttons_div {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background-color: white;
+  height: 585px;
+  padding: 31px 0 0 16px;
+  .aside_buttons {
+    display: flex;
+    border: 0;
+    justify-content: flex-start;
+    background-color: white;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    color: #c4c4c4;
+  }
+}

src/components/ContactForm/styles.module.scss

@@ -12,6 +12,10 @@
     max-height: 46px;
     border: 1px solid #100d0e;
     border-radius: 25px;
+
+    &::placeholder {
+      color: #b9b7b7;
+    }
   }
   form {
     > div {
@@ -33,6 +37,7 @@
       line-height: 19px;
       border-radius: 25px;
       cursor: pointer;
+      letter-spacing: 0.05em;
     }
   }
   .label_form {
@@ -106,3 +111,34 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .form_title {
+    margin-top: 30px !important;
+  }
+  .contact_form {
+    .Field {
+      width: 100% !important;
+      font-size: 14px;
+      line-height: 16px;
+    }
+    .label_form {
+      font-size: 14px;
+      line-height: 16px;
+    }
+    .confirm_form {
+      span {
+        font-size: 14px;
+        line-height: 16px;
+      }
+      label {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+    .confirm_span {
+      font-size: 12px;
+      line-height: 14px;
+    }
+  }
+}

src/components/Footer/styles.module.scss

@@ -97,6 +97,7 @@
 
       .news_button {
         width: 100% !important;
+        box-shadow: none !important;
       }
     }
   }
@@ -154,6 +155,7 @@
       font-weight: 400;
       font-size: 1.09vw;
       line-height: 16px;
+      color: #303030;
     }
   }
 
@@ -162,11 +164,61 @@
     gap: 0.78vw;
 
     a {
-      height: 2.73vw;
+      height: 35px;
     }
 
     img {
-      width: 2.73vw;
+      height: 35px;
+    }
+  }
+}
+
+@media screen and (min-width: 2500px) {
+  .redes_sociais_svg {
+    a {
+      height: 70px !important;
+    }
+    img {
+      height: 70px !important;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .footer_top {
+    padding: 24px 0 24px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .menu_list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      .menu_list_title {
+        font-weight: 500;
+        font-weight: bold;
+        font-size: 1.09vw;
+        display: flex;
+        justify-content: flex-start;
+      }
+      a {
+        display: none;
+      }
+      span {
+        display: none;
+      }
+    }
+    .redes_sociais {
+      p {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+    .redes_sociais_svg {
+      img {
+        width: 35px;
+      }
     }
   }
 }
@@ -261,16 +313,36 @@
     padding-left: 16px;
     gap: 15px;
 
+    p {
+      font-size: 10px !important;
+      line-height: 12px !important;
+      text-transform: capitalize;
+    }
+
     .pagamentos {
       margin-top: 15px;
       order: -1;
+      .certificado {
+        img {
+          width: 54.61px;
+        }
+      }
 
       .bandeiras {
         margin-left: unset;
+        img {
+          width: 36px;
+        }
       }
     }
     .logos {
       margin-left: unset;
+      margin-bottom: 15px;
+
+      p {
+        font-size: 10px !important;
+        line-height: 12px !important;
+      }
     }
   }
 }

src/components/Header/index.tsx

@@ -2,13 +2,24 @@ import styles from "./styles.module.scss";
 import M3Logo from "../../assets/svg/M3logo.svg";
 import Lupa from "../../assets/svg/lupa.svg";
 import Cart from "../../assets/svg/cart.svg";
+import AsideMenu from "../../assets/svg/Aside.svg";
+import { useAside } from "../../contexts/asideMenuContext";
 
 export default function Header() {
+  const { setAsideMenuOpen } = useAside();
   return (
     <>
       <header>
         <div className={styles.header_top}>
           <div className={styles.first_div}>
+            <button
+              onClick={() => {
+                setAsideMenuOpen(true);
+              }}
+              className={styles.aside_menu}
+            >
+              <img src={AsideMenu} alt="Aside Menu" />
+            </button>
             <a href="/">
               <img className={styles.m3_logo} src={M3Logo} alt="logo m3" />
             </a>

src/components/Header/styles.module.scss

@@ -1,10 +1,15 @@
 // --------------------- Header Top --------------------- //
 
 .header_top {
+  position: relative;
   background: black;
-  padding: 1.72vw 0;
+  padding: 25px 0;
   color: white;
 
+  .aside_menu {
+    display: none;
+  }
+
   .first_div {
     display: flex;
     align-items: center;
@@ -17,10 +22,6 @@
     }
 
     .search {
-      width: 20.63vw;
-      background: white;
-      border-radius: 5px;
-      border: 2px solid #f2f2f2;
       position: relative;
       display: flex;
       align-items: center;
@@ -28,9 +29,13 @@
       gap: 3.79%;
 
       input {
+        padding-left: 16px;
+        width: 20.63vw;
+        background: white;
+        border-radius: 5px;
+        border: 2px solid #f2f2f2;
         display: flex;
         height: 32px;
-        width: 77.27%;
         border: 0;
         font-size: 1.09vw;
 
@@ -43,7 +48,8 @@
         cursor: pointer;
         height: 1.41vw;
         display: flex;
-        position: relative;
+        position: absolute;
+        right: 16px;
       }
     }
 
@@ -93,6 +99,51 @@
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .header_top {
+    .first_div {
+      .aside_menu {
+        display: flex;
+        padding-left: 16px;
+        background-color: black;
+        border: 0;
+      }
+    }
+    height: 139px;
+    .search {
+      position: absolute !important;
+      bottom: 25px !important;
+      left: 16px !important;
+      right: 16px !important;
+      input {
+        width: 100% !important;
+        font-size: 14px !important;
+        line-height: 16px !important;
+      }
+      img {
+        width: 18px !important;
+      }
+    }
+    .m3_logo {
+      width: 236px !important;
+      height: 25.86px !important;
+      padding: 0 !important;
+    }
+    .header_button {
+      .button_entrar {
+        display: none !important;
+      }
+      .cart_button {
+        img {
+          position: absolute !important;
+          width: 28px !important;
+          right: 16px !important;
+        }
+      }
+    }
+  }
+}
+
 // --------------------- Header Bottom --------------------- //
 
 .header_bottom {
@@ -113,3 +164,9 @@
     cursor: pointer;
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .header_bottom {
+    display: none;
+  }
+}

src/components/Home/styles.module.scss

@@ -110,3 +110,62 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .bread_crumb {
+    margin-left: 16px;
+
+    .bread_crumb_home {
+      height: 16px;
+    }
+
+    .bread_crumb_arrow {
+      height: 8px;
+    }
+
+    h2 {
+      font-size: 12px;
+      line-height: 14px;
+    }
+  }
+
+  .tab_title {
+    margin: 80px 0 40px;
+
+    h2 {
+      font-size: 24px;
+    }
+  }
+
+  .tab_layout {
+    display: flex;
+    flex-direction: column;
+    margin: 0 16px;
+
+    .tabs {
+      margin: 0;
+      border-right: none;
+      .tab_active {
+        width: 100% !important;
+      }
+
+      button {
+        width: 100% !important;
+      }
+    }
+  }
+
+  .tab_content {
+    margin-bottom: 81px;
+
+    h2 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    p {
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
+}

src/contexts/asideMenuContext.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, ReactNode, useContext, useState } from "react";
+
+interface AsideMenuContextProviderProps {
+  isAsideMenuOpen: boolean;
+  setAsideMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const asideMenuContext = createContext(
+  {} as AsideMenuContextProviderProps
+);
+
+export function useAside() {
+  return useContext(asideMenuContext);
+}
+
+export function AsideMenuContextProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [isAsideMenuOpen, setAsideMenuOpen] = useState(false);
+  return (
+    <asideMenuContext.Provider value={{ isAsideMenuOpen, setAsideMenuOpen }}>
+      {children}
+    </asideMenuContext.Provider>
+  );
+}