MNQ-Catering-y-Evento/docs/plans/2026-05-07-sitewide-premium-redesign-implementation.md

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.