Merge pull request 'development' (#17) from development into feature/body

Reviewed-on: #17
2023-01-19 15:03:09 +00:00 · 2023-01-19 15:03:09 +00:00 · 92a1faa9d8
commit 92a1faa9d8
parent a714aa1415 ec501ce641
47 changed files with 748 additions and 153 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -22,6 +22,7 @@
        "react": "^18.2.0",
        "react-bootstrap": "^2.7.0",
        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.7.0",
        "react-scripts": "5.0.1",
        "react-text-mask": "^5.5.0",
        "typescript": "^4.9.4",
@ -3140,6 +3141,14 @@
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz",
+      "integrity": "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/@restart/hooks": {
      "version": "0.4.7",
      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
@ -15327,6 +15336,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz",
+      "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==",
+      "dependencies": {
+        "@remix-run/router": "1.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz",
+      "integrity": "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==",
+      "dependencies": {
+        "@remix-run/router": "1.3.0",
+        "react-router": "6.7.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -20870,6 +20909,11 @@
        "@swc/helpers": "^0.4.14"
      }
    },
+    "@remix-run/router": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz",
+      "integrity": "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA=="
+    },
    "@restart/hooks": {
      "version": "0.4.7",
      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
@ -29643,6 +29687,23 @@
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
    },
+    "react-router": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz",
+      "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==",
+      "requires": {
+        "@remix-run/router": "1.3.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz",
+      "integrity": "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==",
+      "requires": {
+        "@remix-run/router": "1.3.0",
+        "react-router": "6.7.0"
+      }
+    },
    "react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.7.0",
    "react-scripts": "5.0.1",
    "react-text-mask": "^5.5.0",
    "typescript": "^4.9.4",
--- a/public/index.html
+++ b/public/index.html
@ -1,21 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+      
+      
    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
@ -24,12 +26,13 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

@ -38,6 +41,11 @@

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
+      
    -->
-  </body>
-</html>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+    crossorigin="anonymous"></script>
+</body>
+
+</html>
--- a/src/components/Address/Address.tsx
+++ b/src/components/Address/Address.tsx
@ -1,7 +1,8 @@
 import React from "react";
+import styles from "./address.module.scss";
 const Address = () => {
  return (
-    <p>
+    <p className={styles["endereco"]}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor
    </p>
--- a/src/components/Address/address.module.scss
+++ b/src/components/Address/address.module.scss
@ -0,0 +1,19 @@
+.endereco {
+  width: 234px;
+  height: 24px;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  text-transform: capitalize;
+  color: white;
+  margin: 0 0 0 0;
+
+  @media screen and (min-width: 2500px) {
+    width: 467px;
+    height: 47px;
+    font-size: 20px;
+    line-height: 23px;
+  }
+}
--- a/src/components/Caminhos/Caminhos.tsx
+++ b/src/components/Caminhos/Caminhos.tsx
@ -0,0 +1,34 @@
+import homeImg from "./assets/image/home.png";
+import styles from "./caminhos.module.scss";
+import { Link, Outlet } from "react-router-dom";
+import { Home } from "../../pages/Home";
+import React, { useState } from "react";
+
+const Caminhos = (prop: { titulo: string }) => {
+  return (
+    <>
+      <nav>
+        <ul className={styles["caminhos-itens"]}>
+          <li className={styles["caminhos-item"]}>
+            <Link to="/">
+              <img
+                className={styles["home_img"]}
+                src={homeImg}
+                alt="Home image"
+              />
+            </Link>
+          </li>
+          <li className={styles["caminhos-item"]}>
+            <p>&gt;</p>
+          </li>
+          <li className={styles["caminhos-item"]}>
+            <p>{prop.titulo}</p>
+          </li>
+        </ul>
+      </nav>
+
+      <Outlet />
+    </>
+  );
+};
+export { Caminhos };
--- a/src/components/Caminhos/assets/image/home.png
+++ b/src/components/Caminhos/assets/image/home.png
--- a/src/components/Caminhos/caminhos.module.scss
+++ b/src/components/Caminhos/caminhos.module.scss
@ -0,0 +1,24 @@
+.caminhos-itens {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: baseline;
+  margin: 30px 0 0 100px;
+  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;
+  }
+}
--- a/src/components/DevelopedBy/developedBy.module.scss
+++ b/src/components/DevelopedBy/developedBy.module.scss
@ -3,6 +3,27 @@
  flex-direction: row;
  align-items: center;
  p {
-    margin-right: 30px;
+    display: flex;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+
+    text-transform: capitalize;
+    margin-right: 13px;
+    color: white;
+    margin: 0 13px 0 0;
+    @media screen and (min-width: 2500px) {
+      font-size: 20px;
+    }
+  }
+  img {
+    width: 28.66px;
+    height: 15.65px;
+    @media screen and (min-width: 2500px) {
+      width: 34.15px;
+      height: 23.87px;
+    }
  }
 }
--- a/src/components/M3Logo/M3Logo.tsx
+++ b/src/components/M3Logo/M3Logo.tsx
@ -1,8 +1,14 @@
 import React from "react";
 import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
-
+import styles from "./m3logo.module.scss";
 const M3Logo = () => {
-  return <img src={m3LogoImg} alt="M3 Academy logo" />;
+  return (
+    <img
+      className={styles["M3LogoImg"]}
+      src={m3LogoImg}
+      alt="M3 Academy logo"
+    />
+  );
 };

 export { M3Logo };
--- a/src/components/M3Logo/m3logo.module.scss
+++ b/src/components/M3Logo/m3logo.module.scss
@ -0,0 +1,6 @@
+.M3LogoImg {
+  width: 136px;
+  @media screen and (min-width: 2500px) {
+    width: 265px;
+  }
+}
--- a/src/components/NavigationBar/NavigationBar.tsx
+++ b/src/components/NavigationBar/NavigationBar.tsx
@ -1,32 +1,79 @@
-import Container from "react-bootstrap/Container";
-import Nav from "react-bootstrap/Nav";
-import Navbar from "react-bootstrap/Navbar";
-import NavDropdown from "react-bootstrap/NavDropdown";
+import { M3Logo } from "../M3Logo/M3Logo";
 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 = () => {
  return (
-    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
-      <Container>
-        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-        <Navbar.Collapse id="responsive-navbar-nav">
-          <Nav className="me-auto">
-            <Nav.Link className={styles["cursosNav"]} href="#cursos">
-              CURSOS
-            </Nav.Link>
-            <Nav.Link className={styles["saibaNav"]} href="#saibamais">
-              SAIBA MAIS
-            </Nav.Link>
-            <Nav.Link
-              className={styles["instituicionaisNav"]}
-              href="#institucionais"
-            >
-              INSTITUCIONAIS
-            </Nav.Link>
-          </Nav>
-        </Navbar.Collapse>
-      </Container>
-    </Navbar>
+    <>
+      <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="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>
+      </nav>
+      <Outlet />
+    </>
  );
 };

--- a/src/components/NavigationBar/assets/image/Logo-M3Academy.svg
+++ b/src/components/NavigationBar/assets/image/Logo-M3Academy.svg
--- a/src/components/NavigationBar/navigationBar.module.scss
+++ b/src/components/NavigationBar/navigationBar.module.scss
@ -1,28 +1 @@
-.cursosNav {
-  color: #ffffff;
-  font-family: "Roboto";
-  font-weight: 500;
-  font-size: 14px;
-  @media screen and (min-width: 2500px) {
-    font-size: 28px;
-  }
-}
-.saibaNav {
-  color: #ffffff;
-  font-family: "Roboto";
-  font-weight: 500;
-  font-size: 14px;
-  @media screen and (min-width: 2500px) {
-    font-size: 28px;
-  }
-}

-.instituicionaisNav {
-  color: #ffffff;
-  font-family: "Roboto";
-  font-weight: 500;
-  font-size: 14px;
-  @media screen and (min-width: 2500px) {
-    font-size: 28px;
-  }
-}
--- a/src/components/Newsletter/newsletter.module.scss
+++ b/src/components/Newsletter/newsletter.module.scss
@ -1,9 +1,17 @@
 .newsForm {
+  width: 474px;
+  height: 72px;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 18px;
+  font-family: "Roboto";
  font-variant: small-caps;
+  line-height: 21px;
+  letter-spacing: 0.05em;
+  font-style: normal;
+  color: #303030;
+  margin: 16px 0 16px 0;
  @media screen and (min-width: 2500px) {
    font-size: 36px;
  }
@ -26,6 +34,7 @@
    font-weight: 400;
    font-size: 14px;
    color: #c4c4c4;
+    font-family: "Roboto";
    @media screen and (min-width: 2500px) {
      font-size: 28px;
    }
@ -36,6 +45,7 @@
  }
 }
 .newsForm-btn {
+  display: flex;
  width: 126px;
  height: 42px;
  background: #000000;
@ -45,6 +55,8 @@
  color: white;
  font-weight: 700;
  font-size: 12px;
+  align-items: center;
+  justify-content: center;
  @media screen and (min-width: 2500px) {
    width: 246px;
    height: 59px;
--- a/src/components/Payments/Payments.tsx
+++ b/src/components/Payments/Payments.tsx
@ -38,7 +38,7 @@ const Payments = () => {
 };

 const VtexPci = () => {
-  return <img src={vtexImg} alt="vtx Pci" />;
+  return <img className={styles["paymentsPci"]} src={vtexImg} alt="vtx Pci" />;
 };

 export { Payments, VtexPci };
--- a/src/components/Payments/payments.module.scss
+++ b/src/components/Payments/payments.module.scss
@ -1,4 +1,25 @@
 .paymentsList {
  display: flex;
  flex-direction: row;
+  gap: 12px;
+  padding: 0 0 0 0;
+}
+.paymentsItem {
+  img {
+    width: 35px;
+    height: 20.2px;
+    @media screen and (min-width: 2500px) {
+      width: 70px;
+      height: 40.25px;
+    }
+  }
+}
+
+.paymentsPci {
+  width: 54.61px;
+  height: 34px;
+  @media screen and (min-width: 2500px) {
+    width: 106px;
+    height: 66px;
+  }
 }
--- a/src/components/PoweredBy/assets/image/vtexLogo.png
+++ b/src/components/PoweredBy/assets/image/vtexLogo.png
--- a/src/components/PoweredBy/poweredBy.module.scss
+++ b/src/components/PoweredBy/poweredBy.module.scss
@ -3,6 +3,27 @@
  flex-direction: row;
  align-items: center;
  p {
-    margin-right: 30px;
+    display: flex;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+
+    text-transform: capitalize;
+    margin-right: 13px;
+    color: white;
+    margin: 0 13px 0 0;
+    @media screen and (min-width: 2500px) {
+      font-size: 20px;
+    }
+  }
+  img {
+    width: 44.92px;
+    height: 16px;
+    @media screen and (min-width: 2500px) {
+      width: 84.22px;
+      height: 30px;
+    }
  }
 }
--- a/src/components/Router/Router.tsx
+++ b/src/components/Router/Router.tsx
@ -0,0 +1,25 @@
+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";
+import Usuario from "./Usuario";
+<Route component={Home} path="/" exact />
+      <Route component={Sobre} path="/sobre" />
+      <Route component={Usuario} path="/usuario" />
+*/
+
+const RoutesUrl = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home titulo="Home" />}></Route>
+      <Route path="/cursos" element={<Cursos titulo="Cursos" />} />
+    </Routes>
+  );
+};
+
+export { RoutesUrl };
--- a/src/components/SearchBox/searchBox.module.scss
+++ b/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;
@ -36,7 +33,7 @@
  border-radius: 5px;
  background-color: white;
  right: 30px;
