MNQ-Catering-y-Evento/docs/plans/2026-05-07-critical-fixes-implementation.md

MNQ Critical Fixes Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Remove the most visible credibility issues from the current MNQ site while keeping the contact form visible and honestly non-functional until phase 2.

Architecture: Use a small shared site config for WhatsApp data and CTA text, then route all shared components and key pages through that source. Improve Home and Contact pages in place, and keep the contact form frontend-only with graceful validation and a “coming soon” response that redirects intent to WhatsApp.

Tech Stack: Astro 5 SSR, @astrojs/node, CSS custom properties, native HTML forms, existing shared Astro components.

---

Task 1: Add Central Site Contact Config

Files:

• Create: src/config/site.ts
• Modify: src/components/WhatsAppButton.astro
• Modify: src/components/SiteFooter.astro
• Modify: src/pages/index.astro
• Modify: src/pages/contacto.astro

Step 1: Create shared config module Create src/config/site.ts with exported constants for:

• siteName
• whatsappNumber
• whatsappBaseUrl
• helper or prebuilt CTA links/messages for home/contact/general use

Step 2: Replace hardcoded WhatsApp strings in shared components Update WhatsAppButton.astro and SiteFooter.astro to import from src/config/site.ts.

Step 3: Replace hardcoded WhatsApp strings in key pages Update index.astro and contacto.astro to use the same config source.

Step 4: Verify there are no remaining placeholders Search for 5491112345678 and remove every remaining occurrence.

Step 5: Verify manually Open the affected pages and confirm all CTAs point to the centralized value.

---

Task 2: Add Layout Accessibility and Metadata Basics

Files:

• Modify: src/layouts/MainLayout.astro
• Modify: src/styles/base.css
• Modify: src/styles/components.css

Step 1: Add skip link markup Insert a skip link at the top of the layout targeting the main content container.

Step 2: Ensure main landmark is targetable Add id to the primary main content area so the skip link works.

Step 3: Add baseline metadata Add description, theme-color, and basic Open Graph tags in the shared layout.

Step 4: Add focus-visible styles Define clear keyboard focus styles for links, buttons, and form fields.

Step 5: Verify behavior Keyboard through the page and confirm the skip link appears and focus states are visible.

---

Task 3: Expand Home Into a Credible Commercial Entry Page

Files:

• Modify: src/pages/index.astro
• Modify: src/styles/layout.css
• Modify: src/styles/components.css

Step 1: Keep hero, improve CTA clarity Retain the hero but make sure the primary CTA is specific and commercial.

Step 2: Add services overview section Add a section summarizing Bodas Reales, Corporativo & Business, and Reuniones Familiares, each with a contextual CTA or internal link.

Step 3: Add value proposition section Add a concise section explaining what makes MNQ premium: personalization, execution, presentation, and service.

Step 4: Add strong closing CTA section Add a final conversion block pushing WhatsApp as the fastest path.

Step 5: Refine spacing and hierarchy Adjust CSS so the page feels editorial and not like stacked generic cards.

---

Task 4: Rework Contact Page With Honest Visible Form

Files:

• Modify: src/pages/contacto.astro
• Modify: src/styles/components.css
• Modify: src/styles/layout.css

Step 1: Reorder page hierarchy Make WhatsApp the primary action at the top of the page.

Step 2: Add response expectation copy Add short trust-building copy about response speed / preferred contact path.

Step 3: Keep form visible with real fields Ensure the form has meaningful labels, names, autocomplete hints, and proper input types.

Step 4: Intercept submit gracefully Implement frontend-only submit behavior that prevents real submission and shows a polished “Próximamente disponible…” message.

Step 5: Add fallback CTA near feedback Place a WhatsApp CTA next to or below the feedback so the user has a clear next action.

---

Task 5: Form UX and Accessibility Hardening

Files:

• Modify: src/pages/contacto.astro
• Modify: src/styles/components.css

Step 1: Verify label coverage Every field must have a visible label and matching name.

Step 2: Add semantic field types Use proper type, autocomplete, and inputmode where relevant.

Step 3: Add inline feedback container Provide a visible status area for the “coming soon” message.

Step 4: Ensure keyboard and focus behavior Check tab order, button focus state, and feedback readability.

Step 5: Verify no fake submission semantics Avoid implying the form was actually sent.

---

Task 6: Final Verification Pass

Files:

• Modify if needed after review: src/layouts/MainLayout.astro
• Modify if needed after review: src/pages/index.astro
• Modify if needed after review: src/pages/contacto.astro
• Modify if needed after review: src/components/WhatsAppButton.astro
• Modify if needed after review: src/components/SiteFooter.astro

Step 1: Run static project checks Run: npm run check Expected: no blocking Astro/type issues.

Step 2: Manual review of Home Confirm stronger narrative, correct headings, and working WhatsApp CTA.

Step 3: Manual review of Contacto Confirm visible form, graceful non-submit behavior, and strong WhatsApp fallback.

Step 4: Search for leftovers Check for remaining placeholder phone values, dead CTA text, or misleading copy.

Step 5: Prepare summary for handoff Document what was changed and what remains for phase 2 (Strapi, Postgres, pgvector, chatbot, RAG, Groq, Ollama).

---

Notes for Execution

• Do not add backend form handling in this phase.
• Do not introduce Strapi, PostgreSQL, pg, pgvector, Ollama, or Groq yet.
• Keep implementation small and honest.
• If the real WhatsApp number is still unavailable, stop and request it before replacing the placeholder value.
• Do not build after changes; use npm run check only.