Compare commits

..
Author SHA1 Message Date
devops f88b72d781 docs(decisiones): ADR 0009 - PayU elegido como proveedor de pago
Dato de negocio real del usuario: cuentas disponibles son Davivienda,
Lulo Bank y Banco de Bogota -- ninguna Bancolombia ni Nequi.

Verificado el mismo dia: Wompi exige cuenta Bancolombia o al menos
Nequi solo para REGISTRARSE como comercio (aunque la liquidacion
despues pueda ir a cualquier banco) -- ninguno de los bancos
disponibles califica sin abrir una cuenta nueva. PayU solo exige
cuenta bancaria colombiana a nombre del comercio, sin banco
especifico, y ya soporta PSE + Nequi + Daviplata para el cliente sin
importar el banco del comercio -- cubre exactamente lo que se pidio
(PSE + Nequi 'y demas bancos').

Estado pasa de propuesta a aceptada. Wompi se deja documentado como
deuda a reevaluar si en el futuro se abre cuenta Bancolombia/Nequi --
no se descarta por limitacion tecnica del plugin, solo por el
requisito de registro actual.
2026-08-28 23:19:30 +00:00
gitea-actions 525ebde5ce chore(gitops): deploy Docs Portal v1.0.205 [skip ci] 2026-08-28 22:39:13 +00:00
devops 0f98fa286e Merge docs/adr0009-checkout-real into main
Build and Push Docs Portal / Escaneo de Secretos (Gitleaks) (push) Successful in 17s
Build and Push Docs Portal / Construir y publicar Docs Portal (push) Successful in 5m22s
2026-08-28 22:33:39 +00:00
devops 33f510dcdd docs(decisiones): ADR 0009 - checkout real (pago en linea + envios)
Propuesta, no aceptada: investiga el estado real de Medusa 2.18.0 para
soportar checkout de verdad (hoy el carrito cierra por WhatsApp).

Verificado contra codigo real y documentacion oficial de Medusa
(2026-08-28): cero shipping options configuradas (bloqueador
independiente del proveedor de pago), Stripe es de primera clase en
Medusa v2 pero no acepta comercios registrados en Colombia
(confirmado contra stripe.com/global), PayU tiene compatibilidad
declarada con Medusa 2.4.0+, Wompi no documenta version de Medusa ni
actividad reciente.

Deja la eleccion de proveedor de pago explicitamente pendiente de
decision de negocio del usuario -- no es algo que se pueda resolver
en el codigo.
2026-08-28 22:33:37 +00:00
devops 52295e2c6d chore: release v1.0.204 [skip ci] 2026-08-28 21:47:40 +00:00
devops fe0387cc4c Merge fix/adr0008-club-ari-imagen-azul into main
Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 18s
Build and Push Frontend / Construir y Subir Imagen (push) Successful in 10m47s
2026-08-28 21:36:37 +00:00
devops cfec1543ab fix(ecommerce): imagen decorativa de Club ARI en azul/amarillo
promo-backpacks.webp tenia el fondo punteado violeta/morado del
esquema arcoiris original, notado al confirmar el fix anterior de
Club ARI (el panel de texto ya paso a azul solido, pero la foto de al
lado seguia con su propio color viejo).

Sin herramienta de generacion de imagenes disponible, se reconstruye
el mismo efecto (fondo punteado + fotos estilo polaroid) con CSS
(radial-gradient azul sobre fondo amarillo, circulo decorativo azul)
y 3 fotos reales de producto ya existentes en public/images/products/
en vez de la foto compuesta vieja.
2026-08-28 21:36:35 +00:00
devops 49a6645378 chore: release v1.0.203 [skip ci] 2026-08-28 21:17:07 +00:00
devops 11ef812f64 Merge fix/adr0008-club-ari-y-novedades into main
Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 24s
Build and Push Frontend / Construir y Subir Imagen (push) Successful in 7m14s
2026-08-28 21:09:33 +00:00
devops 4b2e6477e5 fix(ecommerce): Club ARI y Novedades - ultimos leftovers arcoiris del home
Dos leftovers del esquema original notados de pasada durante las
pruebas de ADR 0008 (fuera del alcance original de logo/buscador/
hero/tiles, pero mismo patron): la etiqueta 'Novedades' en
text-fuchsia-600 y la seccion 'Club ARI' con gradiente
cyan-500/blue-600/violet-600 + badge text-yellow-300.