-  top: 5px;
+  top: 0px;
  &::placeholder {
    color: #c4c4c4;
    font-weight: 400;
@ -49,6 +46,10 @@
      font-size: 28px;
    }
  }
+  @media screen and (max-width: 1024px) {
+    right: 30px;
+    top: 23px;
+  }
 }

 .searchImg {
--- a/src/components/Socials/Socials.tsx
+++ b/src/components/Socials/Socials.tsx
@ -11,19 +11,29 @@ const Socials = () => {
    <div className={styles["socials-wrapper"]}>
      <ul className={styles["socialsList"]}>
        <li className={styles["socials-item"]}>
-          <img src={facebookImg} alt="Facebook" />
+          <a href="">
+            <img src={facebookImg} alt="Facebook" />
+          </a>
        </li>
        <li className={styles["socials-item"]}>
-          <img src={instagramImg} alt="Instagram" />
+          <a href="">
+            <img src={instagramImg} alt="Instagram" />
+          </a>
        </li>
        <li className={styles["socials-item"]}>
-          <img src={twitterImg} alt="Twitter" />
+          <a href="">
+            <img src={twitterImg} alt="Twitter" />
+          </a>
        </li>
        <li className={styles["socials-item"]}>
-          <img src={youtubeImg} alt="Youtube" />
+          <a href="">
+            <img src={youtubeImg} alt="Youtube" />
+          </a>
        </li>
        <li className={styles["socials-item"]}>
-          <img src={linkedinImg} alt="Linkedin" />
+          <a href="">
+            <img src={linkedinImg} alt="Linkedin" />
+          </a>
        </li>
      </ul>
      <a className={styles["siteLink"]} href="/">
--- a/src/components/Socials/socials.module.scss
+++ b/src/components/Socials/socials.module.scss
@ -6,6 +6,7 @@
    li {
      margin-right: 10px;
    }
+    padding: 0 0 0 0;
  }
  a {
    text-decoration: none;
@ -19,4 +20,8 @@
      line-height: 32.81px;
    }
  }
