chore: bootstrap MNQ Astro site
This commit is contained in:
Manuel
@@ -0,0 +1,108 @@
|
||||
# MNQ Critical Fixes Design
|
||||
|
||||
## Goal
|
||||
Corregir los problemas críticos visibles del sitio actual de MNQ Catering y Evento sin introducir todavía CMS, base de datos, chatbot ni backend temporal innecesario.
|
||||
|
||||
## Context
|
||||
El proyecto ya cuenta con Astro 5 SSR, layout compartido, páginas aprobadas y sistema CSS base. Sin embargo, hoy está en fase skeleton: el número de WhatsApp está hardcodeado con un placeholder, el formulario de contacto no es funcional y la Home/Contacto todavía no sostienen una narrativa comercial premium completa.
|
||||
|
||||
## Scope for This Phase
|
||||
|
||||
### Included
|
||||
- Centralizar el número de WhatsApp y los mensajes base en una sola fuente de configuración.
|
||||
- Reemplazar el placeholder actual en header/footer/botón flotante/CTAs.
|
||||
- Mantener el formulario de contacto visible.
|
||||
- Hacer que el submit del formulario muestre feedback elegante de “próximamente disponible” y redireccione la intención al CTA principal de WhatsApp.
|
||||
- Reforzar la Home con secciones editoriales mínimas pero reales.
|
||||
- Reforzar Contacto para que WhatsApp sea la acción primaria y el formulario la secundaria.
|
||||
- Agregar mejoras base de accesibilidad y metadata mínima de layout.
|
||||
|
||||
### Explicitly Excluded
|
||||
- Strapi 5.44.
|
||||
- PostgreSQL 17, pgvector o RAG.
|
||||
- Chatbot.
|
||||
- Integración con Groq, Ollama o embeddings.
|
||||
- Endpoint temporal para formulario.
|
||||
- Modelado de contenido dinámico.
|
||||
|
||||
## Approach Options Considered
|
||||
|
||||
### Option A — Minimal Smart Fixes (chosen)
|
||||
Resolver solo lo crítico visible, dejando el sitio comercialmente más creíble y técnicamente preparado para una fase 2 más seria.
|
||||
|
||||
### Option B — Broader Commercial Expansion
|
||||
Además de lo crítico, expandir ya las páginas de servicio con más contenido editorial y bloques de valor.
|
||||
|
||||
### Option C — Early Future Architecture
|
||||
Introducir desde ahora contratos y preparación para CMS/chatbot, aun sin backend real.
|
||||
|
||||
## Why Option A
|
||||
Es la mejor relación impacto/costo. El problema actual no es sofisticación arquitectónica sino credibilidad comercial y coherencia UX. Meter estructura futura ahora sería sobreingeniería prematura.
|
||||
|
||||
## Functional Design
|
||||
|
||||
### WhatsApp Configuration
|
||||
Se definirá una única fuente compartida para:
|
||||
- número de WhatsApp
|
||||
- URL base `wa.me`
|
||||
- mensajes por contexto si hace falta
|
||||
|
||||
Esto evita repetir strings en páginas y componentes, y deja el sitio listo para conectar luego con CMS o variables de entorno.
|
||||
|
||||
### Contact Form Behavior
|
||||
El formulario seguirá visible como señal de producto serio, pero no prometerá una integración inexistente.
|
||||
|
||||
Comportamiento:
|
||||
- validación básica de campos requeridos en frontend
|
||||
- al enviar, no habrá request real
|
||||
- se mostrará mensaje claro y elegante del tipo: “Próximamente disponible. Mientras tanto, escribinos por WhatsApp para una respuesta más rápida.”
|
||||
- se conservará CTA inmediato a WhatsApp en la misma página
|
||||
|
||||
Esto protege la confianza del usuario: la interfaz no miente y tampoco se rompe.
|
||||
|
||||
### Home Content Expansion
|
||||
La Home dejará de ser solo un hero. Debe sumar 2 o 3 bloques concretos:
|
||||
- servicios destacados
|
||||
- propuesta de valor / por qué elegir MNQ
|
||||
- cierre comercial con CTA principal
|
||||
|
||||
No hace falta construir una mega landing todavía. Hace falta que la Home parezca un negocio real, no una maqueta.
|
||||
|
||||
### Contact Page Structure
|
||||
La página de contacto debe mostrar una jerarquía clara:
|
||||
1. WhatsApp como acción principal
|
||||
2. datos/contexto de respuesta
|
||||
3. formulario secundario visible
|
||||
4. feedback elegante de “próximamente” al enviar
|
||||
|
||||
## UX and Accessibility Design
|
||||
Se incorporarán mejoras base, sin entrar en una auditoría exhaustiva:
|
||||
- skip link hacia contenido principal
|
||||
- estados visibles de `:focus-visible`
|
||||
- revisión de jerarquía de headings en Home y Contacto
|
||||
- copy de CTA más específico cuando corresponda
|
||||
|
||||
## Metadata / SEO
|
||||
Se añadirá metadata mínima útil en el layout:
|
||||
- descripción
|
||||
- canonical básica si aplica
|
||||
- Open Graph esencial
|
||||
- `theme-color`
|
||||
|
||||
## Future Compatibility
|
||||
Esta fase no implementa CMS ni chatbot, pero deja una dirección correcta para fase 2:
|
||||
- configuración centralizable
|
||||
- componentes menos acoplados a strings hardcodeados
|
||||
- formulario visible, listo para luego conectarse a Strapi o a otro flujo
|
||||
|
||||
## Risks
|
||||
- Si el número real de WhatsApp todavía no está definido, habrá que esperar ese dato antes de ejecutar el reemplazo final.
|
||||
- El formulario visible pero no conectado exige un mensaje muy bien escrito para no generar frustración.
|
||||
- Si la Home crece demasiado ahora, se puede perder foco y abrir trabajo de copy innecesario antes del CMS.
|
||||
|
||||
## Success Criteria
|
||||
- No queda ningún placeholder de WhatsApp en producción.
|
||||
- El formulario visible no rompe ni promete envío real.
|
||||
- Home y Contacto transmiten más confianza comercial.
|
||||
- Mejoran accesibilidad base y metadata del layout.
|
||||
- El alcance queda contenido y no invade la fase 2.
|
||||
@@ -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