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
@@ -2,11 +2,159 @@
|
||||
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>
|
||||
<MainLayout
|
||||
title="Corporativo & Business | MNQ Catering y Evento"
|
||||
description="Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Lanzamientos, galas institucionales y coffee breaks premium."
|
||||
activeNav="corporativo"
|
||||
>
|
||||
|
||||
<!-- ─── HERO ─── -->
|
||||
<header style="padding-top:calc(var(--nav-h) + var(--space-section));padding-bottom:var(--space-section);overflow:hidden;">
|
||||
<div class="page-wrap">
|
||||
<div class="grid-12" style="align-items:center;gap:var(--space-8);">
|
||||
|
||||
<div style="grid-column:span 12;z-index:10;">
|
||||
<p class="section-eyebrow">Excelencia en Eventos</p>
|
||||
<h1 class="text-display" style="margin-bottom:var(--space-8);">Corporativo<br />& Business</h1>
|
||||
<p class="text-muted" style="max-width:32rem;line-height:1.7;margin-bottom:var(--space-10);">
|
||||
Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Desde lanzamientos de marca disruptivos hasta galas institucionales de alto nivel.
|
||||
</p>
|
||||
<div style="display:flex;gap:var(--space-6);flex-wrap:wrap;align-items:center;">
|
||||
<a href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" class="btn btn-primary" target="_blank" rel="noreferrer">Solicitar Propuesta</a>
|
||||
<a href="#servicios" class="btn-underline">Ver Servicios</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="grid-column:span 12;position:relative;height:28rem;">
|
||||
<img
|
||||
src="/images/foto-corporativo.png"
|
||||
alt="Eventos corporativos premium — MNQ"
|
||||
class="rounded-lg border-outline-soft"
|
||||
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ─── SERVICIOS BENTO ─── -->
|
||||
<section id="servicios" class="section-pad bg-container-low">
|
||||
<div class="page-wrap">
|
||||
<div style="text-align:center;margin-bottom:var(--space-16);">
|
||||
<h2 class="text-headline-lg">Servicios Especializados</h2>
|
||||
<div class="gold-line mx-auto" style="margin-top:var(--space-4);"></div>
|
||||
</div>
|
||||
|
||||
<div class="corp-bento">
|
||||
|
||||
<div class="bento-card corp-wide">
|
||||
<img src="/images/foto-corporativo.png" alt="Lanzamientos de marca" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;" loading="lazy" />
|
||||
<div class="bento-card-overlay"></div>
|
||||
<div class="bento-card-body">
|
||||
<h3 class="text-headline-md" style="color:var(--color-on-surface);">Lanzamientos de Marca</h3>
|
||||
<p class="text-muted" style="max-width:28rem;">Impacto visual y conceptual para presentaciones que trascienden.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bento-card corp-tall">
|
||||
<img src="/images/generated/gallery-2.jpg" alt="Coffee Breaks Premium" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;" loading="lazy" />
|
||||
<div class="bento-card-overlay"></div>
|
||||
<div class="bento-card-body">
|
||||
<h3 class="text-headline-md" style="color:var(--color-on-surface);">Coffee Breaks Premium</h3>
|
||||
<p class="text-muted">Pausas que inspiran productividad y networking de calidad.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bento-card corp-wide">
|
||||
<img src="/images/foto-bodas.png" alt="Galas y Cenas Anuales" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;" loading="lazy" />
|
||||
<div class="bento-card-overlay"></div>
|
||||
<div class="bento-card-body">
|
||||
<h3 class="text-headline-md" style="color:var(--color-on-surface);">Galas & Cenas Anuales</h3>
|
||||
<p class="text-muted" style="max-width:28rem;">Protocolo impecable para los momentos más solemnes de su organización.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── EMPRESAS ─── -->
|
||||
<section class="section-pad-sm bg-surface">
|
||||
<div class="page-wrap" style="text-align:center;">
|
||||
<p class="label-caps text-muted" style="margin-bottom:var(--space-12);opacity:0.8;">Empresas que confían en nuestra visión</p>
|
||||
<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-16);opacity:0.4;filter:grayscale(1);">
|
||||
<span style="font-size:1.5rem;font-weight:700;letter-spacing:0.2em;color:var(--color-on-surface-variant);">LUMINA</span>
|
||||
<span style="font-size:1.5rem;font-style:italic;color:var(--color-on-surface-variant);">Vanguard</span>
|
||||
<span style="font-size:1.5rem;font-weight:900;text-transform:uppercase;color:var(--color-on-surface-variant);">Ethereal.</span>
|
||||
<span style="font-size:1.5rem;color:var(--color-on-surface-variant);">Nordic Corp</span>
|
||||
<span style="font-size:1.5rem;letter-spacing:-0.03em;color:var(--color-on-surface-variant);">Apex Sol.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── FORMULARIO COTIZACIÓN ─── -->
|
||||
<section class="section-pad bg-container-high" style="position:relative;overflow:hidden;">
|
||||
<div class="page-wrap" style="position:relative;z-index:10;">
|
||||
<div class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-12) var(--space-10);max-width:52rem;margin-inline:auto;">
|
||||
<div style="text-align:center;margin-bottom:var(--space-16);">
|
||||
<h2 class="text-headline-lg" style="margin-bottom:var(--space-4);">Cotización Corporativa</h2>
|
||||
<p class="text-muted">Diseñamos una propuesta a la medida de sus objetivos empresariales.</p>
|
||||
</div>
|
||||
<form class="form-grid" aria-label="Formulario cotización corporativa" method="dialog">
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="empresa">Empresa</label>
|
||||
<input class="form-input" id="empresa" name="empresa" type="text" placeholder="Nombre de su empresa" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="email-corp">Correo Corporativo</label>
|
||||
<input class="form-input" id="email-corp" name="email" type="email" placeholder="nombre@empresa.com" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="tipo-corp">Tipo de Evento</label>
|
||||
<select class="form-select" id="tipo-corp" name="tipo">
|
||||
<option value="">Tipo de Evento</option>
|
||||
<option>Lanzamiento de Marca</option>
|
||||
<option>Gala / Cena</option>
|
||||
<option>Coffee Break</option>
|
||||
<option>Otro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="asistentes">Nº Asistentes</label>
|
||||
<input class="form-input" id="asistentes" name="asistentes" type="number" placeholder="Cantidad estimada" min="1" />
|
||||
</div>
|
||||
<div class="form-field form-span-full">
|
||||
<label class="form-label" for="detalles">Detalles Adicionales</label>
|
||||
<textarea class="form-textarea" id="detalles" name="detalles" rows="3" placeholder="Cuéntenos sus objetivos y requerimientos..."></textarea>
|
||||
</div>
|
||||
<div class="form-span-full" style="display:flex;justify-content:center;padding-top:var(--space-8);">
|
||||
<button type="submit" class="btn btn-primary" style="min-width:16rem;">Enviar Solicitud</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute;top:0;right:-4rem;width:30%;height:100%;background:rgb(208 197 175/10%);transform:skewX(-10deg);pointer-events:none;"></div>
|
||||
</section>
|
||||
|
||||
</MainLayout>
|
||||
|
||||
<style>
|
||||
.corp-bento {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
.corp-wide, .corp-tall { position: relative; min-height: 20rem; }
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.corp-bento {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 22rem 22rem;
|
||||
}
|
||||
.corp-wide { grid-column: span 2; }
|
||||
.corp-tall { grid-row: span 2; }
|
||||
[style*="grid-column:span 12"] { grid-column: span 6 !important; }
|
||||
[style*="height:28rem"] { height: 36rem !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user