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
+144
-6
@@ -2,11 +2,149 @@
|
||||
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>
|
||||
<MainLayout
|
||||
title="Nosotros | MNQ Catering y Evento"
|
||||
description="El arte de la hospitalidad elevada. Descubra la filosofía, valores y equipo detrás de MNQ Catering y Evento."
|
||||
activeNav="nosotros"
|
||||
>
|
||||
|
||||
<!-- ─── HERO EDITORIAL ─── -->
|
||||
<section class="section-pad" style="padding-top:calc(var(--nav-h) + var(--space-section));">
|
||||
<div class="page-wrap">
|
||||
<div class="nosotros-hero-grid">
|
||||
|
||||
<div class="nosotros-text">
|
||||
<span class="section-eyebrow">Nuestra Esencia</span>
|
||||
<h1 class="text-display" style="margin-bottom:var(--space-8);">El arte de la hospitalidad elevada.</h1>
|
||||
<p class="text-muted leading-relaxed" style="max-width:32rem;">
|
||||
Desde nuestra fundación, MNQ Catering ha redefinido el concepto de exclusividad culinaria. No solo servimos comida; curamos momentos que perduran en la memoria de los paladares más exigentes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="nosotros-image" style="position:relative;">
|
||||
<div class="overflow-hidden rounded-lg" style="aspect-ratio:4/3;">
|
||||
<img
|
||||
src="/images/generated/hero-nosotros-gen.jpg"
|
||||
alt="Chef ejecutiva MNQ — el arte de la hospitalidad"
|
||||
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
<div class="quote-card-desktop border-outline-soft" style="position:absolute;bottom:-2.5rem;left:-2.5rem;background:var(--color-surface-container);padding:var(--space-10);display:none;">
|
||||
<p class="text-headline-md text-primary italic">"La perfección no es un acto, es un hábito."</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── FILOSOFÍA ─── -->
|
||||
<section class="section-pad bg-container-low" style="border-top:1px solid rgb(208 197 175/10%);border-bottom:1px solid rgb(208 197 175/10%);">
|
||||
<div class="page-wrap">
|
||||
<div class="grid-2" style="gap:var(--space-16);">
|
||||
<h2 class="text-headline-lg" style="margin-bottom:var(--space-8);">Filosofía de Exclusividad</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-6);">
|
||||
<p class="text-muted leading-relaxed">Creemos que cada evento tiene su propia alma. Nuestra filosofía se basa en la escucha activa y la personalización radical. En un mundo de producciones en serie, MNQ apuesta por lo artesanal, lo local y lo extraordinario.</p>
|
||||
<p class="text-muted leading-relaxed">Cada ingrediente es seleccionado por su trazabilidad y calidad superior, trabajando codo a codo con productores que comparten nuestra pasión por la excelencia.</p>
|
||||
<div style="padding-top:var(--space-4);">
|
||||
<a href="/contacto" class="btn-underline" style="display:inline-flex;align-items:center;gap:var(--space-3);">Explorar Menú de Autor</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── VALORES ─── -->
|
||||
<section class="section-pad">
|
||||
<div class="page-wrap">
|
||||
<div style="text-align:center;margin-bottom:var(--space-24);">
|
||||
<span class="section-eyebrow">Pilares de Marca</span>
|
||||
<h2 class="text-headline-lg">Valores que nos definen</h2>
|
||||
</div>
|
||||
<div class="grid-3">
|
||||
<div class="value-card">
|
||||
<span class="material-symbols-outlined text-primary icon-lg">verified</span>
|
||||
<h3 class="text-headline-md">Calidad</h3>
|
||||
<p class="text-body-sm text-muted leading-relaxed">Innegociable. Desde la frescura del producto hasta el último detalle del servicio de sala.</p>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<span class="material-symbols-outlined text-primary icon-lg">history_edu</span>
|
||||
<h3 class="text-headline-md">Tradición</h3>
|
||||
<p class="text-body-sm text-muted leading-relaxed">Honramos las técnicas clásicas que han forjado la gran cocina, aplicándolas con respeto.</p>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<span class="material-symbols-outlined text-primary icon-lg">architecture</span>
|
||||
<h3 class="text-headline-md">Vanguardia</h3>
|
||||
<p class="text-body-sm text-muted leading-relaxed">Innovamos en presentaciones y texturas para sorprender a los paladares contemporáneos.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── EQUIPO ─── -->
|
||||
<section class="section-pad bg-inverse" style="overflow:hidden;">
|
||||
<div class="page-wrap">
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-20);">
|
||||
<div>
|
||||
<span class="section-eyebrow" style="color:var(--color-primary-fixed);">El Capital Humano</span>
|
||||
<h2 class="text-headline-lg" style="color:var(--color-surface);">Mentes tras el menú</h2>
|
||||
</div>
|
||||
<p class="text-body-sm" style="color:rgb(234 225 212/80%);max-width:24rem;">Un equipo multidisciplinar de chefs, sommeliers y diseñadores de eventos unidos por un propósito común.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-4">
|
||||
{[
|
||||
{ nombre: 'Mateo Navarro', rol: 'Director Ejecutivo', src: '/images/generated/gallery-2.jpg', pos: 'center top' },
|
||||
{ nombre: 'Lucía Quintana', rol: 'Chef Creativa', src: '/images/generated/hero-nosotros-gen.jpg', pos: 'center top' },
|
||||
{ nombre: 'Julián Marín', rol: 'Head Sommelier', src: '/images/foto-canapes.png', pos: 'center 30%' },
|
||||
{ nombre: 'Elena Soler', rol: 'Diseño de Experiencias', src: '/images/foto-plato-mnq.png', pos: 'center top' },
|
||||
].map(({ nombre, rol, src, pos }) => (
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-6);">
|
||||
<div class="overflow-hidden team-card" style="aspect-ratio:3/4;">
|
||||
<img
|
||||
src={src}
|
||||
alt={nombre}
|
||||
style={`width:100%;height:100%;object-fit:cover;object-position:${pos};filter:grayscale(1);transition:filter 700ms;`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 style="font-size:1.25rem;color:var(--color-surface);font-family:var(--font-serif);margin-bottom:var(--space-1);">{nombre}</h4>
|
||||
<p class="label-caps" style="font-size:0.625rem;color:var(--color-primary-fixed);">{rol}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── CTA ─── -->
|
||||
<section class="section-pad" style="text-align:center;">
|
||||
<div class="page-wrap">
|
||||
<div style="max-width:40rem;margin-inline:auto;">
|
||||
<h2 class="text-display" style="margin-bottom:var(--space-8);">¿Planeamos algo extraordinario?</h2>
|
||||
<p class="text-muted" style="margin-bottom:var(--space-12);">Estamos listos para transformar su visión en una realidad gastronómica sin precedentes.</p>
|
||||
<a href="/contacto" class="btn btn-primary" style="min-width:18rem;">Solicitar Dosier Exclusivo</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</MainLayout>
|
||||
|
||||
<style>
|
||||
.team-card:hover img { filter: grayscale(0) !important; }
|
||||
|
||||
.nosotros-hero-grid {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.nosotros-hero-grid {
|
||||
grid-template-columns: 5fr 7fr;
|
||||
align-items: center;
|
||||
}
|
||||
.quote-card-desktop { display: block !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user