+  img {
+    width: 35px;
+    height: 35px;
+  }
 }
--- a/src/components/Whatsapp/Whatsapp.tsx
+++ b/src/components/Whatsapp/Whatsapp.tsx
@ -1,10 +1,13 @@
 import React from "react";
 import whatsappImg from "./assets/image/whatsapp.png";
+import styles from "./whatsapp.module.scss";

 const Whatsapp = () => {
  return (
-    <div>
-      <img src={whatsappImg} alt="Whatsapp" />
+    <div className={styles["whatsapp-wrapper"]}>
+      <a href="https://wa.me/11994338825" target="_blank">
+        <img src={whatsappImg} alt="Whatsapp" />
+      </a>
    </div>
  );
 };
--- a/src/components/Whatsapp/whatsapp.module.scss
+++ b/src/components/Whatsapp/whatsapp.module.scss
@ -0,0 +1,10 @@
+.whatsapp-wrapper {
+  img {
+    width: 34px;
+    height: 34px;
+    @media screen and (min-width: 2500px) {
+      width: 66px;
+      height: 66px;
+    }
+  }
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,14 +1,25 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./styles/main.scss";
+import { BrowserRouter, Route } from "react-router-dom";
 import { Home } from "./pages/Home";
-
+import { Teste } from "./pages/Teste";
+import { Cursos } from "./pages/Cursos";
+import { RoutesUrl } from "./components/Router/Router";
+import { Header } from "./sectors/Header/Header";
+import { Footer } from "./sectors/Footer/Footer";
+import { Newsletter } from "./components/Newsletter/Newsletter";
 const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
 );
 root.render(
  <React.StrictMode>
-    <Home />
+    <BrowserRouter>
+      <Header></Header>
+      <RoutesUrl></RoutesUrl>
+
+      <Footer></Footer>
+    </BrowserRouter>
  </React.StrictMode>
 );

