add banner image

Author: Heinric

apps/web/app/globals.css

@@ -46,23 +46,44 @@ header {
 }
 
 /* ===============================
-   Live Gradient Banner
+   🌊 Ocean Live Banner (REAL WATER EFFECT)
 ================================ */
-@keyframes gradient {
+
+/* Textura de água animada */
+.ocean-live-bg {
+  position: absolute;
+  inset: 0;
+  background-image: url("/ocean-texture.jpg");
+  background-repeat: repeat;
+  background-size: 200% 200%;
+  animation: oceanMove 26s linear infinite;
+  filter: brightness(0.5) contrast(1.15);
+}
+
+/* Movimento orgânico contínuo */
+@keyframes oceanMove {
   0% {
     background-position: 0% 50%;
   }
+  25% {
+    background-position: 30% 65%;
+  }
   50% {
-  background-position: 100% 50%;
+    background-position: 60% 50%;
+  }
+  75% {
+    background-position: 30% 35%;
   }
   100% {
     background-position: 0% 50%;
   }
 }
 
-.animate-gradient {
-  background-size: 200% 200%;
-  animation: gradient 16s ease infinite;
+/* Mobile: movimento mais lento */
+@media (max-width: 640px) {
+  .ocean-live-bg {
+    animation-duration: 38s;
+  }
 }
 
 /* ===============================
@@ -72,7 +93,7 @@ header {
 /* Evita vazamento de layout */
 .swiper {
   overflow: visible;
-  padding-bottom: 3rem; /* espaço para paginação */
+  padding-bottom: 3rem;
 }
 
 /* Mantém altura consistente */
@@ -104,61 +125,4 @@ header {
 /* Pagination (bolinhas) */
 .swiper-pagination {
   bottom: 0 !important;
-}
-
-/* ===============================
-   Ocean / Water Motion Banner
-================================ */
-
-/* Gradiente base do oceano */
-.ocean-bg {
-  background: linear-gradient(
-    120deg,
-    #041b2d,
-    #0a2540,
-    #1b3b6f,
-    #0a2540
-  );
-  background-size: 300% 300%;
-  animation: oceanGradient 18s ease-in-out infinite;
-}
-
-/* Camada de distorção suave */
-.ocean-bg::before {
-  content: "";
-  position: absolute;
-  inset: -20%;
-  background: radial-gradient(
-    circle at 30% 30%,
-    rgba(56, 189, 248, 0.18),
-    transparent 60%
-  );
-  filter: blur(80px);
-  animation: oceanWaves 22s ease-in-out infinite;
-}
-
-/* Animação principal */
-@keyframes oceanGradient {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-/* Movimento orgânico tipo água */
-@keyframes oceanWaves {
-  0% {
-    transform: translateX(-5%) translateY(-5%) rotate(0deg);
-  }
-  50% {
-    transform: translateX(5%) translateY(5%) rotate(1deg);
-  }
-  100% {
-    transform: translateX(-5%) translateY(-5%) rotate(0deg);
-  }
 }

apps/web/app/page.tsx

@@ -54,17 +54,17 @@ export default function Home() {
         </div>
       </header>
 
-      {/* Hero / Live Ocean Banner */}
+      {/* Hero / Ocean Live Banner */}
       <section className="relative w-full overflow-hidden">
         <div className="relative h-[280px] w-full sm:h-[360px] lg:h-[500px]">
 
-          {/* Ocean background */}
-          <div className="absolute inset-0 ocean-bg" />
+          {/* Ocean texture animated */}
+          <div className="absolute inset-0 ocean-live-bg"></div>
 
-          {/* Dark overlay (legibilidade) */}
-          <div className="absolute inset-0 bg-[#0A2540]/70" />
+          {/* Overlay para contraste */}
+          <div className="absolute inset-0 bg-[#0A2540]/75"></div>
 
-          {/* Content (inalterado) */}
+          {/* Conteúdo */}
           <div className="relative z-10 flex h-full flex-col items-center justify-center px-6 text-center">
             <h1 className="font-[var(--font-sora)] text-3xl font-semibold sm:text-4xl lg:text-5xl">
               Liderança técnica para decisões críticas em tecnologia