From 2ac912eccb343f92e02d3c0f6874887b2f33a33c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Sat, 17 Feb 2024 09:52:33 -0300
Subject: [PATCH 01/16] Carpeta 404.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

He creado una carpeta específica para almacenar el componente 404. Esto facilitará la organización, especialmente porque planeo agregar más contenido al error 404 en el futuro.
---
 frontend/src/Componentes/Estructura.jsx                     | 2 +-
 frontend/src/Componentes/Pagina/{ => Error404}/Error404.jsx | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/Componentes/Pagina/{ => Error404}/Error404.jsx (100%)

diff --git a/frontend/src/Componentes/Estructura.jsx b/frontend/src/Componentes/Estructura.jsx
index bc03907..d91e849 100644
--- a/frontend/src/Componentes/Estructura.jsx
+++ b/frontend/src/Componentes/Estructura.jsx
@@ -13,7 +13,7 @@ import Proximamente from "./Pagina/Estadisticas/Proximamente";
 {
   /* Error404 */
 }
-import Error404 from "./Pagina/Error404";
+import Error404 from "./Pagina/Error404/Error404";
 
 const Estructura = () => {
   return (
diff --git a/frontend/src/Componentes/Pagina/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
similarity index 100%
rename from frontend/src/Componentes/Pagina/Error404.jsx
rename to frontend/src/Componentes/Pagina/Error404/Error404.jsx

From f0175d02420ffed9ff89d6f8d6fa1bb3a79ce92b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Sat, 17 Feb 2024 16:31:24 -0300
Subject: [PATCH 02/16] Borrando Comentarios
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

😁😀
---
 frontend/src/Componentes/Estructura.jsx | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/frontend/src/Componentes/Estructura.jsx b/frontend/src/Componentes/Estructura.jsx
index d91e849..6b2e829 100644
--- a/frontend/src/Componentes/Estructura.jsx
+++ b/frontend/src/Componentes/Estructura.jsx
@@ -1,18 +1,9 @@
 import { Route, Routes } from "react-router-dom";
-{
-  /* NavBar */
-}
 import ListaElMasToto from "./Pagina/ListaElMasToto";
 import CowboyDelDia from "./Pagina/CowboyDelDia";
-{
-  /* Estadisticas */
-}
 import EstadisticasElMasToto from "./Pagina/Estadisticas/EstadisticasElMasToto";
 import EstadisticasCowboyDelDia from "./Pagina/Estadisticas/EstadisticasCowboyDelDia";
 import Proximamente from "./Pagina/Estadisticas/Proximamente";
-{
-  /* Error404 */
-}
 import Error404 from "./Pagina/Error404/Error404";
 
 const Estructura = () => {
@@ -26,14 +17,8 @@ const Estructura = () => {
           <Route path="/ListaElMasToto" element={<ListaElMasToto />} />
 
           {/* Estadisticas */}
-          <Route
-            path="/EstadisticasElMasToto"
-            element={<EstadisticasElMasToto />}
-          />
-          <Route
-            path="/EstadisticasCowboyDelDia"
-            element={<EstadisticasCowboyDelDia />}
-          />
+          <Route path="/EstadisticasElMasToto" element={<EstadisticasElMasToto />} />
+          <Route path="/EstadisticasCowboyDelDia" element={<EstadisticasCowboyDelDia />} />
           <Route path="/Proximamente" element={<Proximamente />} />
 
           {/* Error404 */}

From 64dfeaeaa754d4454e61b242c65589b8b998e3a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Sat, 17 Feb 2024 20:32:10 -0300
Subject: [PATCH 03/16] Error 404 pronto?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El componente de Error 404 está casi terminado.
Solo falta agregarle algunos detalles más, pero me he quedado sin ideas por el momento.
Solicité a Christian que creara una imagen para este componente; aún no estoy seguro si lo hará, pero mientras tanto, utilizaremos la que tenemos.
Por otro lado, en VSC me aparece un error en el componente del botón relacionado con los PROPS. No sé la razón exacta, pero a pesar de eso, sigue funcionando correctamente.
---
 frontend/src/Componentes/Botones.jsx          | 15 ++++++++++
 frontend/src/Componentes/Botons.jsx           |  9 ------
 frontend/src/Componentes/EstilosGenerales.css |  3 +-
 .../Componentes/Pagina/Error404/Error404.css  | 19 +++++++++++++
 .../Componentes/Pagina/Error404/Error404.jsx  | 28 ++++++++++++++++++-
 .../src/Componentes/Pagina/Estadisticas.jsx   | 14 ----------
 6 files changed, 63 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/Componentes/Botones.jsx
 delete mode 100644 frontend/src/Componentes/Botons.jsx
 create mode 100644 frontend/src/Componentes/Pagina/Error404/Error404.css
 delete mode 100644 frontend/src/Componentes/Pagina/Estadisticas.jsx

diff --git a/frontend/src/Componentes/Botones.jsx b/frontend/src/Componentes/Botones.jsx
new file mode 100644
index 0000000..5461780
--- /dev/null
+++ b/frontend/src/Componentes/Botones.jsx
@@ -0,0 +1,15 @@
+import { Link } from "react-router-dom";
+
+function Botones(props) {
+  const { infBoton, ruta } = props;
+
+  return (
+    <Link to={ruta}>
+      <button type="button" className="btn">
+        {infBoton}
+      </button>
+    </Link>
+  );
+}
+
+export default Botones;
diff --git a/frontend/src/Componentes/Botons.jsx b/frontend/src/Componentes/Botons.jsx
deleted file mode 100644
index 8113a7b..0000000
--- a/frontend/src/Componentes/Botons.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const Botons = () => {
-  return (
-    <>
-      <button className="btn btn-dark">Probando</button>
-    </>
-  );
-};
-
-export default Botons;
diff --git a/frontend/src/Componentes/EstilosGenerales.css b/frontend/src/Componentes/EstilosGenerales.css
index 62ee1a0..793ee07 100644
--- a/frontend/src/Componentes/EstilosGenerales.css
+++ b/frontend/src/Componentes/EstilosGenerales.css
@@ -46,9 +46,10 @@ 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 {
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.css b/frontend/src/Componentes/Pagina/Error404/Error404.css
new file mode 100644
index 0000000..a759a9a
--- /dev/null
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.css
@@ -0,0 +1,19 @@
+:root {
+  /* Tipografias */
+  --tipografiaTitulo: "Rye", serif;
+  --tipografiaGeneral: "Playfair Display", serif;
+
+  /* Colores */
+  --hoverTexto: #ff3300;
+  --hoverBorde: #646cff;
+  --boton: #1a1a1a;
+  --fondoPricipal: #242424;
+  --fondoNav: #333;
+  --texto: #fff;
+}
+
+.titulo {
+  background-color: var(--fondoNav);
+  color: var(--texto);
+  font-size: x-large;
+}
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
index a7a40fd..946e90e 100644
--- a/frontend/src/Componentes/Pagina/Error404/Error404.jsx
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
@@ -1,7 +1,33 @@
+import { Link } from "react-router-dom";
+import "./Error404.css";
+
 const Error404 = () => {
   return (
     <>
-      <h2>Error 404</h2> 
+      <div className="fondoNav card mb-3">
+        <img
+          src="/Cowboys.png"
+          className="fondoNav card-img-top"
+          alt="Icono Cowboys"
+        />
+        <div className="fondoNav card-body">
+          <h5 className="titulo card-title">Error 404</h5>
+          <p className="fondoNav card-text">
+            ¡Alto ahí, forastero! 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?
+          </p>
+          <div className="fondoNav">
+            <Link to="/">
+              <button type="button" className="btn btn-dark">
+                Ir a la página principal
+              </button>
+            </Link>
+          </div>
+        </div>
+      </div>
     </>
   );
 };
diff --git a/frontend/src/Componentes/Pagina/Estadisticas.jsx b/frontend/src/Componentes/Pagina/Estadisticas.jsx
deleted file mode 100644
index 4f88f34..0000000
--- a/frontend/src/Componentes/Pagina/Estadisticas.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Botons from "../Botons";
-
-const Estadisticas = () => {
-  return (
-    <>
-      <section>
-        <h3>--Estadisticas en mantenimiento--</h3>
-        <Botons />
-      </section>
-    </>
-  );
-};
-
-export default Estadisticas;

From 984cb02e1c45304190a408c92fab92c0f670f03e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Sun, 18 Feb 2024 09:13:55 -0300
Subject: [PATCH 04/16] Error 404 terminado?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

He terminado de pulir el error 404. Finalmente, opté por convertirlo en una tarjeta similar a la que muestra al 'Cowboy del día'
---
 frontend/src/Componentes/EstilosGenerales.css |  7 ----
 .../Componentes/Pagina/Error404/Error404.css  | 19 ----------
 .../Componentes/Pagina/Error404/Error404.jsx  | 35 ++++++-------------
 .../Pagina/Tarjetas/TarjetaDia.jsx            | 18 ++++++----
 4 files changed, 22 insertions(+), 57 deletions(-)
 delete mode 100644 frontend/src/Componentes/Pagina/Error404/Error404.css

diff --git a/frontend/src/Componentes/EstilosGenerales.css b/frontend/src/Componentes/EstilosGenerales.css
index 793ee07..4790c3b 100644
--- a/frontend/src/Componentes/EstilosGenerales.css
+++ b/frontend/src/Componentes/EstilosGenerales.css
@@ -55,10 +55,3 @@ body {
 .btn :focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-/* Card */
-
-.card {
-  width: 400px;
-  justify-content: center;
-}
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.css b/frontend/src/Componentes/Pagina/Error404/Error404.css
deleted file mode 100644
index a759a9a..0000000
--- a/frontend/src/Componentes/Pagina/Error404/Error404.css
+++ /dev/null
@@ -1,19 +0,0 @@
-:root {
-  /* Tipografias */
-  --tipografiaTitulo: "Rye", serif;
-  --tipografiaGeneral: "Playfair Display", serif;
-
-  /* Colores */
-  --hoverTexto: #ff3300;
-  --hoverBorde: #646cff;
-  --boton: #1a1a1a;
-  --fondoPricipal: #242424;
-  --fondoNav: #333;
-  --texto: #fff;
-}
-
-.titulo {
-  background-color: var(--fondoNav);
-  color: var(--texto);
-  font-size: x-large;
-}
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
index 946e90e..34394ba 100644
--- a/frontend/src/Componentes/Pagina/Error404/Error404.jsx
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
@@ -1,32 +1,19 @@
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 import "./Error404.css";
+import TarjetaDia from "../Tarjetas/TarjetaDia";
 
 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?",
+  };
+
   return (
     <>
-      <div className="fondoNav card mb-3">
-        <img
-          src="/Cowboys.png"
-          className="fondoNav card-img-top"
-          alt="Icono Cowboys"
-        />
-        <div className="fondoNav card-body">
-          <h5 className="titulo card-title">Error 404</h5>
-          <p className="fondoNav card-text">
-            ¡Alto ahí, forastero! 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?
-          </p>
-          <div className="fondoNav">
-            <Link to="/">
-              <button type="button" className="btn btn-dark">
-                Ir a la página principal
-              </button>
-            </Link>
-          </div>
-        </div>
+      <div>
+        <TarjetaDia tarjeta={tarjeta} />
       </div>
     </>
   );
diff --git a/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx b/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx
index b3ac68a..6161abd 100644
--- a/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx
+++ b/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx
@@ -1,9 +1,11 @@
 import "../EstilosElMasToto.css";
 
-const TarjetaDia = () => {
+const TarjetaDia = ({ tarjeta }) => {
   return (
     <>
-      <h3 className="tituloH3">Tonto del día de hoy es...</h3>
+      <h3 className="tituloH3">
+        {tarjeta.titulo}--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,18 @@ 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}--68--
+                </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>

From a5ed1a6fc41c314e5e0411165ab9e92c33018702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Sun, 18 Feb 2024 10:02:28 -0300
Subject: [PATCH 05/16] TarjetaDia con error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aún persiste el problema en la tarjeta del día. Me vi obligado a agregar un condicional ('if') para validar la tarjeta. No estoy seguro si es la mejor solución, pero al menos ahora funciona. Sería conveniente revisar esta parte.
---
 frontend/.eslintrc.cjs                                  | 1 +
 frontend/src/Componentes/Pagina/Error404/Error404.jsx   | 2 --
 frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx | 3 +++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index 4dcb439..8adb83f 100644
--- a/frontend/.eslintrc.cjs
+++ b/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 },
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
index 34394ba..032c48e 100644
--- a/frontend/src/Componentes/Pagina/Error404/Error404.jsx
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
@@ -1,5 +1,3 @@
-// import { Link } from "react-router-dom";
-import "./Error404.css";
 import TarjetaDia from "../Tarjetas/TarjetaDia";
 
 const Error404 = () => {
diff --git a/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx b/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx
index 6161abd..14c4585 100644
--- a/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx
+++ b/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx
@@ -1,6 +1,9 @@
 import "../EstilosElMasToto.css";
 
 const TarjetaDia = ({ tarjeta }) => {
+  if (!tarjeta) {
+    return;
+  }
   return (
     <>
       <h3 className="tituloH3">

From 2faf2ff96e6740363495996f053a0ccdadba388b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Sun, 18 Feb 2024 17:14:00 -0300
Subject: [PATCH 06/16] =?UTF-8?q?errores=20ortogr=C3=A1ficos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Corrigiendo errores ortográficos y otros detalles adicionales.
---
 frontend/src/Componentes/Estructura.jsx       | 10 +--
 .../Componentes/Pagina/Error404/Error404.jsx  |  2 +-
 ...MasToto.jsx => EstadisticasElMasTonto.jsx} |  4 +-
 ...ListaElMasToto.jsx => ListaElMasTonto.jsx} |  4 +-
 ...losElMasToto.css => EstilosElMasTonto.css} |  3 +-
 .../EstilosTitulos.css                        |  0
 .../Pagina/InfoTonto/ListaParticipantes.jsx   | 55 ++++++++++++++++
 .../{Tarjetas => InfoTonto}/ListaTitulos.jsx  |  2 +-
 .../{Tarjetas => InfoTonto}/TarjetaDia.jsx    | 10 +--
 .../Componentes/Pagina/ListaElMasTonto.jsx    | 32 ++++++++++
 .../src/Componentes/Pagina/ListaElMasToto.jsx | 63 -------------------
 11 files changed, 103 insertions(+), 82 deletions(-)
 rename frontend/src/Componentes/Pagina/Estadisticas/{EstadisticasElMasToto.jsx => EstadisticasElMasTonto.jsx} (62%)
 rename frontend/src/Componentes/Pagina/Estadisticas/{ListaElMasToto.jsx => ListaElMasTonto.jsx} (97%)
 rename frontend/src/Componentes/Pagina/{EstilosElMasToto.css => EstilosElMasTonto.css} (95%)
 rename frontend/src/Componentes/Pagina/{Tarjetas => InfoTonto}/EstilosTitulos.css (100%)
 create mode 100644 frontend/src/Componentes/Pagina/InfoTonto/ListaParticipantes.jsx
 rename frontend/src/Componentes/Pagina/{Tarjetas => InfoTonto}/ListaTitulos.jsx (87%)
 rename frontend/src/Componentes/Pagina/{Tarjetas => InfoTonto}/TarjetaDia.jsx (78%)
 create mode 100644 frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
 delete mode 100644 frontend/src/Componentes/Pagina/ListaElMasToto.jsx

diff --git a/frontend/src/Componentes/Estructura.jsx b/frontend/src/Componentes/Estructura.jsx
index 6b2e829..e40f992 100644
--- a/frontend/src/Componentes/Estructura.jsx
+++ b/frontend/src/Componentes/Estructura.jsx
@@ -1,7 +1,7 @@
 import { Route, Routes } from "react-router-dom";
-import ListaElMasToto from "./Pagina/ListaElMasToto";
+import ListaElMasTonto from "./Pagina/ListaElMasTonto";
 import CowboyDelDia from "./Pagina/CowboyDelDia";
-import EstadisticasElMasToto from "./Pagina/Estadisticas/EstadisticasElMasToto";
+import EstadisticasElMasTonto from "./Pagina/Estadisticas/EstadisticasElMasTonto";
 import EstadisticasCowboyDelDia from "./Pagina/Estadisticas/EstadisticasCowboyDelDia";
 import Proximamente from "./Pagina/Estadisticas/Proximamente";
 import Error404 from "./Pagina/Error404/Error404";
@@ -12,12 +12,12 @@ const Estructura = () => {
       <div className="campo">
         <Routes>
           {/* NavBar */}
-          <Route path="/" element={<ListaElMasToto />} />
+          <Route path="/" element={<ListaElMasTonto />} />
           <Route path="/CowboyDelDia" element={<CowboyDelDia />} />
-          <Route path="/ListaElMasToto" element={<ListaElMasToto />} />
+          <Route path="/ListaElMasTonto" element={<ListaElMasTonto />} />
 
           {/* Estadisticas */}
-          <Route path="/EstadisticasElMasToto" element={<EstadisticasElMasToto />} />
+          <Route path="/EstadisticasElMasTonto" element={<EstadisticasElMasTonto />} />
           <Route path="/EstadisticasCowboyDelDia" element={<EstadisticasCowboyDelDia />} />
           <Route path="/Proximamente" element={<Proximamente />} />
 
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
index 032c48e..bbe580b 100644
--- a/frontend/src/Componentes/Pagina/Error404/Error404.jsx
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
@@ -1,4 +1,4 @@
-import TarjetaDia from "../Tarjetas/TarjetaDia";
+import TarjetaDia from "../InfoTonto/TarjetaDia.jsx";
 
 const Error404 = () => {
   const tarjeta = {
diff --git a/frontend/src/Componentes/Pagina/Estadisticas/EstadisticasElMasToto.jsx b/frontend/src/Componentes/Pagina/Estadisticas/EstadisticasElMasTonto.jsx
similarity index 62%
rename from frontend/src/Componentes/Pagina/Estadisticas/EstadisticasElMasToto.jsx
rename to frontend/src/Componentes/Pagina/Estadisticas/EstadisticasElMasTonto.jsx
index bc30e2f..f8ba09c 100644
--- a/frontend/src/Componentes/Pagina/Estadisticas/EstadisticasElMasToto.jsx
+++ b/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;
diff --git a/frontend/src/Componentes/Pagina/Estadisticas/ListaElMasToto.jsx b/frontend/src/Componentes/Pagina/Estadisticas/ListaElMasTonto.jsx
similarity index 97%
rename from frontend/src/Componentes/Pagina/Estadisticas/ListaElMasToto.jsx
rename to frontend/src/Componentes/Pagina/Estadisticas/ListaElMasTonto.jsx
index 2929c1e..358321a 100644
--- a/frontend/src/Componentes/Pagina/Estadisticas/ListaElMasToto.jsx
+++ b/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;
diff --git a/frontend/src/Componentes/Pagina/EstilosElMasToto.css b/frontend/src/Componentes/Pagina/EstilosElMasTonto.css
similarity index 95%
rename from frontend/src/Componentes/Pagina/EstilosElMasToto.css
rename to frontend/src/Componentes/Pagina/EstilosElMasTonto.css
index 0097a1f..30a248a 100644
--- a/frontend/src/Componentes/Pagina/EstilosElMasToto.css
+++ b/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);
diff --git a/frontend/src/Componentes/Pagina/Tarjetas/EstilosTitulos.css b/frontend/src/Componentes/Pagina/InfoTonto/EstilosTitulos.css
similarity index 100%
rename from frontend/src/Componentes/Pagina/Tarjetas/EstilosTitulos.css
rename to frontend/src/Componentes/Pagina/InfoTonto/EstilosTitulos.css
diff --git a/frontend/src/Componentes/Pagina/InfoTonto/ListaParticipantes.jsx b/frontend/src/Componentes/Pagina/InfoTonto/ListaParticipantes.jsx
new file mode 100644
index 0000000..d3bf86c
--- /dev/null
+++ b/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;
diff --git a/frontend/src/Componentes/Pagina/Tarjetas/ListaTitulos.jsx b/frontend/src/Componentes/Pagina/InfoTonto/ListaTitulos.jsx
similarity index 87%
rename from frontend/src/Componentes/Pagina/Tarjetas/ListaTitulos.jsx
rename to frontend/src/Componentes/Pagina/InfoTonto/ListaTitulos.jsx
index b945055..0d4d942 100644
--- a/frontend/src/Componentes/Pagina/Tarjetas/ListaTitulos.jsx
+++ b/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>
     </>
   );
diff --git a/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx b/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
similarity index 78%
rename from frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx
rename to frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
index 14c4585..71e5016 100644
--- a/frontend/src/Componentes/Pagina/Tarjetas/TarjetaDia.jsx
+++ b/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
@@ -1,4 +1,4 @@
-import "../EstilosElMasToto.css";
+import "../EstilosElMasTonto.css";
 
 const TarjetaDia = ({ tarjeta }) => {
   if (!tarjeta) {
@@ -6,9 +6,7 @@ const TarjetaDia = ({ tarjeta }) => {
   }
   return (
     <>
-      <h3 className="tituloH3">
-        {tarjeta.titulo}--Tonto del día de hoy es...--
-      </h3>
+      <h3 className="tituloH3">{tarjeta.titulo}</h3>
       <div className="principal card mb-3">
         <div className="row g-0">
           <div className="fondoNav col-md-4">
@@ -22,9 +20,7 @@ const TarjetaDia = ({ tarjeta }) => {
             <div className="fondoNav card-body">
               <h5 className="nombre card-title">
                 {tarjeta.persona}
-                <span className="badge float-right">
-                  {tarjeta.cantidad}--68--
-                </span>
+                <span className="badge float-right">{tarjeta.cantidad}</span>
               </h5>
               <h6 className="fondoNav card-text">{tarjeta.titulos}</h6>
               <div>
diff --git a/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx b/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
new file mode 100644
index 0000000..50eb6cb
--- /dev/null
+++ b/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
@@ -0,0 +1,32 @@
+import TarjetaDia from "./InfoTonto/TarjetaDia";
+import ListaParticipantes from "./InfoTonto/ListaParticipantes";
+
+const ListaElMasTonto = () => {
+  const tarjeta = {
+    titulo: "Tonto del día de hoy es...",
+    persona: "Nombre: Jorge",
+    cantidad: "68",
+    titulos: "Titulos",
+    listaTitulos: "lol",
+  };
+  const LP = {
+    persona: "Jorge",
+    cantidad: "68",
+  };
+
+  return (
+    <>
+      <section>
+        {/* Tarjeta del día */}
+        <TarjetaDia tarjeta={tarjeta} />
+
+        <h3 className="tituloH3">Lista de participantes</h3>
+        {/* Lista de participantes */}
+        <ListaParticipantes LP={LP} />
+        <ListaParticipantes LP={LP} />
+      </section>
+    </>
+  );
+};
+
+export default ListaElMasTonto;
diff --git a/frontend/src/Componentes/Pagina/ListaElMasToto.jsx b/frontend/src/Componentes/Pagina/ListaElMasToto.jsx
deleted file mode 100644
index 47fe285..0000000
--- a/frontend/src/Componentes/Pagina/ListaElMasToto.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import "./EstilosElMasToto.css";
-import ListaTitulos from "./Tarjetas/ListaTitulos";
-import TarjetaDia from "./Tarjetas/TarjetaDia";
-
-const ListaElMasToto = () => {
-  return (
-    <>
-      <section>
-        {/* Tarjeta del día */}
-        <TarjetaDia />
-
-        {/* Lista de participantes */}
-        <h3 className="tituloH3">Lista de participantes</h3>
-        <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>
-      </section>
-    </>
-  );
-};
-
-export default ListaElMasToto;

From fa5efa991ffde2c89a7236b4d5b4bf2accc71dcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Sun, 18 Feb 2024 17:16:28 -0300
Subject: [PATCH 07/16] =?UTF-8?q?errores=20ortogr=C3=A1ficos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

😁
---
 frontend/src/Componentes/NavBar/NavBar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Componentes/NavBar/NavBar.jsx b/frontend/src/Componentes/NavBar/NavBar.jsx
index 62abece..f926b40 100644
--- a/frontend/src/Componentes/NavBar/NavBar.jsx
+++ b/frontend/src/Componentes/NavBar/NavBar.jsx
@@ -36,7 +36,7 @@ const NavBar = () => {
           >
             <ul className="navbar-nav">
               <li className="nav-item">
-                <Link className="nav-link" to="/ListaElMasToto">
+                <Link className="nav-link" to="/ListaElMasTonto">
                   El más toto
                 </Link>
               </li>
@@ -61,7 +61,7 @@ const NavBar = () => {
                 </Link>
                 <ul className="menuEsta dropdown-menu">
                   <li>
-                    <Link className="menuEstadisticas dropdown-item" to="EstadisticasElMasToto">
+                    <Link className="menuEstadisticas dropdown-item" to="EstadisticasElMasTonto">
                       El más toto
                     </Link>
                   </li>

From a923880522d6d49aca2e1cef5a903fd2cbf1ce7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Sun, 18 Feb 2024 18:26:35 -0300
Subject: [PATCH 08/16] Error404 fin?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hey Franco, necesito enviarte un mensaje de voz por WhatsApp o Discord, tengo un lío enorme. Más o menos he logrado resolverlo. Resulta que metí la pata con toda esta rama. La idea original era solo trabajar en el componente Error404, pero terminé modificando otras cosas para que ese componente quedara bien y, sin darme cuenta, terminé alterando casi todo, ¡ja! Bueno, luego te contacto por audio para explicarte mejor.
---
 frontend/src/Componentes/Botones.jsx          | 34 ++++++++++++++-----
 .../Componentes/Pagina/Error404/Error404.jsx  | 10 +++++-
 .../Pagina/InfoTonto/TarjetaDia.jsx           |  1 -
 .../Componentes/Pagina/ListaElMasTonto.jsx    |  4 +--
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Componentes/Botones.jsx b/frontend/src/Componentes/Botones.jsx
index 5461780..94fc3d4 100644
--- a/frontend/src/Componentes/Botones.jsx
+++ b/frontend/src/Componentes/Botones.jsx
@@ -1,15 +1,33 @@
 import { Link } from "react-router-dom";
 
-function Botones(props) {
-  const { infBoton, ruta } = props;
+const Botones = ({ button }) => {
+  if (!button) {
+    return;
+  }
 
   return (
-    <Link to={ruta}>
-      <button type="button" className="btn">
-        {infBoton}
-      </button>
-    </Link>
+    <>
+      <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;
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
index bbe580b..170b308 100644
--- a/frontend/src/Componentes/Pagina/Error404/Error404.jsx
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
@@ -1,3 +1,4 @@
+import Botones from "../../Botones.jsx";
 import TarjetaDia from "../InfoTonto/TarjetaDia.jsx";
 
 const Error404 = () => {
@@ -6,15 +7,22 @@ const Error404 = () => {
     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 (
     <>
       <div>
         <TarjetaDia tarjeta={tarjeta} />
+        <Botones button={button} />
       </div>
     </>
   );
 };
 
-export default Error404;
+export default Error404;
\ No newline at end of file
diff --git a/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx b/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
index 71e5016..1c63923 100644
--- a/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
+++ b/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
@@ -6,7 +6,6 @@ const TarjetaDia = ({ tarjeta }) => {
   }
   return (
     <>
-      <h3 className="tituloH3">{tarjeta.titulo}</h3>
       <div className="principal card mb-3">
         <div className="row g-0">
           <div className="fondoNav col-md-4">
diff --git a/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx b/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
index 50eb6cb..3f06aba 100644
--- a/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
+++ b/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
@@ -3,7 +3,6 @@ import ListaParticipantes from "./InfoTonto/ListaParticipantes";
 
 const ListaElMasTonto = () => {
   const tarjeta = {
-    titulo: "Tonto del día de hoy es...",
     persona: "Nombre: Jorge",
     cantidad: "68",
     titulos: "Titulos",
@@ -18,10 +17,11 @@ const ListaElMasTonto = () => {
     <>
       <section>
         {/* Tarjeta del día */}
+      <h3 className="tituloH3">Tonto del día de hoy es...</h3>
         <TarjetaDia tarjeta={tarjeta} />
 
-        <h3 className="tituloH3">Lista de participantes</h3>
         {/* Lista de participantes */}
+        <h3 className="tituloH3">Lista de participantes</h3>
         <ListaParticipantes LP={LP} />
         <ListaParticipantes LP={LP} />
       </section>

From 6358f1e5cd84252f9ac6afcbd802c1ca661832b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Tue, 20 Feb 2024 07:24:46 -0300
Subject: [PATCH 09/16] Nuevo Inicio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

He realizado modificaciones en la página de inicio. Ahora, esta sección mostrará únicamente dos tarjetas: una destacando al 'tonto del día' y otra al 'cowboy del día'. Toda la información adicional estará disponible en sus respectivas secciones, como la lista completa de 'tontos del día' en la sección dedicada a ello.
---
 frontend/src/Componentes/Estructura.jsx    |  7 ++++--
 frontend/src/Componentes/Inicio.jsx        | 26 ++++++++++++++++++++++
 frontend/src/Componentes/NavBar/NavBar.jsx |  7 +++---
 3 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/Componentes/Inicio.jsx

diff --git a/frontend/src/Componentes/Estructura.jsx b/frontend/src/Componentes/Estructura.jsx
index e40f992..862bdd1 100644
--- a/frontend/src/Componentes/Estructura.jsx
+++ b/frontend/src/Componentes/Estructura.jsx
@@ -5,6 +5,7 @@ import EstadisticasElMasTonto from "./Pagina/Estadisticas/EstadisticasElMasTonto
 import EstadisticasCowboyDelDia from "./Pagina/Estadisticas/EstadisticasCowboyDelDia";
 import Proximamente from "./Pagina/Estadisticas/Proximamente";
 import Error404 from "./Pagina/Error404/Error404";
+import Inicio from "./Inicio";
 
 const Estructura = () => {
   return (
@@ -12,9 +13,11 @@ const Estructura = () => {
       <div className="campo">
         <Routes>
           {/* NavBar */}
-          <Route path="/" element={<ListaElMasTonto />} />
-          <Route path="/CowboyDelDia" element={<CowboyDelDia />} />
           <Route path="/ListaElMasTonto" element={<ListaElMasTonto />} />
+          <Route path="/CowboyDelDia" element={<CowboyDelDia />} />
+
+          {/* Inicio */}
+          <Route path="/" element={<Inicio /> } />
 
           {/* Estadisticas */}
           <Route path="/EstadisticasElMasTonto" element={<EstadisticasElMasTonto />} />
diff --git a/frontend/src/Componentes/Inicio.jsx b/frontend/src/Componentes/Inicio.jsx
new file mode 100644
index 0000000..a0dcef0
--- /dev/null
+++ b/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;
diff --git a/frontend/src/Componentes/NavBar/NavBar.jsx b/frontend/src/Componentes/NavBar/NavBar.jsx
index f926b40..9599f61 100644
--- a/frontend/src/Componentes/NavBar/NavBar.jsx
+++ b/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="/ListaElMasTonto">
-                  El más toto
+                <Link className="nav-link" 
+                  to="/ListaElMasTonto">
+                  El más tonto
                 </Link>
               </li>
               <li className="nav-item">
@@ -62,7 +63,7 @@ const NavBar = () => {
                 <ul className="menuEsta dropdown-menu">
                   <li>
                     <Link className="menuEstadisticas dropdown-item" to="EstadisticasElMasTonto">
-                      El más toto
+                      El más tonto
                     </Link>
                   </li>
                   <li>

From 756e2708c6197eba2ef1e6659ed1c7952c6371aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Tue, 20 Feb 2024 18:37:37 -0300
Subject: [PATCH 10/16] Borrando los - if.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Después de eliminar los 'if', todo está funcionando correctamente. Tuve que comentar el componente 'TarjetaDelDia', ya que por ahora no se está utilizando en 'Inicio'. Sin embargo, ¿qué sucederá cuando comience a usar el componente 'TarjetaDelDia' en 'Inicio'? ¿Será necesario volver a utilizar el 'if'?
---
 frontend/src/Componentes/Botones.jsx                     | 4 ----
 frontend/src/Componentes/Inicio.jsx                      | 2 +-
 frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx | 3 ---
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/frontend/src/Componentes/Botones.jsx b/frontend/src/Componentes/Botones.jsx
index 94fc3d4..521ad93 100644
--- a/frontend/src/Componentes/Botones.jsx
+++ b/frontend/src/Componentes/Botones.jsx
@@ -1,10 +1,6 @@
 import { Link } from "react-router-dom";
 
 const Botones = ({ button }) => {
-  if (!button) {
-    return;
-  }
-
   return (
     <>
       <Link to={button.ruta}>
diff --git a/frontend/src/Componentes/Inicio.jsx b/frontend/src/Componentes/Inicio.jsx
index a0dcef0..1687fce 100644
--- a/frontend/src/Componentes/Inicio.jsx
+++ b/frontend/src/Componentes/Inicio.jsx
@@ -17,7 +17,7 @@ const Inicio = () => {
 
         {/* Tarjeta del cowboy del día */}
         <h3 className="tituloH3">Cowboy del día de hoy es...</h3>
-        <TarjetaDia />
+        {/* <TarjetaDia /> */}
       </section>
     </>
   );
diff --git a/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx b/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
index 1c63923..16db621 100644
--- a/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
+++ b/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
@@ -1,9 +1,6 @@
 import "../EstilosElMasTonto.css";
 
 const TarjetaDia = ({ tarjeta }) => {
-  if (!tarjeta) {
-    return;
-  }
   return (
     <>
       <div className="principal card mb-3">

From 5bd4c261738c4b5f802b9201f5f2a52fe336c971 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Tue, 20 Feb 2024 18:57:22 -0300
Subject: [PATCH 11/16] Nombre componente a Tarjeta

Cambio de nombre de componente a Tarjeta
---
 frontend/src/Componentes/Inicio.jsx                   |  6 +++---
 frontend/src/Componentes/Pagina/Error404/Error404.jsx | 11 +++++------
 .../Pagina/InfoTonto/{TarjetaDia.jsx => Tarjeta.jsx}  |  4 ++--
 frontend/src/Componentes/Pagina/ListaElMasTonto.jsx   |  4 ++--
 4 files changed, 12 insertions(+), 13 deletions(-)
 rename frontend/src/Componentes/Pagina/InfoTonto/{TarjetaDia.jsx => Tarjeta.jsx} (93%)

diff --git a/frontend/src/Componentes/Inicio.jsx b/frontend/src/Componentes/Inicio.jsx
index 1687fce..fe0b65e 100644
--- a/frontend/src/Componentes/Inicio.jsx
+++ b/frontend/src/Componentes/Inicio.jsx
@@ -1,4 +1,4 @@
-import TarjetaDia from "./Pagina/InfoTonto/TarjetaDia";
+import Tarjeta from "./Pagina/InfoTonto/Tarjeta";
 
 const Inicio = () => {
   const tarjeta = {
@@ -13,11 +13,11 @@ const Inicio = () => {
       <section>
         {/* Tarjeta del día del mas tonto */}
         <h3 className="tituloH3">Tonto del día de hoy es...</h3>
-        <TarjetaDia tarjeta={tarjeta} />
+        <Tarjeta tarjeta={tarjeta} />
 
         {/* Tarjeta del cowboy del día */}
         <h3 className="tituloH3">Cowboy del día de hoy es...</h3>
-        {/* <TarjetaDia /> */}
+        {/* <Tarjeta /> */}
       </section>
     </>
   );
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
index 170b308..e5d11d4 100644
--- a/frontend/src/Componentes/Pagina/Error404/Error404.jsx
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
@@ -1,5 +1,5 @@
 import Botones from "../../Botones.jsx";
-import TarjetaDia from "../InfoTonto/TarjetaDia.jsx";
+import Tarjeta from "../InfoTonto/Tarjeta.jsx";
 
 const Error404 = () => {
   const tarjeta = {
@@ -7,22 +7,21 @@ const Error404 = () => {
     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"
-  }
+    infBoton: "Inicio",
+  };
 
   return (
     <>
       <div>
-        <TarjetaDia tarjeta={tarjeta} />
+        <Tarjeta tarjeta={tarjeta} />
         <Botones button={button} />
       </div>
     </>
   );
 };
 
-export default Error404;
\ No newline at end of file
+export default Error404;
diff --git a/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx b/frontend/src/Componentes/Pagina/InfoTonto/Tarjeta.jsx
similarity index 93%
rename from frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
rename to frontend/src/Componentes/Pagina/InfoTonto/Tarjeta.jsx
index 16db621..449eec9 100644
--- a/frontend/src/Componentes/Pagina/InfoTonto/TarjetaDia.jsx
+++ b/frontend/src/Componentes/Pagina/InfoTonto/Tarjeta.jsx
@@ -1,6 +1,6 @@
 import "../EstilosElMasTonto.css";
 
-const TarjetaDia = ({ tarjeta }) => {
+const Tarjeta = ({ tarjeta }) => {
   return (
     <>
       <div className="principal card mb-3">
@@ -32,4 +32,4 @@ const TarjetaDia = ({ tarjeta }) => {
   );
 };
 
-export default TarjetaDia;
+export default Tarjeta;
diff --git a/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx b/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
index 3f06aba..7dfdb31 100644
--- a/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
+++ b/frontend/src/Componentes/Pagina/ListaElMasTonto.jsx
@@ -1,4 +1,4 @@
-import TarjetaDia from "./InfoTonto/TarjetaDia";
+import Tarjeta from "./InfoTonto/Tarjeta";
 import ListaParticipantes from "./InfoTonto/ListaParticipantes";
 
 const ListaElMasTonto = () => {
@@ -18,7 +18,7 @@ const ListaElMasTonto = () => {
       <section>
         {/* Tarjeta del día */}
       <h3 className="tituloH3">Tonto del día de hoy es...</h3>
-        <TarjetaDia tarjeta={tarjeta} />
+        <Tarjeta tarjeta={tarjeta} />
 
         {/* Lista de participantes */}
         <h3 className="tituloH3">Lista de participantes</h3>

From 3168e115877d36d340b6160e7d7c73145452d42f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Tue, 20 Feb 2024 19:26:24 -0300
Subject: [PATCH 12/16] Error 404 terminado
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

He completado el Error 404! Espero que esta vez el componente esté listo pronto. Realicé varios cambios significativos, y debo admitir que me gusta más en su forma actual. De todos modos, si necesitas más ajustes, házmelo saber y seguimos trabajando en ello juntos.
---
 .../Componentes/Pagina/Error404/Error404.jsx  | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
index e5d11d4..dd74d92 100644
--- a/frontend/src/Componentes/Pagina/Error404/Error404.jsx
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
@@ -1,14 +1,7 @@
+import { Link } from "react-router-dom";
 import Botones from "../../Botones.jsx";
-import Tarjeta from "../InfoTonto/Tarjeta.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?",
-  };
-
   const button = {
     ruta: "/",
     infBoton: "Inicio",
@@ -16,9 +9,32 @@ const Error404 = () => {
 
   return (
     <>
-      <div>
-        <Tarjeta tarjeta={tarjeta} />
-        <Botones button={button} />
+      <div className="container text-center mt-5">
+        <div className="row">
+          <div className="col-md-6 offset-md-3">
+            <h2 className="display-4">Error 404</h2>
+            <p className="lead">
+              Lo sentimos, la página que estás buscando no pudo ser encontrada.
+            </p>
+            <Link to="/">
+              <img
+                src="/Cowboys.png"
+                alt="Error 404"
+                className="img-fluid mb-3"
+                width="200"
+                height="200"
+              />
+            </Link>
+            <p>
+              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?
+            </p>
+            <Botones button={button} />
+          </div>
+        </div>
       </div>
     </>
   );

From fdbf0896826ab35038b272858d90ab3863167e70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Tue, 20 Feb 2024 21:13:53 -0300
Subject: [PATCH 13/16] Borrando comentario

---
 frontend/src/Componentes/Botones.jsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/frontend/src/Componentes/Botones.jsx b/frontend/src/Componentes/Botones.jsx
index 521ad93..5f37947 100644
--- a/frontend/src/Componentes/Botones.jsx
+++ b/frontend/src/Componentes/Botones.jsx
@@ -13,17 +13,3 @@ const Botones = ({ button }) => {
 };
 
 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;

From dd1ec700e59415490e097375dcddb6160fe3af71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:23:49 -0300
Subject: [PATCH 14/16] hover Img 404

---
 frontend/src/Componentes/Pagina/Error404/Error404.css | 8 ++++++++
 frontend/src/Componentes/Pagina/Error404/Error404.jsx | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/Componentes/Pagina/Error404/Error404.css

diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.css b/frontend/src/Componentes/Pagina/Error404/Error404.css
new file mode 100644
index 0000000..9f52fca
--- /dev/null
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.css
@@ -0,0 +1,8 @@
+.hoverImg {
+  transition: transform 0.3s ease;
+}
+
+.hoverImg:hover {
+  transform: scale(1.1);
+  transition: transform 0.5s ease;
+}
diff --git a/frontend/src/Componentes/Pagina/Error404/Error404.jsx b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
index dd74d92..e552dc1 100644
--- a/frontend/src/Componentes/Pagina/Error404/Error404.jsx
+++ b/frontend/src/Componentes/Pagina/Error404/Error404.jsx
@@ -1,5 +1,7 @@
 import { Link } from "react-router-dom";
 import Botones from "../../Botones.jsx";
+import "./Error404.css";
+
 
 const Error404 = () => {
   const button = {
@@ -20,7 +22,7 @@ const Error404 = () => {
               <img
                 src="/Cowboys.png"
                 alt="Error 404"
-                className="img-fluid mb-3"
+                className="img-fluid mb-3 hoverImg"
                 width="200"
                 height="200"
               />

From 8496c7cf22caf4758ab869b49c0204539b699d5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:27:01 -0300
Subject: [PATCH 15/16] btn hover

---
 frontend/src/Componentes/EstilosGenerales.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/Componentes/EstilosGenerales.css b/frontend/src/Componentes/EstilosGenerales.css
index 4790c3b..a280d29 100644
--- a/frontend/src/Componentes/EstilosGenerales.css
+++ b/frontend/src/Componentes/EstilosGenerales.css
@@ -55,3 +55,12 @@ body {
 .btn :focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
+
+.btn {
+  transition: transform 0.3s ease;
+}
+
+.btn:hover {
+  transform: scale(1.1);
+  transition: transform 0.5s ease;
+}

From f444332109ff36c982eca7b7850c97d9a1683a76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20N=C3=BA=C3=B1ez?=
 <124943644+JLeonN@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:54:41 -0300
Subject: [PATCH 16/16] =?UTF-8?q?T=C3=ADtulo=20m=C3=A1s=20responsivo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/Componentes/EstilosGenerales.css     | 2 --
 frontend/src/Componentes/NavBar/EstilosNavBar.css | 6 +++---
 frontend/src/Componentes/NavBar/NavBar.jsx        | 4 ++--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Componentes/EstilosGenerales.css b/frontend/src/Componentes/EstilosGenerales.css
index a280d29..1fdb2e7 100644
--- a/frontend/src/Componentes/EstilosGenerales.css
+++ b/frontend/src/Componentes/EstilosGenerales.css
@@ -55,11 +55,9 @@ body {
 .btn :focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
 .btn {
   transition: transform 0.3s ease;
 }
-
 .btn:hover {
   transform: scale(1.1);
   transition: transform 0.5s ease;
diff --git a/frontend/src/Componentes/NavBar/EstilosNavBar.css b/frontend/src/Componentes/NavBar/EstilosNavBar.css
index 689a3e5..f9f394b 100644
--- a/frontend/src/Componentes/NavBar/EstilosNavBar.css
+++ b/frontend/src/Componentes/NavBar/EstilosNavBar.css
@@ -18,15 +18,15 @@
 
 .tituloNav {
   margin: 0;
-  margin-left: 5rem;
+  margin-left: 1rem;
   font-size: 2rem;
   text-transform: uppercase;
   letter-spacing: 4px;
   font-family: var(--tipografiaTitulo);
   background-color: var(--fondoNav);
   color: var(--texto);
-  @media (max-width: 600px) {
-    align-items: center;
+  @media (max-width: 340px) {
+    font-size: 1.5rem;
   }
 }
 
diff --git a/frontend/src/Componentes/NavBar/NavBar.jsx b/frontend/src/Componentes/NavBar/NavBar.jsx
index 9599f61..0bb8568 100644
--- a/frontend/src/Componentes/NavBar/NavBar.jsx
+++ b/frontend/src/Componentes/NavBar/NavBar.jsx
@@ -6,8 +6,8 @@ const NavBar = () => {
       <nav className="navbar navbar-expand-lg bg-body-tertiary">
         <div className="nav container-fluid">
           <div className="tituloCont d-flex align-items-center">
-            <Link className="tituloNav navbar-brand" to="/">
-              The Cowboys
+            <Link className="fondoNav navbar-brand" to="/">
+              <h1 className="tituloNav">The Cowboys</h1>
             </Link>
           </div>
           <button