From f3e844d4df438cd0a0e76209068f210a9e248cec Mon Sep 17 00:00:00 2001
From: Emmanuel Vitor <emmanuelvitor.ti@gmail.com>
Date: Wed, 18 Jan 2023 23:14:35 -0300
Subject: [PATCH] fix: corrige erro inicial das rotas do projeto

---
 .../Header/HeaderDesk/HeaderBottom.tsx        |  4 +-
 .../Header/HeaderDesk/HeaderTop.tsx           | 10 ++--
 .../Header/HeaderMobile/BurguerMenu.tsx       |  4 +-
 .../Header/HeaderMobile/HeaderMobile.tsx      |  4 +-
 src/components/Layout/index.tsx               | 25 ++++++++++
 src/components/Layout/styles.module.scss      | 50 +++++++++++++++++++
 src/pages/Home.tsx                            | 16 ++----
 .../{Instituitional.tsx => index.tsx}         |  4 +-
 src/routes.tsx                                | 14 ++++--
 9 files changed, 103 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Layout/index.tsx
 create mode 100644 src/components/Layout/styles.module.scss
 rename src/pages/Intitucional/{Instituitional.tsx => index.tsx} (97%)

diff --git a/src/components/Header/HeaderDesk/HeaderBottom.tsx b/src/components/Header/HeaderDesk/HeaderBottom.tsx
index 75069bb..60f5b8e 100644
--- a/src/components/Header/HeaderDesk/HeaderBottom.tsx
+++ b/src/components/Header/HeaderDesk/HeaderBottom.tsx
@@ -7,10 +7,10 @@ export const HeaderBottom = () => {
         <div className={styleHeader["header__bottom"]}>
             <nav className={styleHeader["navBar__items"]}>
 
-                <Link className={styleHeader["list__items__link"]} to="/cursos">
+                <Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
                     Cursos
                 </Link>
-                <Link className={styleHeader["list__items__link"]} to="/saiba-mais">
+                <Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
                     Saiba Mais
                 </Link>
                 <Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
diff --git a/src/components/Header/HeaderDesk/HeaderTop.tsx b/src/components/Header/HeaderDesk/HeaderTop.tsx
index a8c258a..179f51e 100644
--- a/src/components/Header/HeaderDesk/HeaderTop.tsx
+++ b/src/components/Header/HeaderDesk/HeaderTop.tsx
@@ -10,21 +10,21 @@ export const HeaderTop = () => {
     return (
         <div className={styleHeader["header__top"]}>
             <div className={styleHeader["container__header__top"]}>
-                <Link to="/" className={styleHeader["container__logo"]}>
+                <Link to="/institucional/sobre" className={styleHeader["container__logo"]}>
                     < img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} />
                 </Link>
                 <form className={styleHeader["container__search"]}>
                     <input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
-                    <a className={styleHeader["container__search__link"]} href="/">
+                    <Link className={styleHeader["container__search__link"]} to="/institucional/sobre">
                         <img className={styleHeader["container__search__link__img"]} src={search} alt="Icone de busca" />
-                    </a>
+                    </Link>
                 </form>
                 <div className={styleHeader["container__menu"]} >
                     <span className={styleHeader["container__menu__enter"]}>
-                        <a href="/">Entrar</a>
+                        <Link to="/institucional/sobre">Entrar</Link>
                     </span>
                     <span className={styleHeader["container__menu__cart"]}>
-                        <Link to="/" >
+                        <Link to="/institucional/sobre" >
                             <img src={cart} alt="icone de cart" />
                         </Link>
                     </span>
diff --git a/src/components/Header/HeaderMobile/BurguerMenu.tsx b/src/components/Header/HeaderMobile/BurguerMenu.tsx
index be26253..84f72a7 100644
--- a/src/components/Header/HeaderMobile/BurguerMenu.tsx
+++ b/src/components/Header/HeaderMobile/BurguerMenu.tsx
@@ -30,10 +30,10 @@ export const BurguerMenu = ({ isOpenMenu, setisOpenMenu }: MenuMobile) => {
                     </div>
                 </div>
                 <nav className={styleHeader["navBar__items"]}>
-                    <Link className={styleHeader["list__items__link"]} to="/cursos">
+                    <Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
                         Cursos
                     </Link>
-                    <Link className={styleHeader["list__items__link"]} to="/saiba-mais">
+                    <Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
                         Saiba Mais
                     </Link>
                     <Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
diff --git a/src/components/Header/HeaderMobile/HeaderMobile.tsx b/src/components/Header/HeaderMobile/HeaderMobile.tsx
index 6519ce4..f2c1471 100644
--- a/src/components/Header/HeaderMobile/HeaderMobile.tsx
+++ b/src/components/Header/HeaderMobile/HeaderMobile.tsx
@@ -23,13 +23,13 @@ export const HeaderMobile = () => {
                 </div>
                 <div className={styleHeader["container__menu"]} >
                     <span className={styleHeader["container__menu_cart"]}>
-                        <a href="/" ><img src={cart} alt="icone de cart" /></a>
+                        <a href="/institucional/sobre" ><img src={cart} alt="icone de cart" /></a>
                     </span>
                 </div>
             </div>
             <form className={styleHeader["container__search__mobile"]}>
                 <input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
-                <a className={styleHeader["container__search__link"]} href="/">
+                <a className={styleHeader["container__search__link"]} href="/institucional/sobre">
                     <img src={search} alt="Icone de busca" />
                 </a>
             </form>
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
new file mode 100644
index 0000000..d503a4f
--- /dev/null
+++ b/src/components/Layout/index.tsx
@@ -0,0 +1,25 @@
+import { Outlet } from "react-router-dom"
+import { Footer } from "../Footer/Footer"
+import { Header } from "../Header/Header"
+import { BreadCrumb } from "../BreadCrumb/BreadCreumb"
+import styles from "./styles.module.scss"
+
+
+
+
+
+export const Layout = () => {
+
+
+    return (
+        <div className={styles["container"]}>
+            <Header />
+            <BreadCrumb />
+            <main className={styles["main"]}>
+                <Outlet />
+            </main>
+
+            <Footer />
+        </div >
+    )
+}
\ No newline at end of file
diff --git a/src/components/Layout/styles.module.scss b/src/components/Layout/styles.module.scss
new file mode 100644
index 0000000..2cf3823
--- /dev/null
+++ b/src/components/Layout/styles.module.scss
@@ -0,0 +1,50 @@
+@import "../../variaveis";
+
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    overflow: hidden;
+}
+
+.main {
+    display: flex;
+
+    height: auto;
+    margin: 0 100px;
+
+
+    flex-direction: column;
+
+    @media (min-width: 3000px) {
+        min-height: 897px;
+
+    }
+
+    @media (max-width:$tablets) {
+        margin: 0 16px;
+        // z-index: -9;
+
+    }
+
+    h1 {
+        text-align: center;
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 28px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+
+        color: $color-black1;
+
+        @media (min-width:$full) {
+            font-size: 48px;
+            line-height: 56px;
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 3331239..f8af57d 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,7 +1,6 @@
-import { Outlet } from "react-router-dom"
-import { Footer } from "../components/Footer/Footer"
-import { Header } from "../components/Header/Header"
-import { BreadCrumb } from "../components/BreadCrumb/BreadCreumb"
+
+
+
 import styles from "./styles.module.scss"
 
 
@@ -10,15 +9,10 @@ import styles from "./styles.module.scss"
 
 export const Home = () => {
 
+
     return (
         <div className={styles["container"]}>
-            <Header />
-            <BreadCrumb />
-            <main className={styles["main"]}>
-                <Outlet />
-            </main>
-
-            <Footer />
+            <h1>HOME</h1>
         </div >
     )
 }
\ No newline at end of file
diff --git a/src/pages/Intitucional/Instituitional.tsx b/src/pages/Intitucional/index.tsx
similarity index 97%
rename from src/pages/Intitucional/Instituitional.tsx
rename to src/pages/Intitucional/index.tsx
index c7f3d32..d9012f8 100644
--- a/src/pages/Intitucional/Instituitional.tsx
+++ b/src/pages/Intitucional/index.tsx
@@ -1,9 +1,9 @@
-import React from "react";
 import { NavLink, Outlet } from "react-router-dom";
 
 import styleInstitucional from "./Instituitional.module.scss"
 
-export const Instituitional = () => {
+export const Institucional = () => {
+
 
     return (
         <>
diff --git a/src/routes.tsx b/src/routes.tsx
index 3bdcdf4..7496e6a 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,21 +1,25 @@
-import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
+import { Routes as ReactRouterRoutes, Route, Navigate } from "react-router-dom"
 import { Home } from "./pages/Home"
 import { Contact } from "./pages/Intitucional/Contact"
 import { Delivery } from "./pages/Intitucional/Delivery"
 import { FormOfPayment } from "./pages/Intitucional/FormOfPayment"
-import { Instituitional } from "./pages/Intitucional/Instituitional"
+import { Institucional } from "./pages/Intitucional"
 import { SecurityAndPrivacy } from "./pages/Intitucional/SecurityAndPrivacy"
 import { About } from "./pages/Intitucional/About"
 import { ExchangeAndEvolution } from "./pages/Intitucional/ExchangeAndEvolution"
+import { Layout } from "./components/Layout"
 
 
 
 export const Routes = () => {
 
+
+
     return (
         <ReactRouterRoutes>
-            <Route path="/" element={< Home />}>
-                < Route path="institucional" element={<Instituitional />} >
+            <Route path="/" element={<Layout />}>
+                <Route index element={<Navigate to="/institucional/sobre" replace />} />
+                <Route path="institucional" element={<Institucional />}>
                     <Route path="sobre" element={<About />} />
                     <Route path="forma-de-pagamento" element={<FormOfPayment />} />
                     <Route path="entrega" element={<Delivery />} />
@@ -23,6 +27,8 @@ export const Routes = () => {
                     <Route path="seguranca-e-privacidade" element={<SecurityAndPrivacy />} />
                     <Route path="contato" element={<Contact />} />
                 </Route>
+
+
             </Route>
         </ReactRouterRoutes >
     )
-- 
2.34.1