From 1fde69d3216e61785c2afd35320b7c0f305a9c22 Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Wed, 29 Oct 2025 19:37:59 -0600
Subject: [PATCH 1/4] vista crearCuenta y forgot_Password agregados

---
 src/app/(Operador)/Escaner/page.tsx |   2 +-
 src/app/crearCuenta/page.tsx        | 124 ++++++++++++++++++++++++++++
 src/app/forgotPassword/page.tsx     |  80 ++++++++++++++++++
 src/app/login/Login.tsx             |   6 +-
 4 files changed, 208 insertions(+), 4 deletions(-)
 create mode 100644 src/app/crearCuenta/page.tsx
 create mode 100644 src/app/forgotPassword/page.tsx

diff --git a/src/app/(Operador)/Escaner/page.tsx b/src/app/(Operador)/Escaner/page.tsx
index fdf5936..d59b7d4 100644
--- a/src/app/(Operador)/Escaner/page.tsx
+++ b/src/app/(Operador)/Escaner/page.tsx
@@ -41,7 +41,7 @@ export default function Dashboard() {
     }
   };
 
-  // 🔒 Cerrar sesión
+  //  Cerrar sesión
   const cerrarSesion = () => {
     localStorage.removeItem("loggedIn");
     router.push("/");
diff --git a/src/app/crearCuenta/page.tsx b/src/app/crearCuenta/page.tsx
new file mode 100644
index 0000000..5cd4415
--- /dev/null
+++ b/src/app/crearCuenta/page.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import "../styles/layout/login.scss"; // puedes usar los mismos estilos
+import "../styles/base/globales.scss";
+
+import Link from "next/link";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+
+function CrearCuenta() {
+  const [nombre, setNombre] = useState("");
+  const [correo, setCorreo] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmarPassword, setConfirmarPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (password !== confirmarPassword) {
+      toast.error("Las contraseñas no coinciden");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_API_URL}/auth/register`,
+        {
+          nombre,
+          correo,
+          contraseña: password,
+        }
+      );
+
+      toast.success("Cuenta creada correctamente");
+      router.push("/"); // redirige al login
+    } catch (err: unknown) {
+      if (axios.isAxiosError(err)) {
+        if (err.response) {
+          toast.error(
+            err.response.data?.message || "Error al crear la cuenta"
+          );
+        } else if (err.request) {
+          toast.error("No se pudo conectar con el servidor");
+        } else {
+          toast.error("Ocurrió un error inesperado");
+        }
+      } else {
+        toast.error("Ocurrió un error inesperado");
+      }
+    } finally {
+      setLoading(false);
+    }
+    
+  };
+
+  return (
+    <section className="containerGrid">
+      <div className="login-container">
+        <h2>Crear cuenta</h2>
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label>Nombre de usuario</label>
+            <input
+              type="text"
+              placeholder="Escribe tu nombre"
+              value={nombre}
+              onChange={(e) => setNombre(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label>Correo electrónico</label>
+            <input
+              type="email"
+              placeholder="Tu correo"
+              value={correo}
+              onChange={(e) => setCorreo(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label>Contraseña</label>
+            <input
+              type="password"
+              placeholder="Crea una contraseña"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label>Confirmar contraseña</label>
+            <input
+              type="password"
+              placeholder="Repite tu contraseña"
+              value={confirmarPassword}
+              onChange={(e) => setConfirmarPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          <button type="submit" disabled={loading}>
+            {loading ? "Creando cuenta..." : "Registrarse"}
+          </button>
+
+          <Link href="/">¿Ya tienes cuenta? Inicia sesión</Link>
+        </form>
+      </div>
+
+      
+    </section>
+  );
+}
+export default CrearCuenta;
\ No newline at end of file
diff --git a/src/app/forgotPassword/page.tsx b/src/app/forgotPassword/page.tsx
new file mode 100644
index 0000000..98e3cf1
--- /dev/null
+++ b/src/app/forgotPassword/page.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+import "../styles/base/globales.scss"; // ajusta ruta si tu proyecto la tiene en otro sitio
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const validateEmail = (e: string) => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
+  };
+
+  const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
+    ev.preventDefault();
+    if (!validateEmail(email)) {
+      toast.error("Ingresa un correo válido.");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const res = await axios.post("/api/auth/forgot-password", { email });
+      if (res.status === 200) {
+        toast.success("Si existe esa cuenta, recibirás un correo con instrucciones.");
+        // Opcional: redirigir al login después de enviar
+        setTimeout(() => router.push("/"), 1200);
+      } else {
+        toast.error("Ocurrió un error. Intenta de nuevo.");
+      }
+    } catch (error:any ) {
+      // manejar mensajes de error desde el servidor si vienen
+      const msg = error?.response?.data?.message ?? "Error al enviar el correo.";
+      toast.error(msg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="forgot-password-page" style={{ maxWidth: 520, margin: "4rem auto", padding: "1.5rem" }}>
+      <h1>¿Olvidaste tu contraseña?</h1>
+      <p>Escribe el correo asociado a tu cuenta y te enviaremos instrucciones para restablecerla.</p>
+
+      <form onSubmit={handleSubmit} className="forgot-form" style={{ display: "grid", gap: 12 }}>
+        <label htmlFor="email">Correo electrónico</label>
+        <input
+          id="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="tu@correo.com"
+          required
+          style={{ padding: "0.6rem", borderRadius: 8, border: "1px solid #ccc" }}
+        />
+
+        <button
+          type="submit"
+          disabled={loading}
+          style={{
+            padding: "0.7rem 1rem",
+            borderRadius: 8,
+            border: "none",
+            cursor: loading ? "not-allowed" : "pointer"
+          }}
+        >
+          {loading ? "Enviando..." : "Enviar instrucciones"}
+        </button>
+
+        <div style={{ marginTop: 8 }}>
+          <a href="/">Recordé mi contraseña — Iniciar sesión</a>
+        </div>
+      </form>
+    </main>
+  );
+}
diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx
index 1e9d988..081dcfa 100644
--- a/src/app/login/Login.tsx
+++ b/src/app/login/Login.tsx
@@ -32,7 +32,7 @@ export default function Login() {
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
       router.push("/Escaner");
-    } catch (err: any) {
+    } catch (err: unknown) {
       if (axios.isAxiosError(err)) {
         if (err.response) {
           toast.error(
@@ -77,8 +77,8 @@ export default function Login() {
             />
           </div>
           <button type="submit">Iniciar sesión</button>
-          <Link href={"#"}>Olvidaste Contraseña?</Link>
-          <Link href={"#"}>Crear Cuenta</Link>
+          <Link href={"/forgotPassword"}>Olvidaste Contraseña?</Link>
+          <Link href={"/crearCuenta"}>Crear Cuenta</Link>
         </form>
       </div>
 

From 54ef8c6157749e27f18dd4df7727f347101b89fa Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Thu, 30 Oct 2025 14:07:58 -0600
Subject: [PATCH 2/4] pull lino

---
 src/app/crearCuenta/page.tsx    | 124 --------------------------------
 src/app/forgotPassword/page.tsx |  80 ---------------------
 2 files changed, 204 deletions(-)
 delete mode 100644 src/app/crearCuenta/page.tsx
 delete mode 100644 src/app/forgotPassword/page.tsx

diff --git a/src/app/crearCuenta/page.tsx b/src/app/crearCuenta/page.tsx
deleted file mode 100644
index 5cd4415..0000000
--- a/src/app/crearCuenta/page.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import "../styles/layout/login.scss"; // puedes usar los mismos estilos
-import "../styles/base/globales.scss";
-
-import Link from "next/link";
-import axios from "axios";
-import { useRouter } from "next/navigation";
-import toast from "react-hot-toast";
-
-function CrearCuenta() {
-  const [nombre, setNombre] = useState("");
-  const [correo, setCorreo] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmarPassword, setConfirmarPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const router = useRouter();
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (password !== confirmarPassword) {
-      toast.error("Las contraseñas no coinciden");
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      const response = await axios.post(
-        `${process.env.NEXT_PUBLIC_API_URL}/auth/register`,
-        {
-          nombre,
-          correo,
-          contraseña: password,
-        }
-      );
-
-      toast.success("Cuenta creada correctamente");
-      router.push("/"); // redirige al login
-    } catch (err: unknown) {
-      if (axios.isAxiosError(err)) {
-        if (err.response) {
-          toast.error(
-            err.response.data?.message || "Error al crear la cuenta"
-          );
-        } else if (err.request) {
-          toast.error("No se pudo conectar con el servidor");
-        } else {
-          toast.error("Ocurrió un error inesperado");
-        }
-      } else {
-        toast.error("Ocurrió un error inesperado");
-      }
-    } finally {
-      setLoading(false);
-    }
-    
-  };
-
-  return (
-    <section className="containerGrid">
-      <div className="login-container">
-        <h2>Crear cuenta</h2>
-        <form onSubmit={handleSubmit}>
-          <div>
-            <label>Nombre de usuario</label>
-            <input
-              type="text"
-              placeholder="Escribe tu nombre"
-              value={nombre}
-              onChange={(e) => setNombre(e.target.value)}
-              required
-            />
-          </div>
-
-          <div>
-            <label>Correo electrónico</label>
-            <input
-              type="email"
-              placeholder="Tu correo"
-              value={correo}
-              onChange={(e) => setCorreo(e.target.value)}
-              required
-            />
-          </div>
-
-          <div>
-            <label>Contraseña</label>
-            <input
-              type="password"
-              placeholder="Crea una contraseña"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-          </div>
-
-          <div>
-            <label>Confirmar contraseña</label>
-            <input
-              type="password"
-              placeholder="Repite tu contraseña"
-              value={confirmarPassword}
-              onChange={(e) => setConfirmarPassword(e.target.value)}
-              required
-            />
-          </div>
-
-          <button type="submit" disabled={loading}>
-            {loading ? "Creando cuenta..." : "Registrarse"}
-          </button>
-
-          <Link href="/">¿Ya tienes cuenta? Inicia sesión</Link>
-        </form>
-      </div>
-
-      
-    </section>
-  );
-}
-export default CrearCuenta;
\ No newline at end of file
diff --git a/src/app/forgotPassword/page.tsx b/src/app/forgotPassword/page.tsx
deleted file mode 100644
index 98e3cf1..0000000
--- a/src/app/forgotPassword/page.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import axios from "axios";
-import { useRouter } from "next/navigation";
-import toast from "react-hot-toast";
-import "../styles/base/globales.scss"; // ajusta ruta si tu proyecto la tiene en otro sitio
-
-export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState("");
-  const [loading, setLoading] = useState(false);
-  const router = useRouter();
-
-  const validateEmail = (e: string) => {
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
-  };
-
-  const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
-    ev.preventDefault();
-    if (!validateEmail(email)) {
-      toast.error("Ingresa un correo válido.");
-      return;
-    }
-
-    try {
-      setLoading(true);
-      const res = await axios.post("/api/auth/forgot-password", { email });
-      if (res.status === 200) {
-        toast.success("Si existe esa cuenta, recibirás un correo con instrucciones.");
-        // Opcional: redirigir al login después de enviar
-        setTimeout(() => router.push("/"), 1200);
-      } else {
-        toast.error("Ocurrió un error. Intenta de nuevo.");
-      }
-    } catch (error:any ) {
-      // manejar mensajes de error desde el servidor si vienen
-      const msg = error?.response?.data?.message ?? "Error al enviar el correo.";
-      toast.error(msg);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <main className="forgot-password-page" style={{ maxWidth: 520, margin: "4rem auto", padding: "1.5rem" }}>
-      <h1>¿Olvidaste tu contraseña?</h1>
-      <p>Escribe el correo asociado a tu cuenta y te enviaremos instrucciones para restablecerla.</p>
-
-      <form onSubmit={handleSubmit} className="forgot-form" style={{ display: "grid", gap: 12 }}>
-        <label htmlFor="email">Correo electrónico</label>
-        <input
-          id="email"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="tu@correo.com"
-          required
-          style={{ padding: "0.6rem", borderRadius: 8, border: "1px solid #ccc" }}
-        />
-
-        <button
-          type="submit"
-          disabled={loading}
-          style={{
-            padding: "0.7rem 1rem",
-            borderRadius: 8,
-            border: "none",
-            cursor: loading ? "not-allowed" : "pointer"
-          }}
-        >
-          {loading ? "Enviando..." : "Enviar instrucciones"}
-        </button>
-
-        <div style={{ marginTop: 8 }}>
-          <a href="/">Recordé mi contraseña — Iniciar sesión</a>
-        </div>
-      </form>
-    </main>
-  );
-}

From 1dfac92b6c0aa960d630d1c6675ed61309647538 Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Thu, 30 Oct 2025 14:39:15 -0600
Subject: [PATCH 3/4] actualizando archivo (Administrador)

---
 src/app/(Administrador)/crearCuenta/page.tsx  | 124 ++++++++++++++++++
 .../(Administrador)/forgotPassword/page.tsx   |  80 +++++++++++
 src/app/login/Login.tsx                       |   4 -
 3 files changed, 204 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(Administrador)/crearCuenta/page.tsx
 create mode 100644 src/app/(Administrador)/forgotPassword/page.tsx

diff --git a/src/app/(Administrador)/crearCuenta/page.tsx b/src/app/(Administrador)/crearCuenta/page.tsx
new file mode 100644
index 0000000..5cd4415
--- /dev/null
+++ b/src/app/(Administrador)/crearCuenta/page.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import "../styles/layout/login.scss"; // puedes usar los mismos estilos
+import "../styles/base/globales.scss";
+
+import Link from "next/link";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+
+function CrearCuenta() {
+  const [nombre, setNombre] = useState("");
+  const [correo, setCorreo] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmarPassword, setConfirmarPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (password !== confirmarPassword) {
+      toast.error("Las contraseñas no coinciden");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_API_URL}/auth/register`,
+        {
+          nombre,
+          correo,
+          contraseña: password,
+        }
+      );
+
+      toast.success("Cuenta creada correctamente");
+      router.push("/"); // redirige al login
+    } catch (err: unknown) {
+      if (axios.isAxiosError(err)) {
+        if (err.response) {
+          toast.error(
+            err.response.data?.message || "Error al crear la cuenta"
+          );
+        } else if (err.request) {
+          toast.error("No se pudo conectar con el servidor");
+        } else {
+          toast.error("Ocurrió un error inesperado");
+        }
+      } else {
+        toast.error("Ocurrió un error inesperado");
+      }
+    } finally {
+      setLoading(false);
+    }
+    
+  };
+
+  return (
+    <section className="containerGrid">
+      <div className="login-container">
+        <h2>Crear cuenta</h2>
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label>Nombre de usuario</label>
+            <input
+              type="text"
+              placeholder="Escribe tu nombre"
+              value={nombre}
+              onChange={(e) => setNombre(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label>Correo electrónico</label>
+            <input
+              type="email"
+              placeholder="Tu correo"
+              value={correo}
+              onChange={(e) => setCorreo(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label>Contraseña</label>
+            <input
+              type="password"
+              placeholder="Crea una contraseña"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label>Confirmar contraseña</label>
+            <input
+              type="password"
+              placeholder="Repite tu contraseña"
+              value={confirmarPassword}
+              onChange={(e) => setConfirmarPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          <button type="submit" disabled={loading}>
+            {loading ? "Creando cuenta..." : "Registrarse"}
+          </button>
+
+          <Link href="/">¿Ya tienes cuenta? Inicia sesión</Link>
+        </form>
+      </div>
+
+      
+    </section>
+  );
+}
+export default CrearCuenta;
\ No newline at end of file
diff --git a/src/app/(Administrador)/forgotPassword/page.tsx b/src/app/(Administrador)/forgotPassword/page.tsx
new file mode 100644
index 0000000..98e3cf1
--- /dev/null
+++ b/src/app/(Administrador)/forgotPassword/page.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+import "../styles/base/globales.scss"; // ajusta ruta si tu proyecto la tiene en otro sitio
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const validateEmail = (e: string) => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
+  };
+
+  const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
+    ev.preventDefault();
+    if (!validateEmail(email)) {
+      toast.error("Ingresa un correo válido.");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const res = await axios.post("/api/auth/forgot-password", { email });
+      if (res.status === 200) {
+        toast.success("Si existe esa cuenta, recibirás un correo con instrucciones.");
+        // Opcional: redirigir al login después de enviar
+        setTimeout(() => router.push("/"), 1200);
+      } else {
+        toast.error("Ocurrió un error. Intenta de nuevo.");
+      }
+    } catch (error:any ) {
+      // manejar mensajes de error desde el servidor si vienen
+      const msg = error?.response?.data?.message ?? "Error al enviar el correo.";
+      toast.error(msg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="forgot-password-page" style={{ maxWidth: 520, margin: "4rem auto", padding: "1.5rem" }}>
+      <h1>¿Olvidaste tu contraseña?</h1>
+      <p>Escribe el correo asociado a tu cuenta y te enviaremos instrucciones para restablecerla.</p>
+
+      <form onSubmit={handleSubmit} className="forgot-form" style={{ display: "grid", gap: 12 }}>
+        <label htmlFor="email">Correo electrónico</label>
+        <input
+          id="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="tu@correo.com"
+          required
+          style={{ padding: "0.6rem", borderRadius: 8, border: "1px solid #ccc" }}
+        />
+
+        <button
+          type="submit"
+          disabled={loading}
+          style={{
+            padding: "0.7rem 1rem",
+            borderRadius: 8,
+            border: "none",
+            cursor: loading ? "not-allowed" : "pointer"
+          }}
+        >
+          {loading ? "Enviando..." : "Enviar instrucciones"}
+        </button>
+
+        <div style={{ marginTop: 8 }}>
+          <a href="/">Recordé mi contraseña — Iniciar sesión</a>
+        </div>
+      </form>
+    </main>
+  );
+}
diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx
index a0330e5..e55a9a4 100644
--- a/src/app/login/Login.tsx
+++ b/src/app/login/Login.tsx
@@ -30,11 +30,7 @@ export default function Login() {
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
       router.push("/Escaner");
-<<<<<<< HEAD
-    } catch (err: unknown) {
-=======
     } catch (err) {
->>>>>>> c46e561af1c3cf0aa2835fee6eec718099d403cd
       if (axios.isAxiosError(err)) {
         if (err.response) {
           toast.error(

From ad52092e01f4e1a8646a582b3e8dccafa8ee7baf Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Thu, 30 Oct 2025 14:45:30 -0600
Subject: [PATCH 4/4] actualizacion de imagen Picachu

---
 src/app/login/Login.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx
index e55a9a4..a87dc51 100644
--- a/src/app/login/Login.tsx
+++ b/src/app/login/Login.tsx
@@ -73,8 +73,9 @@ export default function Login() {
             />
           </div>
           <button type="submit">Iniciar sesión</button>
-          <Link href={"/forgotPassword"}>Olvidaste Contraseña?</Link>
-          <Link href={"/crearCuenta"}>Crear Cuenta</Link>
+
+          {/* <Link href={"/forgotPassword"}>Olvidaste Contraseña?</Link> */}
+          {/* <Link href={"/crearCuenta"}>Crear Cuenta</Link> */}
         </form>
       </div>
 
@@ -121,7 +122,7 @@ export default function Login() {
         </div>
         <div className="collage-item collage-6">
           <Image
-            src="/picachu.jpg"
+            src="/Picachu.jpg"
             alt="UNAM Icatlán"
             fill
             style={{ objectFit: "cover" }}