Home page

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/screens/App.js

@@ -1,58 +1,36 @@
+
+import Donation from './Donation';
+import Suggestions from './Suggestions';
+import  Register from './Register';
+import LogIn from './LogIn';
+import Camps from './camps';
+import CoexistanceRoom from './CoexistanceRoom';
+import FamilyWorkshop from './FamilyWorkshops';
+import OpenRoom from './openRoom';
+import SummerClub from './summerClub';
 import { BrowserRouter as Router, Route , Routes} from 'react-router-dom';
 import '../styles/styles.css';
-
-
+import HomePage from './HomePage';
 function App() {
   return (
-    <div className="App">
-      <div className='header'>
-        <div>
-          <ul><li>
-            <a>Actividades</a>
-            <ul>
-              <li><a>Campamentos</a></li>
-              <li><a>Clases</a></li>
-            </ul>
-          </li></ul>
-        </div>
-        <a>Donaciones</a>
-        <a>Sugerencias</a>
-        <a>Registrase</a>
-        <a>Iniciar Sesión</a>
-      </div>
-      <div className='main'>
-      <div className='title-text'>Esto es un Título</div>
-      <div className='text'>Esto es un ejemplo de texto para la información 
-      de las pantallas de la HomePage</div>
+    <Router>
+      <Routes>
+
+            <Route path="/" element={<HomePage />} />
+            <Route path="/donaciones" element={<Donation />} />
+            <Route path="/sugerencias" element={<Suggestions />} />
+            <Route path="/registrarse" element={<Register />} />
+            <Route path="/iniciar-sesion" element={<LogIn />} />
+            <Route path="/aula-abierta" element={<OpenRoom />} />
+            <Route path="/campamentos" element={<Camps />} />
+            <Route path="/aula-convivencia" element={<CoexistanceRoom />} />
+            <Route path="/talleres-familiares" element={<FamilyWorkshop />} />
+            <Route path="/club-verano" element={<SummerClub />} />
 
-      <div className='flex-container'>
-        <div className='field-text'>Nombre</div>
-        <input type='text' placeholder='Name'></input>
-        <input type='text' placeholder='Name'></input>
-        <input type='text' placeholder='Name'></input>
-        <select placeholder='Name'>
-          <option>campamentos</option>
-          <option>actividades</option>
-        </select>
-        <button className='button'>Enviar</button>
-      </div>
-    </div>
-
-    <div className='menu'>
-      <a>Voluntarios</a>
-      <a>Educadores</a>
-      <a>Familias</a>
-    </div>
-
-    <div className='footer'>
-    <div className='header-text'>Actividades</div>
-        <div className='header-text'>Donaciones</div>
-        <div className='header-text'>Sugerencias</div>
-        <div className='header-text'>Registrase</div>
-        <div className='header-text'>Inciar Sesión</div>
-    </div>
-    </div>
+            </Routes>
+    </Router>
+
+
   );
 }
-
 export default App;

src/screens/CoexistanceRoom.js

@@ -0,0 +1,8 @@
+function CoexistanceRoom() {
+    return (
+      <div>
+        <h1>Aula convivencia</h1>
+      </div>
+    );
+  }
+  export default CoexistanceRoom;

src/screens/Donation.js

@@ -0,0 +1,8 @@
+function Donation() {
+    return (
+      <div>
+        <h1>Donations</h1>
+      </div>
+    );
+  }
+    export default Donation;