From a17f989ba1ca3a8dd09e5538ddad725ae3b220c9 Mon Sep 17 00:00:00 2001
From: "Carlos (Almeira)" <carlos@almeira.com.co>
Date: Thu, 9 Jul 2026 09:52:54 -0500
Subject: [PATCH] Fix banner visibility, rotation timers, and logo distortion

---
 src/app/login/page.tsx            |  2 +-
 src/components/ClientSidebars.tsx |  5 ++++-
 src/components/Navbar.tsx         |  4 ++--
 src/components/TopBanner.tsx      | 11 +++++++----
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index d8c708f..63d7565 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -15,7 +15,7 @@ export default async function LoginPage() {
         <div className="p-8">
           <div className="flex flex-col items-center justify-center text-center mb-8 relative z-10">
               {entity?.logotipo ? (
-                  <img src={entity.logotipo} alt={entity?.razon_social || "Logo"} className="h-20 w-auto object-contain mb-4 drop-shadow-[0_0_15px_rgba(255,255,255,0.1)]" />
+                  <img src={entity.logotipo} alt={entity?.razon_social || "Logo"} className="h-20 w-auto max-w-full shrink-0 object-contain mb-4 drop-shadow-[0_0_15px_rgba(255,255,255,0.1)]" />
               ) : (
                   <div className="bg-gradient-to-br from-cyan-500 to-blue-600 p-4 rounded-2xl text-white shadow-lg mb-4 border border-white/20">
                       <Radio size={32} className="animate-pulse" />
diff --git a/src/components/ClientSidebars.tsx b/src/components/ClientSidebars.tsx
index 617be0d..b4fface 100644
--- a/src/components/ClientSidebars.tsx
+++ b/src/components/ClientSidebars.tsx
@@ -30,9 +30,11 @@ function ClientCarouselGroup({ eslogan, ads, rotationSeconds }: { eslogan: strin
     useEffect(() => {
         if (!ads || ads.length <= 1) return;
         
+        const delay = (rotationSeconds && rotationSeconds > 0) ? rotationSeconds * 1000 : 5000;
+        
         const interval = setInterval(() => {
             setCurrentIndex(prev => (prev + 1) % ads.length);
-        }, rotationSeconds * 1000);
+        }, delay);
  
         return () => clearInterval(interval);
     }, [ads, rotationSeconds]);
@@ -81,6 +83,7 @@ function ClientCarouselGroup({ eslogan, ads, rotationSeconds }: { eslogan: strin
                  
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img 
+                    key={activeAd.$id}
                     src={imgUrl} 
                     alt={activeAd.titulo} 
                     className="w-full h-full object-cover animate-fade-in"
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e56d803..2260e56 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -42,9 +42,9 @@ export const Navbar = ({ entity }: { entity?: any }) => {
                 {/* Brand Logo Holográfico */}
                 <Link href="/" className="flex items-center gap-3 group">
                     {entity?.logotipo ? (
-                        <div className="relative">
+                        <div className="relative flex items-center shrink-0">
                             <div className="absolute inset-0 bg-transparent blur-md opacity-50 group-hover:opacity-100 transition-opacity rounded-xl"></div>
-                            <img src={entity.logotipo} alt={entity?.razon_social || "Logo"} className="h-10 w-auto object-contain relative z-10 group-hover:scale-105 transition-transform drop-shadow-lg" />
+                            <img src={entity.logotipo} alt={entity?.razon_social || "Logo"} className="h-10 md:h-12 w-auto max-w-[180px] md:max-w-[240px] object-contain relative z-10 group-hover:scale-105 transition-transform drop-shadow-lg shrink-0" />
                         </div>
                     ) : (
                         <div className="relative">
diff --git a/src/components/TopBanner.tsx b/src/components/TopBanner.tsx
index a4963bd..8487cda 100644
--- a/src/components/TopBanner.tsx
+++ b/src/components/TopBanner.tsx
@@ -11,9 +11,11 @@ export default function TopBanner({ initialBanners, rotationSeconds }: { initial
    useEffect(() => {
        if (!initialBanners || initialBanners.length <= 1) return;
        
+       const delay = (rotationSeconds && rotationSeconds > 0) ? rotationSeconds * 1000 : 5000;
+       
        const interval = setInterval(() => {
            setCurrentIndex(prev => (prev + 1) % initialBanners.length);
-       }, rotationSeconds * 1000);
+       }, delay);
 
        return () => clearInterval(interval);
    }, [initialBanners, rotationSeconds]);
@@ -51,17 +53,18 @@ export default function TopBanner({ initialBanners, rotationSeconds }: { initial
    };
 
    return (
-       <div className="w-full relative h-[120px] md:h-[180px] lg:h-[220px] bg-slate-900 border-b border-cyan-500/30 overflow-hidden group">
+       <div className="w-full relative bg-slate-900 border-b border-cyan-500/30 overflow-hidden group">
            
            {/* Metric Impression Observer resets key on change to fire new impression */}
            <MetricObserver key={activeBanner.$id} postId={activeBanner.$id} />
 
-           <div onClick={recordClickAndGo} className={`w-full h-full ${activeBanner.url_destino ? 'cursor-pointer' : ''}`}>
+           <div onClick={recordClickAndGo} className={`w-full h-auto flex ${activeBanner.url_destino ? 'cursor-pointer' : ''}`}>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img 
+                   key={activeBanner.$id}
                    src={imgUrl} 
                    alt={activeBanner.titulo} 
-                   className="w-full h-full object-cover animate-fade-in" 
+                   className="w-full h-auto object-contain animate-fade-in" 
                />
                
                {activeBanner.url_destino && (