added new style

app/Components/BarNavigation/BarNavigation.css

@@ -1,6 +1,6 @@
 .barNavigation {
   text-align: center;
-  background-color: rgb(1, 92, 184);
+  background-color: #003e79;
   padding: 0 20px;
   display: flex;
   width: 100%;
@@ -12,6 +12,7 @@
   display: flex;
   justify-content: space-around;
   width: 100%;
+  gap: 10px;
 }
 
 .barNavigation li {
@@ -24,7 +25,7 @@
 }
 
 .barNavigation li:hover {
-  background-color: #d59f0f;
+  background-color: #bd8c01;
 }
 
 .barNavigation ul.active {
@@ -67,7 +68,7 @@
   flex-direction: column;
   top: 100%;
   width: 100%;
-  background-color: rgb(1, 92, 184);
+  background-color: #003e79;
   transition: color 0.3s ease, opacity 0.3s ease;
 }
 

app/Components/ChangePassword/changePassword.tsx

@@ -1,84 +1,74 @@
+"use client";
+import { useState } from "react";
 
-function ChangePassword() {
-    return (
-        <section className='centerGrid containerSection'>
+export default function ChangePassword() {
+  const [pass, setPass] = useState("");
+  const [newPass, setNewPass] = useState("");
+  const [confirmNewPass, setconfirmNewPass] = useState("");
 
-            <form
-                className='login'
-            //onSubmit={(e) => {
-            //e.preventDefault();
-            //handleLogin();
-            //</section>}}
-            >
+  const handleChangePass = (e: React.FormEvent) => {
+    e.preventDefault;
+    const data = { pass, newPass, confirmNewPass };
+    console.log(data);
+  };
 
-                <div className='containerInput relative'>
-                    <label className='label'>Contraseña actual</label>
-                    <input
-                        //type={showPassword ? 'text' : 'password'}
-                        //value={password}
-                        //onChange={(e) => setPassword(e.target.value)}
-                        placeholder='Coloca tu contraseña...'
-                    />
-                    <span
-                    //onClick={() => setShowPassword(!showPassword)}
-                    //className={showPassword ? 'eyeOpen' : 'eyeClose'}
-                    />
-                </div>
+  return (
+    <section className="centerGrid containerSection">
+      <form onSubmit={handleChangePass}>
+        <div className="containerInput relative">
+          <label className="label">Contraseña actual</label>
+          <input
+            placeholder="Coloca tu contraseña..."
+            value={pass}
+            onChange={(e) => {
+              setPass(e.target.value);
+            }}
+          />
+          <span />
+        </div>
 
-                <div className='containerInput relative'>
-                    <label className='label'>Nueva contraseña</label>
-                    <input
-                        //type={showPassword ? 'text' : 'password'}
-                        //value={password}
-                        //onChange={(e) => setPassword(e.target.value)}
-                        placeholder='Coloca tu contraseña...'
-                    />
-                    <span
-                    //onClick={() => setShowPassword(!showPassword)}
-                    //className={showPassword ? 'eyeOpen' : 'eyeClose'}
-                    />
-                </div>
+        <div className="containerInput relative">
+          <label className="label">Nueva contraseña</label>
+          <input
+            placeholder="Coloca tu nueva contraseña..."
+            value={newPass}
+            onChange={(e) => {
+              setNewPass(e.target.value);
+            }}
+          />
+          <span />
+        </div>
 
-                <div className='containerInput relative'>
-                    <label className='label'>Confirmar la contraña</label>
-                    <input
-                        //type={showPassword ? 'text' : 'password'}
-                        //value={password}
-                        //onChange={(e) => setPassword(e.target.value)}
-                        placeholder='Coloca tu contraseña...'
-                    />
-                    <span
-                    //onClick={() => setShowPassword(!showPassword)}
-                    //className={showPassword ? 'eyeOpen' : 'eyeClose'}
-                    />
-                </div>
+        <div className="containerInput relative">
+          <label className="label">Confirmar la contraña</label>
+          <input
+            placeholder="Coloca tu contraseña..."
+            value={confirmNewPass}
+            onChange={(e) => {
+              setconfirmNewPass(e.target.value);
+            }}
+          />
+          <span />
+        </div>
 
-                <div className="containerButton">
-                    <button
-                        className='button buttonSearch'
-                        style={{ maxWidth: '100%', width: '100%' }}
-                        type='submit'
-                    >Confirmar
-                    </button>
+        <div className="containerButton">
+          <button
+            className="button buttonSearch"
+            style={{ maxWidth: "100%", width: "100%" }}
+            type="submit"
+          >
+            Confirmar
+          </button>
 
-                    <button
-                        className='button buttonSearch'
-                        style={{ maxWidth: '100%', width: '100%' }}
-                        type='submit'
-                    >Cancelar
-                    </button>
-                </div>
-            </form>
-            {/*message &&
-                <div
-                    className={`messageBox ${message.includes('exitoso') ? 'success' : 'error'}`}
-                    style={{ marginTop: '10px' }}
-                >
-                    {message}
-                </div>
-            */}
-        </section>
-    )
+          <button
+            className="button buttonSearch"
+            style={{ maxWidth: "100%", width: "100%" }}
+            type="submit"
+          >
+            Cancelar
+          </button>
+        </div>
+      </form>
+    </section>
+  );
 }
-
-export default ChangePassword

app/Components/Footer/Footer.module.css

@@ -1,37 +1,37 @@
 .yellowPart {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: -50px;
-    width: 20%;
-    height: 100%;
-    min-width: 300px;
-    background: linear-gradient(to left, #003d79, #d59f0f);
-    transform: skew(45deg);
-    z-index: 1;
+  position: absolute;
+  content: "";
+  top: 0;
+  left: -50px;
+  width: 20%;
+  height: 100%;
+  min-width: 300px;
+  background: linear-gradient(to left, #003e79, #bd8c01);
+  transform: skew(45deg);
+  z-index: 1;
 }
 
 .yellowPartOpuest {
-    position: absolute;
-    content: "";
-    top: 0;
-    right: -50px;
-    width: 20%;
-    height: 100%;
-    min-width: 300px;
-    background: linear-gradient(to right, #003d79, #d59f0f);
-    transform: skew(-45deg);
-    z-index: 1;
+  position: absolute;
+  content: "";
+  top: 0;
+  right: -50px;
+  width: 20%;
+  height: 100%;
+  min-width: 300px;
+  background: linear-gradient(to right, #003d79, #bd8c01);
+  transform: skew(-45deg);
+  z-index: 1;
 }
 
-@media(max-width:800px) {
-    .yellowPart {
-        width: 5%;
-        left: -150px;
-    }
+@media (max-width: 800px) {
+  .yellowPart {
+    width: 5%;
+    left: -150px;
+  }
 
-    .yellowPartOpuest {
-        width: 5%;
-        right: -150px;
-    }
-}
+  .yellowPartOpuest {
+    width: 5%;
+    right: -150px;
+  }
+}

app/Components/Header/Header.module.css

@@ -1,35 +1,35 @@
 .logo {
-    position: relative;
-    filter: invert(1);
-    z-index: 3;
-    margin: 5px;
+  position: relative;
+  filter: invert(1);
+  z-index: 3;
+  margin: 5px;
 }
 
 .cedetecContainer {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 300px;
-    height: 100%;
-    z-index: -1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 300px;
+  height: 100%;
+  z-index: -1;
 }
 
 .cedetecContainer::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
 }
 
 .yellowPart {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: -20px;
-    width: 50%;
-    height: 100%;
-    min-width: 300px;
-    background: #d59f0f;
-    transform: skew(-45deg);
-    z-index: 0;
+  position: absolute;
+  content: "";
+  top: 0;
+  left: -20px;
+  width: 50%;
+  height: 100%;
+  min-width: 300px;
+  background: #bd8c01;
+  transform: skew(-45deg);
+  z-index: 0;
 }

app/globals.css

@@ -42,7 +42,7 @@ header::after {
   top: 0;
   left: -40px;
   position: absolute;
-  background-color: rgba(0, 61, 121, 1);
+  background-color: #003e79;
   height: 100%;
   width: 30%;
   min-width: 300px;
@@ -69,7 +69,7 @@ footer {
   justify-content: center;
   text-align: center;
   padding: 10px;
-  background-color: rgba(0, 61, 121, 1);
+  background-color: #003e79;
   z-index: 0;
   overflow: hidden;
 }
@@ -101,7 +101,7 @@ footer p {
   border: 1px solid #d1d5db;
   border-radius: 4px;
   width: 90%;
-  max-width: 1150px;
+  max-width: 1500px;
   height: 600px;
   min-height: 520px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -127,9 +127,9 @@ footer p {
   position: absolute;
   top: 0;
   right: 0;
-  width: 400px;
+  width: 725px;
   height: 615px;
-  background-image: url("/rock.jpg");
+  background-image: url("https://www.acatlan.unam.mx/images/fes_05.jpg");
   background-size: cover;
   background-position: center;
   overflow: hidden;
@@ -360,7 +360,7 @@ table tr {
 
 .centerGrid {
   display: grid;
-  grid-template-columns: auto 400px;
+  grid-template-columns: auto 725px;
   justify-content: center;
   align-items: center;
 }
@@ -411,8 +411,8 @@ table tr {
     justify-content: flex-start;
     align-items: center;
     width: 100%;
-    height: 600px;
-    max-height: 600px;
+    height: 650px;
+    max-height: 650px;
     border-radius: 0;
   }
 
@@ -421,6 +421,7 @@ table tr {
   }
 
   .img {
+    background-image: url("/rock.jpg");
     right: 50%;
     transform: translateX(50%);
     width: 600px;

app/layout.tsx

@@ -29,11 +29,7 @@ export default function RootLayout({
     <html lang="es">
       <body className={poppins.variable}>
         <Header />
-        <main>
-          <FallingSquares />
-          {children}
-          <WavesBackground />
-        </main>
+        <main>{children}</main>
         <Footer />
       </body>
     </html>

app/lib/changePass.ts

@@ -0,0 +1,15 @@
+import apiClient from "@/app/lib/apiClient";
+
+export async function changePass(data: any) {
+  try {
+    const response = await apiClient.post("/user/change-password", data);
+    return response.data;
+  } catch (error: any) {
+    const msg =
+      error.response?.data?.error ||
+      error.message ||
+      "Error desconocido al cobrar impresión";
+    return { error: msg };
+  }
+}
+//IO

app/lib/postImpressions.ts

@@ -1,4 +1,4 @@
-import apiClient from "@/app/lib/apiClient";
+import apiClient from "./apiClient";
 
 export async function PostImpressions(data: any) {
   try {