add changePass

app/CambiarPass/page.tsx

@@ -1,3 +1,4 @@
+import ChangePassword from "../Components/ChangePassword/changePassword";
 import SearchUser from "../Components/SearchUser/searchUser";
 
 export default function Page() {
@@ -5,7 +6,7 @@ export default function Page() {
     <section className='containerSection'>
       <h2 className='title'> Cambiar contraseña </h2>
 
-      <SearchUser/>
+      <ChangePassword/>
     </section>
 
   );

app/Components/BarNavigation/BarNavigation.css

@@ -19,8 +19,7 @@
 }
 
 .barNavigation li:hover {
-    background-color: #f9f9f9;
-    color: rgba(0, 61, 121, 1);
+    background-color: #d59f0f;
 }
 
 .barNavigation ul.active {
@@ -94,10 +93,6 @@
     color: rgb(255, 255, 255);
 }
 
-.subMenu:hover span {
-    color: rgba(0, 61, 121, 1);
-}
-
 .containerLinks {
     padding: 0 !important;
 }
@@ -111,10 +106,6 @@
     height: 100%;
 }
 
-.subMenu:hover .links {
-    color: rgba(0, 61, 121, 1);
-}
-
 @media (max-width: 800px) {
 
     .menuToggle {

app/Components/ChangePassword/changePassword.tsx

@@ -0,0 +1,84 @@
+
+function ChangePassword() {
+    return (
+        <section className='center containerSection'>
+
+            <form
+                className='login'
+            //onSubmit={(e) => {
+            //e.preventDefault();
+            //handleLogin();
+            //</section>}}
+            >
+
+                <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>
+
+                <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'>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="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>
+    )
+}
+
+export default ChangePassword

app/Components/Footer/Footer.tsx

@@ -2,8 +2,10 @@
 function Footer() {
     return (
         <footer>
-            Hecho en México. Todos los derechos reservados 2025.
-            Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente completa y su dirección electrónica. De otra forma, requiere permiso previo por escrito de la institución.
+            <p>
+                Hecho en México. Todos los derechos reservados 2025.
+                Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente completa y su dirección electrónica. De otra forma, requiere permiso previo por escrito de la institución.
+            </p>
         </footer>
     )
 }

app/Components/Login/Login.css

@@ -2,13 +2,6 @@
     width: 300px;
 }
 
-.center{
-    display: grid;
-    grid-template-columns: auto 400px;
-    justify-content: center;
-    align-items: center;
-}
-
 .relative {
     position: relative;
 }

app/Components/Wave/wave.module.css

@@ -11,23 +11,25 @@
 
 .wave {
   position: absolute;
-  bottom: 0;
-  width: 200%;
-  height: 100%;
+  top: 0;
+  left: 0;
+  width: 160%;
+  height: 130%;
   background: rgba(255, 255, 255, 0.5);
-  border-radius: 100% 50%;
-  animation: waveMove 8s linear infinite;
+  border-radius: 50% 50%;
+  animation: waveMove 6s linear infinite;
 }
 
 .wave:nth-child(2) {
+  top: -10;
   background: rgba(255, 255, 255, 0.3);
-  animation-duration: 10s;
+  animation-duration: 8s;
   animation-delay: -2s;
 }
 
 .wave:nth-child(3) {
   background: rgba(255, 255, 255, 0.2);
-  animation-duration: 12s;
+  animation-duration: 10s;
   animation-delay: -4s;
 }
 

app/globals.css

@@ -57,10 +57,16 @@ main {
 }
 
 footer {
+  display: flex;
+  justify-content: center;
   text-align: center;
   padding: 10px;
   background-color: rgba(0, 61, 121, 1);
+}
+
+footer p {
   color: white;
+  max-width: 1150px;
 }
 
 .container {
@@ -184,6 +190,14 @@ ul {
   margin-bottom: 10px;
 }
 
+.containerButton {
+  display: flex;
+  gap: 10px;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+}
+
 .label {
   font-size: 1rem;
   font-weight: bold;
@@ -274,6 +288,12 @@ form {
   border-bottom: 1px solid rgb(1, 92, 184);
 }
 
+.center {
+  display: grid;
+  grid-template-columns: auto 400px;
+  justify-content: center;
+  align-items: center;
+}
 
 @media (max-width: 800px) {
   header {
@@ -332,4 +352,4 @@ form {
   .container {
     margin: 0;
   }
-}
+}

app/layout.tsx

@@ -4,7 +4,7 @@ import Header from "./Components/Header/Header";
 import Footer from "./Components/Footer/Footer";
 import BarNavigation from "./Components/BarNavigation/BarNavigation";
 import "./globals.css";
-import WavesBackground from "./Components/wavesBack";
+import WavesBackground from "./Components/Wave/wavesBack";
 
 const poppins = Poppins({
   variable: "--font-poppins", // nombre de la variable CSS