docs: add redesign references and agent guidance

2026-05-07 23:39:53 +02:00
parent 51b0d1fb67
commit 50b4e75edd
20 changed files with 2451 additions and 0 deletions
@@ -0,0 +1,165 @@
+# MNQ Sitewide Premium Redesign Design
+
+## Goal
+Elevar toda la web de MNQ Catering y Evento hacia una dirección visual premium-editorial fuerte, tomando como referencia dominante el material de `docs/stitch_mnq_premium_landing_page`, sin introducir cambios funcionales de backend ni de arquitectura de producto.
+
+## Approved Direction
+Se aprobó una **adaptación fiel del stitch** como norte visual. No se trata de copiar una landing aislada, sino de trasladar su atmósfera, jerarquía, ritmo y sofisticación visual a todas las páginas aprobadas del sitio.
+
+## Visual Intent
+MNQ debe sentirse como una marca de hospitalidad premium contemporánea:
+- clara
+- refinada
+- editorial
+- aspiracional
+- sobria
+- comercialmente efectiva
+
+El resultado buscado es “luxury without noise”: más dirección de arte, menos apariencia de scaffold; más composición editorial, menos cajas apiladas; más intención de marca, menos estructura genérica de landing.
+
+## Domain
+Los conceptos guía del dominio aprobados para el rediseño son:
+- hospitalidad premium
+- catering editorial
+- bodas elegantes
+- eventos corporativos sobrios
+- reuniones íntimas refinadas
+- asesoramiento cercano por WhatsApp
+
+## Color World
+La paleta debe seguir viviendo en el mundo ya definido por el proyecto y reforzado por el stitch:
+- marfil cálido
+- dorado envejecido
+- dorado profundo
+- tinta café-negra
+- blanco crema
+- sombras suaves tipo papel, lino o salón premium
+
+No se busca llenar superficies con dorado, sino usarlo como acento de lujo disciplinado.
+
+## Signature
+La firma visual del proyecto será **editorial hospitality**:
+- secciones amplias con aire
+- títulos con más presencia y control de ancho
+- cards tratadas como piezas curadas, no como widgets
+- CTA sobrios pero firmes
+- ritmo visual de revista premium aplicada a una web comercial de eventos
+
+## Defaults Rejected
+Se rechazaron explícitamente estos defaults:
+1. cards genéricas apiladas
+2. tipografía demasiado neutra en jerarquía
+3. CTAs genéricos de landing sin intención contextual
+
+## Structural Translation
+
+### Layout
+La web pasa de páginas lineales con bloques funcionales a páginas construidas por “escenas” o composiciones editoriales:
+- heroes más amplios
+- secciones con más respiración vertical
+- alternancia suave de superficies
+- contenedores controlados para mejorar la lectura del copy
+- menos sensación de stack repetitivo
+
+### Header
+Debe sentirse más premium y menos utilitario:
+- limpieza visual
+- mejor jerarquía entre marca, navegación y acción principal
+- integración armónica con el sistema visual nuevo
+
+### Hero Pattern
+Cada página debe arrancar con una estructura consistente:
+- eyebrow breve
+- título con más peso visual
+- párrafo corto y medido
+- CTA principal
+- CTA secundario si corresponde
+
+### Service Pages
+Las páginas de servicio compartirán sistema, pero no tono idéntico:
+- Bodas Reales: emocional, aspiracional, más atmósfera
+- Corporativo & Business: sobrio, reputacional, eficiente
+- Reuniones Familiares: cálido, íntimo, elegante
+
+### Contact Page
+Debe sentirse como un “concierge digital”, no como un formulario genérico:
+- WhatsApp como canal principal
+- copy de acompañamiento refinado
+- formulario visualmente serio y editorial
+- feedback elegante, no técnico
+
+## Components and System Rules
+
+### Cards
+Se mantienen, pero con otro tratamiento:
+- menos “caja funcional”
+- más superficie curada
+- padding más generoso
+- bordes más finos
+- fondos más controlados
+- mayor intención tipográfica
+
+### CTA System
+Se define un sistema de tres niveles:
+1. primario: WhatsApp
+2. secundario: explorar / conocer / ver propuesta
+3. textual contextual: links finos dentro de secciones y servicios
+
+### Typography
+Sin cambiar el ADN base del proyecto, se debe reforzar:
+- contraste entre eyebrow / heading / body
+- presencia de títulos
+- control de ancho de párrafos
+- labels más refinados
+
+### CSS Architecture
+No se reescribe el stack, se profundiza:
+- `src/styles/tokens.css` → decisiones tipográficas y de spacing más nítidas
+- `src/styles/base.css` → limpieza tipográfica y comportamiento base
+- `src/styles/layout.css` → composiciones editoriales y ritmo
+- `src/styles/components.css` → héroes, service sections, CTA groups, contact patterns, cards refinadas
+
+## Scope Included
+- refuerzo del sistema visual base
+- rediseño visual de `Home`
+- rediseño visual de `Nosotros`
+- rediseño visual de `Bodas Reales`
+- rediseño visual de `Corporativo & Business`
+- rediseño visual de `Reuniones Familiares`
+- rediseño visual de `Contacto`
+- ajustes necesarios en layout/header/footer/componentes compartidos
+
+## Scope Excluded
+- Strapi
+- backend
+- chatbot
+- PostgreSQL
+- RAG
+- nuevas features funcionales fuera del rediseño visual
+- cambios grandes de arquitectura de producto
+
+## Risks to Avoid
+- copiar el stitch sin adaptación al sitio real
+- dejar Home muy arriba del resto en calidad visual
+- meter ornamento visual sin mejorar conversión
+- romper accesibilidad por perseguir lujo
+- sobrediseñar páginas que necesitan seguir siendo claras y comerciales
+
+## Success Criteria
+El rediseño estará bien logrado si:
+- toda la web se siente del mismo universo visual
+- Home, Contacto y servicios tienen una presencia premium clara
+- el sitio parece una marca cuidada y seria, no un scaffold estilizado
+- WhatsApp sigue siendo la columna vertebral comercial
+- no se pierde claridad, legibilidad ni intención de conversión
+
+## Recommended Execution Order
+1. sistema visual base
+2. Home
+3. Contacto
+4. páginas de servicio
+5. Nosotros
+6. QA visual + accesibilidad + revisión final
+
+## Note on Commit
+El skill de brainstorming sugiere commitear este documento, pero no se hará commit automático porque en este entorno solo se puede commitear cuando el usuario lo pide explícitamente.