From e980b0400c00e2b316d4ddfd485387e95b1865d3 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Fri, 5 Sep 2025 14:17:26 -0400
Subject: [PATCH] add wave

---
 .../BarNavigation/BarNavigation.css           |  1 +
 .../BarNavigation/BarNavigation.tsx           | 30 +++++------
 app/Components/wave.module.css                | 53 +++++++++++++++++++
 app/Components/wavesBack.tsx                  | 12 +++++
 app/globals.css                               |  8 +--
 app/layout.tsx                                |  2 +
 6 files changed, 87 insertions(+), 19 deletions(-)
 create mode 100644 app/Components/wave.module.css
 create mode 100644 app/Components/wavesBack.tsx

diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css
index fcd37b7..c561f3a 100644
--- a/app/Components/BarNavigation/BarNavigation.css
+++ b/app/Components/BarNavigation/BarNavigation.css
@@ -15,6 +15,7 @@
     cursor: pointer;
     color: white;
     font-weight: bold;
+    width: 100%;
 }
 
 .barNavigation li:hover {
diff --git a/app/Components/BarNavigation/BarNavigation.tsx b/app/Components/BarNavigation/BarNavigation.tsx
index a3a12d6..b04ac10 100644
--- a/app/Components/BarNavigation/BarNavigation.tsx
+++ b/app/Components/BarNavigation/BarNavigation.tsx
@@ -24,14 +24,14 @@ function BarNavigation() {
             <ul className={openMenu ? "active" : ""}>
                 <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
                     <span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
-                    <ul className="containerLinks">
-                        <Link href="/Alta">
+                    <ul className="containerLinks" >
+                        <Link href="/Alta" className="links">
                             <li >Alta</li>
                         </Link>
-                        <Link href="/AgregarTiempo" >
+                        <Link href="/AgregarTiempo" className="links">
                             <li >Agregar Tiempo</li>
                         </Link>
-                        <Link href="/Inscripciones">
+                        <Link href="/Inscripciones" className="links">
                             <li>Inscripciones</li>
                         </Link>
                     </ul>
@@ -40,22 +40,22 @@ function BarNavigation() {
                 <li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
                     <span onClick={() => toggleSubMenu(1)}>Servicios</span>
                     <ul>
-                        <Link href="/Impresiones">
+                        <Link href="/Impresiones" className="links">
                             <li >
                                 Impresiones y Ploteo
                             </li>
                         </Link>
-                        <Link href="/AsignacionMesas">
+                        <Link href="/AsignacionMesas" className="links">
                             <li>
                                 Asignacion de Mesas
                             </li>
                         </Link>
-                        <Link href="/AsignacionEquipo">
+                        <Link href="/AsignacionEquipo" className="links">
                             <li>
                                 Asignacion de Equipos
                             </li>
                         </Link>
-                        <Link href="/Monitor">
+                        <Link href="/Monitor" className="links">
                             <li>
                                 Monitor
                             </li>
@@ -66,16 +66,16 @@ function BarNavigation() {
                 <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
                     <span onClick={() => toggleSubMenu(2)}>Equipo</span>
                     <ul >
-                        <Link href="/InformacionEquipo">
+                        <Link href="/InformacionEquipo" className="links">
                             <li>Informacion de Equipos</li>
                         </Link>
-                        <Link href="/ActivosMantenimiento">
+                        <Link href="/ActivosMantenimiento" className="links">
                             <li >Activos y en Mantenimiento</li>
                         </Link>
-                        <Link href="/Mensajes">
+                        <Link href="/Mensajes" className="links">
                             <li>Mensajes</li>
                         </Link>
-                        <Link href="/Programas">
+                        <Link href="/Programas" className="links">
                             <li>Programas</li>
                         </Link>
                     </ul>
@@ -85,13 +85,13 @@ function BarNavigation() {
                     <span onClick={() => toggleSubMenu(3)}>Reportes</span>
 
                     <ul>
-                        <Link href="/Recibo">
+                        <Link href="/Recibo" className="links">
                             <li>Recibo</li>
                         </Link>
-                        <Link href="/Inscritos">
+                        <Link href="/Inscritos" className="links">
                             <li>Inscritos</li>
                         </Link>
-                        <Link href="/BitacoraSanciones">
+                        <Link href="/BitacoraSanciones" className="links">
                             <li>Bitacora y sanciones</li>
                         </Link>
                     </ul>
diff --git a/app/Components/wave.module.css b/app/Components/wave.module.css
new file mode 100644
index 0000000..14a210b
--- /dev/null
+++ b/app/Components/wave.module.css
@@ -0,0 +1,53 @@
+.ocean {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 30vh;
+  overflow: hidden;
+  background: #4fc3f7; /* color del mar */
+  z-index: -1; /* para que quede atrás del contenido */
+}
+
+.wave {
+  position: absolute;
+  bottom: 0;
+  width: 200%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 100% 50%;
+  animation: waveMove 8s linear infinite;
+}
+
+.wave:nth-child(2) {
+  background: rgba(255, 255, 255, 0.3);
+  animation-duration: 10s;
+  animation-delay: -2s;
+}
+
+.wave:nth-child(3) {
+  background: rgba(255, 255, 255, 0.2);
+  animation-duration: 12s;
+  animation-delay: -4s;
+}
+
+@keyframes waveMove {
+  0% {
+    transform: translateX(0) translateY(0);
+  }
+  50% {
+    transform: translateX(-25%) translateY(5%);
+  }
+  100% {
+    transform: translateX(0) translateY(0);
+  }
+}
+
+@media (max-width: 800px) {
+  .ocean {
+    background: transparent;
+  }
+  .wave {
+    display: none;
+  }
+}
diff --git a/app/Components/wavesBack.tsx b/app/Components/wavesBack.tsx
new file mode 100644
index 0000000..c2e0d99
--- /dev/null
+++ b/app/Components/wavesBack.tsx
@@ -0,0 +1,12 @@
+'use client';
+import styles from './wave.module.css';
+
+export default function WavesBackground() {
+  return (
+    <div className={styles.ocean}>
+      <div className={styles.wave}></div>
+      <div className={styles.wave}></div>
+      <div className={styles.wave}></div>
+    </div>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index ed499e8..3fbc6cd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,6 +5,7 @@
 }
 
 body {
+  position: relative;
   font-family: var(--font-poppins), sans-serif;
   display: grid;
   grid-template-rows: auto auto 1fr auto;
@@ -106,7 +107,7 @@ footer {
   background-position: center;
   overflow: hidden;
   z-index: -1;
-  opacity: 0.5;
+  opacity: 1;
 }
 
 .img::after {
@@ -268,12 +269,11 @@ form {
 
 .toggleButton.active {
   background-color: #e5e7eb;
+  color: rgb(1, 92, 184);
   border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid rgb(1, 92, 184);
 }
 
-.toggleButton.active {
-  background-color: #f9fafb;
-}
 
 @media(max-width:800px) {
   header {
diff --git a/app/layout.tsx b/app/layout.tsx
index 2f07190..603cdb1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +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";
 
 const poppins = Poppins({
   variable: "--font-poppins", // nombre de la variable CSS
@@ -31,6 +32,7 @@ export default function RootLayout({
             <div className="img"></div>
             {children}
           </div>
+          <WavesBackground />
         </main>
         <Footer />
       </body>