feat: rediseño premium completo del sitio MNQ
- Sistema visual nuevo: tokens CSS extendidos, tipografía Noto Serif + Inter, design system completo - Navbar con logo generado por IA (☥MNQ ★★★★★), favicon ojo de Ra, WhatsApp CTA - Páginas rediseñadas: Home, Bodas, Corporativo, Familiares, Nosotros, Contacto - Imágenes premium: fotografías reales + imágenes generadas con Gemini AI via nanobanana - Logos con fondo transparente generados y procesados - WhatsApp actualizado a +34 678 17 15 13
This commit is contained in:
Manuel
+179
-21
@@ -2,27 +2,185 @@
|
||||
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>
|
||||
<MainLayout
|
||||
title="Contacto | MNQ Catering y Evento"
|
||||
description="Hablemos de su próximo evento. Diseñamos experiencias gastronómicas a medida para bodas, corporativos y celebraciones familiares."
|
||||
activeNav="contacto"
|
||||
>
|
||||
|
||||
<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>
|
||||
<!-- ─── HERO ─── -->
|
||||
<section class="contacto-hero">
|
||||
<div class="page-wrap">
|
||||
<div class="contacto-hero-grid">
|
||||
|
||||
<div class="contacto-hero-text">
|
||||
<span class="section-eyebrow">Contacto</span>
|
||||
<h1 class="text-display" style="margin-bottom: var(--space-8);">
|
||||
Hablemos de su próximo evento.
|
||||
</h1>
|
||||
<p class="text-muted" style="line-height: 1.7; max-width: 32rem;">
|
||||
Diseñamos experiencias gastronómicas a medida. Permítanos conocer sus necesidades para crear una propuesta única y exclusiva.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="contacto-hero-img overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/images/foto-bodas.png"
|
||||
alt="MNQ Catering — salón de eventos premium"
|
||||
style="width:100%;height:100%;object-fit:cover;object-position:center 35%;"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── CONTACT GRID ─── -->
|
||||
<section class="section-pad">
|
||||
<div class="page-wrap">
|
||||
<div class="contacto-grid">
|
||||
|
||||
<!-- Info lateral -->
|
||||
<aside class="contacto-info">
|
||||
|
||||
<div class="stack-4">
|
||||
<span class="label-caps text-primary">Teléfono</span>
|
||||
<div style="display:flex;align-items:center;gap:var(--space-4);">
|
||||
<span class="material-symbols-outlined text-primary">call</span>
|
||||
<p class="text-muted">+34 678 17 15 13</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-4">
|
||||
<span class="label-caps text-primary">Email</span>
|
||||
<div style="display:flex;align-items:center;gap:var(--space-4);">
|
||||
<span class="material-symbols-outlined text-primary">mail</span>
|
||||
<p class="text-muted">eventos@mnqcatering.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-4">
|
||||
<span class="label-caps text-primary">WhatsApp</span>
|
||||
<div style="display:flex;align-items:center;gap:var(--space-4);">
|
||||
<span class="material-symbols-outlined text-primary">chat</span>
|
||||
<p class="text-muted">Canal exclusivo de atención</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-left-gold" style="padding-block:var(--space-4);">
|
||||
<p class="text-headline-md text-primary italic">
|
||||
"Excelencia en cada detalle, pasión en cada plato."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20hablar%20sobre%20mi%20evento"
|
||||
class="btn btn-primary"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
style="width:fit-content;"
|
||||
>
|
||||
Iniciar por WhatsApp
|
||||
</a>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- Formulario -->
|
||||
<div>
|
||||
<form class="form-grid" aria-label="Formulario de contacto" method="dialog">
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="nombre">Nombre Completo</label>
|
||||
<input class="form-input" id="nombre" name="nombre" type="text" placeholder="Ej. Javier Sotomayor" />
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="email">Correo Electrónico</label>
|
||||
<input class="form-input" id="email" name="email" type="email" placeholder="javier@empresa.com" />
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="tipo">Tipo de Evento</label>
|
||||
<select class="form-select" id="tipo" name="tipo">
|
||||
<option value="">Seleccione una opción</option>
|
||||
<option value="boda">Boda</option>
|
||||
<option value="corporativo">Evento Corporativo</option>
|
||||
<option value="social">Celebración Social</option>
|
||||
<option value="otro">Otro</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="fecha">Fecha Estimada</label>
|
||||
<input class="form-input" id="fecha" name="fecha" type="date" />
|
||||
</div>
|
||||
|
||||
<div class="form-field form-span-full">
|
||||
<label class="form-label" for="mensaje">Mensaje o Requerimientos Especiales</label>
|
||||
<textarea
|
||||
class="form-textarea"
|
||||
id="mensaje"
|
||||
name="mensaje"
|
||||
rows="5"
|
||||
placeholder="Cuéntenos más sobre su visión..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-span-full" style="display:flex;justify-content:flex-end;">
|
||||
<button type="submit" class="btn-underline" style="display:inline-flex;align-items:center;gap:var(--space-3);">
|
||||
Enviar Solicitud
|
||||
<span class="material-symbols-outlined">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</MainLayout>
|
||||
|
||||
<style>
|
||||
/* Hero */
|
||||
.contacto-hero {
|
||||
padding-top: calc(var(--nav-h) + var(--space-section));
|
||||
padding-bottom: var(--space-section);
|
||||
}
|
||||
|
||||
.contacto-hero-grid {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
}
|
||||
|
||||
.contacto-hero-img {
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
|
||||
/* Contact layout */
|
||||
.contacto-grid {
|
||||
display: grid;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
||||
.contacto-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-10);
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.contacto-hero-grid {
|
||||
grid-template-columns: 7fr 5fr;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contacto-grid {
|
||||
grid-template-columns: 2fr 3fr;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user