feat: criando o header mobile, estilizando e criando funcionalidades, como abrir e fechar menu

src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter } from "react-router-dom"
 import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
+import { HeaderMobile } from "./components/HeaderMobile";
 import { Main } from "./components/Main";
 import { TopButton } from "./components/TopButton";
 import { WhatsappButton } from "./components/WhatsappButton";
@@ -9,6 +10,7 @@ export function App() {
   return (
     <BrowserRouter>
       <Header />
+      <HeaderMobile />
       <Main />
       <Footer />
       <WhatsappButton />

src/assets/bars.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/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/ContainerBreadCrumbs/index.tsx

@@ -1,7 +1,7 @@
-import { NavigationLinks } from "../../NavigationLinks";
 
-import imgHome from "../../../assets/home 1.svg";
-import imgArrowRight from "../../../assets/arrow-point-to-right (3).svg";
+import { NavigationLinks } from "../NavigationLinks";
+import imgHome from "../../assets/home 1.svg";
+import imgArrowRight from "../../assets/arrow-point-to-right (3).svg";
 
 import style from "./style.module.css";
 

src/components/ContainerBreadCrumbs/style.module.css

@@ -43,4 +43,11 @@
 
 .contentBreadCrumb img, .contentBreadCrumb span {
   margin-right: 0.547rem;
+}
+
+@media only screen and (max-width: 1024px) {
+  .contentWrapper {
+    width: 100%;
+    padding: 1.875rem 1rem;
+  }
 }

src/components/Footer/ContainerNewsLetter/index.tsx

@@ -1,14 +1,34 @@
+import { Formik, Field, Form } from "formik";
+import * as Yup from "yup";
+
 import style from "./style.module.css";
 
+const schema = Yup.object().shape({
+  email: Yup.string().email("*E-mail inválido").required("*Campo Obrigatório")
+});
+
 export function ContainerNewsletter() {
   return (
     <div className={style.containerNewsLetter}>
       <div className={style.contentNewsLetter}>
         <h3>Assine nossa Newsletter</h3>
-        <form action="/">
-          <input type="text" />
-          <button type="submit">ENVIAR</button>
-        </form>
+        <Formik
+          validationSchema={schema}
+          initialValues={{
+            email: ""
+          }}
+          onSubmit={(values, actions) => {
+            actions.resetForm();
+          }}
+        >
+          {({ values, errors }) => (
+            <Form>
+              <Field name="email" placeholder="E-mail" type="text" />
+              {errors.email && <span>{errors.email}</span>}
+              <button type="submit">ENVIAR</button>
+            </Form>
+          )}
+        </Formik>
       </div>
     </div>
   );

src/components/Footer/ContainerNewsLetter/style.module.css

@@ -42,4 +42,26 @@
   font-size: 1.5rem;
   font-weight: 700;
   padding: 0.875rem 1.25rem;
+}
+
+@media only screen and (max-width: 1024px) {
+  .contentNewsLetter {
+    width: 100%;
+    padding: 1rem;
+  }
+  
+  .contentNewsLetter form{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .contentNewsLetter form input{
+    width: 100%;
+  }
+  
+  .contentNewsLetter form button{
+    width: 100%;
+    margin-top: 1rem;
+  }
 }

src/components/Header/ContainerPrincipal/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from "../../button";
+import { Button } from "../../Button";
 import { LogoM3Academy } from "../../LogoM3Academy";
 
 import logo from "../../../assets/Logo-M3Academy 1 (1).svg";

src/components/Header/index.tsx

@@ -1,13 +1,12 @@
 import { ContainerPrincipal } from "./ContainerPrincipal";
 import { ContainerList } from "./ContainerList";
-import { ContainerBreadCrumb } from "./ContainerBreadCrumbs";
+import style from "./style.module.css";
 
 export function Header() {
   return (
-    <header>
+    <header className={style.headerDesk}>
       <ContainerPrincipal />
       <ContainerList />
-      <ContainerBreadCrumb />
     </header>
   );
 }

src/components/Header/style.module.css

@@ -0,0 +1,11 @@
+@media only screen and (max-width: 1024px) {
+  .headerDesk {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 1025px) {
+  .headerDesk {
+    display: block;
+  }
+}

src/components/HeaderMobile/index.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+
+import { LogoM3Academy } from "../LogoM3Academy";
+import logo from "../../assets/Logo-M3Academy 1 (1).svg";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+import { NavigationLinks } from "../NavigationLinks";
+
+import style from "./style.module.css";
+
+export function HeaderMobile() {
+  const linksInfo = [
+    {
+      slug: "cursos",
+      text: "Cursos",
+    },
+    {
+      slug: "saiba-mais",
+      text: "Saiba mais",
+    },
+    {
+      slug: "institucional",
+      text: "INSTITUCIONAIS",
+    },
+  ];
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <header className={style.headerMobile}>
+        <div className={style.container}>
+          <div onClick={() => setOpen(true)} className={style.contentBtnBars}>
+            <Icon name="bars" />
+          </div>
+          <div className={style.contentLogo}>
+            <LogoM3Academy link="/" src={logo} alt="Logo da M3 academy" />
+          </div>
+          <div className={style.contentMiniCart}>
+            <Button iconName="miniCart" className={style.miniCart} />
+          </div>
+          <div className={style.contentSearch}>
+            <span>
+              <input type="text" />
+              <Button iconName="search" />
+            </span>
+          </div>
+        </div>
+      </header>
+
+      <div className={open ? style.containerInfoBars : style.close}>
+        <div className={style.contentInfoBars}>
+          <div className={style.contentHeader}>
+            <a href="/">Entrar</a>
+            <div onClick={()=> setOpen(false)}>
+              <Icon name="exit" />
+            </div>
+          </div>
+          <div className={style.contentBody}>
+            <NavigationLinks links={linksInfo} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/HeaderMobile/style.module.css

@@ -0,0 +1,160 @@
+@media only screen and (min-width: 1025px) {
+  .headerMobile,
+  .containerInfoBars,
+  .close {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .headerMobile {
+    display: block;
+  }
+
+  .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-template-areas:
+      "bars logo miniCart"
+      "search search search";
+
+    background-color: var(--black);
+    padding: 1.563rem 1rem;
+  }
+
+  .contentBtnBars {
+    grid-area: bars;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .contentLogo {
+    grid-area: logo;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .contentMiniCart {
+    grid-area: miniCart;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .miniCart {
+    max-width: 54.68px;
+    background-color: transparent;
+    cursor: pointer;
+    border: none;
+  }
+  
+  .miniCart img {
+    width: 100%;
+  }
+
+  .contentSearch {
+    grid-area: search;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1.563rem;
+  }
+
+  .contentSearch span {
+    width: 100%;
+    height: 57px;
+    position: relative;
+  }
+
+  .contentSearch span input {
+    width: 100%;
+    height: 100%;
+    border-radius: 0.313rem;
+    outline: none;
+    font-size: 28px;
+    color: var(--gray-300);
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--gray-50);
+  }
+
+  .contentSearch span button {
+    width: 35.15px;
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    right: 10px;
+    background-color: transparent;
+    border: none;
+    outline: none;
+  }
+
+  .contentSearch span button img {
+    width: 100%;
+  }
+
+  .containerInfoBars {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: var(--blackTrans);
+  }
+
+  .close {
+    display: none;
+  }
+
+  .contentInfoBars {
+    display: flex;
+    flex-direction: column;
+    width: 96.48%;
+    background-color: var(--white);
+    min-height: 585px;
+  }
+
+  .contentHeader {
+    width: 100%;
+    background-color: var(--black);
+    height: 78px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1rem;
+  }
+
+  .contentHeader a {
+   color: var(--white);
+   font-family: "Roboto";
+   font-weight: 400;
+   font-size: 0.875rem;
+  }
+
+
+  .contentBody {
+    padding: 1.938rem 1rem 1rem;
+    overflow: auto;
+  }
+
+  .contentBody ul {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .contentBody a {
+    text-decoration: none;
+  }
+
+  .contentBody ul li {
+    list-style: none;
+    text-transform: uppercase;
+    color: var(--gray-300);
+  }
+}

src/components/Icon/index.tsx

@@ -13,6 +13,8 @@ import iconM3 from "../../assets/icon-m3.svg";
 interface IconProps {
   name:
     | "search"
+    | "bars"
+    | "exit"
     | "miniCart"
     | "home"
     | "arrowRight"
@@ -34,12 +36,57 @@ interface IconProps {
     | "iconM3"
     | "linkedin";
   color?: string;
+  onClick?: (event: Event) => void;
 }
 
 export function Icon(props: IconProps) {
   const { name } = props;
 
   switch (name) {
+    case "exit":
+      return (
+        <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>
+      );
+      
+    case "bars":
+      return (
+        <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>
+      );
+
     case "search":
       return (
         <svg

src/components/Main/index.tsx

@@ -6,6 +6,7 @@ import { FormaPagamento } from "../../pages/FormaPagamento";
 import { SegurancaPrivacidade } from "../../pages/SegurancaPrivacidade";
 import { Sobre } from "../../pages/Sobre";
 import { TrocaDevolucao } from "../../pages/TrocaDevolucao";
+import { ContainerBreadCrumb } from "../ContainerBreadCrumbs";
 import { SideBar } from "../SideBar";
 
 import style from "./style.module.css";
@@ -21,6 +22,7 @@ export function Main() {
 
   return (
     <main className={style.containerMain}>
+      <ContainerBreadCrumb />
       <div className={style.contentWrapper}>
         <div className={style.contentMain}>
           <h1> INSTITUCIONAL</h1>

src/components/Main/style.module.css

@@ -1,4 +1,4 @@
-.containerMain{
+.containerMain {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -21,7 +21,7 @@
   grid-template-columns: 1fr 3fr;
   grid-template-rows: 1fr 3fr;
   grid-template-areas: "title title"
-                        "aside contentInfo";
+    "aside contentInfo";
 }
 
 .contentMain h1 {
@@ -45,14 +45,40 @@
   list-style: none;
 }
 
-.contentMain aside ul li{
+.contentMain aside ul li {
   padding: 0.625rem 1rem;
   font-size: 32px;
   color: var(--gray-900);
   font-weight: 400;
 }
 
-.contentMain aside ul a{
-  text-decoration: none;  
+.contentMain aside ul a {
+  text-decoration: none;
 }
 
+@media only screen and (max-width: 1024px) {
+  .contentWrapper {
+    width: 100%;
+    padding: 0 1rem;
+  }
+
+  .contentMain {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 3fr;
+    grid-template-areas: 
+      "title"
+      "aside"
+      "contentInfo";
+  }
+
+  .contentMain h1 {
+    grid-area: title;
+  }
+
+  .contentMain aside {
+    grid-area: aside;
+    border-right: none;
+  }
+}

src/global.css

@@ -1,6 +1,8 @@
 :root {
   --black2: #100D0E;
   --black: #000000;
+  --blackTrans: #454545b3;
+  
 
   --white: #FFFFFF;
 
@@ -33,4 +35,33 @@ body {
   -moz-osx-font-smoothing: grayscale;
   font-weight: 400;
   position: relative;
-}
+}
+
+@media only screen and (max-width: 1890px) {
+  body p {
+    font-size: 1.5rem !important;
+  }
+
+  body li {
+    font-size: 1.875rem !important;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  body p {
+    font-size: 0.75rem !important;
+  }
+
+  body li {
+    font-size: 1rem !important;
+  }
+
+  body h2 {
+    font-size: 1.5rem !important;
+  }
+
+  body h4 {
+    font-size: 0.875rem !important;
+  }
+}
+

src/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './global.css';
 import { App } from './App';
 
+import './global.css';
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );

src/pages/Contato/style.module.css

@@ -3,6 +3,12 @@
   margin-left: 1.875rem;
 }
 
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+}
+
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;

src/pages/Entrega/style.module.css

@@ -3,6 +3,12 @@
   margin-left: 1.875rem;
 }
 
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+}
+
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;

src/pages/FormaPagamento/style.module.css

@@ -3,6 +3,12 @@
   margin-left: 1.875rem;
 }
 
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+}
+
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;

src/pages/SegurancaPrivacidade/style.module.css

@@ -3,6 +3,12 @@
   margin-left: 1.875rem;
 }
 
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+}
+
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;

src/pages/Sobre/style.module.css

@@ -3,6 +3,12 @@
   margin-left: 1.875rem;
 }
 
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+}
+
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;

src/pages/TrocaDevolucao/style.module.css

@@ -3,6 +3,12 @@
   margin-left: 1.875rem;
 }
 
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+}
+
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;