From c4e3e0e93825df7d3666f3b12d456820ad6fbffa Mon Sep 17 00:00:00 2001
From: Patrick <patrickconservatorio@gmail.com>
Date: Fri, 20 Jan 2023 19:50:58 -0300
Subject: [PATCH] feat adiciona react-router no header

---
 package-lock.json                             | 61 +++++++++++++++++++
 package.json                                  |  1 +
 src/App.tsx                                   | 17 ------
 src/components/footer/footer.tsx              |  2 +-
 .../newsletter/newsletter.module.scss         |  0
 .../{ => footer}/newsletter/newsletter.tsx    |  0
 .../header/header-menu/header-menu.tsx        | 16 +++--
 src/components/header/header.module.scss      |  3 +-
 src/components/header/header.tsx              | 37 +++++------
 src/global.css                                | 13 ----
 src/global.module.scss                        | 13 ++++
 src/index.tsx                                 |  6 +-
 src/pages/Home.tsx                            | 15 +++++
 13 files changed, 126 insertions(+), 58 deletions(-)
 delete mode 100644 src/App.tsx
 rename src/components/{ => footer}/newsletter/newsletter.module.scss (100%)
 rename src/components/{ => footer}/newsletter/newsletter.tsx (100%)
 delete mode 100644 src/global.css
 create mode 100644 src/global.module.scss
 create mode 100644 src/pages/Home.tsx

diff --git a/package-lock.json b/package-lock.json
index f7ae6c0..728dd6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "react-dom": "^18.2.0",
         "react-headless-accordion": "^1.0.2",
         "react-modal": "^3.16.1",
+        "react-router-dom": "^6.7.0",
         "react-scripts": "5.0.1",
         "sass": "^1.57.1",
         "scss": "^0.2.4",
@@ -3086,6 +3087,14 @@
         }
       }
     },
+    "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/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14312,6 +14321,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",
@@ -19372,6 +19411,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@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=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -27388,6 +27432,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",
diff --git a/package.json b/package.json
index ca1658d..4de4a93 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0",
     "react-headless-accordion": "^1.0.2",
     "react-modal": "^3.16.1",
