qreastech/MNQ-Catering-y-Evento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: improve seo, trust signals, and performance

Browse Source
This commit is contained in:
Manuel
2026-07-20 12:07:23 +02:00
parent 49f391ee49
commit faed590a66
27 changed files with 1444 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Icon.astro
+88
View File
@@ -0,0 +1,88 @@
---
interface Props {
name:
| 'architecture'
| 'arrow-forward'
| 'auto-awesome'
| 'call'
| 'chat'
| 'history-edu'
| 'language'
| 'local-florist'
| 'restaurant-menu'
| 'verified';
class?: string;
size?: number;
}
const { name, class: className, size = 20 } = Astro.props;
const icons: Record<Props['name'], { viewBox: string; markup: string }> = {
architecture: {
viewBox: '0 0 24 24',
markup:
'<path d="M3 21h18" /><path d="M5 21V9" /><path d="M19 21V9" /><path d="M8 21v-5" /><path d="M12 21v-5" /><path d="M16 21v-5" /><path d="M4 9h16" /><path d="M12 3 3 9h18L12 3Z" />',
},
'arrow-forward': {
viewBox: '0 0 24 24',
markup: '<path d="M5 12h14" /><path d="m13 6 6 6-6 6" />',
},
'auto-awesome': {
viewBox: '0 0 24 24',
markup:
'<path d="m12 3 1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3Z" /><path d="m19 14 .8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14Z" /><path d="m5 14 .8 2.2L8 17l-2.2.8L5 20l-.8-2.2L2 17l2.2-.8L5 14Z" />',
},
call: {
viewBox: '0 0 24 24',
markup:
'<path d="M4.5 6.8c0 7 5.7 12.7 12.7 12.7h1.9a1.4 1.4 0 0 0 1.4-1.4v-2.4a1.4 1.4 0 0 0-1.2-1.4l-3.2-.4a1.4 1.4 0 0 0-1.4.8l-.7 1.4a11.4 11.4 0 0 1-6.1-6.1l1.4-.7a1.4 1.4 0 0 0 .8-1.4l-.4-3.2A1.4 1.4 0 0 0 8.3 3.5H5.9A1.4 1.4 0 0 0 4.5 4.9v1.9Z" />',
},
chat: {
viewBox: '0 0 24 24',
markup:
'<path d="M7 18H4a1 1 0 0 1-1-1V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4H9l-4 4v-3Z" /><path d="M8 9h8" /><path d="M8 13h5" />',
},
'history-edu': {
viewBox: '0 0 24 24',
markup:
'<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21.5V5.5Z" /><path d="M8 7h7" /><path d="M8 11h8" /><path d="M8 15h5" /><path d="M4 21.5A2.5 2.5 0 0 1 6.5 19" />',
},
language: {
viewBox: '0 0 24 24',
markup:
'<path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z" /><path d="M3 12h18" /><path d="M12 3a14.5 14.5 0 0 1 0 18" /><path d="M12 3a14.5 14.5 0 0 0 0 18" />',
},
'local-florist': {
viewBox: '0 0 24 24',
markup:
'<path d="M12 13.5c1.8-2.1 4.5-2.7 5.8-1.4 1.3 1.3.7 4-1.4 5.8-2.1 1.8-4.8 2.2-6.1.9-1.3-1.3-.9-4 .9-6.1.2-.2.5-.5.8-.7Z" /><path d="M12 13.5c-1.8-2.1-4.5-2.7-5.8-1.4-1.3 1.3-.7 4 1.4 5.8 2.1 1.8 4.8 2.2 6.1.9 1.3-1.3.9-4-.9-6.1-.2-.2-.5-.5-.8-.7Z" /><path d="M12 13.5c2.7-.8 4.4-2.9 3.8-4.7-.6-1.8-3.4-2.5-6.1-1.7-2.7.8-4.4 2.9-3.8 4.7.6 1.8 3.4 2.5 6.1 1.7Z" /><path d="M12 13.5V21" /><path d="M10 21h4" />',
},
'restaurant-menu': {
viewBox: '0 0 24 24',
markup:
'<path d="M6 3v7" /><path d="M9 3v7" /><path d="M6 7h3" /><path d="M7.5 10v11" /><path d="M15 3c1.7 2 2.5 4.1 2.5 6.3V21" /><path d="M15 10.5c-1.4 0-2.5-1.1-2.5-2.5S13.6 5.5 15 5.5" />',
},
verified: {
viewBox: '0 0 24 24',
markup:
'<path d="m9 12 2 2 4-4" /><path d="M12 3.5 14.6 5l3-.2 1 2.8 2.4 1.8-1 2.8 1 2.8-2.4 1.8-1 2.8-3-.2-2.6 1.5-2.6-1.5-3 .2-1-2.8L3 15.9l1-2.8-1-2.8 2.4-1.8 1-2.8 3 .2L12 3.5Z" />',
},
};
const icon = icons[name];
---
<svg
class:list={['icon', className]}
style={`--icon-size:${size}px;`}
viewBox={icon.viewBox}
fill="none"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
focusable="false"
set:html={icon.markup}
/>
src/components/SiteFooter.astro
+13 -2
View File
@@ -1,3 +1,7 @@
---
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
---
<footer class="site-footer">
<div class="page-wrap">
<div class="footer-inner">
@@ -5,12 +9,18 @@
<div class="footer-brand">
<a href="/" aria-label="MNQ Catering y Eventos">
<img
src="/images/logo-secondary.png"
src="/images/logo-secondary.webp"
alt="MNQ Catering y Eventos"
width="224"
height="224"
style="height: 3.5rem; width: auto; mix-blend-mode: multiply; margin-bottom: 1rem;"
/>
</a>
<p>© 2025 MNQ Catering y Evento. Excelencia culinaria para los momentos más importantes de su vida.</p>
<div style="display:flex;flex-direction:column;gap:0.35rem;margin-top:var(--space-4);">
<a href="tel:+34678171513" class="footer-link" style="width:fit-content;">+34 678 17 15 13</a>
<a href="https://mnq.elkazurrotaberna.es" class="footer-link" style="width:fit-content;">mnq.elkazurrotaberna.es</a>
</div>
</div>
<div class="footer-links">
@@ -29,6 +39,7 @@
class="footer-link"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
>WhatsApp</a>
<a href="/privacidad" class="footer-link">Privacidad</a>
<a href="/cookies" class="footer-link">Cookies</a>
@@ -38,7 +49,7 @@
</div>
<div class="footer-bottom">
<p class="text-body-sm text-muted opacity-60">
<p class="text-body-sm">
Excelencia culinaria · Diseño de eventos · Gastronomía de autor
</p>
</div>
src/components/SiteHeader.astro
+5 -2
View File
@@ -3,6 +3,7 @@ interface Props {
activeNav?: string;
}
const { activeNav } = Astro.props;
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
const links = [
{ href: '/bodas-reales', label: 'Bodas', key: 'bodas' },
@@ -21,8 +22,8 @@ const links = [
src="/images/logo-nav-dark.webp"
alt="MNQ Catering y Eventos"
class="site-logo-banner"
width="220"
height="85"
width="600"
height="232"
/>
</a>
@@ -42,6 +43,7 @@ const links = [
class="btn btn-pill nav-wa"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
>
WhatsApp
</a>
@@ -69,6 +71,7 @@ const links = [
class="btn btn-primary mobile-wa"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
style="width: 100%; justify-content: center; margin-top: 0.5rem;"
>
Consultar por WhatsApp
src/components/WhatsAppButton.astro
+7 -3
View File
@@ -1,12 +1,16 @@
---
import Icon from './Icon.astro';
---
<a
class="whatsapp-float"
href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
target="_blank"
rel="noreferrer"
aria-label="Consultar por WhatsApp"
aria-label="Contactar con MNQ por WhatsApp"
>
<span>Consultar via WhatsApp</span>
<span>Contactar por WhatsApp</span>
<span class="whatsapp-float-icon" aria-hidden="true">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">chat</span>
<Icon name="chat" size={18} />
</span>
</a>
src/layouts/MainLayout.astro
+62 -7
View File
@@ -14,33 +14,83 @@ interface Props {
title: string;
description?: string;
activeNav?: string;
canonical?: string;
ogImage?: string;
robots?: string;
structuredData?: Record<string, unknown> | Array<Record<string, unknown>>;
}
const {
title,
description = 'MNQ Catering y Evento · Experiencias gastronómicas premium para bodas, eventos corporativos y celebraciones familiares.',
activeNav,
canonical,
ogImage = '/images/foto-bodas.jpg',
robots = 'index,follow',
structuredData,
} = Astro.props;
const site = Astro.site ?? new URL('https://mnq.elkazurrotaberna.es');
const canonicalUrl = new URL(canonical ?? Astro.url.pathname, site).toString();
const ogImageUrl = new URL(ogImage, site).toString();
const baseStructuredData = {
'@context': 'https://schema.org',
'@type': 'CateringService',
name: 'MNQ Catering y Evento',
url: site.origin,
description:
'Servicio de catering para bodas, eventos corporativos y reuniones familiares con enfoque premium.',
telephone: '+34 678 17 15 13',
serviceType: ['Bodas', 'Eventos corporativos', 'Reuniones familiares'],
contactPoint: {
'@type': 'ContactPoint',
contactType: 'customer service',
telephone: '+34 678 17 15 13',
availableLanguage: ['es'],
},
};
const structuredDataScripts = [
baseStructuredData,
...((Array.isArray(structuredData)
? structuredData
: structuredData
? [structuredData]
: []) as Array<Record<string, unknown>>),
];
---
<!doctype html>
<html lang="es-AR">
<html lang="es-ES">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<meta name="description" content={description} />
<meta name="robots" content={robots} />
<link rel="canonical" href={canonicalUrl} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:image" content={ogImageUrl} />
<meta property="og:site_name" content="MNQ Catering y Evento" />
<meta property="og:locale" content="es_ES" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImageUrl} />
<link rel="icon" type="image/png" href="/images/logo-ojo-transparent.webp" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
{
structuredDataScripts.map((schema) => (
<script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />
))
}
</head>
<body class="page-ready">
@@ -83,7 +133,7 @@ const {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
progressBar.style.width = `${progress}%`;
progressBar.style.transform = `scaleX(${progress / 100})`;
progressBar.setAttribute('aria-valuenow', String(Math.round(progress)));
};
window.addEventListener('scroll', updateProgress, { passive: true });
@@ -96,6 +146,8 @@ const {
// Fade OUT: intercept internal navigation links
const handleNavClick = (e: MouseEvent) => {
if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
const target = e.target as HTMLElement;
const anchor = target.closest('a');
if (!anchor) return;
@@ -114,6 +166,9 @@ const {
} else {
// Reduced motion: show immediately, no transitions
document.querySelectorAll('.reveal, .reveal-left, .reveal-scale, .gold-line, .section-eyebrow, .value-card-animate').forEach((el) => {
el.classList.add('visible');
});
document.body.classList.add('page-ready');
}
</script>
src/pages/bodas-reales.astro
+112 -5
View File
@@ -1,11 +1,46 @@
---
import MainLayout from '../layouts/MainLayout.astro';
import Icon from '../components/Icon.astro';
const weddingFaqs = [
{
question: '¿Cómo se construye una propuesta de boda?',
answer:
'Partimos de la fecha, el lugar, el número estimado de invitados y el tipo de servicio deseado para plantear una propuesta personalizada.',
},
{
question: '¿El presupuesto incluye solo comida?',
answer:
'La propuesta puede contemplar cocina, servicio, menaje y necesidades de montaje, según lo que requiera la celebración.',
},
{
question: '¿Cuándo se confirma la viabilidad del evento?',
answer:
'Después de revisar disponibilidad de fecha, condiciones del espacio y necesidades logísticas del servicio.',
},
];
const weddingStructuredData = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: weddingFaqs.map((faq) => ({
'@type': 'Question',
name: faq.question,
acceptedAnswer: {
'@type': 'Answer',
text: faq.answer,
},
})),
};
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
---
<MainLayout
title="Bodas Reales | MNQ Catering y Evento"
description="Creamos banquetes de boda inolvidables. Menú de autor, ambientación gastronómica y servicio impecable para el día más especial de su vida."
activeNav="bodas"
structuredData={weddingStructuredData}
>
<!-- ─── HERO ─── -->
@@ -15,6 +50,8 @@ import MainLayout from '../layouts/MainLayout.astro';
alt="Bodas Reales — MNQ Catering"
class="hero-bg"
style="object-position: center 40%;"
width="1264"
height="848"
loading="eager"
fetchpriority="high"
/>
@@ -27,6 +64,27 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
</section>
<section class="section-pad-sm bg-container-low">
<div class="page-wrap">
<div class="wedding-detail-grid">
<div>
<span class="section-eyebrow">Planificación</span>
<h2 class="text-headline-lg" style="margin-top:var(--space-4);">Una boda cuidada también necesita información concreta</h2>
</div>
<div class="stack-6">
<p class="text-muted" style="line-height:1.8;">
Para diseñar una propuesta coherente revisamos fecha, espacio, número aproximado de invitados, secuencia del servicio y necesidades reales de montaje. Así evitamos presupuestos genéricos y trabajamos una propuesta que responda al ritmo de la celebración.
</p>
<ul class="wedding-facts">
<li><strong>Formato:</strong> cóctel, banquete, recena o una combinación adaptada al desarrollo de la boda.</li>
<li><strong>Propuesta económica:</strong> se calcula según menú, servicio, menaje, tiempos y desplazamiento.</li>
<li><strong>Viabilidad:</strong> la confirmamos tras revisar disponibilidad y condiciones del espacio.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ─── NARRATIVA ─── -->
<section class="section-pad">
<div class="page-wrap">
@@ -59,7 +117,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/foto-bodas.jpg"
alt="Salón de bodas dorado — MNQ"
width="1264"
height="848"
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;"
loading="lazy"
decoding="async"
/>
<div class="bento-card-overlay"></div>
<div class="bento-card-body">
@@ -73,7 +135,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/gallery-4.webp"
alt="Mesa de boda con flores"
width="1024"
height="1024"
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"
loading="lazy"
decoding="async"
/>
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/55%),transparent);"></div>
<div class="bento-card-body"><span class="label-caps text-white">Detalles Florales</span></div>
@@ -83,7 +149,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/gallery-1.webp"
alt="Postre de autor"
width="1024"
height="1024"
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"
loading="lazy"
decoding="async"
/>
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/55%),transparent);"></div>
<div class="bento-card-body"><span class="label-caps text-white">Pastelería de Autor</span></div>
@@ -106,7 +176,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<div class="grid-3 arte-mesa-grid" style="align-items: start;">
<div style="text-align: center;">
<div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 100; aspect-ratio:4/5;margin-bottom:var(--space-6);">
<img src="/images/generated/gallery-4.webp" alt="Texturas nobles" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
<img src="/images/generated/gallery-4.webp" alt="Texturas nobles" style="width:100%;height:100%;object-fit:cover;" width="1024" height="1024" loading="lazy" decoding="async" />
</div>
<h4 class="text-headline-md" style="margin-bottom:var(--space-2);">Texturas Nobles</h4>
<p class="text-body-sm text-muted">Linos y sedas seleccionados por su caída y tacto excepcional.</p>
@@ -114,7 +184,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<div class="arte-stagger" style="text-align: center;">
<div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 250; aspect-ratio:4/5;margin-bottom:var(--space-6);">
<img src="/images/foto-canapes.jpg" alt="Canapés premium" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
<img src="/images/foto-canapes.jpg" alt="Canapés premium" style="width:100%;height:100%;object-fit:cover;" width="1264" height="848" loading="lazy" decoding="async" />
</div>
<h4 class="text-headline-md" style="margin-bottom:var(--space-2);">Cristal &amp; Oro</h4>
<p class="text-body-sm text-muted">Detalles metálicos que aportan un brillo atemporal a su celebración.</p>
@@ -122,7 +192,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<div class="arte-stagger-2" style="text-align: center;">
<div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 400; aspect-ratio:4/5;margin-bottom:var(--space-6);">
<img src="/images/generated/gallery-3.webp" alt="Platos de autor" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
<img src="/images/generated/gallery-3.webp" alt="Platos de autor" style="width:100%;height:100%;object-fit:cover;" width="1024" height="1024" loading="lazy" decoding="async" />
</div>
<h4 class="text-headline-md" style="margin-bottom:var(--space-2);">Platos de Autor</h4>
<p class="text-body-sm text-muted">Cada ingrediente es una nota en nuestra composición gastronómica.</p>
@@ -176,8 +246,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<div style="position:relative;z-index:10;">
<h2 class="text-display" style="color:var(--color-inverse-on-surface);margin-bottom:var(--space-8);">¿Comenzamos a planear su gran día?</h2>
<p style="color:rgb(248 240 226/80%);margin-bottom:var(--space-12);max-width:36rem;margin-inline:auto;">Solicite una asesoría personalizada y reciba un presupuesto a medida para su boda exclusiva.</p>
<a href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20boda" class="btn btn-dark" target="_blank" rel="noreferrer">
<span class="material-symbols-outlined">chat</span>
<a href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20boda" class="btn btn-dark" target="_blank" rel="noreferrer" aria-label={whatsappAriaLabel}>
<Icon name="chat" />
Consultar por WhatsApp
</a>
</div>
@@ -185,9 +255,40 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
</section>
<section class="section-pad-sm">
<div class="page-wrap" style="max-width:52rem;">
<div style="margin-bottom:var(--space-8);">
<span class="section-eyebrow">Preguntas frecuentes</span>
<h2 class="text-headline-lg" style="margin-top:var(--space-4);">Dudas habituales antes de solicitar una propuesta de boda</h2>
</div>
<div class="faq-list">
{weddingFaqs.map((faq) => (
<article class="faq-item">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">{faq.question}</h3>
<p class="text-muted" style="line-height:1.75;">{faq.answer}</p>
</article>
))}
</div>
</div>
</section>
</MainLayout>
<style>
.wedding-detail-grid,
.faq-list {
display: grid;
gap: var(--space-8);
}
.wedding-facts {
display: grid;
gap: var(--space-4);
padding-left: var(--space-6);
color: var(--color-on-surface-variant);
line-height: 1.75;
}
.bento-grid {
display: grid;
grid-template-columns: 1fr;
@@ -214,6 +315,12 @@ import MainLayout from '../layouts/MainLayout.astro';
}
@media (min-width: 48rem) {
.wedding-detail-grid {
grid-template-columns: 5fr 7fr;
align-items: start;
gap: var(--space-12);
}
.bento-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
src/pages/contacto.astro
+108 -7
View File
@@ -1,11 +1,46 @@
---
import MainLayout from '../layouts/MainLayout.astro';
import Icon from '../components/Icon.astro';
const contactFaqs = [
{
question: '¿Qué datos conviene enviar para pedir una propuesta?',
answer:
'Fecha estimada, lugar del evento, número aproximado de asistentes y el tipo de servicio que necesita.',
},
{
question: '¿Atienden bodas, eventos de empresa y celebraciones familiares?',
answer:
'Sí. Trabajamos propuestas a medida para bodas, formatos corporativos y encuentros familiares con necesidades distintas de servicio y montaje.',
},
{
question: '¿Cómo se confirma la cobertura de un evento?',
answer:
'La revisamos caso a caso según fecha, desplazamiento, formato del servicio y necesidades logísticas del espacio.',
},
];
const contactStructuredData = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: contactFaqs.map((faq) => ({
'@type': 'Question',
name: faq.question,
acceptedAnswer: {
'@type': 'Answer',
text: faq.answer,
},
})),
};
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
---
<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"
structuredData={contactStructuredData}
>
<!-- ─── HERO ─── -->
@@ -21,12 +56,17 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<p class="text-body-sm" style="margin-top:var(--space-6);max-width:34rem;color:var(--color-on-surface-variant);line-height:1.75;">
Atendemos cada solicitud con validación previa de fecha, formato del servicio y desplazamiento. Si comparte el lugar del evento y el número estimado de asistentes, podremos orientarle con más precisión desde el primer contacto.
</p>
</div>
<div class="contacto-hero-img overflow-hidden rounded-lg">
<img
src="/images/foto-bodas.jpg"
alt="MNQ Catering — salón de eventos premium"
width="1264"
height="848"
style="width:100%;height:100%;object-fit:cover;object-position:center 35%;"
loading="eager"
fetchpriority="high"
@@ -48,23 +88,23 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<Icon name="call" class="text-primary" />
<a class="text-muted contact-link" href="tel:+34678171513">+34 678 17 15 13</a>
</div>
</div>
<div class="stack-4">
<span class="label-caps text-primary">Email</span>
<span class="label-caps text-primary">Sitio web</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>
<Icon name="language" class="text-primary" />
<a class="text-muted contact-link" href="https://mnq.elkazurrotaberna.es">mnq.elkazurrotaberna.es</a>
</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>
<Icon name="chat" class="text-primary" />
<p class="text-muted">Canal exclusivo de atención</p>
</div>
</div>
@@ -80,6 +120,7 @@ import MainLayout from '../layouts/MainLayout.astro';
class="btn btn-primary"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
style="width:fit-content;"
>
Iniciar por WhatsApp
@@ -131,7 +172,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<Icon name="arrow-forward" />
</button>
</div>
@@ -142,6 +183,49 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
</section>
<section class="section-pad-sm bg-container-low">
<div class="page-wrap">
<div class="contact-detail-grid">
<div>
<span class="section-eyebrow">Cobertura y planificación</span>
<h2 class="text-headline-lg" style="margin-top:var(--space-4);margin-bottom:var(--space-6);">Cómo confirmamos la viabilidad de cada evento</h2>
</div>
<div class="stack-6">
<p class="text-muted" style="line-height:1.8;">
No trabajamos con una cobertura automática ni con propuestas cerradas. Cada servicio se estudia según la ubicación del evento, la fecha disponible, el volumen de invitados y las necesidades reales de montaje o servicio.
</p>
<div class="grid-2" style="gap:var(--space-6);">
<div class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Qué necesitamos para orientarle</h3>
<p class="text-body-sm text-muted">Fecha estimada, lugar, horario, asistentes y tipo de servicio. Con esa base podemos indicarle el encaje del evento y el siguiente paso comercial.</p>
</div>
<div class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Cómo planteamos el presupuesto</h3>
<p class="text-body-sm text-muted">La propuesta se ajusta al formato gastronómico, personal necesario, menaje, tiempos de servicio y desplazamiento previsto para su celebración.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-pad-sm">
<div class="page-wrap" style="max-width:52rem;">
<div style="margin-bottom:var(--space-8);">
<span class="section-eyebrow">Preguntas frecuentes</span>
<h2 class="text-headline-lg" style="margin-top:var(--space-4);">Información útil antes de escribirnos</h2>
</div>
<div class="faq-list">
{contactFaqs.map((faq) => (
<article class="faq-item">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">{faq.question}</h3>
<p class="text-muted" style="line-height:1.75;">{faq.answer}</p>
</article>
))}
</div>
</div>
</section>
</MainLayout>
<style>
@@ -172,6 +256,17 @@ import MainLayout from '../layouts/MainLayout.astro';
gap: var(--space-8);
}
.contact-link {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.contact-detail-grid,
.faq-list {
display: grid;
gap: var(--space-8);
}
@media (min-width: 48rem) {
.contacto-hero {
padding-top: calc(var(--nav-h) + var(--space-section));
@@ -189,5 +284,11 @@ import MainLayout from '../layouts/MainLayout.astro';
align-items: start;
gap: var(--space-16);
}
.contact-detail-grid {
grid-template-columns: 5fr 7fr;
align-items: start;
gap: var(--space-12);
}
}
</style>
src/pages/cookies.astro
+2 -1
View File
@@ -5,6 +5,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<MainLayout
title="Política de Cookies | MNQ Catering y Evento"
description="Información sobre el uso de cookies en el sitio web de MNQ Catering y Evento."
robots="noindex,follow"
>
<section style="padding-top: calc(var(--nav-h) + var(--space-section)); padding-bottom: var(--space-section);">
@@ -57,7 +58,7 @@ import MainLayout from '../layouts/MainLayout.astro';
</button>
<h2>Más información</h2>
<p>Para cualquier consulta sobre nuestra política de cookies, puede contactarnos en <strong>eventos@mnqcatering.com</strong>. Consulte también nuestra <a href="/privacidad">Política de Privacidad</a>.</p>
<p>Para cualquier consulta sobre nuestra política de cookies, puede contactarnos por teléfono o WhatsApp en <a href="tel:+34678171513"><strong>+34 678 17 15 13</strong></a>. Consulte también nuestra <a href="/privacidad">Política de Privacidad</a> y la página de <a href="/contacto">Contacto</a>.</p>
</div>
src/pages/corporativo-business.astro
+135 -13
View File
@@ -1,11 +1,45 @@
---
import MainLayout from '../layouts/MainLayout.astro';
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
const corporateFaqs = [
{
question: '¿Qué información necesitan para preparar una propuesta corporativa?',
answer:
'Fecha, ubicación, horario, número estimado de asistentes y el formato previsto: coffee break, cóctel, comida o cena.',
},
{
question: '¿La propuesta se adapta a la imagen y al ritmo del evento?',
answer:
'Sí. Ajustamos servicio, montaje y secuencia gastronómica al objetivo del encuentro y a la dinámica de la jornada.',
},
{
question: '¿Cómo valoran la cobertura de un evento de empresa?',
answer:
'La confirmamos según disponibilidad de fecha, desplazamiento, complejidad logística del espacio y necesidades reales de producción.',
},
];
const corporateStructuredData = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: corporateFaqs.map((faq) => ({
'@type': 'Question',
name: faq.question,
acceptedAnswer: {
'@type': 'Answer',
text: faq.answer,
},
})),
};
---
<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"
structuredData={corporateStructuredData}
>
<!-- ─── HERO ─── -->
@@ -20,7 +54,7 @@ import MainLayout from '../layouts/MainLayout.astro';
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 class="corp-hero-actions">
<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="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" class="btn btn-primary" target="_blank" rel="noreferrer" aria-label={whatsappAriaLabel}>Solicitar Propuesta</a>
<a href="#servicios" class="btn-underline">Ver Servicios</a>
</div>
</div>
@@ -30,8 +64,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/foto-corporativo.jpg"
alt="Eventos corporativos premium — MNQ"
width="1264"
height="848"
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
loading="eager"
fetchpriority="high"
/>
</div>
</div>
@@ -51,7 +88,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<div class="corp-bento">
<div class="bento-card corp-wide">
<img src="/images/foto-corporativo.jpg" alt="Lanzamientos de marca" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;" loading="lazy" />
<img src="/images/foto-corporativo.jpg" alt="Lanzamientos de marca" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;" width="1264" height="848" loading="lazy" decoding="async" />
<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>
@@ -60,7 +97,7 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
<div class="bento-card corp-tall">
<img src="/images/generated/gallery-2.webp" alt="Coffee Breaks Premium" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;" loading="lazy" />
<img src="/images/generated/gallery-2.webp" alt="Coffee Breaks Premium" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;" width="1024" height="1024" loading="lazy" decoding="async" />
<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>
@@ -69,7 +106,7 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
<div class="bento-card corp-wide">
<img src="/images/foto-bodas.jpg" alt="Galas y Cenas Anuales" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;" loading="lazy" />
<img src="/images/foto-bodas.jpg" alt="Galas y Cenas Anuales" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;" width="1264" height="848" loading="lazy" decoding="async" />
<div class="bento-card-overlay"></div>
<div class="bento-card-body">
<h3 class="text-headline-md" style="color:var(--color-on-surface);">Galas &amp; Cenas Anuales</h3>
@@ -81,16 +118,54 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
</section>
<!-- ─── EMPRESAS ─── -->
<!-- ─── PRUEBA OPERATIVA ─── -->
<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 class="page-wrap">
<div class="trust-grid">
<div>
<p class="label-caps text-muted" style="margin-bottom:var(--space-4);opacity:0.8;">Coordinación corporativa</p>
<h2 class="text-headline-lg">La confianza empieza por una ejecución clara</h2>
</div>
<div class="stack-6">
<p class="text-muted" style="line-height:1.8;">
Cuando un evento representa a una marca, la propuesta gastronómica debe responder al briefing, al ritmo de la agenda y a las exigencias del espacio. Por eso priorizamos planificación, timing de servicio y una puesta en escena alineada con el contexto del encuentro.
</p>
<div class="trust-cards">
<article class="bg-container rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Briefing previo</h3>
<p class="text-body-sm text-muted">Revisamos formato, asistentes, horarios y expectativas de marca antes de emitir la propuesta.</p>
</article>
<article class="bg-container rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Servicio coordinado</h3>
<p class="text-body-sm text-muted">Ajustamos cocina, personal, menaje y secuencia de pases al ritmo real del evento.</p>
</article>
<article class="bg-container rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Cobertura confirmada</h3>
<p class="text-body-sm text-muted">La viabilidad final se valida según desplazamiento, montaje necesario y condicionantes del espacio.</p>
</article>
</div>
</div>
</div>
</div>
</section>
<section class="section-pad-sm bg-surface">
<div class="page-wrap">
<div class="trust-grid">
<div>
<span class="section-eyebrow">Qué puede esperar</span>
<h2 class="text-headline-lg" style="margin-top:var(--space-4);">Propuestas pensadas para equipos, invitados y tiempos reales</h2>
</div>
<div class="stack-6">
<p class="text-muted" style="line-height:1.8;">
Diseñamos cada presupuesto según el formato de servicio, el número previsto de asistentes, la franja horaria, el personal necesario y la logística del venue. Esto nos permite presentar una propuesta coherente en lugar de una tarifa genérica que luego no encaja en producción.
</p>
<ul class="corp-facts">
<li><strong>Formatos habituales:</strong> coffee break, cóctel, comida de empresa, cena institucional y activaciones con servicio gastronómico.</li>
<li><strong>Presupuesto:</strong> siempre se calcula a medida según servicio, menaje, personal y desplazamiento.</li>
<li><strong>Planificación:</strong> cuanto más completo sea el briefing inicial, más afinada será la primera propuesta comercial.</li>
</ul>
</div>
</div>
</div>
</section>
@@ -139,9 +214,45 @@ import MainLayout from '../layouts/MainLayout.astro';
<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>
<section class="section-pad-sm">
<div class="page-wrap" style="max-width:52rem;">
<div style="margin-bottom:var(--space-8);">
<span class="section-eyebrow">Preguntas frecuentes</span>
<h2 class="text-headline-lg" style="margin-top:var(--space-4);">Dudas habituales en eventos de empresa</h2>
</div>
<div class="faq-list">
{corporateFaqs.map((faq) => (
<article class="faq-item">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">{faq.question}</h3>
<p class="text-muted" style="line-height:1.75;">{faq.answer}</p>
</article>
))}
</div>
</div>
</section>
</MainLayout>
<style>
.trust-grid,
.trust-cards,
.faq-list {
display: grid;
gap: var(--space-8);
}
.trust-cards {
grid-template-columns: 1fr;
}
.corp-facts {
display: grid;
gap: var(--space-4);
padding-left: var(--space-6);
color: var(--color-on-surface-variant);
line-height: 1.75;
}
.corp-bento {
display: grid;
grid-template-columns: 1fr;
@@ -165,6 +276,17 @@ import MainLayout from '../layouts/MainLayout.astro';
}
@media (min-width: 48rem) {
.trust-grid {
grid-template-columns: 5fr 7fr;
align-items: start;
gap: var(--space-12);
}
.trust-cards {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.corp-bento {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 22rem 22rem;
src/pages/index.astro
+91 -17
View File
@@ -1,5 +1,8 @@
---
import MainLayout from '../layouts/MainLayout.astro';
import Icon from '../components/Icon.astro';
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
---
<MainLayout title="MNQ Catering y Evento | Excelencia Culinaria">
@@ -11,6 +14,8 @@ import MainLayout from '../layouts/MainLayout.astro';
alt="MNQ Catering — salón de bodas premium"
class="hero-bg"
style="object-position: center 30%;"
width="1264"
height="848"
loading="eager"
fetchpriority="high"
/>
@@ -28,13 +33,44 @@ import MainLayout from '../layouts/MainLayout.astro';
class="btn btn-ghost hero-enter-3"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
>
Explorar Servicios
Consultar por WhatsApp
</a>
</div>
</div>
</section>
<section class="section-pad-sm bg-container-low">
<div class="page-wrap">
<div class="coverage-grid">
<div>
<span class="section-eyebrow reveal">Cobertura y propuesta</span>
<h2 class="text-headline-lg reveal" style="--reveal-delay:150;margin-top:var(--space-4);">Servicio planificado según ubicación, formato y ritmo del evento</h2>
</div>
<div class="stack-6 reveal" style="--reveal-delay:250;">
<p class="text-muted" style="line-height:1.8;">
Cada proyecto se valora de forma individual. Confirmamos la viabilidad según la fecha, el número de asistentes, el tipo de servicio y el desplazamiento necesario para ejecutar el evento con el nivel de detalle que exige MNQ.
</p>
<div class="coverage-cards">
<article class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Eventos a medida</h3>
<p class="text-body-sm text-muted">No trabajamos con paquetes cerrados. La propuesta nace del formato gastronómico, la logística y el tono de la celebración.</p>
</article>
<article class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Cobertura a confirmar</h3>
<p class="text-body-sm text-muted">La cobertura final se valida caso a caso para asegurar montaje, tiempos de servicio y desplazamiento coherentes con el evento.</p>
</article>
<article class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Respuesta comercial directa</h3>
<p class="text-body-sm text-muted">WhatsApp y teléfono siguen siendo el canal más rápido para contrastar disponibilidad y perfilar la solicitud inicial.</p>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- ─── SERVICIOS EDITORIAL GRID ─── -->
<section class="section-pad">
<div class="page-wrap">
@@ -51,12 +87,15 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/hero-bodas-gen.webp"
alt="Bodas Reales — MNQ Catering"
width="1264"
height="848"
style="width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 700ms ease;"
loading="lazy"
onmouseenter="this.style.transform='scale(1.05)'"
onmouseleave="this.style.transform='scale(1)'"
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-3);" class="reveal" style="--reveal-delay: 300;">
<div class="reveal" style="display: flex; flex-direction: column; gap: var(--space-3); --reveal-delay: 300;">
<h3 class="text-headline-md">Bodas</h3>
<p class="text-muted">El arte de celebrar el amor con un banquete inolvidable diseñado hasta el último detalle.</p>
<a href="/bodas-reales" class="btn-underline" style="width: fit-content;">Saber más</a>
@@ -69,12 +108,15 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/foto-corporativo.jpg"
alt="Corporativo — MNQ Catering"
width="1264"
height="848"
style="width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 700ms ease;"
loading="lazy"
onmouseenter="this.style.transform='scale(1.05)'"
onmouseleave="this.style.transform='scale(1)'"
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-3);" class="reveal" style="--reveal-delay: 450;">
<div class="reveal" style="display: flex; flex-direction: column; gap: var(--space-3); --reveal-delay: 450;">
<h3 class="text-headline-md">Eventos Corporativos</h3>
<p class="text-muted">Reforzamos la identidad de su empresa a través de una propuesta culinaria de primer nivel.</p>
<a href="/corporativo-business" class="btn-underline" style="width: fit-content;">Saber más</a>
@@ -87,12 +129,15 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/hero-familiares-gen.webp"
alt="Reuniones Familiares — MNQ Catering"
width="1376"
height="768"
style="width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 700ms ease;"
loading="lazy"
onmouseenter="this.style.transform='scale(1.05)'"
onmouseleave="this.style.transform='scale(1)'"
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-3);" class="reveal" style="--reveal-delay: 600;">
<div class="reveal" style="display: flex; flex-direction: column; gap: var(--space-3); --reveal-delay: 600;">
<h3 class="text-headline-md">Reuniones Familiares</h3>
<p class="text-muted">La calidez del hogar elevada por la excelencia de nuestra cocina de autor.</p>
<a href="/reuniones-familiares" class="btn-underline" style="width: fit-content;">Saber más</a>
@@ -117,12 +162,12 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
<div class="mosaic">
<img src="/images/generated/gallery-1.webp" alt="Postre de autor con oro" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 100;" loading="lazy" />
<img src="/images/foto-canapes.jpg" alt="Canapés premium" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 200;" loading="lazy" />
<img src="/images/generated/gallery-3.webp" alt="Vieiras con azafrán" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 300;" loading="lazy" />
<img src="/images/generated/gallery-4.webp" alt="Mesa de boda" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 400;" loading="lazy" />
<img src="/images/foto-plato-mnq.jpg" alt="Plato MNQ Catering" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 500;" loading="lazy" />
<img src="/images/generated/gallery-2.webp" alt="Bartender de coctelería" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 600;" loading="lazy" />
<img src="/images/generated/gallery-1.webp" alt="Postre de autor con oro" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 100;" width="1024" height="1024" loading="lazy" decoding="async" />
<img src="/images/foto-canapes.jpg" alt="Canapés premium" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 200;" width="1264" height="848" loading="lazy" decoding="async" />
<img src="/images/generated/gallery-3.webp" alt="Vieiras con azafrán" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 300;" width="1024" height="1024" loading="lazy" decoding="async" />
<img src="/images/generated/gallery-4.webp" alt="Mesa de boda" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 400;" width="1024" height="1024" loading="lazy" decoding="async" />
<img src="/images/foto-plato-mnq.jpg" alt="Plato MNQ Catering" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 500;" width="1200" height="805" loading="lazy" decoding="async" />
<img src="/images/generated/gallery-2.webp" alt="Bartender de coctelería" class="rounded-lg reveal-scale reveal" style="--reveal-delay: 600;" width="1024" height="1024" loading="lazy" decoding="async" />
</div>
</div>
</section>
@@ -179,6 +224,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/logo-monograma.webp"
alt="MNQ"
width="500"
height="188"
style="height: 5rem; width: auto; margin-inline: auto; display: block;"
/>
</div>
@@ -194,8 +241,9 @@ import MainLayout from '../layouts/MainLayout.astro';
class="btn btn-dark"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
>
<span class="material-symbols-outlined">chat</span>
<Icon name="chat" />
Consultar por WhatsApp
</a>
</div>
@@ -206,7 +254,39 @@ import MainLayout from '../layouts/MainLayout.astro';
</MainLayout>
<style>
.coverage-grid,
.coverage-cards,
.services-grid {
display: grid;
}
.coverage-grid,
.coverage-cards {
gap: var(--space-8);
}
.coverage-cards {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
}
@media (min-width: 48rem) {
.coverage-grid {
grid-template-columns: 5fr 7fr;
align-items: start;
gap: var(--space-12);
}
.coverage-cards {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.services-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
@@ -214,10 +294,4 @@ import MainLayout from '../layouts/MainLayout.astro';
.col-stagger { margin-top: var(--space-24); }
#gallery-quote { display: block !important; }
}
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
}
</style>
src/pages/nosotros.astro
+47 -9
View File
@@ -1,5 +1,42 @@
---
import MainLayout from '../layouts/MainLayout.astro';
import Icon from '../components/Icon.astro';
const teamMembers = [
{
nombre: 'Mateo Navarro',
rol: 'Director Ejecutivo',
src: '/images/generated/gallery-2.webp',
pos: 'center top',
width: 1024,
height: 1024,
},
{
nombre: 'Lucía Quintana',
rol: 'Chef Creativa',
src: '/images/generated/hero-nosotros-gen.webp',
pos: 'center top',
width: 1264,
height: 848,
},
{
nombre: 'Julián Marín',
rol: 'Head Sommelier',
src: '/images/foto-canapes.jpg',
pos: 'center 30%',
width: 1264,
height: 848,
},
{
nombre: 'Elena Soler',
rol: 'Diseño de Experiencias',
src: '/images/foto-plato-mnq.jpg',
pos: 'center top',
width: 1200,
height: 805,
},
];
---
<MainLayout
@@ -26,8 +63,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/hero-nosotros-gen.webp"
alt="Chef ejecutiva MNQ — el arte de la hospitalidad"
width="1264"
height="848"
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
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;">
@@ -64,17 +104,17 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
<div class="grid-3">
<div class="value-card value-card-animate" data-value-delay="0">
<span class="material-symbols-outlined text-primary icon-lg">verified</span>
<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">
<span class="material-symbols-outlined text-primary icon-lg">history_edu</span>
<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">
<span class="material-symbols-outlined text-primary icon-lg">architecture</span>
<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>
@@ -94,19 +134,17 @@ import MainLayout from '../layouts/MainLayout.astro';
</div>
<div class="grid-4">
{[
{ nombre: 'Mateo Navarro', rol: 'Director Ejecutivo', src: '/images/generated/gallery-2.webp', pos: 'center top' },
{ nombre: 'Lucía Quintana', rol: 'Chef Creativa', src: '/images/generated/hero-nosotros-gen.webp', pos: 'center top' },
{ nombre: 'Julián Marín', rol: 'Head Sommelier', src: '/images/foto-canapes.jpg', pos: 'center 30%' },
{ nombre: 'Elena Soler', rol: 'Diseño de Experiencias', src: '/images/foto-plato-mnq.jpg', pos: 'center top' },
].map(({ nombre, rol, src, pos }) => (
{teamMembers.map(({ nombre, rol, src, pos, width, height }) => (
<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}
width={width}
height={height}
style={`width:100%;height:100%;object-fit:cover;object-position:${pos};filter:grayscale(1);transition:filter 700ms;`}
loading="lazy"
decoding="async"
/>
</div>
<div>
src/pages/privacidad.astro
+4 -3
View File
@@ -5,6 +5,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<MainLayout
title="Política de Privacidad | MNQ Catering y Evento"
description="Política de privacidad y protección de datos de MNQ Catering y Evento."
robots="noindex,follow"
>
<section style="padding-top: calc(var(--nav-h) + var(--space-section)); padding-bottom: var(--space-section);">
@@ -19,8 +20,8 @@ import MainLayout from '../layouts/MainLayout.astro';
<h2>1. Responsable del Tratamiento</h2>
<p>
<strong>MNQ Catering y Evento</strong><br />
Teléfono: +34 678 17 15 13<br />
Email: eventos@mnqcatering.com
Teléfono: <a href="tel:+34678171513">+34 678 17 15 13</a><br />
Sitio web: <a href="https://mnq.elkazurrotaberna.es">mnq.elkazurrotaberna.es</a>
</p>
<h2>2. Datos que Recopilamos</h2>
@@ -60,7 +61,7 @@ import MainLayout from '../layouts/MainLayout.astro';
<li><strong>Portabilidad:</strong> recibir sus datos en formato estructurado</li>
</ul>
<p>
Para ejercer estos derechos, contacte con nosotros en <strong>eventos@mnqcatering.com</strong> o por WhatsApp al <strong>+34 678 17 15 13</strong>.
Para ejercer estos derechos, contacte con nosotros por teléfono o WhatsApp en <a href="tel:+34678171513"><strong>+34 678 17 15 13</strong></a> o utilice la página de <a href="/contacto"><strong>Contacto</strong></a>.
También puede presentar una reclamación ante la <a href="https://www.aepd.es" target="_blank" rel="noreferrer">Agencia Española de Protección de Datos (AEPD)</a>.
</p>
src/pages/reuniones-familiares.astro
+134 -4
View File
@@ -1,11 +1,46 @@
---
import MainLayout from '../layouts/MainLayout.astro';
import Icon from '../components/Icon.astro';
const familyFaqs = [
{
question: '¿Qué tipo de celebraciones familiares trabajan?',
answer:
'Bautizos, aniversarios, cenas privadas, comidas especiales y encuentros donde el servicio gastronómico requiera una propuesta cuidada.',
},
{
question: '¿Cómo se prepara el presupuesto?',
answer:
'Se ajusta al número estimado de invitados, al formato del servicio, al menaje necesario y al desplazamiento previsto.',
},
{
question: '¿Con cuánta información conviene contactar?',
answer:
'Lo ideal es compartir fecha aproximada, lugar, tipo de celebración y cualquier necesidad alimentaria o logística relevante.',
},
];
const familyStructuredData = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: familyFaqs.map((faq) => ({
'@type': 'Question',
name: faq.question,
acceptedAnswer: {
'@type': 'Answer',
text: faq.answer,
},
})),
};
const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
---
<MainLayout
title="Reuniones Familiares | MNQ Catering y Evento"
description="Creamos experiencias culinarias íntimas donde cada detalle cuenta. Bautizos, aniversarios y cenas privadas con el sello de excelencia MNQ."
activeNav="social"
structuredData={familyStructuredData}
>
<!-- ─── HERO ─── -->
@@ -15,6 +50,8 @@ import MainLayout from '../layouts/MainLayout.astro';
alt="Reuniones familiares — MNQ Catering"
class="hero-bg"
style="object-position: center 35%;"
width="1376"
height="768"
loading="eager"
fetchpriority="high"
/>
@@ -33,12 +70,43 @@ import MainLayout from '../layouts/MainLayout.astro';
class="btn btn-primary"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
>Reservar una Cita</a>
</div>
</div>
</div>
</section>
<section class="section-pad-sm bg-container-low">
<div class="page-wrap">
<div class="detail-grid">
<div>
<span class="section-eyebrow">Antes de pedir propuesta</span>
<h2 class="text-headline-lg" style="margin-top:var(--space-4);">Información clara para una celebración bien resuelta</h2>
</div>
<div class="stack-6">
<p class="text-muted" style="line-height:1.8;">
En reuniones familiares, el acierto suele estar en los matices: número real de invitados, duración del encuentro, necesidades de cocina o servicio en sala y el tipo de atmósfera que se quiere cuidar. Por eso estudiamos cada solicitud antes de confirmar cobertura y propuesta.
</p>
<div class="detail-cards">
<article class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Formato del servicio</h3>
<p class="text-body-sm text-muted">Brunch, comida sentada, cóctel, cena privada o una combinación adaptada al ritmo del encuentro.</p>
</article>
<article class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Presupuesto a medida</h3>
<p class="text-body-sm text-muted">La propuesta se calcula según invitados, personal, menaje, timing del servicio y desplazamiento necesario.</p>
</article>
<article class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-6);">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">Cobertura confirmada</h3>
<p class="text-body-sm text-muted">La viabilidad se revisa caso a caso para asegurar que el espacio y la logística estén alineados con la experiencia que promete MNQ.</p>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- ─── SERVICIOS ─── -->
<section class="section-pad">
<div class="page-wrap">
@@ -58,8 +126,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/gallery-4.webp"
alt="Bautizos — mesa de celebración"
width="1024"
height="1024"
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
loading="lazy"
decoding="async"
/>
</div>
<div>
@@ -74,8 +145,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/hero-familiares-gen.webp"
alt="Aniversarios — celebración familiar"
width="1376"
height="768"
style="width:100%;height:100%;object-fit:cover;object-position:center 30%;"
loading="lazy"
decoding="async"
/>
</div>
<div>
@@ -90,8 +164,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/hero-nosotros-gen.webp"
alt="Cenas privadas — chef ejecutiva"
width="1264"
height="848"
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
loading="lazy"
decoding="async"
/>
</div>
<div>
@@ -119,8 +196,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/gallery-3.webp"
alt="Vieiras de la Costa con Azafrán"
width="1024"
height="1024"
style="width:100%;height:100%;object-fit:cover;"
loading="lazy"
decoding="async"
/>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline;">
@@ -136,8 +216,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/foto-plato-mnq.jpg"
alt="Postre de autor MNQ"
width="1200"
height="805"
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
loading="lazy"
decoding="async"
/>
</div>
<h4 class="text-headline-md" style="margin-bottom:var(--space-1);">Postre de Autor</h4>
@@ -148,8 +231,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/generated/gallery-1.webp"
alt="Postre con láminas de oro"
width="1024"
height="1024"
style="width:100%;height:100%;object-fit:cover;"
loading="lazy"
decoding="async"
/>
</div>
<h4 class="text-headline-md" style="margin-bottom:var(--space-1);">Repostería Dorada</h4>
@@ -169,8 +255,11 @@ import MainLayout from '../layouts/MainLayout.astro';
<img
src="/images/foto-canapes.jpg"
alt="Canapés premium para reuniones familiares"
width="1264"
height="848"
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
loading="lazy"
decoding="async"
/>
</div>
@@ -183,21 +272,21 @@ import MainLayout from '../layouts/MainLayout.astro';
</p>
<ul style="display:flex;flex-direction:column;gap:var(--space-6);margin-bottom:var(--space-10);">
<li style="display:flex;align-items:flex-start;gap:var(--space-4);">
<span class="material-symbols-outlined text-primary">auto_awesome</span>
<Icon name="auto-awesome" class="text-primary" />
<div>
<h5 style="font-weight:600;margin-bottom:var(--space-1);">Consultoría Privada</h5>
<p class="text-body-sm text-muted">Reunión con nuestro Chef Ejecutivo para definir el concepto gastronómico.</p>
</div>
</li>
<li style="display:flex;align-items:flex-start;gap:var(--space-4);">
<span class="material-symbols-outlined text-primary">restaurant_menu</span>
<Icon name="restaurant-menu" class="text-primary" />
<div>
<h5 style="font-weight:600;margin-bottom:var(--space-1);">Prueba de Degustación</h5>
<p class="text-body-sm text-muted">Sesión íntima para refinar sabores y presentaciones antes del gran día.</p>
</div>
</li>
<li style="display:flex;align-items:flex-start;gap:var(--space-4);">
<span class="material-symbols-outlined text-primary">local_florist</span>
<Icon name="local-florist" class="text-primary" />
<div>
<h5 style="font-weight:600;margin-bottom:var(--space-1);">Armonía Visual</h5>
<p class="text-body-sm text-muted">Coordinación de mantelería, vajilla y cristalería con el menú seleccionado.</p>
@@ -209,6 +298,7 @@ import MainLayout from '../layouts/MainLayout.astro';
class="btn btn-primary"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
>Consultar Disponibilidad</a>
</div>
@@ -229,16 +319,45 @@ import MainLayout from '../layouts/MainLayout.astro';
style="background:var(--color-surface);color:var(--color-primary);border-radius:var(--radius-md);padding:1rem 2.5rem;gap:var(--space-3);"
target="_blank"
rel="noreferrer"
aria-label={whatsappAriaLabel}
>
<span class="material-symbols-outlined">chat</span>
<Icon name="chat" />
Contactar por WhatsApp
</a>
</div>
</section>
<section class="section-pad-sm">
<div class="page-wrap" style="max-width:52rem;">
<div style="margin-bottom:var(--space-8);">
<span class="section-eyebrow">Preguntas frecuentes</span>
<h2 class="text-headline-lg" style="margin-top:var(--space-4);">Respuestas útiles para organizar una reunión familiar</h2>
</div>
<div class="faq-list">
{familyFaqs.map((faq) => (
<article class="faq-item">
<h3 class="text-headline-md" style="margin-bottom:var(--space-3);">{faq.question}</h3>
<p class="text-muted" style="line-height:1.75;">{faq.answer}</p>
</article>
))}
</div>
</div>
</section>
</MainLayout>
<style>
.detail-grid,
.detail-cards,
.faq-list {
display: grid;
gap: var(--space-8);
}
.detail-cards {
grid-template-columns: 1fr;
}
.hero-card-glass {
width: 100%;
background: rgb(255 248 240 / 95%);
@@ -269,6 +388,17 @@ import MainLayout from '../layouts/MainLayout.astro';
}
@media (min-width: 48rem) {
.detail-grid {
grid-template-columns: 5fr 7fr;
align-items: start;
gap: var(--space-12);
}
.detail-cards {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.hero-card-glass {
padding: var(--space-12);
max-width: 36rem;
src/styles/animations.css
+5 -2
View File
@@ -274,10 +274,13 @@ body.page-ready {
top: 0;
left: 0;
height: 2px;
width: 0%;
width: 100%;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
z-index: 9999;
transition: width 100ms linear;
transform: scaleX(0);
transform-origin: left center;
transition: transform 100ms linear;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
src/styles/base.css
+4 -2
View File
@@ -48,9 +48,11 @@ ul, ol {
list-style: none;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
.icon {
width: var(--icon-size, 1.25rem);
height: var(--icon-size, 1.25rem);
display: inline-block;
line-height: 1;
vertical-align: middle;
flex-shrink: 0;
}
src/styles/components.css
+8 -4
View File
@@ -549,6 +549,11 @@
flex-shrink: 0;
}
.whatsapp-float-icon .icon {
width: 1.125rem;
height: 1.125rem;
}
.whatsapp-float span:first-child {
position: absolute;
width: 1px;
@@ -619,7 +624,7 @@
.footer-brand p {
font-size: var(--text-sm);
color: var(--color-on-surface-variant);
color: var(--color-on-surface);
max-width: 100%;
line-height: 1.5;
}
@@ -649,7 +654,7 @@
.footer-link {
font-size: var(--text-sm);
color: var(--color-on-surface-variant);
color: var(--color-on-surface);
transition: color 200ms;
}
@@ -668,8 +673,7 @@
.footer-bottom p {
font-size: var(--text-sm);
color: var(--color-on-surface-variant);
opacity: 0.6;
color: var(--color-on-surface);
line-height: 1.4;
}
src/styles/utilities.css
+2 -1
View File
@@ -117,5 +117,6 @@
/* Icon size */
.icon-lg {
font-size: 2.5rem;
width: 2.5rem;
height: 2.5rem;
}