Manuel
3917fe3997
Swap the lead team photo with the service/montaje photo (and give the displaced group photo a spot in the support grid instead of dropping it). Also remove the always-visible WhatsApp pill from the desktop header nav since it duplicated the floating WhatsApp CTA and the mobile drawer's own WhatsApp button.
347 lines
13 KiB
Plaintext
347 lines
13 KiB
Plaintext
---
|
|
import MainLayout from '../layouts/MainLayout.astro';
|
|
|
|
import Icon from '../components/Icon.astro';
|
|
|
|
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
|
|
|
|
const heroPhoto = {
|
|
src: '/images/nosotros-hero.webp',
|
|
alt: 'Responsable de MNQ acompañando la puesta a punto de un evento nocturno',
|
|
width: 1014,
|
|
height: 747,
|
|
};
|
|
|
|
const teamGallery = {
|
|
lead: {
|
|
src: '/images/team/mnq-team-service.jpg',
|
|
alt: 'Montaje y coordinación del servicio de MNQ',
|
|
width: 1080,
|
|
height: 1440,
|
|
pos: 'center 28%',
|
|
},
|
|
support: [
|
|
{
|
|
src: '/images/team/mnq-team-lead.webp',
|
|
alt: 'Equipo de MNQ durante un servicio',
|
|
width: 1439,
|
|
height: 1919,
|
|
pos: 'center 24%',
|
|
caption: 'Equipo al completo, listo para acompañar el servicio.',
|
|
},
|
|
{
|
|
src: '/images/team/mnq-team-kitchen.webp',
|
|
alt: 'Preparación gastronómica del equipo de MNQ',
|
|
width: 1439,
|
|
height: 1439,
|
|
pos: 'center center',
|
|
caption: 'Cocina en movimiento, detalle en cada pase.',
|
|
},
|
|
],
|
|
};
|
|
---
|
|
|
|
<MainLayout
|
|
title="Nosotros | MNQ Catering y Evento"
|
|
description="Conozca el equipo real de MNQ Catering y Evento: oficio, cercanía y una hospitalidad cuidada en cada servicio."
|
|
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 reveal">Nuestra Esencia</span>
|
|
<h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-8);">Hospitalidad con oficio, calma y cercanía.</h1>
|
|
<p class="text-muted leading-relaxed" style="max-width:32rem;">
|
|
En MNQ cada evento se construye desde dentro: cocina en movimiento, coordinación real y un equipo que cuida el ambiente con discreción. Nos importa que todo salga bien y que se sienta natural.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="nosotros-image" style="position:relative;">
|
|
<div class="overflow-hidden rounded-lg" style="aspect-ratio:4/3;">
|
|
<img
|
|
src={heroPhoto.src}
|
|
alt={heroPhoto.alt}
|
|
width={heroPhoto.width}
|
|
height={heroPhoto.height}
|
|
style="width:100%;height:100%;object-fit:cover;object-position:center;"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
/>
|
|
</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">"Detrás de cada servicio hay manos reales, ritmo y mucho cuidado."</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 servicio</h2>
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-6);">
|
|
<p class="text-muted leading-relaxed">Creemos que un buen catering no solo se nota en el plato: también se nota en cómo acompaña, en cómo resuelve y en la tranquilidad que deja a quien organiza el evento.</p>
|
|
<p class="text-muted leading-relaxed">Trabajamos con producto bien seleccionado, proveedores de confianza y una coordinación muy cuidada para que cocina, sala y montaje hablen el mismo idioma.</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 propuesta gastronómica</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 reveal">Pilares de Marca</span>
|
|
<h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">Valores que nos definen</h2>
|
|
</div>
|
|
<div class="grid-3">
|
|
<div class="value-card value-card-animate" data-value-delay="0">
|
|
<Icon name="verified" class="text-primary icon-lg" />
|
|
<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 value-card-animate" data-value-delay="150">
|
|
<Icon name="history-edu" class="text-primary icon-lg" />
|
|
<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 value-card-animate" data-value-delay="300">
|
|
<Icon name="architecture" class="text-primary icon-lg" />
|
|
<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-container-low team-gallery-section" style="overflow:hidden;">
|
|
<div class="page-wrap">
|
|
<div class="team-gallery-grid">
|
|
<div class="team-gallery-copy">
|
|
<div>
|
|
<span class="section-eyebrow reveal">El Equipo</span>
|
|
<h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">Personas reales detrás de cada servicio</h2>
|
|
</div>
|
|
<p class="text-muted leading-relaxed">Nos gusta que quien nos contrata sienta que hay un equipo presente, resolutivo y cercano. Desde la primera conversación hasta el último detalle del montaje, acompañamos con calma y criterio.</p>
|
|
<p class="text-muted leading-relaxed">Esta galería muestra parte de esa energía de trabajo: menos pose, más coordinación, más cocina viva y más confianza en el trato.</p>
|
|
|
|
<div class="team-trust-points">
|
|
<div class="team-trust-point">
|
|
<span class="label-caps">Cercanía</span>
|
|
<p class="text-body-sm text-muted">Comunicación clara y acompañamiento real durante todo el proceso.</p>
|
|
</div>
|
|
<div class="team-trust-point">
|
|
<span class="label-caps">Coordinación</span>
|
|
<p class="text-body-sm text-muted">Cocina, sala y montaje trabajando con un mismo ritmo.</p>
|
|
</div>
|
|
<div class="team-trust-point">
|
|
<span class="label-caps">Presencia</span>
|
|
<p class="text-body-sm text-muted">Un servicio atento y discreto para que el evento fluya sin tensión.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding-top:var(--space-2);">
|
|
<a
|
|
href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20hablar%20con%20el%20equipo%20sobre%20mi%20evento"
|
|
class="btn-underline"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label={whatsappAriaLabel}
|
|
>Hablar con el equipo</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="team-gallery-visuals">
|
|
<figure class="team-photo-card team-photo-lead">
|
|
<div class="overflow-hidden rounded-lg team-photo-frame" style="aspect-ratio:4/5;">
|
|
<img
|
|
src={teamGallery.lead.src}
|
|
alt={teamGallery.lead.alt}
|
|
width={teamGallery.lead.width}
|
|
height={teamGallery.lead.height}
|
|
style={`width:100%;height:100%;object-fit:cover;object-position:${teamGallery.lead.pos};`}
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<figcaption class="team-photo-caption">Coordinación cercana, montaje cuidado y una forma de trabajar que se nota en el ambiente.</figcaption>
|
|
</figure>
|
|
|
|
<div class="team-support-grid">
|
|
{teamGallery.support.map(({ src, alt, width, height, pos, caption }) => (
|
|
<figure class="team-photo-card">
|
|
<div class="overflow-hidden rounded-lg team-photo-frame" style="aspect-ratio:1/1;">
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
style={`width:100%;height:100%;object-fit:cover;object-position:${pos};`}
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<figcaption class="team-photo-caption">{caption}</figcaption>
|
|
</figure>
|
|
))}
|
|
</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>
|
|
.nosotros-hero-grid {
|
|
display: grid;
|
|
gap: var(--space-12);
|
|
}
|
|
|
|
.team-gallery-section {
|
|
border-top: 1px solid rgb(208 197 175 / 16%);
|
|
border-bottom: 1px solid rgb(208 197 175 / 16%);
|
|
}
|
|
|
|
.team-gallery-grid {
|
|
display: grid;
|
|
gap: var(--space-12);
|
|
}
|
|
|
|
.team-gallery-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.team-trust-points {
|
|
display: grid;
|
|
gap: var(--space-5);
|
|
padding: var(--space-8) 0;
|
|
border-top: 1px solid rgb(208 197 175 / 28%);
|
|
border-bottom: 1px solid rgb(208 197 175 / 28%);
|
|
}
|
|
|
|
.team-trust-point {
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.team-gallery-visuals {
|
|
display: grid;
|
|
gap: var(--space-8);
|
|
}
|
|
|
|
.team-support-grid {
|
|
display: grid;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.team-photo-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.team-photo-frame {
|
|
border: 1px solid rgb(208 197 175 / 22%);
|
|
background: var(--color-surface-container-high);
|
|
}
|
|
|
|
.team-photo-frame img {
|
|
transition: transform 700ms ease;
|
|
}
|
|
|
|
.team-photo-card:hover img {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.team-photo-caption {
|
|
font-size: var(--text-sm);
|
|
line-height: 1.6;
|
|
color: var(--color-on-surface-variant);
|
|
}
|
|
|
|
@media (min-width: 48rem) {
|
|
.nosotros-hero-grid {
|
|
grid-template-columns: 5fr 7fr;
|
|
align-items: center;
|
|
}
|
|
.quote-card-desktop { display: block !important; }
|
|
|
|
.team-trust-points {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.team-support-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 64rem) {
|
|
.team-gallery-grid {
|
|
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
|
align-items: start;
|
|
}
|
|
|
|
}
|
|
|
|
/* ─── VALUE CARD TIMELINE ANIMATION ──────────── */
|
|
.value-card-animate {
|
|
opacity: 0;
|
|
transform: translateY(20px) rotate(var(--card-tilt, 0deg));
|
|
transition:
|
|
opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
transition-delay: calc(var(--value-delay, 0) * 1ms);
|
|
}
|
|
|
|
.value-card-animate.visible {
|
|
opacity: 1;
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
|
|
.value-card-animate:nth-child(1) { --card-tilt: 0deg; }
|
|
.value-card-animate:nth-child(2) { --card-tilt: 0deg; }
|
|
.value-card-animate:nth-child(3) { --card-tilt: 0deg; }
|
|
|
|
/* subtle stacking effect */
|
|
@media (min-width: 48rem) {
|
|
.value-card-animate:nth-child(1) { --card-tilt: -1.5deg; }
|
|
.value-card-animate:nth-child(2) { --card-tilt: 0deg; }
|
|
.value-card-animate:nth-child(3) { --card-tilt: 1.5deg; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Override IntersectionObserver to also handle value-card timing
|
|
const valueCards = document.querySelectorAll('.value-card-animate');
|
|
valueCards.forEach((card) => {
|
|
const delay = (card as HTMLElement).dataset.valueDelay || '0';
|
|
(card as HTMLElement).style.setProperty('--value-delay', delay);
|
|
});
|
|
</script>
|