--- a/src/pages/Cursos.tsx
+++ b/src/pages/Cursos.tsx
@ -0,0 +1,14 @@
+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>
+      <Caminhos titulo={prop.titulo}></Caminhos>
+      <CursosBody></CursosBody>
+    </div>
+  );
+};
+
+export { Cursos };
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -1,13 +1,8 @@
 import React from "react";
-import { AccordionBody } from "../components/AccordionBody/AccordionBody";
-
-const Home = () => {
-  //const style = { background: "black" };
-  return (
-    <div /*style={style}*/>
-      <AccordionBody />
-    </div>
-  );
+import { Header } from "../sectors/Header/Header";
+import { Footer } from "../sectors/Footer/Footer";
+const Home = (prop: { titulo: string }) => {
+  return <div></div>;
 };

 export { Home };
--- a/src/pages/Teste.tsx
+++ b/src/pages/Teste.tsx
@ -0,0 +1,13 @@
+import React from "react";
+import { Header } from "../sectors/Header/Header";
+import { Caminhos } from "../components/Caminhos/Caminhos";
+
+const Teste = (prop: { titulo: string }) => {
+  return (
+    <div>
+      <Caminhos titulo={prop.titulo}></Caminhos>
+    </div>
+  );
+};
+
+export { Teste };
--- a/src/sectors/Body/CursosBody.tsx
+++ b/src/sectors/Body/CursosBody.tsx
@ -0,0 +1,7 @@
+import React from "react";
+
+const CursosBody = () => {
+  return <h2>Cursos</h2>;
+};
+
+export { CursosBody };
--- a/src/sectors/Footer/BottomFooter/BottomFooter.tsx
+++ b/src/sectors/Footer/BottomFooter/BottomFooter.tsx
@ -0,0 +1,23 @@
+import { Address } from "../../../components/Address/Address";
+import { Payments } from "../../../components/Payments/Payments";
+import { VtexPci } from "../../../components/Payments/Payments";
+import { PoweredBy } from "../../../components/PoweredBy/PoweredBy";
+import { DevelopedBy } from "../../../components/DevelopedBy/DevelopedBy";
+const BottomFooter = () => {
+  return (
+    <div className="bottom_footer">
+      <Address></Address>
+      <div className="bottom_footer_item pagamentos">
+        <Payments></Payments>
+        <p>|</p>
+        <VtexPci></VtexPci>
+      </div>
+      <div className="bottom_footer_item creation">
+        <PoweredBy></PoweredBy>
+        <DevelopedBy></DevelopedBy>
+      </div>
+    </div>
+  );
+};
+
+export { BottomFooter };
--- a/src/sectors/Footer/Footer.tsx
+++ b/src/sectors/Footer/Footer.tsx
@ -0,0 +1,14 @@
+import { TopFooter } from "./TopFooter/TopFooter";
+import { BottomFooter } from "./BottomFooter/BottomFooter";
+import { Newsletter } from "../../components/Newsletter/Newsletter";
+const Footer = () => {
+  return (
+    <div className="footer-wrapper">
+      <Newsletter></Newsletter>
+      <TopFooter></TopFooter>
+      <BottomFooter></BottomFooter>
+    </div>
+  );
+};
+
+export { Footer };
--- a/src/sectors/Footer/TopFooter/TopFooter.tsx
+++ b/src/sectors/Footer/TopFooter/TopFooter.tsx
@ -0,0 +1,24 @@
+import { Institutional } from "../../../components/Institutional/Institutional";
+import { Doubts } from "../../../components/Doubts/Doubts";
+import { Contact } from "../../../components/Contact/Contact";
+import { Socials } from "../../../components/Socials/Socials";
+import { Whatsapp } from "../../../components/Whatsapp/Whatsapp";
+
+const TopFooter = () => {
+  return (
+    <div className="top_footer_wrapper">
+      <Institutional></Institutional>
+
+      <Doubts></Doubts>
+
+      <Contact></Contact>
+
+      <div className="top_footer_socials">
+        <Socials></Socials>
+        <Whatsapp></Whatsapp>
+      </div>
+    </div>
+  );
+};
+
+export { TopFooter };
--- a/src/sectors/Header/BottomHeader/BottomHeader.tsx
+++ b/src/sectors/Header/BottomHeader/BottomHeader.tsx
@ -0,0 +1,14 @@
+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>
+  );
+};
+
+export { BottomHeader };
--- a/src/sectors/Header/Header.tsx
+++ b/src/sectors/Header/Header.tsx
@ -1,10 +1,11 @@
 import React from "react";
 import { TopHeader } from "./TopHeader/TopHeader";
