chore: bootstrap MNQ Astro site
This commit is contained in:
Manuel
@@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
.astro/
|
||||
.worktrees/
|
||||
dist/
|
||||
@@ -0,0 +1,81 @@
|
||||
# AGENTS.md
|
||||
|
||||
## Stack
|
||||
|
||||
- **Framework:** Astro 5
|
||||
- **Adapter:** `@astrojs/node`
|
||||
- **Rendering mode:** SSR
|
||||
- **Runtime target:** Node standalone en VPS con Dokploy
|
||||
- **Styling:** CSS custom con variables CSS
|
||||
- **Responsive approach:** mobile-first
|
||||
|
||||
## Arquitectura del producto
|
||||
|
||||
Sitio institucional multipágina enfocado en **captación de leads por WhatsApp**.
|
||||
|
||||
Páginas aprobadas:
|
||||
|
||||
- Home
|
||||
- Nosotros
|
||||
- Bodas Reales
|
||||
- Corporativo & Business
|
||||
- Reuniones Familiares
|
||||
- Contacto
|
||||
|
||||
## Comandos
|
||||
|
||||
Comandos esperados para la implementación del proyecto:
|
||||
|
||||
| Acción | Comando |
|
||||
| --- | --- |
|
||||
| Instalar dependencias | `npm install` |
|
||||
| Desarrollo | `npm run dev` |
|
||||
| Build | `npm run build` |
|
||||
| Preview / ejecución standalone | `node ./dist/server/entry.mjs` |
|
||||
|
||||
## Convenciones
|
||||
|
||||
1. Priorizar claridad comercial y conversión por WhatsApp.
|
||||
2. Mantener arquitectura mobile-first desde el CSS base.
|
||||
3. Usar variables CSS para tokens de color, spacing, tipografía, radios y sombras.
|
||||
4. Evitar frameworks de utilidades si no aportan valor claro al sistema visual.
|
||||
5. Mantener consistencia estructural entre páginas de servicio.
|
||||
6. Las galerías deben vivir dentro de cada servicio, no como página independiente.
|
||||
7. El formulario de contacto debe ser secundario respecto a WhatsApp.
|
||||
|
||||
## Don'ts
|
||||
|
||||
- No usar `@astrojs/cloudflare` para este proyecto: el deployment objetivo es Dokploy sobre VPS.
|
||||
- No diseñar desktop-first.
|
||||
- No mezclar estilos premium editoriales con componentes visualmente ruidosos.
|
||||
- No usar dorado como color masivo de relleno; usarlo como acento.
|
||||
- No construir páginas de servicio genéricas copiadas una de otra sin adaptar copy, CTA y galería.
|
||||
|
||||
## Estructura CSS recomendada
|
||||
|
||||
- `src/styles/tokens.css`
|
||||
- `src/styles/base.css`
|
||||
- `src/styles/layout.css`
|
||||
- `src/styles/components.css`
|
||||
- `src/styles/utilities.css`
|
||||
|
||||
## Skills
|
||||
|
||||
Habilidades especialmente relevantes para este proyecto:
|
||||
|
||||
- `project-docs`
|
||||
- `brainstorming`
|
||||
- `responsive-design`
|
||||
- `visual-design-foundations`
|
||||
- `interface-design`
|
||||
- `accessibility-compliance`
|
||||
|
||||
## Nota para futuros agentes
|
||||
|
||||
Antes de implementar:
|
||||
|
||||
1. Leer `README.md`
|
||||
2. Leer este `AGENTS.md`
|
||||
3. Leer `DESIGN.md`
|
||||
4. Respetar el enfoque comercial: WhatsApp primero
|
||||
5. Respetar el enfoque visual: claro editorial premium
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
name: MNQ Catering y Evento
|
||||
colors:
|
||||
primary: "#D4AF37"
|
||||
secondary: "#A67C1B"
|
||||
surface: "#FFFDF8"
|
||||
on-surface: "#1F1A17"
|
||||
error: "#B3261E"
|
||||
typography:
|
||||
body-md:
|
||||
fontFamily: "Inter"
|
||||
fontSize: "16px"
|
||||
fontWeight: 400
|
||||
rounded:
|
||||
sm: 6px
|
||||
md: 12px
|
||||
lg: 20px
|
||||
---
|
||||
|
||||
# Design System
|
||||
|
||||
## Overview
|
||||
|
||||
MNQ debe sentirse como una marca de eventos premium contemporánea: clara, refinada, editorial y aspiracional. La experiencia visual tiene que transmitir elegancia sin pesadez, con una base marfil/blanca, acentos dorados y un ritmo visual aireado.
|
||||
|
||||
## Colors
|
||||
|
||||
- **Primary** (`#D4AF37`): dorado premium para detalles de marca, botones principales, subrayados y acentos de jerarquía.
|
||||
- **Secondary** (`#A67C1B`): dorado más profundo para hover states, bordes destacados y variaciones sofisticadas del acento principal.
|
||||
- **Surface** (`#FFFDF8`): fondo general claro, cálido y editorial; debe sostener una sensación premium, no clínica.
|
||||
- **On-surface** (`#1F1A17`): texto principal, títulos y elementos de contraste sobre superficies claras.
|
||||
- **Error** (`#B3261E`): validaciones y feedback crítico en formularios.
|
||||
|
||||
## Typography
|
||||
|
||||
- **Headlines**: combinación editorial elegante; títulos con alta presencia visual y espaciado generoso.
|
||||
- **Body**: `Inter`, peso 400–500, con tamaño base de `16px` y line-height cómodo para lectura prolongada.
|
||||
- **Labels**: `Inter`, peso 500–600, tamaño entre `12px` y `14px`, con uso moderado de letter spacing para sensación premium.
|
||||
|
||||
## Components
|
||||
|
||||
- **Buttons**: jerarquía clara, relleno oscuro o acento dorado controlado; radio medio, padding generoso y estados hover sobrios.
|
||||
- **Inputs**: fondos claros, bordes suaves, foco visible y limpio; nunca pesados ni visualmente toscos.
|
||||
- **Cards**: superficies claras con borde fino o sombra suave; composición editorial con mucho aire interior.
|
||||
|
||||
## Layout & Responsive
|
||||
|
||||
- Enfoque **mobile-first** desde el primer breakpoint.
|
||||
- Usar variables CSS para spacing, tipografía y color semántico.
|
||||
- Layouts con `grid` y `flex` según contexto, evitando widths rígidos.
|
||||
- Escalar tipografía y espacios de forma fluida o progresiva, no abrupta.
|
||||
- Priorizar touch targets cómodos y CTA visibles en mobile.
|
||||
|
||||
## Conversión
|
||||
|
||||
- WhatsApp es el CTA primario en todo el sitio.
|
||||
- Cada servicio debe tener CTA contextual propio.
|
||||
- La página de contacto debe priorizar acción inmediata sobre lectura extensa.
|
||||
- Las galerías deben ser específicas por servicio para reforzar relevancia comercial.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
- Do usar fondo claro cálido y mucha respiración visual.
|
||||
- Do usar el dorado como acento de lujo, no como color dominante de masas.
|
||||
- Do mantener narrativa visual editorial y limpia.
|
||||
- Do diseñar primero para mobile y escalar hacia desktop.
|
||||
- Don't recargar la interfaz con ornamentos innecesarios.
|
||||
- Don't usar colores chillones o combinaciones que rompan el posicionamiento premium.
|
||||
- Don't diseñar CTAs genéricos cuando el contexto del servicio permite mayor intención.
|
||||
- Don't separar una galería general si las imágenes venden mejor dentro de cada servicio.
|
||||
@@ -0,0 +1,84 @@
|
||||
# MNQ Catering y Evento
|
||||
|
||||
Sitio institucional premium orientado a **captación de leads por WhatsApp** para la marca MNQ Catering y Eventos.
|
||||
|
||||
## Producto
|
||||
|
||||
La primera versión del proyecto será un sitio web multipágina con estética **clara, elegante y editorial**, pensado para presentar servicios premium y convertir visitas en consultas comerciales.
|
||||
|
||||
## Objetivo principal
|
||||
|
||||
Convertir tráfico en conversaciones de negocio mediante:
|
||||
|
||||
- CTA contextuales hacia WhatsApp
|
||||
- páginas específicas por tipo de servicio
|
||||
- narrativa visual premium
|
||||
- contenido claro, emocional y comercial
|
||||
|
||||
## Servicios principales
|
||||
|
||||
El corazón del negocio se organiza en tres pilares:
|
||||
|
||||
1. **Bodas Reales**
|
||||
Personalización absoluta del evento, desde banquete hasta decoración temática.
|
||||
|
||||
2. **Corporativo & Business**
|
||||
Propuesta enfocada en eficiencia, puntualidad y menús ejecutivos que eleven la imagen profesional.
|
||||
|
||||
3. **Reuniones Familiares**
|
||||
Experiencia cálida y elegante para aniversarios, bautizos, cenas privadas y encuentros íntimos.
|
||||
|
||||
## Arquitectura del sitio
|
||||
|
||||
```text
|
||||
.
|
||||
├── Home
|
||||
├── Nosotros
|
||||
├── Bodas Reales
|
||||
├── Corporativo & Business
|
||||
├── Reuniones Familiares
|
||||
├── Contacto
|
||||
└── docs/
|
||||
```
|
||||
|
||||
## Stack técnico
|
||||
|
||||
- **Framework:** Astro 5
|
||||
- **Rendering:** SSR
|
||||
- **Adapter:** `@astrojs/node`
|
||||
- **Deployment target:** VPS con Dokploy
|
||||
- **Estilos:** CSS custom con variables
|
||||
- **Responsive:** mobile-first
|
||||
|
||||
## Estrategia de conversión
|
||||
|
||||
- **WhatsApp** es el canal principal de captación.
|
||||
- Cada página debe incluir un CTA específico según intención.
|
||||
- El formulario de contacto será secundario y corto.
|
||||
- La galería vive dentro de cada servicio, no como página aparte.
|
||||
|
||||
## Getting Started
|
||||
|
||||
Cuando se inicie la implementación técnica:
|
||||
|
||||
1. Crear proyecto Astro 5
|
||||
2. Instalar `@astrojs/node`
|
||||
3. Configurar SSR standalone para Dokploy
|
||||
4. Implementar sistema de estilos con variables CSS
|
||||
5. Construir páginas y componentes siguiendo `DESIGN.md`
|
||||
|
||||
## Comandos esperados
|
||||
|
||||
| Comando | Propósito |
|
||||
| --- | --- |
|
||||
| `npm install` | Instalar dependencias |
|
||||
| `npm run dev` | Desarrollo local |
|
||||
| `npm run build` | Build SSR |
|
||||
| `node ./dist/server/entry.mjs` | Ejecutar salida standalone |
|
||||
|
||||
## Próximos pasos sugeridos
|
||||
|
||||
- Inicializar el proyecto Astro 5
|
||||
- Definir layout global y sistema de navegación
|
||||
- Implementar design tokens en CSS variables
|
||||
- Construir la Home y luego las páginas de servicio
|
||||
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
import node from '@astrojs/node';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: node({
|
||||
mode: 'standalone',
|
||||
}),
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 367 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@@ -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.
|
||||
Generated
+6609
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "mnq-catering-y-evento",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "Sitio institucional premium orientado a captación de leads por WhatsApp para MNQ Catering y Evento.",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"check": "astro check"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@astrojs/node": "^9.5.5",
|
||||
"astro": "^5.18.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.9",
|
||||
"typescript": "^5.9.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-grid">
|
||||
<div>
|
||||
<p class="brand">MNQ Catering y Evento</p>
|
||||
<p class="text-muted">Experiencias gastronómicas premium para bodas, eventos corporativos y celebraciones familiares.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="footer-title">Contacto directo</p>
|
||||
<a href="https://wa.me/5491112345678" class="link-accent" target="_blank" rel="noreferrer">Escribir por WhatsApp</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,14 @@
|
||||
<header class="site-header">
|
||||
<div class="container nav-wrap">
|
||||
<a href="/" class="brand">MNQ Catering y Evento</a>
|
||||
<nav aria-label="Principal">
|
||||
<ul class="nav-list">
|
||||
<li><a href="/nosotros">Nosotros</a></li>
|
||||
<li><a href="/bodas-reales">Bodas Reales</a></li>
|
||||
<li><a href="/corporativo-business">Corporativo & Business</a></li>
|
||||
<li><a href="/reuniones-familiares">Reuniones Familiares</a></li>
|
||||
<li><a href="/contacto">Contacto</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,9 @@
|
||||
<a
|
||||
class="whatsapp-float"
|
||||
href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="Abrir conversación por WhatsApp"
|
||||
>
|
||||
WhatsApp
|
||||
</a>
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import SiteHeader from '../components/SiteHeader.astro';
|
||||
import SiteFooter from '../components/SiteFooter.astro';
|
||||
import WhatsAppButton from '../components/WhatsAppButton.astro';
|
||||
import '../styles/tokens.css';
|
||||
import '../styles/base.css';
|
||||
import '../styles/layout.css';
|
||||
import '../styles/components.css';
|
||||
import '../styles/utilities.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description = 'MNQ Catering y Evento · Experiencias premium para momentos inolvidables.' } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
</head>
|
||||
<body>
|
||||
<SiteHeader />
|
||||
<main class="container section-stack">
|
||||
<slot />
|
||||
</main>
|
||||
<SiteFooter />
|
||||
<WhatsAppButton />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Bodas Reales | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Servicio · Bodas Reales</p>
|
||||
<h1>Bodas con identidad propia y ejecución impecable.</h1>
|
||||
<p>Diseñamos menú, ambientación gastronómica y experiencia de servicio para que cada boda se sienta única, elegante y personal.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20boda" target="_blank" rel="noreferrer">Cotizar boda por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Contacto | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Contacto</p>
|
||||
<h1>Coordinemos tu evento por WhatsApp.</h1>
|
||||
<p>Canal principal de atención para asesorarte rápido y enviarte una propuesta personalizada.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20hablar%20sobre%20mi%20evento" target="_blank" rel="noreferrer">Iniciar conversación por WhatsApp</a>
|
||||
|
||||
<form class="contact-form" aria-label="Formulario de contacto secundario">
|
||||
<label>
|
||||
Nombre
|
||||
<input type="text" name="nombre" placeholder="Tu nombre" />
|
||||
</label>
|
||||
<label>
|
||||
Email
|
||||
<input type="email" name="email" placeholder="tu@email.com" />
|
||||
</label>
|
||||
<label>
|
||||
Mensaje
|
||||
<textarea name="mensaje" rows="4" placeholder="Contanos brevemente tu evento"></textarea>
|
||||
</label>
|
||||
<button type="submit" class="button-secondary">Enviar (secundario)</button>
|
||||
</form>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Corporativo & Business | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Servicio · Corporativo & Business</p>
|
||||
<h1>Eventos empresariales con timing, imagen y calidad premium.</h1>
|
||||
<p>Ofrecemos propuestas ejecutivas para lanzamientos, directorios y jornadas corporativas con foco en puntualidad y presentación profesional.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" target="_blank" rel="noreferrer">Solicitar propuesta por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="MNQ Catering y Evento | Home">
|
||||
<section class="hero card">
|
||||
<p class="eyebrow">Catering premium para eventos memorables</p>
|
||||
<h1>Diseñamos experiencias gastronómicas a la altura de tu celebración.</h1>
|
||||
<p>Con enfoque editorial, servicio impecable y ejecución personalizada para cada ocasión.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20asesoramiento%20para%20mi%20evento" target="_blank" rel="noreferrer">Cotizar por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Nosotros | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Nosotros</p>
|
||||
<h1>Hospitalidad, estética y excelencia operativa.</h1>
|
||||
<p>MNQ nace para elevar celebraciones con una propuesta premium que combina gastronomía, diseño y coordinación integral del evento.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20conocer%20su%20propuesta" target="_blank" rel="noreferrer">Hablar por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Reuniones Familiares | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Servicio · Reuniones Familiares</p>
|
||||
<h1>Celebraciones íntimas con calidez y refinamiento.</h1>
|
||||
<p>Desde aniversarios hasta cenas privadas, creamos experiencias cuidadas para disfrutar en familia sin resignar elegancia.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20reunion%20familiar" target="_blank" rel="noreferrer">Consultar por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,33 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.6;
|
||||
color: var(--color-on-surface);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-serif);
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
.site-header {
|
||||
border-bottom: 1px solid rgb(31 26 23 / 10%);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid rgb(31 26 23 / 10%);
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
|
||||
.footer-title,
|
||||
.eyebrow {
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid rgb(31 26 23 / 8%);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.button-primary,
|
||||
.button-secondary {
|
||||
width: fit-content;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: var(--color-primary);
|
||||
color: #201a14;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: var(--color-secondary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: transparent;
|
||||
color: var(--color-on-surface);
|
||||
border-color: rgb(31 26 23 / 25%);
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid rgb(31 26 23 / 20%);
|
||||
padding: 0.75rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.whatsapp-float {
|
||||
position: fixed;
|
||||
right: var(--space-4);
|
||||
bottom: var(--space-4);
|
||||
z-index: 50;
|
||||
background: #25d366;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
min-height: 48px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.container {
|
||||
width: min(100% - 2rem, 72rem);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.section-stack {
|
||||
padding-block: var(--space-8) var(--space-12);
|
||||
}
|
||||
|
||||
.section-stack-sm {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.nav-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
padding-block: var(--space-4);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.nav-wrap {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
:root {
|
||||
--color-primary: #d4af37;
|
||||
--color-secondary: #a67c1b;
|
||||
--color-surface: #fffdf8;
|
||||
--color-on-surface: #1f1a17;
|
||||
--color-error: #b3261e;
|
||||
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-serif: 'Playfair Display', Georgia, serif;
|
||||
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: clamp(1.5rem, 5vw, 2.25rem);
|
||||
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-12: 3rem;
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 20px;
|
||||
|
||||
--shadow-soft: 0 8px 24px rgb(31 26 23 / 8%);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.text-muted {
|
||||
color: rgb(31 26 23 / 72%);
|
||||
}
|
||||
|
||||
.link-accent {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"]
|
||||
}
|
||||
Reference in New Issue
Block a user