Añadida barra de navegación y footer

webapp/src/App.css

@@ -1,7 +1,8 @@
 #root{
   height: 90vh;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-start;
   align-items: center;
   text-align: center;
 }
@@ -26,6 +27,10 @@ input, button, a{
   touch-action: manipulation;
   width: 100%;
   will-change: transform;
+  -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
+  -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
+  box-shadow: 5px 5px 6px 0px rgba(0,255,192,1);
+  margin: 1rem;
 }
 
 input:hover, button:hover, a:hover {

webapp/src/components/Footer/Footer.css

@@ -0,0 +1,3 @@
+footer{
+    margin: 3rem;
+}

webapp/src/components/Footer/Footer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+import './Footer.css';
+
+const Footer = () => {
+    return(
+        <footer>
+            <h2>WIQ!</h2>
+            <p>Copyright 2024 ® Grupo 1A de Arquitectura del Software</p>
+        </footer>
+    );
+}
+
+export default Footer;

webapp/src/components/Nav/Nav.css

@@ -0,0 +1,32 @@
+.logo{
+    font-family: oswald,sans-serif;
+    width: 100%;
+    font-size: 5rem;
+    font-weight: 700;
+    margin: 0;
+    text-shadow: 4px 4px 0 #00ffc0;
+}
+
+nav{
+    width: 80vw;
+    display: flex;
+    flex-wrap: wrap;
+    border: 3px solid #0F0F0F;
+    border-radius: 1rem;
+    padding: 1rem;
+    margin: 1rem;
+    -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
+    -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
+    box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);  
+}
+
+nav ul{
+    display: flex;
+    flex-direction: row;
+}
+
+nav li{
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}

webapp/src/components/Nav/Nav.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+import './Nav.css';
+
+const Nav = () => {
+    return(
+        <nav>
+            <h1 className="logo">WIQ!</h1>
+            <ul>
+                <li><Link to="/home">Home</Link></li>
+                <li><Link to="/sobre">Sobre nosotros</Link></li>
+            </ul>
+        </nav>
+    );
+}
+
+export default Nav;

webapp/src/pages/Clasico/Clasico.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import "./Clasico.css";
 import Preguntas from "../../components/Preguntas";
 import { useNavigate } from "react-router-dom";
+import Nav from '../../components/Nav/Nav.js';
+import { Link } from 'react-router-dom';
 
 const JuegoPreguntas = () => {
   const [indicePregunta, setIndicePregunta] = useState(0);
@@ -87,30 +89,33 @@ const JuegoPreguntas = () => {
           Tu puntuación: {puntuacion}/{Preguntas.length}
         </p>
         <button onClick={handleRepetirJuego}>Repetir Juego</button>
-        <button onClick={handleVolverAlMenu}>Volver al Menú Principal</button>
+        <Link to="home">Volver al Menú Principal</Link>
       </div>
     );
   }
 
   return (
-    <div className="questionContainer">
-      <h2>Pregunta {indicePregunta + 1}:</h2>
-      <p>{preguntaActual.pregunta}</p>
-      <div className="responsesContainer">
-        {preguntaActual.respuestas.map((respuesta, index) => (
-          <button
-            key={index}
-            onClick={() => handleRespuestaSeleccionada(respuesta)}
-            disabled={tiempoRestante === 0 || juegoTerminado}
-            style={estiloRespuesta(respuesta)}
-          >
-            {respuesta}
-          </button>
-        ))}
+    <>
+      <Nav />
+      <div className="questionContainer">
+        <h2>Pregunta {indicePregunta + 1}:</h2>
+        <p>{preguntaActual.pregunta}</p>
+        <div className="responsesContainer">
+          {preguntaActual.respuestas.map((respuesta, index) => (
+            <button
+              key={index}
+              onClick={() => handleRespuestaSeleccionada(respuesta)}
+              disabled={tiempoRestante === 0 || juegoTerminado}
+              style={estiloRespuesta(respuesta)}
+            >
+              {respuesta}
+            </button>
+          ))}
+        </div>
+        <div className="timer">Tiempo restante: {tiempoRestante}</div>
+        <div className="points">Puntuación: {puntuacion}</div>
       </div>
-      <div className="timer">Tiempo restante: {tiempoRestante}</div>
-      <div className="points">Puntuación: {puntuacion}</div>
-    </div>
+    </>
   );
 };
 

webapp/src/pages/Home/Home.css

@@ -10,10 +10,11 @@ ul{
     list-style-type: none;
     text-align: center;
     gap: 1rem;
-    width: 50%;
     margin: auto;
+    padding: 0;
 }
 
 ul li{
     text-decoration: none;
+
 }

webapp/src/pages/Home/Home.js

@@ -1,19 +1,28 @@
 import React from "react";
 import "./Home.css";