-
+import { BottomHeader } from "./BottomHeader/BottomHeader";
 const Header = () => {
  return (
    <header className="header">
      <TopHeader />
+      <BottomHeader></BottomHeader>
    </header>
  );
 };
--- a/src/sectors/Header/TopHeader/TopHeader.tsx
+++ b/src/sectors/Header/TopHeader/TopHeader.tsx
@ -1,40 +1,21 @@
 import React from "react";
 import styles from "./styles.module.scss";
-import logoAcademy from "./assets/images/Logo-M3Academy 1.svg";
-import searchImg from "./assets/images/search_2.png";
-import cartImg from "./assets/images/cart_1.png";
+import { M3Logo } from "../../../components/M3Logo/M3Logo";

+import { SearchBox } from "../../../components/SearchBox/SearchBox";
+import { Enter } from "../../../components/Enter/Enter";
+import { Cart } from "../../../components/Cart/Cart";
 const TopHeader = () => {
  return (
-    <div className={styles["TopHeader"]}>
-      <img
-        className={styles["logoAcademyImg"]}
-        alt="LogoM3Academy"
-        src={logoAcademy}
-      />
-      <div className={styles["search-wrapper"]}>
-        <input
-          className={styles["search-input"]}
-          id="title-name"
-          name="title-name"
-          type="text"
-          placeholder="Buscar"
-          required
-        />
-        <button className={styles["buscaBtn"]}>
-          <img
-            className={styles["searchImg"]}
-            alt="LogoM3Academy"
-            src={searchImg}
-          />
-        </button>
+    <div className="top_header">
+      <M3Logo></M3Logo>
+      <div className="search_box">
+        <SearchBox></SearchBox>
+      </div>
+      <div className="sign_up">
+        <Enter></Enter>
+        <Cart></Cart>
      </div>
-      <a className={styles["loginLink"]} href="/">
-        ENTRAR
-      </a>
-      <a className={styles["cartLink"]} href="/">
-        <img className={styles["cartImg"]} src={cartImg} alt="ImagemCarrinho" />
-      </a>
    </div>
  );
 };
