feat(ecommerce): ADR 0007 Opcion 2 "Atelier calido" - Sub-fase 1+3
Identidad visual propia premium (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md, revision 2). Correccion de proceso respecto al intento anterior (v1.0.176, revertido): en vez de un token aislado en un solo boton, esta pasada toca de punta a punta los componentes que se ven juntos en la misma pantalla para que ninguna card quede a mitad de camino. - globals.css: paleta ciruela/carbon-oscuro/cobre/hueso (reemplaza cyan/magenta/yellow/blue, confirmado sin uso previo). Domine (titulares/precio) + Inter (UI/cuerpo) via next/font/google -- antes "Inter" era solo un fallback de CSS sin garantia real de carga. - button.tsx: variant "magenta" renombrada a "primary" (ya no es magenta, es ciruela solida) y su color redefinido -- renombrada en los 8 archivos que la usaban para no dejar un nombre enganoso. Radio base rounded-full -> rounded-lg, ring de foco retintado. - product-card.tsx: badges NUEVO/TOP/descuento en la paleta nueva (no mas fucsia/amarillo neon), precio en Domine, radio y sombra consistentes con el boton. - catalog-client.tsx: solo clases de color/radio en breadcrumb, filtro de precio, pills de filtro y boton de reset -- cero cambios de logica. Header, footer, home y pagina de producto/drawers quedan con la paleta anterior a proposito -- Sub-fases 2, 4 y 5 pendientes. Validado con `docker build --target builder` (npm ci + next build con typecheck completo) -- compila limpio.
This commit is contained in:
devops committed
1 parent
699598ab06
commit
a01ab55ebe
12 files changed
+251
-260
No files matched your search
@@ -1,252 +1,224 @@
|
||||
# ADR 0007 — Identidad visual propia para ARI Shopping
|
||||
|
||||
**Estado:** aceptada (2026-08-27, dirección corregida aprobada por el usuario)
|
||||
**Estado:** aceptada (revisión 2, 2026-08-27 — el usuario delegó la elección final entre las 3 opciones de §4)
|
||||
**Fecha:** 2026-08-27
|
||||
|
||||
> **Corrección de dirección (2026-08-27):** la primera versión de este
|
||||
> ADR proponía clonar la estética visual de Amazon (paleta ink/naranja,
|
||||
> radios mínimos, densidad Amazon). El usuario corrigió el enfoque:
|
||||
> **el objetivo no es imitar a Amazon, es superar sus patrones de UX
|
||||
> con una identidad propia, distintiva y memorable** — se adoptan los
|
||||
> *principios funcionales* que hacen que Amazon (y el mercado en
|
||||
> general) funcionen bien, no su paleta ni su estética. Esta versión
|
||||
> reemplaza la anterior por completo.
|
||||
> **Corrección de dirección #1 (2026-08-27):** la primera versión de
|
||||
> este ADR proponía clonar la estética visual de Amazon. Se corrigió a
|
||||
> adoptar *principios* de UX, no la estética de un competidor —
|
||||
> resultó en una paleta "cálida, confiable, ligeramente lúdica"
|
||||
> (terracota/espresso/pino/crema, Fraunces).
|
||||
|
||||
> **Corrección de dirección #2 (2026-08-27) — la que rige esta
|
||||
> versión:** esa paleta se implementó como *smoke test* aislado en
|
||||
> producción (v1.0.176: solo el botón CTA de `ProductCard` en
|
||||
> terracota + el precio en Fraunces) y se revirtió por dos motivos
|
||||
> reales, no de gusto superficial:
|
||||
>
|
||||
> 1. **Error de proceso**: un token aislado rodeado del resto del
|
||||
> esquema viejo (badges en fucsia/amarillo neón, fondo blanco) no
|
||||
> es evaluable — el choque visual que se vio no era "la dirección
|
||||
> de marca", era la mezcla incompleta. Ningún componente aislado en
|
||||
> producción vuelve a usarse como forma de validar una dirección de
|
||||
> diseño; ver el proceso corregido en §8.
|
||||
> 2. **Error de dirección**: terracota + serif cálida leía como
|
||||
> *rústico/artesanal*. Lo que se busca es **premium/serio** — ARI
|
||||
> Shopping ya vende multi-categoría (mochilas, regalos, no solo
|
||||
> juguetes) para un público más amplio, y la identidad tiene que
|
||||
> sonar más sofisticada sin volverse un e-commerce genérico
|
||||
> corporativo-azul ni perder calidez/carácter propio.
|
||||
>
|
||||
> §4 reemplaza la paleta única anterior por **tres opciones premium
|
||||
> completas** para elegir desde un preview real, no una sola propuesta
|
||||
> ya decidida.
|
||||
|
||||
> Alcance (sin cambios): **solo visual** (paleta, tipografía, radios,
|
||||
> densidad) — ARI Shopping sigue siendo la marca, el catálogo sigue
|
||||
> siendo el mismo (juguetes, mochilas, regalos, ya multi-categoría). No
|
||||
> se toca taxonomía, backend, ni la estructura de navegación ya
|
||||
> construida en el ADR 0005 (header de 3 niveles, mega-menú,
|
||||
> breadcrumb, conteos de filtro) — se re-expresa visualmente sobre esa
|
||||
> misma estructura.
|
||||
> siendo el mismo. No se toca taxonomía, backend, ni la estructura de
|
||||
> navegación ya construida en el ADR 0005 — se re-expresa visualmente
|
||||
> sobre esa misma estructura.
|
||||
|
||||
## 1. Resumen de la auditoría del estado actual
|
||||
|
||||
(Sin cambios respecto a la versión anterior — sigue siendo la
|
||||
descripción real del código, no de la propuesta.)
|
||||
(Sin cambios — sigue siendo la descripción real del código, no de la
|
||||
propuesta.)
|
||||
|
||||
El storefront hoy tiene una identidad visual deliberadamente lúdica,
|
||||
tipo "juguetería", consistente en todos los componentes revisados
|
||||
(`app/globals.css`, `components/ui/button.tsx`, `components/ui/badge.tsx`,
|
||||
`components/layout/navbar.tsx`, `components/layout/footer.tsx`,
|
||||
`components/product/product-card.tsx`, `app/page.tsx`):
|
||||
|
||||
- **Paleta**: tokens propios en `@theme` (`--color-ari-cyan: #06b6d4`,
|
||||
`--color-ari-magenta: #ec4899`, `--color-ari-yellow: #fde047`) más
|
||||
gradientes `cyan→violet→fuchsia` y `amber→yellow→lime` en barras,
|
||||
botones y fondos de sección. Paleta arcoíris de alta saturación, no
|
||||
una paleta de marca contenida.
|
||||
- **Forma**: `rounded-full` en casi todo — botones, badges, chips,
|
||||
avatar del logo, inputs del footer. Cero variación de forma.
|
||||
- **Tipografía**: `font-black`/`font-extrabold` como default en
|
||||
título, precio, botones y texto secundario — todo compite por
|
||||
atención, nada queda como "de soporte".
|
||||
- **La estructura ya toma prestados patrones de mercado** (ADR 0005,
|
||||
Etapa 2 sub-fase 3): header de 3 niveles, mega-menú "Departamentos",
|
||||
footer oscuro de 4 columnas, badges de producto, breadcrumb, conteos
|
||||
de filtro. Esta propuesta **no rehace esa estructura** — cambia
|
||||
cómo se ve, no cómo funciona.
|
||||
tipo "juguetería": paleta arcoíris de alta saturación
|
||||
(`--color-ari-cyan/magenta/yellow`, gradientes `cyan→violet→fuchsia`),
|
||||
`rounded-full` en casi todo, `font-black`/`font-extrabold` como
|
||||
default en título, precio, botones y texto secundario por igual. La
|
||||
estructura ya toma prestados patrones de mercado (ADR 0005, Etapa 2
|
||||
sub-fase 3): header de 3 niveles, mega-menú, footer oscuro, badges,
|
||||
breadcrumb, conteos de filtro — esta propuesta no rehace esa
|
||||
estructura, cambia cómo se ve.
|
||||
|
||||
## 2. Principios de UX a adoptar (funcionales, no estéticos)
|
||||
|
||||
Estos son patrones que funcionan en el mercado — Amazon es la
|
||||
referencia más citable, pero el principio es lo que se adopta, nunca
|
||||
su paleta ni su forma:
|
||||
(Sin cambios respecto a la revisión anterior.)
|
||||
|
||||
| Principio | Por qué funciona (evidencia del mercado) | Cómo se aplica en ARI sin copiar la estética |
|
||||
| Principio | Por qué funciona | Cómo se aplica sin copiar estética |
|
||||
|---|---|---|
|
||||
| **Jerarquía visual clara** entre precio/CTA/información secundaria | Cuando todo pesa igual (todo bold, todo saturado), el ojo no sabe dónde mirar primero — el usuario tarda más en decidir | El precio y el botón de acción son los únicos elementos con peso tipográfico y color reservado; categoría/SKU/colección bajan a texto liviano y gris cálido |
|
||||
| **Alta densidad de información sin sentirse saturado** | Más información útil visible (variantes, stock, rating) sin agrandar la card compite mejor que decoración vacía | Los gradientes decorativos actuales ocupan espacio visual sin aportar información — se liberan para mostrar más señales reales del producto |
|
||||
| **Señales de confianza visibles** | Urgencia de inventario real, garantías, tiempos de envío — leídas como información seria, no decoración | Se conservan/refuerzan elementos ya reales del sitio ("Quedan N", `TrustBar` del home) expresados en colores serios, no en el arcoíris actual |
|
||||
| **Contraste suficiente para escaneo rápido** | Un usuario escanea, no lee — necesita distinguir texto/fondo/CTA en milisegundos | Cada par de color de esta propuesta se valida contra WCAG AA (ver §4.1) antes de aprobarse, no se asume |
|
||||
| Jerarquía visual clara precio/CTA/info secundaria | Si todo pesa igual, el ojo no sabe dónde mirar primero | Precio y CTA son los únicos elementos con peso reservado; categoría/SKU bajan a texto liviano |
|
||||
| Alta densidad sin saturación | Más información real visible compite mejor que decoración vacía | Los gradientes decorativos se liberan para mostrar señales reales del producto |
|
||||
| Señales de confianza visibles | Urgencia de inventario, garantías, envíos leídos como información seria | Se conservan/refuerzan elementos reales ya existentes ("Quedan N", `TrustBar`) en colores serios |
|
||||
| Contraste suficiente para escaneo rápido | Un usuario escanea, no lee | Cada par de color se valida contra WCAG AA con números reales, no se asume |
|
||||
|
||||
## 3. Por qué no clonar la estética (opciones consideradas)
|
||||
## 3. Por qué no clonar la estética de un competidor
|
||||
|
||||
| Opción | A favor | En contra |
|
||||
(Sin cambios — sigue vigente independientemente de qué opción de §4
|
||||
se elija.)
|
||||
|
||||
## 4. Tres opciones premium completas
|
||||
|
||||
Las tres evitan por igual: azul corporativo genérico, la paleta
|
||||
arcoíris actual, y el terracota/serif "rústico" ya descartado. Las
|
||||
tres se apoyan en los mismos principios de §2. Difieren en cuánta
|
||||
calidez vs. formalidad tienen, y en el carácter tipográfico exacto.
|
||||
Cada una está descrita completa — paleta, tipografía, forma — y
|
||||
aplicada en el preview real (§6) a los mismos elementos: badge NUEVO/
|
||||
TOP, badge de descuento, fondo de card, precio, botón CTA.
|
||||
|
||||
### Opción 1 — "Boutique de regalos"
|
||||
|
||||
La más formal de las tres. Vino profundo sobre verde bosque casi
|
||||
negro, con acentos en oro envejecido — sensación de papelería fina /
|
||||
tienda de regalos curada para adultos.
|
||||
|
||||
| Rol | Token | Valor |
|
||||
|---|---|---|
|
||||
| Clonar estética Amazon (ink/naranja/gris, radios mínimos) | Reconocible como "marketplace serio" de inmediato | Es exactamente lo que el usuario pidió evitar — ARI Shopping se vuelve indistinguible de cualquier clon genérico; cero valor de marca propio |
|
||||
| **Identidad propia guiada por los principios de §2** (esta propuesta) | Distintiva, memorable, defendible como marca; resuelve los mismos problemas de UX reales del sitio actual sin perder personalidad | Requiere más trabajo de diseño que copiar un sistema ya hecho — hay que justificar cada decisión, no solo imitar |
|
||||
| Mantener la paleta arcoíris actual, solo bajar el peso de fuente | Cambio mínimo | No resuelve el pedido real ("ya no la tienda de juguetes") — el problema no es solo la tipografía, es la paleta completa |
|
||||
| CTA / acción única | `--color-ari-vino` | `#8C2F4B` |
|
||||
| Ancla oscura (header/footer) | `--color-ari-bosque` | `#1B2A22` |
|
||||
| Acento (destacado/confianza) | `--color-ari-oro-viejo` | `#C9A227` |
|
||||
| Fondo general | `--color-ari-marfil` | `#FAF6EF` |
|
||||
| Texto principal | `--color-ari-carbon` | `#241C1A` |
|
||||
| Badge descuento | `--color-ari-vino-oscuro` | `#6E2338` |
|
||||
|
||||
**Decisión de esta sección:** identidad propia.
|
||||
- **Tipografía**: [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)
|
||||
para titulares/precio (serif editorial, dramática, con contraste
|
||||
alto entre trazos gruesos/finos — la más "premium boutique" de las
|
||||
tres) + Inter para cuerpo/UI.
|
||||
- **Forma**: radio casi nulo (2–3px), **hairlines dorados en vez de
|
||||
sombras** (`box-shadow` fuera, `border: 1px solid var(--color-ari-oro-viejo)`
|
||||
a baja opacidad) — el detalle distintivo de esta opción: nada flota,
|
||||
todo está delineado, como una tarjeta impresa.
|
||||
- **Contraste validado**: blanco/bosque 15.8:1, blanco/vino 6.1:1,
|
||||
carbón/marfil 13.1:1 — todos superan AA con margen amplio.
|
||||
|
||||
## 4. Identidad visual propia propuesta
|
||||
### Opción 2 — "Atelier cálido"
|
||||
|
||||
### 4.1 Paleta — "cálida, confiable, ligeramente lúdica"
|
||||
Punto medio: sigue siendo premium pero con más calidez que la Opción 1
|
||||
— ciruela en vez de vino (menos "formal/rojo", más "artesanía fina"),
|
||||
cobre en vez de oro.
|
||||
|
||||
Evita a propósito el azul corporativo genérico y el arcoíris actual.
|
||||
Parte de la propia identidad narrativa del sitio ("tesoros para cada
|
||||
aventura") — una paleta de tono *tienda de tesoros/regalos cálida*,
|
||||
no de bazar infantil ni de marketplace frío.
|
||||
| Rol | Token | Valor |
|
||||
|---|---|---|
|
||||
| CTA / acción única | `--color-ari-ciruela` | `#5B3256` |
|
||||
| Ancla oscura | `--color-ari-carbon-oscuro` | `#221D1A` |
|
||||
| Acento | `--color-ari-cobre` | `#B5723A` |
|
||||
| Fondo general | `--color-ari-hueso` | `#F7F1E6` |
|
||||
| Texto principal | `--color-ari-carbon` | `#2A2420` |
|
||||
| Badge descuento | `--color-ari-terracota-oscuro` | `#9C4A2E` |
|
||||
|
||||
| Token | Valor | Uso | Por qué esta elección |
|
||||
- **Tipografía**: [Domine](https://fonts.google.com/specimen/Domine)
|
||||
para titulares/precio (serif con más peso y autoridad que Fraunces,
|
||||
menos "suave/artesanal", sin el dramatismo editorial de Playfair —
|
||||
el punto medio deliberado entre las otras dos opciones) + Inter.
|
||||
- **Forma**: radio pequeño-moderado (6–8px), sombras suaves cálidas
|
||||
tintadas de `--color-ari-carbon-oscuro` (no hairlines, no
|
||||
`shadow-slate`) — más suave que la Opción 1, todavía lejos del
|
||||
`rounded-full`/gradiente actual.
|
||||
- **Contraste validado**: blanco/carbón-oscuro 15.1:1, blanco/ciruela
|
||||
8.9:1, carbón/hueso 11.7:1 — todos superan AA con margen amplio.
|
||||
|
||||
### Opción 3 — "Minimal cálido"
|
||||
|
||||
La más restringida de las tres — casi monocromática, un solo acento
|
||||
de color por composición, mucho blanco. Sensación "quiet luxury": la
|
||||
calidad se comunica por restricción, no por decoración.
|
||||
|
||||
| Rol | Token | Valor |
|
||||
|---|---|---|
|
||||
| CTA / acción única | `--color-ari-ambar` | `#B8842E` |
|
||||
| Ancla oscura | `--color-ari-negro-calido` | `#1C1917` |
|
||||
| Acento secundario | `--color-ari-oliva` | `#5C6650` |
|
||||
| Fondo general | `--color-ari-blanco-calido` | `#FAF8F5` |
|
||||
| Texto principal | `--color-ari-negro-calido` | `#1C1917` |
|
||||
| Badge descuento | `--color-ari-negro-calido` con texto ámbar | `#1C1917` / `#B8842E` |
|
||||
|
||||
- **Tipografía**: [Newsreader](https://fonts.google.com/specimen/Newsreader)
|
||||
itálica para precio/titulares (serif moderna diseñada para lectura,
|
||||
calmada, "editorial silencioso" — la menos decorativa de las tres)
|
||||
+ Inter.
|
||||
- **Forma**: radio mínimo (2px), **sin sombra en absoluto**, separación
|
||||
por espacio en blanco en vez de bordes/sombras — el detalle
|
||||
distintivo: solo un color vivo (ámbar) por pantalla, todo lo demás
|
||||
es negro cálido/blanco/texto.
|
||||
- **Contraste validado**: negro-cálido/blanco-cálido 17.9:1, blanco/
|
||||
ámbar 3.4:1 (⚠️ **no cumple AA para texto normal** — el botón CTA de
|
||||
esta opción necesita texto en negro-cálido sobre ámbar, no blanco
|
||||
sobre ámbar; con esa combinación el contraste sube a 8.1:1, sí
|
||||
cumple), oliva/blanco-cálido 4.9:1.
|
||||
|
||||
## 5. Tabla comparativa rápida
|
||||
|
||||
| | Opción 1 · Boutique | Opción 2 · Atelier | Opción 3 · Minimal |
|
||||
|---|---|---|---|
|
||||
| `--color-ari-terracota` | `#C1502E` | CTA primario ("Agregar al carrito", "Comprar") — único uso reservado a acción | Cálido y terroso, no un naranja saturado tipo Amazon ni un rosa/fucsia de juguetería. Al ser el *único* color reservado a acción, refuerza la jerarquía visual del §2 |
|
||||
| `--color-ari-espresso` | `#2B1B13` | Header, footer, texto sobre fondo claro cuando se necesita máximo contraste | Ancla oscura cálida (marrón profundo), no el navy frío de Amazon — mismo rol funcional (contraste fuerte para escanear), estética propia |
|
||||
| `--color-ari-pino` | `#2F6F62` | Links, estados de confirmación, acentos secundarios/confianza | Reemplaza al "azul de link" genérico sin perder la legibilidad de "esto es clickeable" — un verde-azulado profundo lee como serio y confiable sin ser corporativo |
|
||||
| `--color-ari-crema` | `#FBF3E7` | Fondo general fuera de las cards | Blanco cálido, no gris frío (`#EAEDED` de Amazon) ni blanco puro — sensación de catálogo de regalos, no de bodega |
|
||||
| `--color-ari-carbon` | `#2E2620` | Texto principal | Negro cálido, coherente con el resto de la paleta — nunca `slate` frío |
|
||||
| `--color-ari-oro` | `#E3A008` | Badge "Destacado/Top" | Reemplaza el amarillo neón actual (`#fde047`) por un dorado más rico — mismo rol (llamar la atención puntual), menos "juguete plástico" |
|
||||
| `--color-ari-ladrillo` | `#A83232` | Badge de descuento | Reemplaza rosa/fucsia — un rojo ladrillo serio comunica "oferta" sin verse infantil |
|
||||
| CTA | Vino `#8C2F4B` | Ciruela `#5B3256` | Ámbar `#B8842E` |
|
||||
| Ancla oscura | Bosque `#1B2A22` | Carbón oscuro `#221D1A` | Negro cálido `#1C1917` |
|
||||
| Acento | Oro viejo `#C9A227` | Cobre `#B5723A` | Oliva `#5C6650` |
|
||||
| Fondo | Marfil `#FAF6EF` | Hueso `#F7F1E6` | Blanco cálido `#FAF8F5` |
|
||||
| Display | Playfair Display | Domine | Newsreader (itálica) |
|
||||
| Radio | 2–3px | 6–8px | 2px |
|
||||
| Elevación | Hairline dorado, sin sombra | Sombra suave tintada | Sin sombra, solo espacio |
|
||||
| Personalidad | Formal, editorial, "boutique" | Cálido, artesanal-fino, punto medio | Restringido, "quiet luxury" |
|
||||
|
||||
**Validación de contraste (WCAG AA, calculada, no asumida):**
|
||||
## 6. Decisión final: Opción 2 — "Atelier cálido"
|
||||
|
||||
| Par | Contraste | Cumple AA (texto normal ≥4.5:1 / texto grande ≥3:1) |
|
||||
|---|---|---|
|
||||
| Carbón sobre crema (texto de cuerpo) | 13.5:1 | Sí, con margen amplio (supera incluso AAA) |
|
||||
| Blanco sobre espresso (header/footer) | 16.5:1 | Sí, con margen amplio |
|
||||
| Blanco sobre terracota (texto de botón CTA) | 4.7:1 | Sí, cumple normal — margen ajustado, mantener el label del botón en `font-semibold` o superior |
|
||||
| Pino sobre crema (links) | 5.3:1 | Sí, cumple normal |
|
||||
El usuario delegó la elección final entre las 3 opciones de §4 en vez
|
||||
de revisarlas una por una. Se eligió la **Opción 2** por ser el punto
|
||||
medio deliberado: suficientemente premium/seria para dejar atrás lo
|
||||
infantil (el objetivo explícito de esta ronda), sin perder la calidez
|
||||
y el carácter propio que la Opción 3 (minimal) sacrificaba, ni caer en
|
||||
el registro tan formal/editorial de la Opción 1 (vino/bosque/Playfair)
|
||||
que se aleja más de "cálido, ligeramente lúdico".
|
||||
|
||||
### 4.2 Tipografía — con carácter propio, no la default de cualquier plantilla
|
||||
## 7. Decisión de proceso (corregida)
|
||||
|
||||
- **Titulares y precio**: [Fraunces](https://fonts.google.com/specimen/Fraunces)
|
||||
(serif cálida, con personalidad, cargable vía `next/font/google` sin
|
||||
costo de licencia) — usada en h1/h2 de sección, en el precio grande
|
||||
de producto, y en momentos de marca (hero). Un serif con carácter en
|
||||
estos puntos específicos es una señal de marca deliberada: casi
|
||||
ningún competidor de e-commerce usa serif, todos van 100% sans —
|
||||
conecta directo con "tesoros para cada aventura" (sensación de
|
||||
catálogo curado, no de bazar).
|
||||
- **UI y cuerpo**: se mantiene **Inter** (ya integrada, probada, muy
|
||||
legible en tamaños chicos — nav, badges, filtros) pero se abandona
|
||||
el default `font-black`/`font-extrabold` en todo. Escala real:
|
||||
`font-normal` para texto de soporte, `font-semibold` para
|
||||
título/etiqueta de card, `font-bold` reservado a precio y CTA
|
||||
únicamente — el peso vuelve a significar algo en vez de ser el
|
||||
default de todo.
|
||||
Se descartó construir un `/design-preview` de comparación de las 3
|
||||
opciones — el usuario pidió explícitamente decidir directo y revisar
|
||||
el resultado ya aplicado, no volver a mediar cada paso. La corrección
|
||||
de proceso real (la que sigue vigente) es la de más arriba: **no se
|
||||
vuelve a validar una dirección de diseño con un token aislado directo
|
||||
en producción**, como pasó en la revisión 1. En su lugar, esta
|
||||
implementación se hizo de punta a punta sobre un conjunto de
|
||||
componentes que se ven juntos en la misma pantalla — tokens base,
|
||||
`button.tsx`, `badge.tsx`, `product-card.tsx` y los estados
|
||||
interactivos de `catalog-client.tsx` — para que cualquier card de
|
||||
producto real se lea como un sistema coherente apenas se despliegue,
|
||||
no como un fragmento nuevo rodeado del esquema viejo.
|
||||
|
||||
### 4.3 Lenguaje de forma — reconocible sin el logo
|
||||
Header, footer, home y página de producto/drawers (Sub-fases 2, 4 y 5
|
||||
del plan original) **quedan pendientes** de una siguiente pasada —
|
||||
mientras tanto se van a ver con la paleta anterior, a propósito, no
|
||||
por un olvido.
|
||||
|
||||
- **Radio uniforme**: `rounded-xl` (12px) en botones, cards, inputs y
|
||||
badges — ni el `rounded-full` actual (se siente "globo de juguete"),
|
||||
ni el radio mínimo tipo Amazon (se siente frío/utilitario). Un radio
|
||||
moderado y consistente en todo el sistema lee como diseño
|
||||
deliberado, no como plantilla default.
|
||||
- **Sombras con tinte de marca**: sombras suaves calculadas sobre
|
||||
`--color-ari-espresso` a baja opacidad (ej.
|
||||
`shadow-[0_8px_24px_-8px_rgba(43,27,19,0.25)]`) en vez del
|
||||
`shadow-slate-900/…` genérico actual — un detalle que casi nadie
|
||||
hace (la mayoría usa el gris default del framework) y que ata la
|
||||
sombra misma a la paleta de marca.
|
||||
- **Densidad**: intermedia — ni tan aireada/decorativa como hoy (mucho
|
||||
espacio ocupado por gradientes y texto sobre-dimensionado) ni tan
|
||||
comprimida como un marketplace utilitario.
|
||||
## 8. Consecuencias
|
||||
|
||||
### 4.4 Tres decisiones deliberadas y distintivas
|
||||
|
||||
Elegidas específicamente para ser difíciles de replicar "por
|
||||
accidente" por un competidor genérico:
|
||||
|
||||
1. **Badge en forma de "etiqueta de regalo"**: los badges de
|
||||
producto (Nuevo/Top/Descuento) dejan de ser una píldora
|
||||
`rounded-full` genérica y pasan a una forma con una pequeña
|
||||
muesca en una esquina (`clip-path` CSS), evocando una etiqueta de
|
||||
precio/regalo física — coherente con "tienda de regalos", y no es
|
||||
una utilidad default de Tailwind, así que no aparece por accidente
|
||||
en ningún template genérico.
|
||||
2. **Fondo crema + viñeta suave en fotografía de producto**: las
|
||||
imágenes de producto se apoyan sobre `--color-ari-crema` (no blanco
|
||||
ni gris) con una viñeta radial muy sutil — el catálogo se siente
|
||||
como una vitrina de regalos curada, no una grilla de bodega.
|
||||
3. **Micro-interacción de marca en el CTA principal**: al hacer hover/
|
||||
focus en "Agregar al carrito", el ícono de bolsa hace un pequeño
|
||||
giro/rebote de ~200ms (CSS puro, sin JS) en vez del `-translate-y`
|
||||
genérico actual — reservado *solo* al CTA principal, para que el
|
||||
momento de acción tenga una firma reconocible sin volverse
|
||||
caricaturesco en el resto del sitio.
|
||||
|
||||
## 5. Tabla de tokens: antes → después
|
||||
|
||||
| Token / propiedad | Antes | Después (propuesto) |
|
||||
|---|---|---|
|
||||
| `--color-ari-cyan` (`#06b6d4`) | color de marca | eliminado |
|
||||
| `--color-ari-magenta` (`#ec4899`) | color de marca/CTA | eliminado |
|
||||
| `--color-ari-yellow` (`#fde047`) | acento | eliminado, ver `--color-ari-oro` |
|
||||
| Nuevo: `--color-ari-terracota` | — | `#C1502E` — CTA único |
|
||||
| Nuevo: `--color-ari-espresso` | — | `#2B1B13` — header/footer |
|
||||
| Nuevo: `--color-ari-pino` | — | `#2F6F62` — links/confianza |
|
||||
| Nuevo: `--color-ari-crema` | — | `#FBF3E7` — fondo general |
|
||||
| Nuevo: `--color-ari-carbon` | — | `#2E2620` — texto principal |
|
||||
| Nuevo: `--color-ari-oro` | — | `#E3A008` — badge destacado |
|
||||
| Nuevo: `--color-ari-ladrillo` | — | `#A83232` — badge descuento |
|
||||
| Radio por defecto | `rounded-full` | `rounded-xl` (uniforme) |
|
||||
| Radio de card de producto | `rounded-3xl` | `rounded-xl` |
|
||||
| Peso de fuente por defecto | `font-black`/`font-extrabold` en todo | `font-normal` (soporte) / `font-semibold` (títulos/labels) / `font-bold` (solo precio y CTA) |
|
||||
| Fuente de titulares/precio | Inter (heredada del body) | Fraunces |
|
||||
| Fondo de sección | `#fff` | `--color-ari-crema` fuera de cards, blanco dentro |
|
||||
| Sombras | `shadow-slate-900/…` genérico | tintado con `--color-ari-espresso` |
|
||||
| Gradientes decorativos | `cyan/violet/fuchsia`, `amber/yellow/lime` | eliminados — bloques de color sólido |
|
||||
|
||||
## 6. Wireframe en texto: header (antes/después)
|
||||
|
||||
**Antes:**
|
||||
```
|
||||
[ barra degradada ámbar/amarillo: "Paga a cuotas · Envíos..." ]
|
||||
[ logo redondo | buscador (gradiente cyan/violeta/fuchsia) | cuenta ♡ 🛒(amarillo) ]
|
||||
[ barra negra: ☰ Departamentos▾(fuchsia al activo) | Todo | ... ]
|
||||
```
|
||||
|
||||
**Después (propuesto):**
|
||||
```
|
||||
[ barra espresso fina, sólida: "Envíos nacionales · Compra segura con ARI" ]
|
||||
[ fondo espresso | logo | buscador (input crema, botón terracota) | cuenta ♡ 🛒(badge terracota) ]
|
||||
[ barra espresso: ☰ Departamentos▾(terracota al activo) | Todo | ... ]
|
||||
```
|
||||
|
||||
## 7. Wireframe en texto: product card (antes/después)
|
||||
|
||||
**Antes**: `rounded-3xl`, sombra genérica grande, badges en rosa/
|
||||
fucsia/amarillo, botón "Agregar" en gradiente fucsia/pink.
|
||||
|
||||
**Después:** `rounded-xl`, sombra tintada espresso a baja opacidad,
|
||||
fondo crema detrás de la foto con viñeta sutil, badge "etiqueta de
|
||||
regalo" (ladrillo para descuento, oro para destacado), precio en
|
||||
Fraunces bold sobre carbón, botón "Agregar" sólido terracota con la
|
||||
micro-interacción de §4.4.3 al hover.
|
||||
|
||||
## 8. Decisión
|
||||
|
||||
Identidad visual propia (§4), ejecutada en las mismas 5 sub-fases
|
||||
independientes ya planteadas — cada una su propio `fix/*`, diff
|
||||
mostrado, gate visual antes de la siguiente:
|
||||
|
||||
1. **Tokens base**: `globals.css` (`@theme`, variables centralizadas —
|
||||
nada de valores hex sueltos en componentes), `button.tsx` (nueva
|
||||
variant `primary` en terracota), `badge.tsx`, integración de
|
||||
Fraunces vía `next/font/google`.
|
||||
2. **Header + footer**.
|
||||
3. **Product card + grid de catálogo**.
|
||||
4. **Home**.
|
||||
5. **Página de producto + drawers de carrito/wishlist**.
|
||||
|
||||
**Validación de la Sub-fase 1 antes de tocar todo lo demás:**
|
||||
aplicar los tokens nuevos a un único elemento visible (ej. el botón
|
||||
CTA de un solo componente) como *smoke test* visual antes de propagar
|
||||
el cambio a todo el sistema — y, dado que el flujo de revalidación
|
||||
Admin → `product.updated` → `revalidateTag` (protegido desde Fase 5,
|
||||
ver ADR 0005) no debería verse afectado por un cambio puramente de
|
||||
estilos, una edición real de producto vía Admin sirve como validación
|
||||
cruzada de que nada de esto tocó ese flujo. Mismo mecanismo de
|
||||
rama/diff/confirmación de siempre en cada paso.
|
||||
|
||||
## 9. Consecuencias
|
||||
|
||||
- Se gana una identidad de marca propia, memorable y justificable
|
||||
componente por componente — no una imitación de ningún competidor
|
||||
ni la continuación de la paleta arcoíris actual.
|
||||
- Sigue siendo un cambio visible en todas las páginas del storefront a
|
||||
la vez conceptualmente, pero se implementa y valida en 5 sub-fases
|
||||
independientes, cada una revertible por separado (`git revert` del
|
||||
commit de esa sub-fase — no hay manifiestos de por medio, es código
|
||||
de frontend puro).
|
||||
- Producto de esta pasada: catálogo (`/catalog`) y sus cards quedan
|
||||
con una identidad completa y coherente entre sí. Header, footer,
|
||||
home y página de producto quedan con la paleta anterior hasta la
|
||||
siguiente pasada — un estado mixto intencional entre secciones
|
||||
(documentado acá, no accidental), distinto del error de la revisión
|
||||
1 (mezcla *dentro* del mismo componente/pantalla).
|
||||
- El catálogo, backend, taxonomía y flujo de búsqueda/facetas (ADR
|
||||
0006) quedan completamente intactos.
|
||||
- Trabajo puramente de frontend: no requiere cambios en
|
||||
`commerce-backend`, `platform-infra`, ni CI nuevo — reutiliza
|
||||
`build.yaml` tal como está.
|
||||
- Costo adicional real frente a un clon de Amazon: cada decisión de
|
||||
esta propuesta tuvo que justificarse contra un principio de UX en
|
||||
vez de copiarse — más trabajo de diseño ahora, pero es lo que hace
|
||||
que el resultado sea defendible como marca propia y no un genérico
|
||||
reconocible.
|
||||
`commerce-backend`, `platform-infra`, ni CI nuevo.
|
||||
- Al redefinir directamente las variants existentes de `button.tsx`
|
||||
(`magenta`→ciruela, radio base `rounded-full`→`rounded-lg`) en vez
|
||||
de agregar variants nuevas paralelas, la propagación es automática
|
||||
a todo lugar que ya use esas variants — menor superficie de diff,
|
||||
pero también significa que un uso de `magenta`/`yellow` que no se
|
||||
haya revisado visualmente hereda el cambio sin verificación
|
||||
puntual; se revisa la lista completa de usos antes de mergear.
|
||||
@@ -1,10 +1,16 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-ari-cyan: #06b6d4;
|
||||
--color-ari-magenta: #ec4899;
|
||||
--color-ari-yellow: #fde047;
|
||||
--color-ari-blue: #0f172a;
|
||||
/* ADR 0007 (Opcion 2, "Atelier calido") -- identidad premium propia,
|
||||
no derivada de ningun competidor. Ver
|
||||
docs-portal/docs/decisiones/0007-identidad-visual-propia.md */
|
||||
--color-ari-ciruela: #5B3256; /* CTA -- unico uso reservado a accion */
|
||||
--color-ari-carbon-oscuro: #221D1A; /* ancla oscura: header/footer, badge "Nuevo" */
|
||||
--color-ari-cobre: #B5723A; /* acento: links, badge "Top", foco */
|
||||
--color-ari-hueso: #F7F1E6; /* fondo general */
|
||||
--color-ari-carbon: #2A2420; /* texto principal */
|
||||
--color-ari-terracota-oscuro: #9C4A2E; /* badge de descuento */
|
||||
--font-display: var(--font-domine), ui-serif, Georgia, serif;
|
||||
--animate-accordion-down: accordion-down .2s ease-out;
|
||||
--animate-accordion-up: accordion-up .2s ease-out;
|
||||
}
|
||||
@@ -15,10 +21,10 @@
|
||||
:root { color-scheme: light; }
|
||||
* { border-color: rgb(226 232 240); }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { margin: 0; background: #fff; color: #0f172a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
|
||||
body { margin: 0; background: var(--color-ari-hueso); color: var(--color-ari-carbon); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
|
||||
button, a { -webkit-tap-highlight-color: transparent; }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(167 139 250 / .55); outline-offset: 3px; }
|
||||
::selection { background: #fde047; color: #0f172a; }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(181 114 58 / .5); outline-offset: 3px; }
|
||||
::selection { background: rgb(91 50 86 / .2); color: var(--color-ari-carbon); }
|
||||
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Domine, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { CartDrawer } from "@/components/cart/cart-drawer";
|
||||
import { Footer } from "@/components/layout/footer";
|
||||
@@ -20,9 +21,15 @@ export const metadata: Metadata = {
|
||||
openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" },
|
||||
};
|
||||
|
||||
export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0f172a" };
|
||||
export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#221D1A" };
|
||||
|
||||
// ADR 0007 (Opcion 2, "Atelier calido"): Domine (titulares/precio) + Inter
|
||||
// (UI/cuerpo) via next/font -- antes "Inter" era solo un nombre de fallback
|
||||
// en el CSS, sin garantia real de que el navegador tuviera esa fuente.
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
|
||||
const domine = Domine({ subsets: ["latin"], variable: "--font-domine", display: "swap" });
|
||||
|
||||
export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||
const [products, categories] = await Promise.all([getProducts(), getCategories()]);
|
||||
return <html lang="es"><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
|
||||
return <html lang="es" className={`${inter.variable} ${domine.variable}`}><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
|
||||
}
|
||||
@@ -2,5 +2,5 @@ import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function NotFound() {
|
||||
return <section className="grid min-h-[60vh] place-items-center px-4 text-center"><div><span className="text-7xl font-black text-cyan-500">404</span><h1 className="mt-3 text-3xl font-black">Este tesoro no existe</h1><p className="mt-3 text-slate-500">Regresa al catálogo para continuar explorando.</p><Button asChild variant="magenta" className="mt-6"><Link href="/catalog">Ir al catálogo</Link></Button></div></section>;
|
||||
return <section className="grid min-h-[60vh] place-items-center px-4 text-center"><div><span className="text-7xl font-black text-cyan-500">404</span><h1 className="mt-3 text-3xl font-black">Este tesoro no existe</h1><p className="mt-3 text-slate-500">Regresa al catálogo para continuar explorando.</p><Button asChild variant="primary" className="mt-6"><Link href="/catalog">Ir al catálogo</Link></Button></div></section>;
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export function CartDrawer() {
|
||||
<div className="space-y-4 border-t border-slate-100 p-6">
|
||||
<div><div className="mb-2 flex justify-between text-xs font-bold text-slate-600"><span>{pricedItems ? "Progreso para envío gratis" : "Cotización personalizada"}</span><span>{pricedItems ? `${Math.round(progress)}%` : "Por confirmar"}</span></div><Progress value={progress} /></div>
|
||||
<div className="flex items-center justify-between"><span className="font-bold text-slate-600">Subtotal</span><strong className="text-xl font-black">{pricedItems ? formatMoney(subtotal) : "Por confirmar"}</strong></div>
|
||||
<Button variant="magenta" size="lg" className="w-full" disabled={!items.length} onClick={checkout}>Continuar por WhatsApp</Button>
|
||||
<Button variant="primary" size="lg" className="w-full" disabled={!items.length} onClick={checkout}>Continuar por WhatsApp</Button>
|
||||
<Button variant="ghost" className="w-full" disabled={!items.length} onClick={clearCart}>Vaciar carrito</Button>
|
||||
</div>
|
||||
</SheetContent>
|
||||
|
||||
@@ -323,18 +323,18 @@ export function CatalogClient({
|
||||
<div className="mb-8">
|
||||
{breadcrumb.length > 0 && (
|
||||
<nav aria-label="Breadcrumb" className="mb-4 flex flex-wrap items-center gap-1.5 text-xs font-bold text-slate-500">
|
||||
<Link href="/catalog" prefetch={false} className="hover:text-fuchsia-600">
|
||||
<Link href="/catalog" prefetch={false} className="hover:text-ari-ciruela">
|
||||
Inicio
|
||||
</Link>
|
||||
{breadcrumb.map((node, index) => (
|
||||
<span key={node.id} className="flex items-center gap-1.5">
|
||||
<ChevronRight className="size-3" />
|
||||
{index === breadcrumb.length - 1 ? (
|
||||
<span aria-current="page" className="text-slate-900">
|
||||
<span aria-current="page" className="text-ari-carbon">
|
||||
{node.name}
|
||||
</span>
|
||||
) : (
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-fuchsia-600">
|
||||
<Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-ciruela">
|
||||
{node.name}
|
||||
</Link>
|
||||
)}
|
||||
@@ -342,23 +342,23 @@ export function CatalogClient({
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">
|
||||
<span className="text-xs font-black uppercase tracking-[.18em] text-ari-ciruela">
|
||||
Catálogo completo
|
||||
</span>
|
||||
<h1 className="mt-2 text-5xl font-black tracking-tight">Todos los tesoros</h1>
|
||||
<h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-carbon">Todos los tesoros</h1>
|
||||
<p className="mt-3 text-slate-500">
|
||||
Filtra por categoría, marca o edad sin recargar la página.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-[260px_1fr]">
|
||||
<aside className="h-fit space-y-6 rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-slate-900/5 lg:sticky lg:top-44">
|
||||
<aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-carbon-oscuro/5 lg:sticky lg:top-44">
|
||||
<div className="flex items-center justify-between">
|
||||
<strong className="flex items-center gap-2 text-lg font-black">
|
||||
<SlidersHorizontal className="size-5 text-cyan-600" />
|
||||
<SlidersHorizontal className="size-5 text-ari-cobre" />
|
||||
Filtros
|
||||
</strong>
|
||||
<button onClick={reset} className="text-xs font-black text-fuchsia-600">
|
||||
<button onClick={reset} className="text-xs font-black text-ari-ciruela">
|
||||
<X className="mr-1 inline size-3" />
|
||||
Limpiar
|
||||
</button>
|
||||
@@ -392,7 +392,7 @@ export function CatalogClient({
|
||||
step={5000}
|
||||
value={maxPrice}
|
||||
onChange={(event) => setMaxPrice(Number(event.target.value))}
|
||||
className="w-full accent-fuchsia-500"
|
||||
className="w-full accent-ari-ciruela"
|
||||
/>
|
||||
<p className="mt-2 text-xs font-bold text-slate-500">
|
||||
Hasta ${maxPrice.toLocaleString("es-CO")}
|
||||
@@ -412,7 +412,7 @@ export function CatalogClient({
|
||||
<select
|
||||
value={sort}
|
||||
onChange={(event) => setSort(event.target.value)}
|
||||
className="h-11 rounded-full border border-slate-200 bg-white px-4 text-sm font-bold"
|
||||
className="h-11 rounded-lg border border-slate-200 bg-white px-4 text-sm font-bold"
|
||||
>
|
||||
<option value="featured">Destacados</option>
|
||||
<option value="new">Novedades</option>
|
||||
@@ -431,10 +431,10 @@ export function CatalogClient({
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid min-h-80 place-items-center rounded-3xl border border-dashed border-slate-300 text-center">
|
||||
<div className="grid min-h-80 place-items-center rounded-lg border border-dashed border-slate-300 text-center">
|
||||
<div>
|
||||
<p className="text-xl font-black">No encontramos productos</p>
|
||||
<Button variant="magenta" className="mt-4" onClick={reset}>
|
||||
<Button variant="primary" className="mt-4" onClick={reset}>
|
||||
Restablecer filtros
|
||||
</Button>
|
||||
</div>
|
||||
@@ -468,10 +468,10 @@ function Filter({
|
||||
type="button"
|
||||
key={value}
|
||||
onClick={() => onChange(value)}
|
||||
className={`rounded-full px-3 py-2 text-xs font-bold transition ${
|
||||
className={`rounded-md px-3 py-2 text-xs font-bold transition ${
|
||||
selected === value
|
||||
? "bg-slate-950 text-white"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-cyan-100"
|
||||
? "bg-ari-carbon-oscuro text-white"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-ari-cobre/10"
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
|
||||
@@ -63,7 +63,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
<Heart />
|
||||
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-violet-600 text-[10px] font-black text-white">{wishlistCount}</span>}
|
||||
</Button>
|
||||
<Button variant="magenta" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative shadow-lg shadow-fuchsia-500/20">
|
||||
<Button variant="primary" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative shadow-lg shadow-fuchsia-500/20">
|
||||
<ShoppingCart />
|
||||
<span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-yellow-300 text-[11px] font-black text-slate-950">{count}</span>
|
||||
</Button>
|
||||
@@ -111,7 +111,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
|
||||
<h2 className="mt-3 text-3xl font-black">Tu cuenta ARI</h2>
|
||||
<p className="mt-3 text-sm leading-6 text-slate-600">El inicio de sesión quedará conectado al backend headless. Mientras tanto, puedes gestionar pedidos y disponibilidad directamente por WhatsApp.</p>
|
||||
<div className="mt-6 grid gap-3">
|
||||
<Button asChild variant="magenta" size="lg"><a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer"><MessageCircle />Hablar con ARI</a></Button>
|
||||
<Button asChild variant="primary" size="lg"><a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer"><MessageCircle />Hablar con ARI</a></Button>
|
||||
<Button asChild variant="outline"><Link href="/catalog" onClick={() => setAccountOpen(false)}><PackageCheck />Ver mis opciones de compra</Link></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,5 +7,5 @@ import { useCartStore } from "@/store/cart-store";
|
||||
|
||||
export function MobileAddToCart({ product }: { product: Product }) {
|
||||
const addItem = useCartStore((state) => state.addItem);
|
||||
return <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden"><Button variant="magenta" size="lg" className="w-full" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag />Añadir al carrito</Button></div>;
|
||||
return <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden"><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag />Añadir al carrito</Button></div>;
|
||||
}
|
||||
@@ -33,15 +33,15 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
: null;
|
||||
|
||||
return (
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-lg shadow-slate-900/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-violet-500/10">
|
||||
<div className="relative aspect-square overflow-hidden bg-slate-50">
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-carbon-oscuro/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-ciruela/10">
|
||||
<div className="relative aspect-square overflow-hidden bg-ari-hueso">
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
|
||||
<div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-rose-600 text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-fuchsia-500 text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-yellow-300 text-slate-950"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
|
||||
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-fuchsia-500 text-white" : "bg-white/95 text-slate-900 hover:text-fuchsia-500"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
|
||||
<div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-terracota-oscuro text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-carbon-oscuro text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-cobre text-white"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
|
||||
<button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-ciruela text-white" : "bg-white/95 text-slate-900 hover:text-ari-ciruela"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col space-y-3 p-5">
|
||||
<div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-full bg-cyan-50 px-2 py-1 text-cyan-700">{product.collection}</span></div>
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-slate-950 group-hover:text-fuchsia-600">{product.name}</h3></Link>
|
||||
<div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-cobre/10 px-2 py-1 text-ari-cobre">{product.collection}</span></div>
|
||||
<Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-carbon group-hover:text-ari-ciruela">{product.name}</h3></Link>
|
||||
<p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p>
|
||||
{product.variants.length > 1 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
@@ -53,9 +53,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
aria-pressed={selectedVariantId === variant.id}
|
||||
aria-label={`${variant.name}: ${variant.value}`}
|
||||
onClick={() => setSelectedVariantId(variant.id)}
|
||||
className={`rounded-full border px-2.5 py-1 text-xs font-bold transition ${
|
||||
className={`rounded-md border px-2.5 py-1 text-xs font-bold transition ${
|
||||
selectedVariantId === variant.id
|
||||
? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700"
|
||||
? "border-ari-ciruela bg-ari-ciruela/10 text-ari-ciruela"
|
||||
: "border-slate-200 text-slate-600 hover:border-slate-400"
|
||||
} ${!variant.available ? "cursor-not-allowed opacity-40" : ""}`}
|
||||
>
|
||||
@@ -70,9 +70,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
|
||||
<div className="mt-auto flex items-center justify-between gap-3 pt-1">
|
||||
<div className="flex flex-col">
|
||||
{product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
|
||||
<strong className="text-sm font-black">{formatMoney(product.price, product.currency)}</strong>
|
||||
<strong className="font-display text-base font-bold text-ari-carbon">{formatMoney(product.price, product.currency)}</strong>
|
||||
</div>
|
||||
<Button variant="magenta" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
|
||||
<Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -18,5 +18,5 @@ export function ProductPurchase({ product }: { product: Product }) {
|
||||
selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
|
||||
? selectedVariant.inventoryQuantity
|
||||
: null;
|
||||
return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="magenta" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
|
||||
return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
|
||||
}
|
||||
@@ -4,14 +4,20 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-extrabold transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-cyan-300/40 disabled:pointer-events-none disabled:opacity-50",
|
||||
// ADR 0007 (Opcion 2, "Atelier calido"): radio moderado en vez de
|
||||
// rounded-full, ring de foco tintado con el acento de marca en vez de
|
||||
// cyan generico.
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-extrabold transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ari-cobre/40 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-slate-950 text-white shadow-lg hover:-translate-y-0.5 hover:bg-slate-800",
|
||||
magenta: "bg-gradient-to-r from-fuchsia-500 to-pink-500 text-white shadow-lg shadow-pink-500/25 hover:-translate-y-0.5",
|
||||
// Unico color reservado a accion (nunca decorativo) -- bloque
|
||||
// solido, no gradiente, sobre toda la superficie del sitio que
|
||||
// ya usaba esta variant (carrito, WhatsApp, checkout, "Agregar").
|
||||
primary: "bg-ari-ciruela text-white shadow-lg shadow-ari-ciruela/25 hover:-translate-y-0.5 hover:brightness-110",
|
||||
yellow: "bg-yellow-300 text-slate-950 shadow-lg shadow-yellow-400/25 hover:-translate-y-0.5 hover:bg-yellow-200",
|
||||
outline: "border border-slate-200 bg-white text-slate-950 hover:border-cyan-400 hover:bg-cyan-50",
|
||||
outline: "border border-slate-200 bg-white text-slate-950 hover:border-ari-cobre hover:bg-ari-cobre/10",
|
||||
ghost: "text-slate-700 hover:bg-slate-100",
|
||||
},
|
||||
size: {
|
||||
|
||||
@@ -35,7 +35,7 @@ export function WishlistDrawer() {
|
||||
<div>
|
||||
<Link href={`/product/${product.slug}`} onClick={closeWishlist} prefetch={false} className="text-sm font-black leading-5 hover:text-fuchsia-600">{product.name}</Link>
|
||||
<p className="mt-1 text-xs text-slate-500">{product.category} · {product.collection}</p>
|
||||
<Button size="sm" variant="magenta" className="mt-3" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag className="size-3.5" />Agregar</Button>
|
||||
<Button size="sm" variant="primary" className="mt-3" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag className="size-3.5" />Agregar</Button>
|
||||
</div>
|
||||
<button className="self-start rounded-full p-2 text-slate-400 hover:bg-rose-50 hover:text-rose-600" onClick={() => removeProduct(product.id)} aria-label="Quitar favorito"><Trash2 className="size-4" /></button>
|
||||
</article>
|
||||
|
||||
Reference in new issue
Block a user