Ambos pasan a los tokens de marca (ari-coral, ari-marino solido,
ari-coral-claro) -- ya no queda ningun gradiente ni color hardcodeado
del esquema arcoiris original en el home.
2026-08-28 21:09:30 +00:00
devops e5f9ec5f1d chore: release v1.0.202 [skip ci] 2026-08-28 20:04:00 +00:00
devops 11b97b9178 Merge fix/adr0008-tiles-foto-mas-grande into main
Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 19s
Build and Push Frontend / Construir y Subir Imagen (push) Successful in 5m17s
2026-08-28 19:36:39 +00:00
devops 229999fa5a 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.
2026-08-28 19:36:37 +00:00
devops 8e0053ab84 chore: release v1.0.201 [skip ci] 2026-08-28 18:49:03 +00:00
devops e837c55de8 Merge fix/adr0008-tiles-foto-flotante into main
Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 19s
Build and Push Frontend / Construir y Subir Imagen (push) Successful in 7m33s
2026-08-28 18:41:15 +00:00
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
Build and Push Frontend / Construir y Subir Imagen (push) Successful in 10m37s
2026-08-28 17:56:11 +00:00
6 changed files with 211 additions and 14 deletions

No files matched your search

@@ -0,0 +1,176 @@
# ADR 0009 — Checkout real (pago en línea + envíos) para ARI Shopping
**Estado:** aceptada — proveedor de pago decidido (PayU, §3);
implementación real (credenciales, shipping options, código) pendiente
**Fecha:** 2026-08-28
## Contexto
El carrito hoy no completa una transacción real: arma el pedido en el
cliente y lo cierra con un botón "Continuar por WhatsApp"
(`components/layout/navbar.tsx`, `mobile-add-to-cart.tsx`) — un
placeholder intencional, no un bug. El diálogo de cuenta ya lo admite
explícitamente ("El inicio de sesión quedará conectado al backend
headless. Mientras tanto..."). Ni checkout ni auth de clientes tienen
ADR previo ni intento de implementación en el historial de git de
ningún repo del lab — este es terreno nuevo.
Investigación previa a este ADR (2026-08-28, confirmado contra código
real y documentación oficial vigente, no memoria de entrenamiento —
misma disciplina que ADR 0006):
- **Pagos:** `commerce-backend/medusa-config.ts` no registra ningún
provider de pago — el único módulo configurado hoy es
`@medusajs/medusa/file` (storage S3).
- **Envíos:** existe una sola región ("Colombia", COP), creada a mano
vía Admin API durante el incidente de precios de agosto
(`incidente-medusa-precios-region-id-2026-08.md`), no vía ningún
script de seed — no existe ningún script de seed en el repo. **No
hay ninguna shipping option configurada en ningún lado.** Sin esto
el checkout no puede completarse aunque el pago ya funcione — es un
prerequisito invisible, independiente del proveedor de pago elegido.
- **Auth:** cero código de cliente/login en todo el storefront (grep
sobre `lib/`, `app/`, `components/` sin resultados para
`customer`/`login`/`useAuth`/`/store/customers`). El módulo de
auth/customer de Medusa viene incluido en el core — falta
enteramente el lado del storefront, no el backend. **Medusa soporta
checkout como invitado**, así que auth no bloquea checkout y puede
secuenciarse por separado — fuera de alcance de este ADR.
## 1. Flujo de checkout real en Medusa v2 (Store API)
Confirmado contra `docs.medusajs.com` (2026-08-28): el flujo son 7
pasos encadenados — crear carrito → agregar items → dirección de envío
→ **seleccionar método de envío** (`POST` a la ruta de shipping method
del carrito, requiere que ya exista al menos una shipping option) →
payment collection → payment session → completar orden. Ningún paso
es opcional; el paso de método de envío es exactamente el que hoy no
tiene ninguna shipping option que ofrecer.
## 2. Estado real de soporte de pago en Medusa 2.18.0
- **Stripe es de primera clase** (`@medusajs/medusa/payment-stripe`,
incluido en el core, no un plugin de terceros — a diferencia de la
situación de Meilisearch en ADR 0006). Configuración mínima
verificada:
```ts
{
resolve: "@medusajs/medusa/payment",
options: {
providers: [{
resolve: "@medusajs/medusa/payment-stripe",
id: "stripe",
options: { apiKey: process.env.STRIPE_API_KEY },
}],
},
}
```
Env vars: `STRIPE_API_KEY` (siempre) y `STRIPE_WEBHOOK_SECRET`
(obligatorio en producción). Tras configurar, hay que habilitar el
provider **en la región** desde el Admin — un paso manual aparte,
igual que ya pasó con la región misma.
- **Bloqueador real de negocio, no técnico: Stripe no acepta cuentas
de comercio registradas en Colombia.** Confirmado contra
`stripe.com/global` (2026-08-28) — Brasil y México sí están en la
lista de países soportados para abrir cuenta, Colombia no aparece.
La única vía sería registrar una entidad de negocio en un país
soportado, fuera de alcance realista para este lab. Esto invalida a
Stripe como opción pese a ser la integración técnicamente más
simple y mejor documentada.
- **Alternativas con presencia real en Colombia y algún plugin de
Medusa existente:**
- **PayU** (`@tax1driver/medusa-payu`): el propio repo declara
compatibilidad explícita con Medusa `v2.4.0+` — cubre nuestra
versión (2.18.0). Webhook auto-registrado en `/hooks/payment/payu`.
- **Wompi** (`medusa-payment-wompi-col`, respaldado por Bancolombia,
liquidación directa en COP): revisé el repo directamente
(2026-08-28) y **no documenta contra qué versión de Medusa se
probó, ni tiene releases/actividad reciente visible** — mayor
riesgo de compatibilidad no verificada que PayU, aunque el
encaje de negocio (banco local, moneda nativa) sea el más
directo. Antes de elegirlo habría que repetir el nivel de
verificación que ADR 0006 le hizo al plugin de Meilisearch: leer
el código fuente real, no confiar en el README.
- **Riesgo de red ya conocido, no nuevo:** cualquier webhook de pago
entra por la misma cadena Cloudflare → NPM → Traefik que ya causó
un incidente real con otro servicio
(`incidente-cloudflared-504-quic-2026-08.md`). Validar la entrega de
webhooks en vivo antes de confiar en el flujo, no asumir que
"funciona igual que todo lo demás".
## 3. Decisión de proveedor — PayU
Dato de negocio real que decidió esto (aportado por el usuario,
2026-08-28): las cuentas bancarias disponibles son Davivienda, Lulo
Bank y Banco de Bogotá — **ninguna es Bancolombia ni Nequi**.
Verificado contra fuentes reales el mismo día (no memoria):
- **Wompi exige cuenta Bancolombia o, como mínimo, cuenta Nequi para
poder registrarse como comercio** (modelo Agregador) — confirmado
contra el reglamento de comercios de Wompi y su centro de soporte.
La liquidación de ventas sí puede ir después a cualquier banco
colombiano, pero la puerta de entrada al registro sigue siendo
Bancolombia/Nequi. Con los bancos disponibles hoy, esto exigiría
abrir una cuenta Nequi nueva solo para poder registrarse — paso
extra evitable.
- **PayU solo exige "cuenta bancaria colombiana a nombre del
comercio"**, sin banco específico — Davivienda, Lulo Bank o Banco de
Bogotá califican igual, sin pasos previos. Además ya soporta **PSE**
(transferencia desde cualquier banco colombiano del cliente, sin
relación con el banco del comercio), **Nequi** y **Daviplata** como
métodos de pago para los clientes vía redirección — cubre exactamente
los métodos que se pidieron (PSE + Nequi "y demás bancos") sin que
la cuenta bancaria propia del comercio sea Bancolombia.
**Decisión:** PayU, vía el plugin comunitario `@tax1driver/medusa-payu`
(compatibilidad declarada con Medusa 2.4.0+, cubre nuestra versión
2.18.0). Wompi queda descartado por el requisito de registro
Bancolombia/Nequi, no por limitación técnica del plugin en sí.
**Pendiente antes de implementar (no resoluble en este ADR):**
- Registro real de comercio en PayU (persona natural o jurídica —
jurídica pide NIT, representante legal y estados financieros
básicos) y credenciales reales (API keys, merchant ID, webhook
config) — nunca generadas ni asumidas por mí.
- Verificar el código fuente real de `@tax1driver/medusa-payu` en el
tag exacto a instalar antes de confiar en su documentación, misma
disciplina que ya destapó desviaciones reales en el plugin de
Meilisearch (ADR 0006).
## Opciones consideradas
| Opción | A favor | En contra |
|---|---|---|
| **Stripe** | Integración core de Medusa, mejor documentada, configuración mínima | No acepta comercios registrados en Colombia — bloqueador de negocio, no técnico |
| **PayU** (`@tax1driver/medusa-payu`) — **elegido** | Compatibilidad declarada explícitamente con Medusa 2.4.0+ (cubre 2.18.0); solo exige cuenta bancaria colombiana a nombre del comercio, sin banco específico (encaja con Davivienda/Lulo Bank/Banco de Bogotá); soporta PSE + Nequi + Daviplata para el cliente sin importar el banco del comercio | Plugin comunitario, no de primera clase; requiere la misma verificación de código fuente que ya se le hizo al plugin de Meilisearch antes de confiar en él |
| **Wompi** (`medusa-payment-wompi-col`) | Liquidación directa en COP vía Bancolombia | Exige cuenta Bancolombia o, como mínimo, Nequi solo para **registrarse** como comercio — ninguno de los bancos disponibles (Davivienda/Lulo Bank/Banco de Bogotá) califica sin abrir una cuenta nueva; además, sin versión de Medusa documentada ni actividad reciente visible en el plugin |
| **Seguir con WhatsApp** (no pago en línea) | Cero riesgo nuevo, cero dependencia externa | No resuelve el objetivo real (transacción completa sin intervención manual); no es checkout, es lo que ya existe hoy |
## Consecuencias
- Las shipping options son un prerequisito independiente del proveedor
y deben configurarse primero — sin ellas ningún flujo de checkout
completa, sea cual sea el pago.
- Al ser `@tax1driver/medusa-payu` un plugin comunitario (no de
primera clase como Stripe), exige la misma disciplina de
verificación que ya destapó desviaciones reales en el plugin de
Meilisearch (ADR 0006, nota de implementación): leer el código
fuente en el tag exacto que se va a instalar, no el README genérico
ni asumir que "compatibilidad declarada" significa "verificado en
este proyecto".
- Los webhooks de pago (registrados por el plugin en
`/hooks/payment/payu`) deben validarse en vivo contra la cadena de
red real del lab antes de confiar en el flujo, dado el precedente de
`incidente-cloudflared-504-quic-2026-08.md`.
- Se acepta como deuda: si en el futuro se abre una cuenta Bancolombia
o Nequi, Wompi (liquidación más directa en COP) vuelve a ser una
opción válida a reevaluar — no se descarta por limitación técnica,
solo por el requisito de registro actual.
- Revertir esta decisión implica deshabilitar el provider en la región
y volver al botón de WhatsApp — el carrito y el catálogo no cambian
de forma, solo el paso final.
+1
View File
@@ -96,6 +96,7 @@ nav:
- "0006 · Motor de búsqueda y facetas": decisiones/0006-motor-busqueda-facetas.md - "0006 · Motor de búsqueda y facetas": decisiones/0006-motor-busqueda-facetas.md
- "0007 · Identidad visual propia": decisiones/0007-identidad-visual-propia.md - "0007 · Identidad visual propia": decisiones/0007-identidad-visual-propia.md
- "0008 · Identidad Navy & Coral": decisiones/0008-identidad-navy-coral.md - "0008 · Identidad Navy & Coral": decisiones/0008-identidad-navy-coral.md
- "0009 · Checkout real": decisiones/0009-checkout-real.md
- Plantilla ADR: decisiones/plantilla-adr.md - Plantilla ADR: decisiones/plantilla-adr.md
- Playbooks: - Playbooks:
- Crashloop Medusa: playbooks/incidente-crashloop-medusa.md - Crashloop Medusa: playbooks/incidente-crashloop-medusa.md
@@ -25,7 +25,7 @@ spec:
runAsNonRoot: false runAsNonRoot: false
containers: containers:
- name: app - name: app
image: gitea.cruzcloud.net/devops/docs-portal:v1.0.188 image: gitea.cruzcloud.net/devops/docs-portal:v1.0.205
# El base saca TODAS las capabilities. Probado en vivo y # El base saca TODAS las capabilities. Probado en vivo y
# revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE # revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
# de vuelta) el propio entrypoint de nginx:1.27-alpine falla al # de vuelta) el propio entrypoint de nginx:1.27-alpine falla al
+21 -1
View File
@@ -1,3 +1,4 @@
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { ArrowRight } from "lucide-react"; import { ArrowRight } from "lucide-react";
import { CategoryTiles } from "@/components/home/category-tiles"; import { CategoryTiles } from "@/components/home/category-tiles";
@@ -17,5 +18,24 @@ export const dynamic = "force-dynamic";
export default async function HomePage() { export default async function HomePage() {
const [products, categories] = await Promise.all([getProducts(), getCategories()]); const [products, categories] = await Promise.all([getProducts(), getCategories()]);
const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8); const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8);
return <><HeroCarousel /><TrustBar /><div className="content-auto"><CategoryTiles categories={categories} /></div><section className="content-auto mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="content-auto mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-gradient-to-r from-cyan-500 via-blue-600 to-violet-600 text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-yellow-300">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div><div className="min-h-64 bg-[url('/images/promo/promo-backpacks.webp')] bg-cover bg-center" /></div></section></>; return <><HeroCarousel /><TrustBar /><div className="content-auto"><CategoryTiles categories={categories} /></div><section className="content-auto mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="content-auto mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-ari-marino text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral-claro">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div>{/* No hay herramienta de generacion de imagenes disponible para crear un
asset nuevo -- se reconstruye el mismo efecto (fondo punteado +
fotos estilo polaroid) con CSS y fotos reales de producto ya
existentes, en azul/amarillo de marca en vez del violeta original
de promo-backpacks.webp. */}
<div className="relative min-h-64 overflow-hidden bg-ari-coral-claro">
<div className="absolute inset-0 [background-image:radial-gradient(rgba(0,85,184,0.35)_1.5px,transparent_1.5px)] [background-size:18px_18px]" />
<div className="absolute -bottom-12 -left-12 size-52 rounded-full bg-ari-marino" />
<div className="absolute inset-0 flex items-center justify-center gap-3 p-6">
<div className="relative size-28 -rotate-6 overflow-hidden rounded-xl border-4 border-white bg-white shadow-xl sm:size-32">
<Image src="/images/products/ari-011-mochila-escolar-de-spider-man-de-disney-.webp" alt="" fill sizes="128px" className="object-cover" />
</div>
<div className="relative size-28 rotate-3 overflow-hidden rounded-xl border-4 border-white bg-white shadow-xl sm:size-32">
<Image src="/images/products/ari-016-disney-mochila-iron-man-de-poliester-ult.webp" alt="" fill sizes="128px" className="object-cover" />
</div>
<div className="relative hidden size-28 -rotate-3 overflow-hidden rounded-xl border-4 border-white bg-white shadow-xl sm:block sm:size-32">
<Image src="/images/products/ari-009-mochilas-disney-coleccion-marvel.webp" alt="" fill sizes="128px" className="object-cover" />
</div>
</div>
</div></div></section></>;
} }
@@ -4,7 +4,7 @@ import { ArrowUpRight } from "lucide-react";
import type { Category } from "@/lib/headless/types"; import type { Category } from "@/lib/headless/types";
import { cn } from "@/lib/utils"; 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 // 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 // (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 // un tono pastel distinto por categoria, no una escala de marca (serian
// todos casi iguales), pero coordinados en la misma temperatura suave. // todos casi iguales), pero coordinados en la misma temperatura suave.
const tileContent: Record<string, TileContent> = { const tileContent: Record<string, TileContent> = {
juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "bg-amber-100", scrim: "from-amber-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", scrim: "from-sky-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" }, "bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "bg-rose-100" },
educativos: { subtitle: "Aprender jugando", color: "bg-emerald-100" }, educativos: { subtitle: "Aprender jugando", color: "bg-emerald-100" },
"accion-y-aventura": { subtitle: "Para explorar sin límites", color: "bg-orange-100" }, "accion-y-aventura": { subtitle: "Para explorar sin límites", color: "bg-orange-100" },
@@ -37,15 +37,15 @@ export function PromoTile({ category, className = "" }: { category: Category; cl
href={`/catalog?category=${encodeURIComponent(category.name)}`} 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)} className={cn(`group relative min-h-64 overflow-hidden rounded-[2rem] ${content.color} shadow-sm ring-1 ring-slate-900/5`, className)}
> >
{/* 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 && ( {content.image && (
<> <div className="absolute inset-3 bottom-24 overflow-hidden rounded-2xl">
<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" /> <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" />
{/* Franja tintada con el pastel propio de la categoria (no </div>
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-0 bottom-0 flex items-end justify-between p-6 text-slate-900"> <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-slate-900">
<div> <div>
@@ -25,7 +25,7 @@ spec:
runAsUser: 1001 runAsUser: 1001
containers: containers:
- name: app - name: app
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.197 image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.204
env: env:
- name: HEADLESS_PROVIDER - name: HEADLESS_PROVIDER
value: medusa value: medusa