Uo277382

webapp/src/App.js

@@ -4,20 +4,22 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Home from "./components/Home";
 import Inicio from './components/Inicio';
+import Primera from './components/Primera';
 
 function App() {
 
   return (
-      <Router>
-        <Navbar />
-        <main className="main-content">
-          <Routes>
-            <Route path="/" element={<Inicio />} />
-            <Route path={process.env.RUTA_HOME || '/home'} element={<Home />} />
-          </Routes>
-        </main>
-      </Router>
-
+    <Router>
+    <Navbar />
+    <main className="main-content">
+      <Routes>
+        <Route path={process.env.RUTA_INICIO || '/'} element={<Primera />} />
+        <Route path={process.env.RUTA_LOGIN || '/login'} element={<Inicio />} />
+        <Route path={process.env.RUTA_HOME || '/home'} element={<Home />} />
+      </Routes>
+    </main>
+  </Router>  
+
   );
 }
 

webapp/src/App.test.js

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders primera', () => {
   render(<App />);
-  const linkElement = screen.getByText(/Welcome to the 2024 edition of the Software Architecture course/i);
+  const linkElement = screen.getByText(/Saber y Ganar: El Juego/i);
   expect(linkElement).toBeInTheDocument();
 });

webapp/src/components/Navbar.js

@@ -25,7 +25,7 @@ const Navbar = () => {
            </li>
 
            <li className="nav-item">
-             <NavLink to={process.env.RUTA_INICIO || '/'} className="nav__link">
+             <NavLink to={process.env.RUTA_LOGIN || '/login'} className="nav__link">
                Login
              </NavLink>
            </li>

webapp/src/components/Primera.css

@@ -0,0 +1,18 @@
+
+body:has(.box)
+{
+    height: 100vh;
+    background-image: url("../../public/background.png");
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size:cover;
+}
+
+
+.box .MuiTypography-h5
+{
+    color:black;
+    background-color: white;
+    border: 0.2em solid black;
+    border-radius: 10em;
+}

webapp/src/components/Primera.js

@@ -0,0 +1,22 @@
+import CssBaseline from '@mui/material/CssBaseline';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import "./Primera.css";
+
+function Primera() {
+
+
+
+  return (
+  <div class="box">
+    <Container>      
+        <CssBaseline />
+      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 20 }}>
+        Saber y Ganar: El Juego
+      </Typography>      
+    </Container>
+    </div>
+    );
+}
+
+export default Primera;

webapp/src/components/Primera.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import Primera from './Primera';
+
+test('renders learn react link', () => {
+  render(<Primera />);
+  const linkElement = screen.getByText(/Saber y Ganar: El Juego/i);
+  expect(linkElement).toBeInTheDocument();
+});