src/components/Caminhos/Caminhos.tsx

@@ -8,18 +8,21 @@ const Caminhos = (prop: { titulo: string }) => {
   return (
     <>
       <nav>
-        <ul>
-          <li>
+        <ul className={styles["caminhos-itens"]}>
+          <li className={styles["caminhos-item"]}>
             <Link to="/">
-              <img src={homeImg} alt="Home image" />
+              <img
+                className={styles["home_img"]}
+                src={homeImg}
+                alt="Home image"
+              />
             </Link>
           </li>
-          <li>
+          <li className={styles["caminhos-item"]}>
             <p>&gt;</p>
-            <p>{prop.titulo}</p>
           </li>
-          <li>
-            <Link to="/contact">Contact</Link>
+          <li className={styles["caminhos-item"]}>
+            <p>{prop.titulo}</p>
           </li>
         </ul>
       </nav>

src/components/Caminhos/caminhos.module.scss

@@ -0,0 +1,22 @@
+.caminhos-itens {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  p {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: #c4c4c4;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+    }
+  }
+}
+.home_img {
+  width: 16px;
+  @media screen and (min-width: 2500px) {
+    width: 31.25px;
+  }
+}

src/components/NavigationBar/NavigationBar.tsx

@@ -3,50 +3,77 @@ import styles from "./navigationBar.module.scss";
 import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
 import { Cart } from "../Cart/Cart";
 import React, { useState } from "react";
+import { Link, Outlet } from "react-router-dom";
+import { Enter } from "../Enter/Enter";
 const NavigationBar = () => {
-  const [linkUrl, setLinkUrl] = useState(0);
   return (
-    <nav className="navbar navbar-expand-xpp bg-body-tertiary " id="navegador">
-      <div className="container-fluid">
-        <button
-          className="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarNavDropdown"
-          aria-controls="navbarNavDropdown"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span className="navbar-toggler-icon"></span>
-        </button>
-        <a className="navbar-brand" href="#">
-          <img className="logoM3Img" src={m3LogoImg} alt="M3 Academy mobile" />
-        </a>
-        <div className="carrinho-wrapper">
-          <Cart />
-        </div>
+    <>
+      <nav
+        className="navbar navbar-expand-xpp bg-body-tertiary "
+        id="navegador"
+      >
+        <div className="container-fluid">
+          <button
+            className="navbar-toggler"
+            type="button"
+            data-bs-toggle="offcanvas"
+            data-bs-target="#navbarOffcanvasLg"
+            aria-controls="navbarOffcanvasLg"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <a className="navbar-brand" href="#">
+            <img
+              className="logoM3Img"
+              src={m3LogoImg}
+              alt="M3 Academy mobile"
+            />
+          </a>
+          <div className="carrinho-wrapper">
+            <Cart />
+          </div>
 
-        <div className="collapse navbar-collapse" id="navbarNavDropdown">
-          <ul className="navbar-nav">
-            <li className="nav-item">
-              <a className="nav-link " aria-current="page" href="#">
-                CURSOS
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#">
-                SAIBA MAIS
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#">
-                INSTITUCIONAIS
-              </a>
-            </li>
-          </ul>
+          <div
+            className="offcanvas offcanvas-end"
+            id="navbarOffcanvasLg"
+            aria-labelledby="navbarOffcanvasLgLabel"
+          >
+            <div className="offcanvas-header">
+              <div className="entrar_wrapper">
+                <Enter></Enter>
+              </div>
+              <button
+                type="button"
+                className="btn-close text-reset"
+                data-bs-dismiss="offcanvas"
+                aria-label="Close"
+              ></button>
+            </div>
+
+            <ul className="navbar-nav">
+              <li className="nav-item">
+                <Link className="nav-link" to="/cursos">
+                  CURSOS
+                </Link>
+              </li>
+              <li className="nav-item">
+                <Link className="nav-link" to="/cursos">
+                  SAIBA MAIS
+                </Link>
+              </li>
+              <li className="nav-item">
+                <Link className="nav-link" to="/cursos">
+                  INSTITUCIONAIS
+                </Link>
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-    </nav>
+      </nav>
+      <Outlet />
+    </>
   );
 };
 

src/components/Router/Router.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Routes, Route, BrowserRouter } from "react-router-dom";
 import { Home } from "../../pages/Home";
 import { Teste } from "../../pages/Teste";
+import { Cursos } from "../../pages/Cursos";
 /*
 import Home from "./Home";
 import Sobre from "./Sobre";
@@ -16,7 +17,7 @@ const RoutesUrl = () => {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Teste titulo={"home"} />}>
-          <Route index element={<Teste titulo={"home"} />} />
+          <Route path="cursos" element={<Cursos titulo={"Cursos"} />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/components/SearchBox/searchBox.module.scss

@@ -10,16 +10,8 @@
   gap: 10px;
   width: 264px;
   height: 32px;
-  /*
-  position: absolute;
-  
-  left: 508px;
-  top: 22px;
-    */
-  /* white */
 
   background: #ffffff;
-  /* primary-700 */
 
   border: 2px solid #f2f2f2;
   border-radius: 5px;
@@ -27,6 +19,11 @@
     width: 515.62px;
     height: 57px;
   }
