docs: add redesign references and agent guidance

This commit is contained in:
Manuel
2026-05-07 23:39:53 +02:00
parent 51b0d1fb67
commit 50b4e75edd
20 changed files with 2451 additions and 0 deletions
@@ -0,0 +1,285 @@
<!DOCTYPE html>
<html class="light" lang="es"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-variant": "#eae1d4",
"error-container": "#ffdad6",
"surface-dim": "#e1d9cc",
"on-surface-variant": "#4d4635",
"surface-container-high": "#efe7da",
"primary-fixed": "#ffe088",
"inverse-primary": "#e9c349",
"primary-fixed-dim": "#e9c349",
"on-primary": "#ffffff",
"secondary-fixed": "#ffdea4",
"secondary-fixed-dim": "#f1bf5a",
"primary-container": "#d4af37",
"error": "#ba1a1a",
"tertiary-fixed-dim": "#b4c5ff",
"surface": "#fff8f0",
"inverse-surface": "#343027",
"tertiary": "#415ba4",
"on-error-container": "#93000a",
"surface-container-lowest": "#ffffff",
"on-secondary": "#ffffff",
"secondary": "#7b5900",
"on-tertiary-fixed-variant": "#27438a",
"on-surface": "#1f1b13",
"on-tertiary-container": "#254188",
"tertiary-fixed": "#dbe1ff",
"primary": "#735c00",
"outline-variant": "#d0c5af",
"surface-tint": "#735c00",
"surface-bright": "#fff8f0",
"on-primary-fixed-variant": "#574500",
"on-error": "#ffffff",
"on-background": "#1f1b13",
"on-tertiary": "#ffffff",
"on-primary-container": "#554300",
"outline": "#7f7663",
"on-secondary-container": "#755400",
"on-primary-fixed": "#241a00",
"on-tertiary-fixed": "#00174b",
"inverse-on-surface": "#f8f0e2",
"tertiary-container": "#97b0ff",
"surface-container-low": "#fbf3e5",
"secondary-container": "#fdca64",
"on-secondary-fixed-variant": "#5d4200",
"on-secondary-fixed": "#261900",
"surface-container": "#f5eddf",
"background": "#fff8f0",
"surface-container-highest": "#eae1d4"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "12px",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"margin-page": "64px",
"section-gap": "120px",
"container-max": "1280px",
"gutter": "32px",
"unit": "4px"
},
"fontFamily": {
"headline-md": ["Noto Serif"],
"label-caps": ["Inter"],
"body-sm": ["Inter"],
"body-lg": ["Inter"],
"headline-lg": ["Noto Serif"],
"display-lg": ["Noto Serif"]
},
"fontSize": {
"headline-md": ["32px", {"lineHeight": "1.3", "letterSpacing": "0.03em", "fontWeight": "400"}],
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.01em", "fontWeight": "400"}],
"body-lg": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
"headline-lg": ["40px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400"}],
"display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.editorial-shadow {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}
</style>
</head>
<body class="bg-surface text-on-surface font-body-lg">
<!-- TopNavBar -->
<header class="fixed top-0 w-full z-50 h-20 bg-surface/80 dark:bg-on-background/80 backdrop-blur-md border-b border-outline/10 dark:border-outline-variant/10">
<div class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
<a class="font-headline-md text-headline-md text-primary dark:text-primary-fixed-dim tracking-tighter" href="#">MNQ Catering</a>
<nav class="hidden md:flex gap-8 items-center h-full">
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface dark:text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Bodas</a>
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface dark:text-on-surface-variant hover:text-primary transition-colors duration-300" href="#">Corporativo</a>
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary dark:text-primary-fixed border-b-2 border-primary dark:border-primary-fixed pb-1" href="#">Social</a>
</nav>
<div class="flex items-center gap-6">
<button class="flex items-center gap-2 font-label-caps text-label-caps uppercase text-primary hover:opacity-80 transition-all duration-300 scale-95 active:scale-90">
<span class="material-symbols-outlined" data-icon="chat">chat</span>
<span>WhatsApp</span>
</button>
</div>
</div>
</header>
<main class="pt-20">
<!-- Hero Section -->
<section class="relative h-[819px] flex items-center overflow-hidden">
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover" data-alt="A warm and intimate family gathering at a long wooden table decorated with minimalist ivory ceramics and gold cutlery. The scene is bathed in soft, natural golden hour sunlight streaming through large windows, creating a cozy and exclusive atmosphere. The interior features high-end contemporary luxury styling with neutral tones and elegant floral arrangements in the background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzD6Bz3BEmWyRLco41LMhaR24bodIWuZGwZ71tvx_zKONUijIrjl3gGWslh6SLyqqE9U9R5UaEHJcSm45kmdUAB2Lm1cuB0aqpdeqnNJ8HYSnL0X2E2ozXPpkakd3Xv6IIJ1NkSghWjKmdySf8HeRrxZDuke-aD4XAznECqXdMAbzj_IRACLeeSS2YIkDsdf2vALImFEGzNj0hQqYf0E68pofYDheGuvwk03OKSTlrcfZf63HDNBvSfKCHvxSLiLyUNRLZP-Tvoklr"/>
<div class="absolute inset-0 bg-black/20"></div>
</div>
<div class="relative z-10 px-margin-page max-w-container-max mx-auto w-full">
<div class="max-w-2xl bg-surface/90 backdrop-blur-sm p-12 editorial-shadow border border-outline-variant/20 rounded-lg">
<span class="font-label-caps text-label-caps uppercase text-primary mb-4 block">Eventos Sociales</span>
<h1 class="font-display-lg text-display-lg text-on-surface mb-6">Reuniones Familiares con Alma</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8 leading-relaxed">
Creamos experiencias culinarias íntimas donde cada detalle cuenta. Desde bautizos hasta aniversarios dorados, transformamos su mesa en un escenario de recuerdos inolvidables.
</p>
<a class="inline-flex items-center px-8 py-4 bg-primary text-on-primary font-label-caps text-label-caps uppercase rounded-lg hover:bg-primary-container transition-all duration-300 tracking-widest" href="https://wa.me/#">
Reservar una Cita
</a>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto">
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter items-end mb-20">
<div class="md:col-span-5">
<h2 class="font-headline-lg text-headline-lg mb-6">Momentos que Merecen Excelencia</h2>
</div>
<div class="md:col-span-7 pb-2">
<p class="text-on-surface-variant border-l border-primary/30 pl-8 italic">
"La familia es el corazón de todo lo que hacemos. Nuestra misión es permitirle ser el anfitrión perfecto sin las preocupaciones de la cocina."
</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<!-- Bautizos -->
<div class="group">
<div class="aspect-[3/4] overflow-hidden mb-6 rounded-lg border border-outline-variant/30 transition-transform duration-500 hover:scale-[1.02]">
<img class="w-full h-full object-cover" data-alt="A delicate and elegant setup for a baptism celebration, featuring minimalist ivory white decor with subtle gold accents. The table is adorned with fine porcelain, artisanal small bites, and soft white flowers. The lighting is bright and ethereal, emphasizing a sense of purity and high-end hospitality in a serene garden setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuApNHgBODhVngwoT0T81GdsVtH5L_7-Z4bRNryPgJCv-ng2d7Z9XZBbENUTUwgLGHBqvnU88eHujI1vSmvlPUp9Nbs_ALP21hAmrrK4wEIsxO6gOXTw59-HfxyIfQ4vEpQrmeB1CgDpuWSwGOVVzKyvP11uOGvuFgz3d2FJBPlAWdbGvmwksr4i6izpt1pE0JvkkSksWrkA9aL6NlScfQkNaK5MIr__fiOaQ3sr9OrLuqH4nUKuTLoNM3VXNtBOXZKhBoqmcEtFzoSq"/>
</div>
<h3 class="font-headline-md text-headline-md mb-2">Bautizos</h3>
<p class="text-on-surface-variant font-body-sm uppercase tracking-widest border-b-2 border-primary/20 inline-block pb-1">Cenas y Brunch Temáticos</p>
</div>
<!-- Aniversarios -->
<div class="group md:mt-24">
<div class="aspect-[3/4] overflow-hidden mb-6 rounded-lg border border-outline-variant/30 transition-transform duration-500 hover:scale-[1.02]">
<img class="w-full h-full object-cover" data-alt="A romantic and exclusive anniversary dinner table for two in a private terrace. The setting includes crystal glassware, flickering candles, and a gourmet plated course. The overall mood is sophisticated and intimate, with a warm evening glow and high-contrast professional photography focusing on the premium culinary experience." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBB41fXJYVlYwnW1PNZ2owg-s-26uWbN54pxgZNsq7DQP2zeUjatpt-inYc9F3WKOJNqhq2SihPv6RD-725APAjda8DF5rPViqfbpwfrFy46h9KJ9fNN8NGagcZvFcFipGRJo-jBfthYDSgUj2a7kj3LO7ZFGc4ic_YH1Bi831ejfWc1bnNG0XN7uernawK8__ugrb3XbS741uTDUMO2ann4Urp2x-Y20b9bx-YkS13xXWF30bFIWXeXokO_fOqTu-P3GLOKnwDSkI-"/>
</div>
<h3 class="font-headline-md text-headline-md mb-2">Aniversarios</h3>
<p class="text-on-surface-variant font-body-sm uppercase tracking-widest border-b-2 border-primary/20 inline-block pb-1">Menús Degustación Privados</p>
</div>
<!-- Cenas Privadas -->
<div class="group">
<div class="aspect-[3/4] overflow-hidden mb-6 rounded-lg border border-outline-variant/30 transition-transform duration-500 hover:scale-[1.02]">
<img class="w-full h-full object-cover" data-alt="A high-end private chef preparing a signature dish in a modern luxury kitchen. The chef is plating with precision, using fresh artisanal ingredients. The lighting is soft but focused on the vibrant colors of the food, set against a background of warm ivory marble and sleek design elements." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDqPsBdhc1n9AWErwQX1DhC1X5b758n1uiUlSaZ3GXPKSf0ZNteZPk8LjkVTXyGpZA62mxSY1rzwHsUjunUtzVt1mWT56BtzDkK79z5nIRxdqKKRAyzdO01Qsd3tyW8UW6dl-PaNc1ciiI2QzWJReJmv9pCD6dVTME26JsyjJfb_HWJbBZiBZKiohYmnHBig3-ms5ln6nupRIMxpq7J9VDRCUwdRjBwsTWJk0MrziJJPaQOZ1kJxYiY4X3KhzBNOnl3E66Vn1eF765z"/>
</div>
<h3 class="font-headline-md text-headline-md mb-2">Cenas Privadas</h3>
<p class="text-on-surface-variant font-body-sm uppercase tracking-widest border-b-2 border-primary/20 inline-block pb-1">Chef en Casa &amp; Servicio Premium</p>
</div>
</div>
</section>
<!-- Signature Dishes Gallery (Asymmetric) -->
<section class="py-section-gap bg-surface-container">
<div class="px-margin-page max-w-container-max mx-auto">
<div class="mb-16">
<span class="font-label-caps text-label-caps uppercase text-primary mb-2 block">Culinaria de Autor</span>
<h2 class="font-headline-lg text-headline-lg">Platos que Cuentan Historias</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
<div class="md:col-span-8">
<div class="aspect-video overflow-hidden rounded-lg border border-outline-variant/20 mb-6">
<img class="w-full h-full object-cover" data-alt="An exquisite high-end seafood dish plated with artistic precision on a handmade ceramic ivory plate. The dish features fresh scallops with a golden sear, garnished with micro-greens and a subtle saffron sauce. The lighting is bright and clean, emphasizing textures and vibrant colors in a minimalist gourmet style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyuILgN6tdCIJCU_VeGpZEaH5TBPemQrqkmSxMZLLuYdt1QdZ8RGJfDPoQ9i7_sI-OZmWRD_vx1J46YoQNjo3Y5GpKt2M7f1diV7zLoqjbNyu5pER_y_YbHlfuj6TMS4UKfinSQN8SBT1iFrgfWHQseroS6yNnC6A_ot4BGCKxhEMWseUJqm-r5MZVLfljJ7UKDJqvfoQYmM8YKZy0yEnh_TiDwy4dQukDiuKzVll8N5J-YeY1SY5xltG1TPU5YUYhRywoppVcy1WR"/>
</div>
<div class="flex justify-between items-baseline">
<h4 class="font-headline-md text-headline-md">Vieiras de la Costa con Azafrán</h4>
<span class="font-label-caps text-label-caps text-outline italic">Entrante de Firma</span>
</div>
</div>
<div class="md:col-span-4 flex flex-col justify-center">
<div class="aspect-square overflow-hidden rounded-lg border border-outline-variant/20 mb-6">
<img class="w-full h-full object-cover" data-alt="A masterfully prepared cut of premium beef, cooked to perfection and sliced to reveal a rich pink center. Served with seasonal roasted root vegetables and a dark balsamic reduction. The scene is sophisticated, using dark graphite tones for the plate to contrast against the ivory background of the table." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFQQgJ2S4bONPBKJhBE9-A0JRYauuAWRJ7jEiDZ7zbQkNiJO4LNVToFGivF9SWkg5lij8ZbLjv4tTaZ_OEU_RXhqNvloLZkdIBONouW6AURw_sEcrXKdT8L5H1Sx9jr8VEg_10FvjqJwq7vy7Varl07xhBP6VAWLj7ek6PbSDs0K2h5ax3JwabLCPYSeoueAhV0gKT6yvanMMCShSBAlSft7qpWgDR1Z4hoAKzlGl82-RogovhWkacxlCgqHYXJolMe1MV1KPH_ApF"/>
</div>
<h4 class="font-headline-md text-headline-md">Solomillo de Autor</h4>
<p class="text-on-surface-variant font-body-sm mt-2">Cocción lenta de 24 horas con esencia de romero silvestre.</p>
</div>
</div>
</div>
</section>
<!-- Personalization Section -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-24 items-center">
<div class="relative">
<div class="aspect-square bg-surface-dim rounded-full absolute -top-12 -left-12 w-full h-full -z-10 opacity-30"></div>
<img class="w-full aspect-[4/5] object-cover rounded-lg shadow-2xl" data-alt="A person writing on a beautiful linen menu card with a classic fountain pen. The desk is arranged with high-end stationery, a small vase of dried flowers, and a cup of artisanal coffee. The scene communicates a sense of bespoke personalization and meticulous attention to detail in event planning." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD3EcFW7uPHdKcFtimZUd1XfiElS1cGxLwFwRpl2GVu0WH7GKwiClUWhNMGPhBQsuxzYgko3n7AeF2h9soMdPhlSkVBU1JolFlTZCZ4lP6yF5VULFpmI7WgdqW-ODgCb0mbdrnGcWMDaQwlsPJdYsCliqRZbpCGToIVBb3DaYk_C84iVDXbmifOskUNASKTEd_Wz5GySf56w7BOx60E2P-LKt6IcUqvYxSGLkihO13iv8fz6sgAl5dQyihnTK9RG2V1t-S1BDoelFio"/>
</div>
<div>
<h2 class="font-headline-lg text-headline-lg mb-8 leading-tight">Menús Diseñados Exclusivamente para Usted</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-10 leading-relaxed">
En MNQ Catering, entendemos que no hay dos familias iguales. Por ello, nuestro proceso de creación comienza con una conversación personal. Adaptamos cada plato a sus preferencias dietéticas, gustos personales y al tono del evento.
</p>
<ul class="space-y-6 mb-10">
<li class="flex items-start gap-4">
<span class="material-symbols-outlined text-primary" data-icon="auto_awesome">auto_awesome</span>
<div>
<h5 class="font-bold text-on-surface">Consultoría Privada</h5>
<p class="text-body-sm text-on-surface-variant">Reunión con nuestro Chef Ejecutivo para definir el concepto gastronómico.</p>
</div>
</li>
<li class="flex items-start gap-4">
<span class="material-symbols-outlined text-primary" data-icon="restaurant_menu">restaurant_menu</span>
<div>
<h5 class="font-bold text-on-surface">Prueba de Degustación</h5>
<p class="text-body-sm text-on-surface-variant">Sesión íntima para refinar sabores y presentaciones antes del gran día.</p>
</div>
</li>
<li class="flex items-start gap-4">
<span class="material-symbols-outlined text-primary" data-icon="local_florist">local_florist</span>
<div>
<h5 class="font-bold text-on-surface">Armonía Visual</h5>
<p class="text-body-sm text-on-surface-variant">Coordinación de mantelería, vajilla y cristalería con el menú seleccionado.</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- CTA WhatsApp -->
<section class="py-24 bg-primary text-on-primary">
<div class="px-margin-page max-w-container-max mx-auto text-center">
<h2 class="font-headline-lg text-headline-lg mb-8">¿Comenzamos a planear su próximo encuentro?</h2>
<p class="max-w-xl mx-auto mb-12 opacity-90 font-body-lg">
Nuestro equipo está disponible para asesorarle de forma inmediata y personalizada a través de nuestro canal exclusivo de WhatsApp.
</p>
<a class="inline-flex items-center gap-4 px-12 py-6 bg-surface text-primary rounded-lg font-bold uppercase tracking-widest hover:bg-surface-variant transition-all duration-300 scale-100 hover:scale-105 active:scale-95 shadow-xl" href="#">
<span class="material-symbols-outlined" data-icon="chat">chat</span>
Contactar por WhatsApp
</a>
</div>
</section>
</main>
<!-- Footer -->
<footer class="w-full py-section-gap bg-surface-container dark:bg-on-background border-t border-outline-variant/20">
<div class="flex flex-col md:flex-row justify-between items-start px-margin-page max-w-container-max mx-auto gap-gutter">
<div class="mb-12 md:mb-0">
<div class="font-headline-lg text-headline-lg text-on-surface dark:text-surface-bright mb-4">MNQ Catering</div>
<p class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant max-w-xs">
© 2024 MNQ Catering y Eventos. Excelencia culinaria para los momentos más importantes de su vida.
</p>
</div>
<div class="grid grid-cols-2 gap-16">
<div class="flex flex-col gap-4">
<span class="font-label-caps text-label-caps uppercase text-primary mb-2">Información</span>
<a class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Contacto</a>
<a class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Aviso Legal</a>
</div>
<div class="flex flex-col gap-4">
<span class="font-label-caps text-label-caps uppercase text-primary mb-2">Social</span>
<a class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Instagram</a>
<a class="font-body-sm text-body-sm text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed transition-colors" href="#">Facebook</a>
</div>
</div>
</div>
</footer>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 516 KiB