Error404 casi terminado.

frontend/.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],
   rules: {
+    "react/prop-types": "off",
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

frontend/src/Componentes/Botones.jsx

@@ -0,0 +1,33 @@
+import { Link } from "react-router-dom";
+
+const Botones = ({ button }) => {
+  if (!button) {
+    return;
+  }
+
+  return (
+    <>
+      <Link to={button.ruta}>
+        <button type="button" className="btn btn-dark">
+          {button.infBoton}
+        </button>
+      </Link>
+    </>
+  );
+};
+
+export default Botones;
+
+// function Botones(props) {
+//   const { infBoton, ruta } = props;
+
+//   return (
+//     <Link to={ruta}>
+//       <button type="button" className="btn">
+//         {infBoton}
+//       </button>
+//     </Link>
+//   );
+// }
+
+// export default Botones;

frontend/src/Componentes/EstilosGenerales.css

@@ -46,18 +46,12 @@ body {
   transition: border-color 0.25s;
 }
 .btn:hover {
-  border-color: var(--hoverBorde);
+  border-color: var(--hoverTexto);
   color: var(--hoverTexto);
   background-color: var(--fondoNav);
+  transition: 0.3s;
 }
 .btn :focus,
 .btn :focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-/* Card */
-
-.card {
-  width: 400px;
-  justify-content: center;
-}

frontend/src/Componentes/Estructura.jsx

@@ -1,39 +1,27 @@
 import { Route, Routes } from "react-router-dom";
-{
-  /* NavBar */
-}
-import ListaElMasToto from "./Pagina/ListaElMasToto";
+import ListaElMasTonto from "./Pagina/ListaElMasTonto";
 import CowboyDelDia from "./Pagina/CowboyDelDia";
-{
-  /* Estadisticas */
-}
-import EstadisticasElMasToto from "./Pagina/Estadisticas/EstadisticasElMasToto";
+import EstadisticasElMasTonto from "./Pagina/Estadisticas/EstadisticasElMasTonto";
 import EstadisticasCowboyDelDia from "./Pagina/Estadisticas/EstadisticasCowboyDelDia";
 import Proximamente from "./Pagina/Estadisticas/Proximamente";
-{
-  /* Error404 */
-}
 import Error404 from "./Pagina/Error404/Error404";
+import Inicio from "./Inicio";
 
 const Estructura = () => {
   return (
     <>
       <div className="campo">
         <Routes>
           {/* NavBar */}
-          <Route path="/" element={<ListaElMasToto />} />
+          <Route path="/ListaElMasTonto" element={<ListaElMasTonto />} />
           <Route path="/CowboyDelDia" element={<CowboyDelDia />} />
-          <Route path="/ListaElMasToto" element={<ListaElMasToto />} />
+
+          {/* Inicio */}
+          <Route path="/" element={<Inicio /> } />
 
           {/* Estadisticas */}
-          <Route
-            path="/EstadisticasElMasToto"
-            element={<EstadisticasElMasToto />}
-          />
-          <Route
-            path="/EstadisticasCowboyDelDia"
-            element={<EstadisticasCowboyDelDia />}
-          />
+          <Route path="/EstadisticasElMasTonto" element={<EstadisticasElMasTonto />} />
+          <Route path="/EstadisticasCowboyDelDia" element={<EstadisticasCowboyDelDia />} />
           <Route path="/Proximamente" element={<Proximamente />} />
 
           {/* Error404 */}

frontend/src/Componentes/Inicio.jsx

@@ -0,0 +1,26 @@
+import TarjetaDia from "./Pagina/InfoTonto/TarjetaDia";
+
+const Inicio = () => {
+  const tarjeta = {
+    persona: "Nombre: Jorge",
+    cantidad: "68",
+    titulos: "Titulos",
+    listaTitulos: "lol",
+  };
+
+  return (
+    <>
+      <section>
+        {/* Tarjeta del día del mas tonto */}
+        <h3 className="tituloH3">Tonto del día de hoy es...</h3>
+        <TarjetaDia tarjeta={tarjeta} />
+
+        {/* Tarjeta del cowboy del día */}
+        <h3 className="tituloH3">Cowboy del día de hoy es...</h3>
+        <TarjetaDia />
+      </section>
+    </>
+  );
+};
+
+export default Inicio;

frontend/src/Componentes/NavBar/NavBar.jsx

@@ -36,8 +36,9 @@ const NavBar = () => {
           >
             <ul className="navbar-nav">
               <li className="nav-item">
-                <Link className="nav-link" to="/ListaElMasToto">
-                  El más toto
+                <Link className="nav-link" 
+                  to="/ListaElMasTonto">
+                  El más tonto
                 </Link>
               </li>
               <li className="nav-item">
@@ -61,8 +62,8 @@ const NavBar = () => {
                 </Link>
                 <ul className="menuEsta dropdown-menu">
                   <li>
-                    <Link className="menuEstadisticas dropdown-item" to="EstadisticasElMasToto">
-                      El más toto
+                    <Link className="menuEstadisticas dropdown-item" to="EstadisticasElMasTonto">
+                      El más tonto
                     </Link>
                   </li>
                   <li>

frontend/src/Componentes/Pagina/Error404/Error404.jsx

@@ -1,9 +1,28 @@
+import Botones from "../../Botones.jsx";
+import TarjetaDia from "../InfoTonto/TarjetaDia.jsx";
+
 const Error404 = () => {
+  const tarjeta = {
+    persona: "Error 404",
+    titulos: "¡Alto ahí, forastero!",
+    listaTitulos:
+      "Parece que has encontrado un territorio desconocido en el vasto desierto digital. No te preocupes, nuestros sheriff de la red están en camino para guiarte de regreso al pueblo principal. Mientras tanto, ¿por qué no te relajas con un poco de música en nuestro salon virtual?",
+    boton: "boton",
+  };
+
+  const button = {
+    ruta: "/",
+    infBoton: "Inicio"
+  }
+
   return (
     <>
-      <h2>Error 404</h2> 
+      <div>
+        <TarjetaDia tarjeta={tarjeta} />
+        <Botones button={button} />
+      </div>
     </>
   );
 };
 
-export default Error404;
+export default Error404;

frontend/src/Componentes/Pagina/Estadisticas/EstadisticasElMasToto.jsx → frontend/src/Componentes/Pagina/Estadisticas/EstadisticasElMasTonto.jsx

@@ -1,4 +1,4 @@
-const EstadisticasElMasToto = () => {
+const EstadisticasElMasTonto = () => {
   return (
     <>
       <section>
@@ -8,4 +8,4 @@ const EstadisticasElMasToto = () => {
   );
 };
 
-export default EstadisticasElMasToto;
+export default EstadisticasElMasTonto;

frontend/src/Componentes/Pagina/Estadisticas/ListaElMasToto.jsx → frontend/src/Componentes/Pagina/Estadisticas/ListaElMasTonto.jsx

@@ -1,7 +1,7 @@
 import "./EstilosEstadisticas.css";
 // import MayorMenor from "./MayorMenor";
 
-const ListaElMasToto = () => {
+const ListaElMasTonto = () => {
   return (
     <>
       <section>
@@ -55,4 +55,4 @@ const ListaElMasToto = () => {
   );
 };
 
-export default ListaElMasToto;
+export default ListaElMasTonto;

frontend/src/Componentes/Pagina/EstilosElMasToto.css → frontend/src/Componentes/Pagina/EstilosElMasTonto.css

@@ -14,7 +14,7 @@
 
 /* Principal */
 .principal {
-  margin-top: 2rem;
+  /* margin-top: 2rem; */
 }
 .principal li {
   background-color: var(--fondoNav);
@@ -51,6 +51,7 @@ span {
 .tituloH3 {
   text-align: center;
   width: 28rem;
+  margin: 12px
 }
 .titulosObtenidos {
   color: var(--texto);

frontend/src/Componentes/Pagina/InfoTonto/ListaParticipantes.jsx

@@ -0,0 +1,55 @@
+import ListaTitulos from "./ListaTitulos";
+
+
+const ListaParticipantes = () => {
+  return (
+    <>
+      <ol className="principal list-group list-group-numbered">
+        <li className="list-group-item d-flex justify-content-between align-items-start">
+          <div className="logros ms-2 me-auto">
+            <div className="nombre fw-bold">German</div>
+            <ListaTitulos />
+          </div>
+          <span className="badge">88</span>
+        </li>
+        <li className="list-group-item d-flex justify-content-between align-items-start">
+          <div className="logros ms-2 me-auto">
+            <div className="nombre fw-bold">Cristian</div>
+            --Título más reciente.--
+          </div>
+          <span className="badge">78</span>
+        </li>
+        <li className="list-group-item d-flex justify-content-between align-items-start">
+          <div className="logros ms-2 me-auto">
+            <div className="nombre fw-bold">Pablo</div>
+            --Título más reciente.--
+          </div>
+          <span className="badge">75</span>
+        </li>
+        <li className="list-group-item d-flex justify-content-between align-items-start">
+          <div className="logros ms-2 me-auto">
+            <div className="nombre fw-bold">Franco</div>
+            --Título más reciente.--
+          </div>
+          <span className="badge">75</span>
+        </li>
+        <li className="list-group-item d-flex justify-content-between align-items-start">
+          <div className="logros ms-2 me-auto">
+            <div className="nombre fw-bold">Marcelo</div>
+            --Título más reciente.--
+          </div>
+          <span className="badge">68</span>
+        </li>
+        <li className="list-group-item d-flex justify-content-between align-items-start">
+          <div className="logros ms-2 me-auto">
+            <div className="nombre fw-bold">Jorge</div>
+            --Título más reciente.--
+          </div>
+          <span className="badge">68</span>
+        </li>
+      </ol>
+    </>
+  );
+};
+
+export default ListaParticipantes;

frontend/src/Componentes/Pagina/Tarjetas/ListaTitulos.jsx → frontend/src/Componentes/Pagina/InfoTonto/ListaTitulos.jsx

@@ -16,7 +16,7 @@ const ListaTitulos = () => {
         </a>
       </p>
       <div className="collapse " id="collapseExample">
-        <div className="fondoNav">Navideño, Cumpleañero, Poker Tonto</div>
+        <div className="fondoNav">...</div>
       </div>
     </>
   );

frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx → frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx

@@ -1,9 +1,11 @@
-import "../EstilosElMasToto.css";
+import "../EstilosElMasTonto.css";
 
-const TarjetaDia = () => {
+const TarjetaDia = ({ tarjeta }) => {
+  if (!tarjeta) {
+    return;
+  }
   return (
     <>
-      <h3 className="tituloH3">Tonto del día de hoy es...</h3>
       <div className="principal card mb-3">
         <div className="row g-0">
           <div className="fondoNav col-md-4">
@@ -13,16 +15,16 @@ const TarjetaDia = () => {
               alt="Icono cowboys"
             />
           </div>
-          <div className="col-md-8">
+          <div className="fondoNav col-md-8">
             <div className="fondoNav card-body">
               <h5 className="nombre card-title">
-                Nombre: Jorge
-                <span className="badge float-right">68</span>
+                {tarjeta.persona}
+                <span className="badge float-right">{tarjeta.cantidad}</span>
               </h5>
-              <h6 className="fondoNav card-text">Títulos: 6</h6>
+              <h6 className="fondoNav card-text">{tarjeta.titulos}</h6>
               <div>
                 <p className="titulosObtenidos fondoNav">
-                  Justiciero, Gil trabajador, Poker Tonto, Navideño
+                  {tarjeta.listaTitulos}
                 </p>
               </div>
             </div>

frontend/src/Componentes/Pagina/ListaElMasTonto.jsx

@@ -0,0 +1,32 @@
+import TarjetaDia from "./InfoTonto/TarjetaDia";
+import ListaParticipantes from "./InfoTonto/ListaParticipantes";
+
+const ListaElMasTonto = () => {
+  const tarjeta = {
+    persona: "Nombre: Jorge",
+    cantidad: "68",
+    titulos: "Titulos",
+    listaTitulos: "lol",
+  };
+  const LP = {
+    persona: "Jorge",
+    cantidad: "68",
+  };
+
+  return (
+    <>
+      <section>
+        {/* Tarjeta del día */}
+      <h3 className="tituloH3">Tonto del día de hoy es...</h3>
+        <TarjetaDia tarjeta={tarjeta} />
+
+        {/* Lista de participantes */}
+        <h3 className="tituloH3">Lista de participantes</h3>
+        <ListaParticipantes LP={LP} />
+        <ListaParticipantes LP={LP} />
+      </section>
+    </>
+  );
+};
+
+export default ListaElMasTonto;