From 4994d063ebd0ea8f737bec8dca557341e2c58d12 Mon Sep 17 00:00:00 2001 From: Cristian Felipe Cruz Buitron Date: Fri, 28 Aug 2026 18:41:12 +0000 Subject: [PATCH] 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. --- .../components/home/category-tiles.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/workloads/ecommerce/components/home/category-tiles.tsx b/workloads/ecommerce/components/home/category-tiles.tsx index 9133b2a..9b70f32 100644 --- a/workloads/ecommerce/components/home/category-tiles.tsx +++ b/workloads/ecommerce/components/home/category-tiles.tsx @@ -4,7 +4,7 @@ import { ArrowUpRight } from "lucide-react"; import type { Category } from "@/lib/headless/types"; import { cn } from "@/lib/utils"; -type TileContent = { subtitle: string; image?: string; color: string; scrim?: string }; +type TileContent = { subtitle: string; image?: string; color: string }; // No hay fotografia real todavia para las 6 categorias raiz de la taxonomia // (ver ADR 0005) -- solo se mapean imagen/subtitulo para las que ya tienen @@ -15,8 +15,8 @@ type TileContent = { subtitle: string; image?: string; color: string; scrim?: st // un tono pastel distinto por categoria, no una escala de marca (serian // todos casi iguales), pero coordinados en la misma temperatura suave. const tileContent: Record = { - juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "bg-amber-100", scrim: "from-amber-100" }, - "mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "bg-sky-100", scrim: "from-sky-100" }, + juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "bg-amber-100" }, + "mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "bg-sky-100" }, "bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "bg-rose-100" }, educativos: { subtitle: "Aprender jugando", color: "bg-emerald-100" }, "accion-y-aventura": { subtitle: "Para explorar sin límites", color: "bg-orange-100" }, @@ -37,15 +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 && ( - <> - {category.name} - {/* Franja tintada con el pastel propio de la categoria (no - blanco generico) -- sin esto la tarjeta con foto se veia - desconectada de las tarjetas solidas vecinas, reportado - en produccion. */} -
- +
+ +
)}