docs: add redesign references and agent guidance
This commit is contained in:
Manuel
@@ -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.
|
||||
@@ -0,0 +1,186 @@
|
||||
# MNQ Sitewide Premium Redesign Implementation Plan
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**Goal:** Redesign the full MNQ marketing site to align strongly with the approved premium-editorial stitch direction while preserving WhatsApp-first conversion and the existing Astro architecture.
|
||||
|
||||
**Architecture:** Strengthen the shared visual system first, then redesign pages in descending impact order: Home, Contact, service pages, and Nosotros. Reuse shared patterns aggressively so the final result feels like one visual system rather than one premium page plus several leftovers.
|
||||
|
||||
**Tech Stack:** Astro 5 SSR, `@astrojs/node`, custom CSS files (`tokens.css`, `base.css`, `layout.css`, `components.css`, `utilities.css`), shared Astro layouts/components.
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Audit and Map the Stitch Reference to Shared Patterns
|
||||
|
||||
**Files:**
|
||||
- Read: `docs/stitch_mnq_premium_landing_page/design.md`
|
||||
- Read: `docs/stitch_mnq_premium_landing_page/**`
|
||||
- Read: `src/layouts/MainLayout.astro`
|
||||
- Read: `src/components/SiteHeader.astro`
|
||||
- Read: `src/components/SiteFooter.astro`
|
||||
- Read: `src/styles/tokens.css`
|
||||
- Read: `src/styles/base.css`
|
||||
- Read: `src/styles/layout.css`
|
||||
- Read: `src/styles/components.css`
|
||||
|
||||
**Step 1: Compare the current site against the stitch**
|
||||
Identify exact visual patterns worth adopting: hero rhythm, section pacing, card treatment, CTA composition, typography hierarchy, and whitespace behavior.
|
||||
|
||||
**Step 2: Produce a shared pattern checklist**
|
||||
List the patterns that must become system-level rather than page-specific.
|
||||
|
||||
**Step 3: Identify leftovers from the previous phase**
|
||||
Check for structural issues such as nested landmarks, inconsistent card treatments, or page-level classes that should become shared patterns.
|
||||
|
||||
**Step 4: Verify no implementation yet**
|
||||
This task ends with a concrete mapping, not code changes.
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Upgrade the Shared Visual System
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/styles/tokens.css`
|
||||
- Modify: `src/styles/base.css`
|
||||
- Modify: `src/styles/layout.css`
|
||||
- Modify: `src/styles/components.css`
|
||||
- Modify if needed: `src/layouts/MainLayout.astro`
|
||||
- Modify if needed: `src/components/SiteHeader.astro`
|
||||
- Modify if needed: `src/components/SiteFooter.astro`
|
||||
|
||||
**Step 1: Refine typography tokens and base text rhythm**
|
||||
Strengthen heading hierarchy, label tone, paragraph measure, and spacing scale.
|
||||
|
||||
**Step 2: Refine layout primitives**
|
||||
Create or adjust shared section, container, stack, grid, and editorial rhythm patterns.
|
||||
|
||||
**Step 3: Refine CTA and card primitives**
|
||||
Ensure buttons, text links, CTA groups, and cards look like one premium system.
|
||||
|
||||
**Step 4: Refine shared shell if needed**
|
||||
If header/footer/layout still feel structurally weaker than the new pages, align them visually.
|
||||
|
||||
**Step 5: Run `npm run check`**
|
||||
Expected: no Astro/type issues.
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Redesign Home as the Reference Page
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/index.astro`
|
||||
- Modify if needed: `src/styles/layout.css`
|
||||
- Modify if needed: `src/styles/components.css`
|
||||
|
||||
**Step 1: Remove structural flaws first**
|
||||
If the page has invalid landmark nesting or leftover scaffolding semantics, fix them before visual refinement.
|
||||
|
||||
**Step 2: Recompose the hero**
|
||||
Keep the approved conversion logic, but redesign spacing, hierarchy, and CTA staging to match the stitch more strongly.
|
||||
|
||||
**Step 3: Rebuild service overview as editorial sections**
|
||||
Avoid “three equal boxes only” thinking; keep them consistent but more art-directed.
|
||||
|
||||
**Step 4: Strengthen value proposition and closing CTA**
|
||||
Use section contrast, composition, and visual pacing to make the page feel like a lead conversion asset.
|
||||
|
||||
**Step 5: Run `npm run check`**
|
||||
Expected: clean output.
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Redesign Contact as a Premium Concierge Page
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/contacto.astro`
|
||||
- Modify if needed: `src/styles/layout.css`
|
||||
- Modify if needed: `src/styles/components.css`
|
||||
|
||||
**Step 1: Keep WhatsApp-first hierarchy**
|
||||
Preserve commercial logic while upgrading the visual feel.
|
||||
|
||||
**Step 2: Refine the concierge tone**
|
||||
The contact experience should feel premium, calm, and guided.
|
||||
|
||||
**Step 3: Refine the visible non-sending form**
|
||||
Keep honesty and accessibility, but make it feel intentionally designed, not like a technical compromise.
|
||||
|
||||
**Step 4: Refine feedback and fallback CTA**
|
||||
Ensure the status area and WhatsApp fallback feel integrated into the premium visual system.
|
||||
|
||||
**Step 5: Run `npm run check`**
|
||||
Expected: clean output.
|
||||
|
||||
---
|
||||
|
||||
### Task 5: Redesign the Service Pages as One Family With Distinct Personalities
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/bodas-reales.astro`
|
||||
- Modify: `src/pages/corporativo-business.astro`
|
||||
- Modify: `src/pages/reuniones-familiares.astro`
|
||||
- Modify if needed: `src/styles/layout.css`
|
||||
- Modify if needed: `src/styles/components.css`
|
||||
|
||||
**Step 1: Establish a shared service-page structure**
|
||||
Create a consistent editorial skeleton across all three pages.
|
||||
|
||||
**Step 2: Differentiate each page by intent**
|
||||
- Bodas: more emotional and aspirational
|
||||
- Corporativo: more sober and reputational
|
||||
- Familiares: more warm and intimate
|
||||
|
||||
**Step 3: Refine contextual CTAs**
|
||||
Keep WhatsApp-first, but make copy and hierarchy fit each service better.
|
||||
|
||||
**Step 4: Run `npm run check`**
|
||||
Expected: clean output.
|
||||
|
||||
---
|
||||
|
||||
### Task 6: Redesign Nosotros to Match the New Site Standard
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/nosotros.astro`
|
||||
- Modify if needed: `src/styles/layout.css`
|
||||
- Modify if needed: `src/styles/components.css`
|
||||
|
||||
**Step 1: Strengthen the brand narrative layout**
|
||||
Move it away from a simple informational block toward a composed editorial brand page.
|
||||
|
||||
**Step 2: Align hierarchy and CTA treatment**
|
||||
Ensure Nosotros feels fully part of the redesigned site rather than an older leftover.
|
||||
|
||||
**Step 3: Run `npm run check`**
|
||||
Expected: clean output.
|
||||
|
||||
---
|
||||
|
||||
### Task 7: Final QA, Accessibility, and Consistency Pass
|
||||
|
||||
**Files:**
|
||||
- Review/modify if needed: all touched page, layout, and style files
|
||||
|
||||
**Step 1: Run `npm run check`**
|
||||
Expected: 0 errors, 0 warnings, 0 hints.
|
||||
|
||||
**Step 2: Manual visual review**
|
||||
Check Home, Contacto, Nosotros, and all service pages at mobile and desktop sizes.
|
||||
|
||||
**Step 3: Accessibility review**
|
||||
Verify heading hierarchy, focus states, link semantics, landmark correctness, and CTA readability.
|
||||
|
||||
**Step 4: Conversion review**
|
||||
Confirm WhatsApp remains the strongest CTA path everywhere.
|
||||
|
||||
**Step 5: Prepare implementation summary**
|
||||
Document what changed, what improved, and what remains for later phases.
|
||||
|
||||
---
|
||||
|
||||
## Notes for Execution
|
||||
- Do not introduce backend, Strapi, or chatbot work in this redesign phase.
|
||||
- Do not build after changes; use `npm run check` only.
|
||||
- Respect the existing project docs: `README.md`, `AGENTS.md`, `DESIGN.md`, plus `docs/stitch_mnq_premium_landing_page/design.md`.
|
||||
- Preserve accessibility while upgrading visual sophistication.
|
||||
- If implementation starts from the current `feature/critical-fixes` branch, review and preserve the already approved work instead of flattening it blindly.
|
||||
Reference in New Issue
Block a user