fix(ecommerce): tiles con foto - la imagen llena la tarjeta (object-cover)

Reportado en produccion: con object-contain + margenes grandes
(inset-x-6 top-6 bottom-24) la foto quedaba chica y centrada, con
mucho espacio muerto del pastel alrededor -- no se parecia a la
referencia real de Walmart que mando el usuario, donde la foto
aprovecha casi toda la tarjeta.

Cambia a object-cover (recorta en vez de contener) dentro de un marco
mas delgado (inset-3 en vez de inset-x-6/top-6), dejando solo un
margen fino del pastel visible como marco alrededor de la foto.
This commit is contained in:
devops committed 2026-08-28 19:36:37 +00:00
1 parent 8e0053ab84
commit 229999fa5a
1 file changed
+7 -8
@@ -37,15 +37,14 @@ 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. */}
{/* Patron Walmart: foto recortada (object-cover) llenando casi toda
la tarjeta, con solo un margen delgado del pastel como marco --
no flotando chica con espacio muerto alrededor (object-contain,
intento anterior, reportado como "no aprovecha el espacio"), ni
a pantalla completa sin marco (el intento antes de ese). */}
{content.image && (
<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 className="absolute inset-3 bottom-24 overflow-hidden rounded-2xl">
<Image src={content.image} alt="" fill sizes="(max-width: 640px) 45vw, (max-width: 1024px) 25vw, 14vw" className="object-cover 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">