+  @media screen and (max-width: 1024px) {
+    width: 992px;
+    height: 36px;
+    margin: 20px 0 20px 0;
+  }
 }
 .buscaBtn {
   position: relative;
@@ -49,6 +46,10 @@
       font-size: 28px;
     }
   }
+  @media screen and (max-width: 1024px) {
+    right: 30px;
+    top: 23px;
+  }
 }
 
 .searchImg {

src/index.tsx

@@ -12,7 +12,7 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <Teste titulo={"home"}></Teste>
+      <Home titulo={"home"}></Home>
     </BrowserRouter>
   </React.StrictMode>
 );

src/pages/Cursos.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { CursosBody } from "../sectors/Body/CursosBody";
+import { Caminhos } from "../components/Caminhos/Caminhos";
+import { Header } from "../sectors/Header/Header";
+const Cursos = (prop: { titulo: string }) => {
+  return (
+    <div>
+      <Header></Header>
+      <Caminhos titulo={prop.titulo}></Caminhos>
+      <CursosBody></CursosBody>
+    </div>
+  );
+};
+
+export { Cursos };

src/pages/Home.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Header } from "../sectors/Header/Header";
 
-const Home = () => {
+const Home = (prop: { titulo: string }) => {
   return (
     <div>
       <Header></Header>

src/sectors/Body/CursosBody.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const CursosBody = () => {
+  return <h2>Cursos</h2>;
+};
+
+export { CursosBody };

src/sectors/Header/BottomHeader/BottomHeader.tsx

@@ -1,9 +1,12 @@
 import { NavigationBar } from "../../../components/NavigationBar/NavigationBar";
-
+import { SearchBox } from "../../../components/SearchBox/SearchBox";
 const BottomHeader = () => {
   return (
     <div className="bottom_header">
       <NavigationBar></NavigationBar>
+      <div className="search-wrapper">
+        <SearchBox></SearchBox>
+      </div>
     </div>
   );
 };

src/styles/partials/bottom_header.scss

@@ -5,4 +5,17 @@
   @media screen and (max-width: 1025px) {
     padding: 0 16px 0 16px;
   }
+  @media screen and (min-width: 1025px) {
+    .search-wrapper {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 1025px) {
+    .bottom_header {
+      justify-content: center;
+      align-items: center;
+    }
+    .search-wrapper {
+    }
+  }
 }

src/styles/partials/navigation.scss

@@ -23,6 +23,9 @@
   @media screen and (min-width: 2500px) {
     font-size: 28px;
   }
+  @media screen and (max-width: 1025px) {
+    color: #c4c4c4;
+  }
 }
 .bottom_header {
   background: black;
@@ -34,22 +37,22 @@
 .navbar-toggler-icon {
   background-color: white;
 }
-.navbar-collapse {
-  @media screen and (max-width: 1025px) {
-    background-color: white;
-  }
-  .nav-link {
-    color: white;
-    @media screen and (max-width: 1025px) {
-      color: black;
-    }
-  }
-}
-@media screen and (max-width: 1025px) {
+
+@media screen and (max-width: 1024px) {
   .container-fluid {
     padding: 0 0 0 0;
   }
   .navbar-nav {
     margin-left: 20px;
   }
+  .offcanvas-header {
+    background-color: black;
+  }
+  .btn-close {
+    color: white;
+  }
+  .offcanvas {
+    width: 100%;
+    height: 585px;
+  }
 }