+import Nav from '../../components/Nav/Nav.js';
+import Footer from '../../components/Footer/Footer.js';
 import { Link } from "react-router-dom";
 
 const Home = () => {
   return (
-    <div className="games-container">
-      <h1>Bienvenido a WIQ. Selecciona un modo de juego</h1>
-      <ul>
-        <a href="clasico">Clásico</a>
-        <a href="bateria">Batería de sabios</a>
-        <a href="descartando">Descartando</a>
-        <a href="pregunta">La pregunta caliente</a>
-        <a href="descubriendo">Descubriendo ciudades</a>
-      </ul>
-    </div>
+    <>
+      <Nav />
+      <div className="games-container">
+        <hgroup>
+          <h1>Bienvenido a WIQ!</h1>
+          <h2>Selecciona un modo de juego</h2>
+        </hgroup>         
+        <ul>
+          <Link to="clasico">Clásico</Link>
+          <Link to="bateria">Batería de sabios</Link>
+          <Link to="descartando">Descartando</Link>
+          <Link to="pregunta">La pregunta caliente</Link>
+          <Link to="descubriendo">Descubriendo ciudades</Link>
+        </ul>
+      </div>
+      <Footer />
+    </>
   );
 };
 

webapp/src/pages/WrongRoute/WrongRoute.css

@@ -1,23 +1,165 @@
-.notFoundContainer{
-    align-self: center;
-    grid-template-columns: 1fr;
+#notfound{
+    width: 90%;
+    display: flex;
+    justify-content: center;
 }
 
-.notFoundContainer h1, .notFoundContainer p{
-    font-family: montserrat, sans-serif;
-    font-size: 5rem;
-    font-weight: 900;
-    text-align: center;
-
+#notfound .notfound-bg>div {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: #eee
+}
+.notfound-bg>div{
+    z-index: -1;
+}
+
+#notfound .notfound-bg>div:nth-child(1) {
+    left: 20%
+}
+
+#notfound .notfound-bg>div:nth-child(2) {
+    left: 40%
+}
+
+#notfound .notfound-bg>div:nth-child(3) {
+    left: 60%
+}
+
+#notfound .notfound-bg>div:nth-child(4) {
+    left: 80%
+}
+
+#notfound .notfound-bg>div:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -.5px;
+    transform: translateY(50%);
+    height: 160px;
+    width: 10rem;
+    background-color: #00ffc0
+}
+
+@keyframes drop {
+    90% {
+        height: 20px
+    }
+
+    100% {
+        height: 160px;
+        -webkit-transform: translateY(calc(100vh + 160px));
+        transform: translateY(calc(100vh + 160px))
+    }
+}
+
+#notfound .notfound-bg>div:nth-child(1):after {
+    animation: drop 3s infinite linear;  
+    animation-delay: .2s
+}
+
+#notfound .notfound-bg>div:nth-child(2):after {
+    animation: drop 2s infinite linear; 
+    animation-delay: .7s
+}
+
+#notfound .notfound-bg>div:nth-child(3):after {
+    animation: drop 3s infinite linear;  
+    animation-delay: .9s
+}
+
+#notfound .notfound-bg>div:nth-child(4):after {
+    animation: drop 2s infinite linear;
+    animation-delay: 1.2s
 }
 
-.notFoundContainer h1{
-    font-size: 20vw;
-    text-shadow: -4px -4px 0px #00FFC0;
+.notfound {
+    max-width: 520px;
+    width: 100%;
+    text-align: center
+}
+
+.notfound .notfound-404 {
+    height: 210px;
+    line-height: 210px
+}
+
+.notfound .notfound-404 h1 {
+    font-family: oswald,sans-serif;
+    font-size: 188px;
+    font-weight: 700;
     margin: 0;
+    text-shadow: 4px 4px 0 #00ffc0;
+}
+
+.notfound h2 {
+    font-family: oswald,sans-serif;
+    font-size: 42px;
+    font-weight: 700;
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 1.6px
+}
+
+.notfound p {
+    font-family: lato,sans-serif;
+    color: #000;
+    font-weight: 400;
+    margin-top: 20px;
+    margin-bottom: 25px
+}
+
+.notfound a {
+    font-family: lato,sans-serif;
+    padding: 10px 30px;
+    display: inline-block;
+    color: #000;
+    font-weight: 400;
+    text-transform: uppercase;
+    -webkit-box-shadow: 0 0 0 2px #000,2px 2px 0 2px #00ffc0;
+    box-shadow: 0 0 0 2px #000,2px 2px 0 2px #00ffc0;
+    text-decoration: none;
+    -webkit-transition: .2s all;
+    transition: .2s all
 }
 
-.notFoundContainer p{
-    font-size: 5vw;
-    color: #0F0F0F;
-}
+.notfound a:hover {
+    background-color: #00ffc0;
+    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0;
+    box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0
+}
+
+.notfound-social {
+    margin-top: 35px
+}
+
+.notfound-social>a {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    padding: 0;
+    margin: 0 5px
+}
+
+.notfound-social>a:hover {
+    background-color: #00ffc0;
+    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0;
+    box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0
+}
+
+@media only screen and (max-width: 480px) {
+    .notfound .notfound-404 {
+        height:122px;
+        line-height: 122px
+    }
+
+    .notfound .notfound-404 h1 {
+        font-size: 122px
+    }
+
+    .notfound h2 {
+        font-size: 26px
+    }
+}