--- a/src/styles/common/global.scss
+++ b/src/styles/common/global.scss
@ -18,12 +18,3 @@ button {
 li {
  list-style-type: none;
 }
-/*
-$grid-breakpoints: (
-  xs: 0,
-  sm: 375px,
-  md: 768px,
-  lg: 1025px,
-  xl: 1280px,
-  xxl: 2500px,
-);*/
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@ -3,4 +3,10 @@
@import "common/reset.scss";
@import "partials/header.scss";
@import "partials/container.scss";
-@import "~bootstrap/scss/bootstrap";
+@import "utils/custom.scss";
+@import "partials/navigation.scss";
+@import "partials/top_header.scss";
+@import "partials/bottom_header.scss";
+@import "partials/top_footer.scss";
+@import "partials/footer.scss";
+@import "partials/bottom_footer.scss";
--- a/src/styles/partials/bottom_footer.scss
+++ b/src/styles/partials/bottom_footer.scss
@ -0,0 +1,30 @@
+.bottom_footer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  background: black;
+  margin: 0 auto;
+  padding: 20px 100px;
+  justify-content: space-between;
+}
+.bottom_footer_itens {
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+}
+
+.pagamentos {
+  display: flex;
+  flex-direction: row;
+
+  p {
+    color: white;
+  }
+  gap: 5px;
+}
+.creation {
+  display: flex;
+  flex-direction: row;
+  gap: 13px;
+}
--- a/src/styles/partials/bottom_header.scss
+++ b/src/styles/partials/bottom_header.scss
@ -0,0 +1,21 @@
+.bottom_header {
+  background: black;
+  padding: 0 100px 0 64px;
+  border-top: 1px solid #e5e5e5;
+  @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 {
+    }
+  }
+}
--- a/src/styles/partials/footer.scss
+++ b/src/styles/partials/footer.scss
@ -0,0 +1,8 @@
+.footer-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-top: 1px solid black;
+  margin-top: 81px;
+}
--- a/src/styles/partials/header.scss
+++ b/src/styles/partials/header.scss
@ -1,6 +1,4 @@
 .header {
  width: 100%;
-  height: 162px;
  background-color: $black100;
-  padding-top: 22px;
 }
