fix(ecommerce): tiles con foto - patron real de Walmart (foto flotante)

El usuario mando una captura real de walmart.com: en las tarjetas de producto la foto no cubre la tarjeta completa, flota contenida sobre un fondo pastel solido -- exactamente el mismo patron que ya usan las tarjetas sin foto de esta seccion (Bebes, Educativos, etc.), solo que Juguetes/Mochilas rompian el patron con la foto a pantalla completa + una franja de degradado para el texto (el intento anterior, tambien reportado como no convincente). Reemplaza fill+object-cover a pantalla completa por una foto contenida (object-contain) en la mitad superior de la tarjeta, dejando el fondo pastel visible alrededor -- coherente con el resto de la seccion. Elimina el campo scrim, ya no hace falta.
chore: release v1.0.200 [skip ci]
2026-08-28 18:41:12 +00:00 · 2026-08-28 18:07:03 +00:00 · 2026-08-28 17:56:11 +00:00 · 2026-08-28 17:56:09 +00:00 · 2026-08-28 17:41:49 +00:00 · 2026-08-28 17:41:47 +00:00
3 changed files with 11 additions and 5 deletions
@@ -37,11 +37,16 @@ export function PromoTile({ category, className = "" }: { category: Category; cl
      href={`/catalog?category=${encodeURIComponent(category.name)}`}
      className={cn(`group relative min-h-64 overflow-hidden rounded-[2rem] ${content.color} shadow-sm ring-1 ring-slate-900/5`, className)}
    >
+      {/* Patron real de Walmart (confirmado con referencia del usuario):
+          la foto NO cubre la tarjeta completa -- flota, contenida, sobre
+          el fondo pastel solido, igual que las tarjetas sin foto. Un
+          intento anterior con la foto a pantalla completa + una franja
+          de degradado abajo para el texto quedaba desconectado del resto
+          de tarjetas solidas, reportado en produccion. */}
      {content.image && (
-        <>
-          <Image src={content.image} alt={category.name} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 33vw, 16vw" className="object-cover transition duration-500 group-hover:scale-105" />
-          <div className="absolute inset-x-0 bottom-0 h-2/5 bg-gradient-to-t from-white/95 via-white/70 to-transparent" />
-        </>
+        <div className="absolute inset-x-6 top-6 bottom-24">
+          <Image src={content.image} alt="" fill sizes="(max-width: 640px) 45vw, (max-width: 1024px) 25vw, 14vw" className="object-contain object-top drop-shadow-xl transition duration-500 group-hover:scale-105" />
+        </div>
      )}
      <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-slate-900">
        <div>
@@ -61,6 +61,7 @@ export function HeroCarousel() {
  }, [reduceMotion]);

  const slide = slides[index];
+  if (!slide) return null;
  const Icon = slide.icon;

  return (
@@ -25,7 +25,7 @@ spec:
        runAsUser: 1001
      containers:
        - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.197
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.200
          env:
            - name: HEADLESS_PROVIDER
              value: medusa
Author	SHA1	Message	Date
devops	4994d063eb	fix(ecommerce): tiles con foto - patron real de Walmart (foto flotante) El usuario mando una captura real de walmart.com: en las tarjetas de producto la foto no cubre la tarjeta completa, flota contenida sobre un fondo pastel solido -- exactamente el mismo patron que ya usan las tarjetas sin foto de esta seccion (Bebes, Educativos, etc.), solo que Juguetes/Mochilas rompian el patron con la foto a pantalla completa + una franja de degradado para el texto (el intento anterior, tambien reportado como no convincente). Reemplaza fill+object-cover a pantalla completa por una foto contenida (object-contain) en la mitad superior de la tarjeta, dejando el fondo pastel visible alrededor -- coherente con el resto de la seccion. Elimina el campo scrim, ya no hace falta.	2026-08-28 18:41:12 +00:00
devops	a974e738eb	chore: release v1.0.200 [skip ci]	2026-08-28 18:07:03 +00:00
devops	15483e7a5b	Merge fix/adr0008-hero-carousel-ts-build-error into main Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 18s Details Build and Push Frontend / Construir y Subir Imagen (push) Successful in 10m37s Details	2026-08-28 17:56:11 +00:00
devops	a4dd1c444a	fix(ecommerce): corrige error de tipos que rompia el build de CI npm run build fallaba en CI (runs 201 y 202, ambos commits que incluian hero-carousel.tsx) con 'slide is possibly undefined' -- indexar slides[index] con TypeScript estricto (noUncheckedIndexedAccess) tipa el resultado como Slide \| undefined aunque el indice siempre sea valido en runtime (useState(0) + modulo en el autoplay + clicks solo a indices validos). Como el build nunca genero una imagen nueva, Argo seguia sirviendo v1.0.197 (el commit anterior al carrusel) -- el hero y los tiles-scrim en produccion nunca reflejaron estos dos cambios ya mergeados a main. Este fix desbloquea ambos builds.	2026-08-28 17:56:09 +00:00
devops	a3913ce457	Merge fix/adr0008-tiles-scrim-pastel into main Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 20s Details Build and Push Frontend / Construir y Subir Imagen (push) Failing after 3m28s Details	2026-08-28 17:41:49 +00:00
devops	503d714ea4	fix(ecommerce): tiles con foto usan franja tintada con su propio pastel Reportado en produccion: las tarjetas con foto (Juguetes, Mochilas) usaban una franja de degradado blanca generica para el texto, y se veian desconectadas de las tarjetas solidas vecinas (rosa, verde, etc.) de la misma seccion. La franja ahora usa el mismo pastel asignado a esa categoria (from-amber-100 / from-sky-100) en vez de blanco, y se agranda ligeramente (h-2/5 -> h-3/5) para mas presencia.	2026-08-28 17:41:47 +00:00
devops	afd6991519	Merge fix/adr0008-hero-carrusel-azul into main Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 19s Details Build and Push Frontend / Construir y Subir Imagen (push) Failing after 3m59s Details	2026-08-28 17:37:44 +00:00