chore: bootstrap MNQ Astro site
This commit is contained in:
Manuel
@@ -0,0 +1,170 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user