|
|
|
@@ -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<string, TileContent> = {
|
|
|
|
|
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 && (
|
|
|
|
|
<>
|
|
|
|
|
<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" />
|
|
|
|
|
{/* 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. */}
|
|
|
|
|
<div className={`absolute inset-x-0 bottom-0 h-3/5 bg-gradient-to-t ${content.scrim ?? "from-white"} via-white/50 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>
|
|
|
|
|
devops