--- a/src/styles/partials/navigation.scss
+++ b/src/styles/partials/navigation.scss
@ -0,0 +1,58 @@
+@media screen and (min-width: 1025px) {
+  .logoM3Img {
+    display: none;
+  }
+  .carrinho-wrapper {
+    display: none;
+  }
+}
+.logoM3Img {
+  width: 136px;
+}
+.nav-link {
+  font-family: "Roboto";
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  &:hover {
+    color: aqua;
+  }
+  .active {
+    color: aquamarine;
+  }
+  @media screen and (min-width: 2500px) {
+    font-size: 28px;
+  }
+  @media screen and (max-width: 1025px) {
+    color: #c4c4c4;
+  }
+}
+.bottom_header {
+  background: black;
+}
+
+.navbar-toggler {
+  background-color: transparent;
+}
+.navbar-toggler-icon {
+  background-color: white;
+}
+
+@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 {
+    background-color: #c4c4c4;
+  }
+  .offcanvas {
+    width: 100% !important;
+    height: 585px;
+  }
+}
--- a/src/styles/partials/top_footer.scss
+++ b/src/styles/partials/top_footer.scss
@ -0,0 +1,13 @@
+.top_footer_wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 50px 16px 64px 100px;
+  border-top: 1px solid black;
+}
+.top_footer_socials {
+  display: flex;
+  flex-direction: row;
+  gap: 50px;
+}
--- a/src/styles/partials/top_header.scss
+++ b/src/styles/partials/top_header.scss
@ -0,0 +1,15 @@
+.top_header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 auto;
+  padding: 22px 100px 22px 100px;
+  @media screen and (max-width: 1024px) {
+    display: none;
+  }
+}
+.sign_up {
+  display: flex;
+  flex-direction: row;
+  gap: 55px;
+}
--- a/src/styles/utils/custom.scss
+++ b/src/styles/utils/custom.scss
@ -0,0 +1,20 @@
+// Custom.scss
+// Option A: Include all of Bootstrap
+
+// Include any default variable overrides here (though functions won't be available)
+@import "/node_modules/bootstrap/scss/functions";
+
+$grid-breakpoints: (
+  xs: 0,
+  xsm: 362px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xpp: 1025px,
+  xl: 1200px,
+  xxl: 1400px,
+);
+
+@import "/node_modules/bootstrap/scss/bootstrap.scss";
+
+// Then add additional custom code here
--- a/yarn.lock
+++ b/yarn.lock
@ -1592,6 +1592,11 @@
  dependencies:
    "@swc/helpers" "^0.4.14"

+"@remix-run/router@1.3.0":
+  "integrity" "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA=="
+  "resolved" "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz"
+  "version" "1.3.0"
+
 "@restart/hooks@^0.4.6", "@restart/hooks@^0.4.7":
  "integrity" "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A=="
  "resolved" "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz"
@ -8341,7 +8346,7 @@
    "strip-ansi" "^6.0.1"
    "text-table" "^0.2.0"

-"react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.14.0", "react-dom@>=16.6.0":
+"react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.14.0", "react-dom@>=16.6.0", "react-dom@>=16.8":
  "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
  "version" "18.2.0"
@ -8394,6 +8399,21 @@
  "resolved" "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
  "version" "0.11.0"

+"react-router-dom@^6.7.0":
+  "integrity" "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg=="
+  "resolved" "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz"
+  "version" "6.7.0"
+  dependencies:
+    "@remix-run/router" "1.3.0"
+    "react-router" "6.7.0"
+
+"react-router@6.7.0":
+  "integrity" "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg=="
+  "resolved" "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz"
+  "version" "6.7.0"
+  dependencies:
+    "@remix-run/router" "1.3.0"
+
 "react-scripts@5.0.1":
  "integrity" "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ=="
  "resolved" "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz"
@ -8466,7 +8486,7 @@
    "loose-envify" "^1.4.0"
    "prop-types" "^15.6.2"

-"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8.0":
+"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
  "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
  "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
  "version" "18.2.0"