# 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.