+    "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
     "scss": "^0.2.4",
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index def5054..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Header } from "./components/header/header";
-import { MainContent } from "./components/main/main-content";
-import { Footer } from "./components/footer/footer";
-import { FloatingButtons } from "./components/floating-buttons/floating-buttons";
-
-function App() {
-  return (
-    <div className="App">
-      <Header />
-      <MainContent />
-      <Footer />
-      <FloatingButtons />
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 585d047..96cd0d9 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -1,7 +1,7 @@
 import style from "./footer.module.scss";
 
 import { InfoAgencia } from "./info-agencia/info-agencia";
-import { Newsletter } from "../newsletter/newsletter";
+import { Newsletter } from "./newsletter/newsletter";
 import { InfoAgenciaMobile } from "./info-agencia-mobile/info-agencia-mobile";
 
 import boleto from "./assets/Boleto.png";
diff --git a/src/components/newsletter/newsletter.module.scss b/src/components/footer/newsletter/newsletter.module.scss
similarity index 100%
rename from src/components/newsletter/newsletter.module.scss
rename to src/components/footer/newsletter/newsletter.module.scss
diff --git a/src/components/newsletter/newsletter.tsx b/src/components/footer/newsletter/newsletter.tsx
similarity index 100%
rename from src/components/newsletter/newsletter.tsx
rename to src/components/footer/newsletter/newsletter.tsx
diff --git a/src/components/header/header-menu/header-menu.tsx b/src/components/header/header-menu/header-menu.tsx
index b7b4d91..12893b7 100644
--- a/src/components/header/header-menu/header-menu.tsx
+++ b/src/components/header/header-menu/header-menu.tsx
@@ -1,12 +1,16 @@
 import style from "./header-menu.module.scss";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+
 export function HeaderMenu() {
   return (
-    <div className={style.headerMenu}>
-      <div className={style.headerMenuContainer}>
-        <a href="/cursos">CURSOS</a>
-        <a href="/saiba-mais">SAIBA MAIS</a>
-        <a href="/institucionais">INSTITUCIONAIS</a>
+    <Router>
+      <div className={style.headerMenu}>
+        <div className={style.headerMenuContainer}>
+          <Link to="/cursos"> CURSOS</Link>
+          <Link to="/saiba-mais"> SAIBA MAIS</Link>
+          <Link to="/institucionais"> INSTITUCIONAIS</Link>
+        </div>
       </div>
-    </div>
+    </Router>
   );
 }
diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss
index 4c016a5..c540eec 100644
--- a/src/components/header/header.module.scss
+++ b/src/components/header/header.module.scss
@@ -79,13 +79,14 @@
       align-items: center;
       gap: 55px;
 
-      & span {
+      & a {
         font-family: "Roboto";
         font-style: normal;
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
         color: #ffffff;
+        text-decoration: none;
 
         @media (min-width: 2500px) {
           font-size: 28px;
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 4685a89..93c6563 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -3,6 +3,7 @@ import { HeaderRoute } from "./header-route/header-route";
 import { HeaderHamburger } from "./header-hamburger/header-hamburger";
 import { MenuAberto } from "./header-hamburger/menu-aberto";
 import { useState } from "react";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 
 import style from "./header.module.scss";
 import logoM3 from "./assets/logo.png";
@@ -13,30 +14,32 @@ export function Header() {
   const [openModal, setOpenModal] = useState(false);
   return (
     <>
-      <header className={style.header}>
-        <div className={style.headerMainContainer}>
-          <div className={style.headerContainer}>
-            <div className={style.headerLogoContainer}>
-              <img src={logoM3} alt="" />
-            </div>
-            <div className={style.headerSearch}>
-              <input type="text" placeholder="Buscar..." />
-              <a href="/">
-                {" "}
+      <Router>
+        <header className={style.header}>
+          <div className={style.headerMainContainer}>
+            <div className={style.headerContainer}>
+              <div className={style.headerLogoContainer}>
+                <a href="/home">
+                  {" "}
+                  <img src={logoM3} alt=""></img>
+                </a>
+              </div>
+              <div className={style.headerSearch}>
+                <input type="text" placeholder="Buscar..." />
                 <img
                   className={style.socialIcons}
                   src={searchIcon}
                   alt=""
                 ></img>
-              </a>
-            </div>
-            <div className={style.headerSafebuy}>
-              <span>ENTRAR</span>
-              <img src={cartBuy} alt="" />
+              </div>
+              <div className={style.headerSafebuy}>
+                <Link to="entrar">ENTRAR</Link>
+                <img src={cartBuy} alt="" />
+              </div>
             </div>
           </div>
-        </div>
-      </header>
+        </header>
+      </Router>
       <HeaderHamburger openModal={() => setOpenModal(true)} />
       <MenuAberto
         isOpen={openModal}
diff --git a/src/global.css b/src/global.css
deleted file mode 100644
index ec2585e..0000000
--- a/src/global.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/global.module.scss b/src/global.module.scss
new file mode 100644
index 0000000..4a1df4d
--- /dev/null
+++ b/src/global.module.scss
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/src/index.tsx b/src/index.tsx
index bb62e3b..98e47f9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./global.css";
-import App from "./App";
+import "./global.module.scss";
+import { Home } from "./pages/Home";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <Home />
   </React.StrictMode>
 );
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..98903ef
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,15 @@
+import { Header } from "../components/header/header";
+import { MainContent } from "../components/main/main-content";
+import { Footer } from "../components/footer/footer";
+import { FloatingButtons } from "../components/floating-buttons/floating-buttons";
+
+export function Home() {
+  return (
+    <div className="App">
+      <Header />
+      <MainContent />
+      <Footer />
+      <FloatingButtons />
+    </div>
+  );
+}