Manuel
165 lines
5.7 KiB
Markdown
165 lines
5.7 KiB
Markdown
# 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. |