docs: add redesign references and agent guidance
This commit is contained in:
Manuel
@@ -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