feat: modificação em componentes e estruturação router

public/images/site.webmanifest

@@ -1 +1 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{"name":"","short_name":"","icons":[{"src":"/images/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/images/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/App.jsx

@@ -1,24 +1,29 @@
 import { GlobalStyles } from './styles.global';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
+import Home from './pages/Home/Home';
+import Header from './components/layouts/Header/Header'
 
-function App() {
+const App = () => {
     return (
         <>
             <GlobalStyles />
-            <h1>teste</h1>
             <BrowserRouter>
+                <Header />
+                
                 <Routes>
                     <Route path='/'>
-                        <Route path='historia' element={<Layout />} />
-                        <Route path='objetivos' element={<Layout />} />
-                        <Route path='projetos' element={<Layout />} />
-                        <Route path='parceiros' element={<Layout />} />
-                        <Route path='contato' element={<Layout />} />
+                        <Route path='historia' />
+                        <Route path='objetivos' />
+                        <Route path='projetos' />
+                        <Route path='parceiros' />
+                        <Route path='contato' />
+                        <Route path='associar' />
+                        <Route path='diretoria' />
                     </Route>
                 </Routes>
             </BrowserRouter>
         </>
     );
-}
+};
 
 export default App;

src/components/layouts/Footer/Footer.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Footer = () => {
+    return (
+        <>
+            <h2>footer</h2>
+        </>
+    );
+};
+
+export default Footer;

src/components/layouts/Header/Header.jsx

@@ -1,26 +1,41 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import Logo from '../../../assets/img/LogoLagoaSerena.svg';
+import { Link, Outlet } from 'react-router-dom';
 
 const Header = () => {
     return (
+        <>
             <header className='header'>
                 <nav className='nav'>
+                    <div className='logo'>
+                        <img src={Logo} alt='Logo Lagoa Serena' />
+                    </div>
                     <ul className='nav-links'>
                         <li>
-                        <Link to='/'>Home</Link>
+                            <Link to='/'>Inicio</Link>
                         </li>
                         <li>
-                        <Link to='/about'>About</Link>
+                            <Link to='/historia'>História</Link>
                         </li>
                         <li>
-                        <Link to='/services'>Services</Link>
+                            <Link to='/diretoria'>Diretoria</Link>
                         </li>
                         <li>
-                        <Link to='/contact'>Contact</Link>
+                            <Link to='/parceiros'>Parceiros</Link>
+                        </li>
+                        <li>
+                            <Link to='/projetos'>Projetos</Link>
+                        </li>
+                        <li>
+                            <Link to='/contato'>Contato</Link>
+                        </li>
+                        <li>
+                            <Link to='/associar'>Associar-se</Link>
                         </li>
                     </ul>
                 </nav>
             </header>
+        </>
     );
 };
 

src/components/layouts/Header/Header.styles.js

@@ -0,0 +1,3 @@
+import styled from "styled-components";
+
+export const Header = styled.div

src/pages/Associar/Associar.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Associar = () => {
+    return (
+        <>
+            <p>Associar</p>
+        </>
+    );
+};
+
+export default Associar;

src/pages/Contato/Contato.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Contato = () => {
+    return (
+        <>
+            <p>Contato</p>
+        </>
+    );
+};
+
+export default Contato;

src/pages/Diretoria/Diretoria.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Diretoria = () => {
+    return (
+        <>
+            <p>Diretoria</p>
+        </>
+    );
+};
+
+export default Diretoria;

src/pages/Historia/Historia.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Historia = () => {
+    return (
+        <>
+            <p>Historia</p>
+        </>
+    );
+};
+
+export default Historia;

src/pages/Home/Home.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home = () => {
+    return (
+        <>
+            <p>Home</p>
+        </>
+    );
+};
+
+export default Home;

src/pages/Parceiros/Parceiros.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Parceiros = () => {
+    return (
+        <>
+            <p>Parceiros</p>
+        </>
+    );
+};
+
+export default Parceiros;

src/pages/Projetos/Projetos.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Projetos = () => {
+    return (
+        <>
+            <p>Projetos</p>
+        </>
+    );
+};
+
+export default Projetos;