crear el footer y su css

webapp/src/App.js

@@ -52,7 +52,7 @@ import Login from './components/Login';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-
+import Footer from './components/Footer';
 function App() {
   return (
 
@@ -64,6 +64,8 @@ function App() {
       {/* Aquí se muestra el componente GenerateQuestion */}
 
       <GenerateQuestion />
+
+      <Footer> </Footer>
     </Container>
   );
 }

webapp/src/components/Footer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import '../styles/Footer.css'; // Asegúrate de importar tu archivo de estilos si es necesario
+
+const Footer = () => (
+  <footer className="footer">
+    <p>Trabajo de Arquitectura del Software</p>
+    <p>
+      <a href="https://github.com/Arquisoft/wiq_es04c" target="_blank" rel="noopener noreferrer">
+        Github del Proyecto
+      </a>
+    </p>
+    <p>
+        <a href="https://ingenieriainformatica.uniovi.es" target="_blank"rel="noopener noreferrer">Escuela de Ingeniería Informática</a></p>
+  </footer>
+);
+
+export default Footer;

webapp/src/index.js

@@ -12,7 +12,7 @@ root.render(
   <React.StrictMode>
     <Navbar></Navbar>
 
-     <App />
+    <App />
 
   </React.StrictMode>
 );

webapp/src/styles/Footer.css

@@ -0,0 +1,26 @@
+/* Estilo para el pie de página */
+/* Estilos del pie de página */
+.footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    left:0%;
+    background-color: #001f3f;
+    color: #ffffff;
+    padding: 10px;
+    text-align: center;
+    display: flex;
+    justify-content: space-around; /* Distribuye los elementos horizontalmente */
+    align-items: center;
+  }
+
+  .footer a {
+    color: #ffffff; /* Enlaces en texto blanco */
+    text-decoration: none;
+
+  }
+
+  .footer a:hover {
+    text-decoration: underline; /* Subraya enlaces al pasar el ratón */
+  }
+