Manuel
5.7 KiB
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:
- cards genéricas apiladas
- tipografía demasiado neutra en jerarquía
- 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:
- primario: WhatsApp
- secundario: explorar / conocer / ver propuesta
- 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ítidassrc/styles/base.css→ limpieza tipográfica y comportamiento basesrc/styles/layout.css→ composiciones editoriales y ritmosrc/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
- sistema visual base
- Home
- Contacto
- páginas de servicio
- Nosotros
- 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.