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,277 @@
<!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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Inter:wght@400;600&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": "0.5rem",
"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' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
}
body {
background-color: #fff8f0; /* Ivory background */
}
.hero-gradient {
background: linear-gradient(to bottom, rgba(31, 27, 19, 0) 0%, rgba(31, 27, 19, 0.4) 100%);
}
</style>
</head>
<body class="font-body-lg text-on-surface selection:bg-primary-fixed selection:text-on-primary-fixed">
<!-- TopNavBar -->
<nav class="fixed top-0 w-full z-50 h-20 bg-surface/80 backdrop-blur-md border-b border-outline/10">
<div class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
<div class="font-headline-md text-headline-md text-primary tracking-tighter">
MNQ Catering
</div>
<div class="hidden md:flex gap-gutter items-center">
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary border-b-2 border-primary pb-1" href="#">Bodas</a>
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Corporativo</a>
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Social</a>
</div>
<div class="flex items-center gap-4">
<button class="material-symbols-outlined text-primary hover:opacity-80 transition-all duration-300 scale-95 active:scale-90" data-icon="chat">chat</button>
<button class="bg-primary text-on-primary font-label-caps text-label-caps px-6 py-3 rounded-full hover:opacity-80 transition-all duration-300">WhatsApp</button>
</div>
</div>
</nav>
<main class="pt-20">
<!-- Hero Section -->
<section class="relative h-[819px] flex items-end overflow-hidden">
<img alt="Bodas Reales Hero" class="absolute inset-0 w-full h-full object-cover" data-alt="A cinematic, wide-angle photograph of a lavish outdoor wedding reception at dusk. Long imperial tables are decorated with ivory linens and tall gold candelabras under a canopy of warm fairy lights. The atmosphere is sophisticated and romantic, with a soft golden glow illuminating the scene against a deep twilight sky. High-end editorial photography style with warm, luxurious tones." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzpzp2X1SXuVzQhO1EI31EhUb1lbyWIV1Ivo4lOQdWM9z-NJu4t9dLarlSog2Yy4rjJH98a_fKVfYn82OHOe0W0WeNJi_RvxFLWQ2jjwKA6QlZEIFfQJWmfLwhvQxx9e7njx0yfsvfWw9qsPZKiJF1zlJxb2zKAiDJV-TKVb__O5rtBObPe1vP8YfNwMQApk27KbJ4aP-qdBSPVL4JLTG5VDEBsWAZ9NAaH1LqyZx_ipTBklTm-xJAUX9TIMCrzwtNoQrm6IVLPlgk"/>
<div class="absolute inset-0 hero-gradient"></div>
<div class="relative z-10 px-margin-page max-w-container-max mx-auto w-full pb-20">
<span class="font-label-caps text-label-caps text-primary-fixed uppercase tracking-[0.3em] mb-4 block">Portafolio Exclusivo</span>
<h1 class="font-display-lg text-display-lg text-white max-w-3xl">Bodas Reales</h1>
</div>
</section>
<!-- Intro Narrative -->
<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-center">
<div class="md:col-span-5">
<h2 class="font-headline-lg text-headline-lg text-primary mb-8 italic">Donde cada detalle cuenta una historia de amor.</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
En MNQ Catering, entendemos que una boda no es solo un evento, sino el reflejo de una promesa. Nuestra narrativa visual se construye a través de texturas, aromas y sabores que trascienden lo ordinario para crear memorias eternas.
</p>
</div>
<div class="md:col-start-8 md:col-span-5">
<div class="border-l border-primary/20 pl-8">
<p class="font-body-sm text-body-sm text-outline mb-4 uppercase tracking-widest">Excelencia Culinaria</p>
<p class="font-headline-md text-headline-md">Sinfonía de sabores diseñada para el paladar más exigente.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Bento Grid -->
<section class="pb-section-gap px-margin-page max-w-container-max mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 auto-rows-[400px]">
<!-- Large Feature -->
<div class="md:col-span-2 md:row-span-2 relative group overflow-hidden rounded-lg border border-outline-variant/10">
<img alt="Boda de Sofía y Mateo" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Close-up of a beautifully arranged gourmet appetizer plate featuring delicate edible flowers and microgreens. The ceramic plate has a subtle ivory texture, and the lighting is soft and natural, emphasizing the freshness of the ingredients. The composition is elegant and minimalist, reflecting a high-end culinary experience in a bright, airy setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDye__BTKYA7KSaGUQoWDg4ATrq_PltyzWgjKMPCyoZ_QdtaZnckcGqzEX8NLVaVQcZVpkBBmeVkxm2-1nH71S94IkQYOfl2YZ6xiKidh8r2zTje8OCrORKYgfkA3sOTfkAuGKAkECvzFiCFmECDWTaSpuIFQQ8VuSp6UQAvcEx5YeoxP5jHpdBtc96-5jXyymtlucB4f2LBdi5i5YS5U1KYftUHsXtlkyd5lpCq3oPM4m3xpBOxVLsx57h860oIkejh0U2ECkF0lKS"/>
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-12">
<h3 class="font-headline-lg text-white">Sofía &amp; Mateo</h3>
<p class="text-white/80 font-label-caps text-label-caps mt-2">Palacio de Santa Coloma • 2024</p>
</div>
</div>
<!-- Secondary Detail -->
<div class="relative group overflow-hidden rounded-lg border border-outline-variant/10">
<img alt="Montaje Floral" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Detailed view of an exquisite floral arrangement on a wedding table. It features cream-colored roses, pale eucalyptus leaves, and subtle gold accents. The background shows blurred crystal glassware and fine silverware, creating a sense of luxury and depth. The lighting is warm and inviting, highlighting the soft textures of the petals." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJrYjhGVTHj5mO0MBrtyY-nqliMoj_oTrFhwxLqmorwexRZawahjtDQIu0gD6qu4uJHnGk-ck-56aSUhA1zAUqT8nvoqCIlGhqSMrO1lL1t1nQgRAywwaxZ_I10o_ZzskXBCQjepOlGj0M7gdo0DuaC5bLRgLlebcrG5pycf_H03av6vAq68KzSP2_PEcNM54JlZgwa61uERNiU9l2WB6e25HahHPFs7HkQdmeUUIUzDiYEbEjiM5lgFvcSevVW4lXXqlsU_Ysxowk"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-8">
<span class="text-white font-label-caps text-label-caps">Detalles Florales</span>
</div>
</div>
<!-- Secondary Detail -->
<div class="relative group overflow-hidden rounded-lg border border-outline-variant/10">
<img alt="Cena al Aire Libre" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="An elegant wedding cake with minimal white frosting and real gold leaf accents standing on a marble pedestal. The setting is a bright, sunlit room with clean lines and a modern minimalist aesthetic. The image captures the texture of the gold leaf and the smooth finish of the cake, conveying a sense of luxury and sophisticated craftsmanship." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDkE12vhxPQyx4TmmFc4ooOAWXc5oM2XIdtYa3DUl7R_LsMcSHcQJ1X3IWycCGz2jxu-B3puYT04iLd-N0g_xBrLNwmDxGmAaLen4zxL6l3zuf5T3F-0CCqimNjTpk1rLaFid3zb9YiWjKRQvExc9R1pzVyDJ1ZvIkb_2yG5xD_tLUy7QhjHK1S6TSm5-geWaCyZBcxsheOSu9KlELaTUExlviu6OrF8Kfc-J-xoHpbjBooiLy-N5M_n9wLxc-1QtzArbuSwSrh5A_o"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-8">
<span class="text-white font-label-caps text-label-caps">Pastelería de Autor</span>
</div>
</div>
</div>
</section>
<!-- Feature Narrative: The Details -->
<section class="bg-surface-container py-section-gap">
<div class="px-margin-page max-w-container-max mx-auto">
<div class="text-center mb-16">
<h2 class="font-display-lg text-display-lg text-primary mb-4">El Arte de la Mesa</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto">Mantelería de lino fino, cristalería de bohemia y una curaduría floral que respira vida en cada rincón.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="text-center group">
<div class="aspect-[4/5] overflow-hidden mb-6 rounded-xl">
<img alt="Texturas" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" data-alt="A macro shot of luxurious ivory linen fabric with a subtle weave pattern, draped elegantly over a wooden surface. Soft, directional light creates gentle shadows, emphasizing the quality and tactile nature of the material. The color palette is warm and creamy, perfectly matching a high-end minimalist brand aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqzeskdMVJNYnJKY1xgWhJTgzOBPM5dGD0hA_r9HA8Pt8YkFQ5zttUR9zCRUG1C9OJ6-Ik2w0Il18iJ5J0kzdeRVBKuUXLkYAOqFlXAjUQzHjkntCoinm7cp5zG9n_SfY78pFSH8OcrtFUCzbYo35DoV-DDMimJqCpDdIPx7zzxrhyEITzTEQ09aR2ZHfFXbnQzWkU3qIkcNQLRU-cNQOeKzlUeE54aTRB6kHfkyfgPV8wIkc6CST0oBHKfdqHFnj8YPxfo11JKI1U"/>
</div>
<h4 class="font-headline-md text-headline-md mb-2">Texturas Nobles</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Linos y sedas seleccionados por su caída y tacto excepcional.</p>
</div>
<div class="text-center group mt-12 md:mt-0">
<div class="aspect-[4/5] overflow-hidden mb-6 rounded-xl">
<img alt="Cristalería" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" data-alt="Close-up of sparkling crystal wine glasses and champagne flutes arranged precisely on a set table. The sunlight catches the facets of the glass, creating brilliant highlights and a sense of celebration. In the background, a soft blur of a garden setting adds a touch of natural beauty to the sophisticated tabletop arrangement." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtYPXIAPE4QK5IW-jwOMvc-3yekAfg5s_RJy_JYuBHVKnuUUqpUHz9AtAhVqyfbSu2Nemhg-dE-42dpQfoRBRcXH0ODW_6sAbWva2RqRS2nJVA0gJGr7DxKHkM3FdKLBVW-RydGCDp5fY-7uFhRJ_KON54R0viitBNHicvBJkuPb8M9p29I-nYfvSzZ_FJ0liErMkUBRaGBOEg2NJ6iRUJ-QQwpZ-glyPk0Vee0Z5O7m-UqsjXEUX3qYi2qUcbpZVAgl56E7LmVOjI"/>
</div>
<h4 class="font-headline-md text-headline-md mb-2">Cristal &amp; Oro</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Detalles metálicos que aportan un brillo atemporal a su celebración.</p>
</div>
<div class="text-center group mt-12 md:mt-24">
<div class="aspect-[4/5] overflow-hidden mb-6 rounded-xl">
<img alt="Platos" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" data-alt="A gourmet main course featuring a perfectly seared piece of sea bass served with a vibrant saffron-infused sauce and artistic vegetable garnishes. The food is presented on a minimalist dark ceramic plate that contrasts beautifully with the warm yellow of the sauce. The lighting is sophisticated, focusing on the textures and colors of the culinary creation." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6RSF4S6qvIH6TVQFe93dcUMZJ6cpcajpX-0BhvXVBQ3zTIqrv426fVa2N8eRPfJS7NQISPIukTFxhsOsM-HlQpLnVxQlO7sgn43P7rWbpUix9nMovFCdS41Ogh_tfjP-r1eaew4lHLbBYlua4yCN88V8K2rFUUEU94NAszH5xQspdQMDDdgMHeC-h8vCFLThJE7EX4qZZjKyR-rpCYPB4QetiT_R_pStXFgM6Z6_cBPkh_nxsgi4j7NQekHYPmQh9UXUSqA22uRAb"/>
</div>
<h4 class="font-headline-md text-headline-md mb-2">Platos de Autor</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Cada ingrediente es una nota en nuestra composición gastronómica.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-section-gap px-margin-page max-w-container-max mx-auto overflow-hidden">
<div class="flex flex-col md:flex-row gap-gutter">
<div class="md:w-1/3">
<span class="font-label-caps text-label-caps text-primary uppercase tracking-widest mb-4 block">Testimonios</span>
<h2 class="font-headline-lg text-headline-lg mb-8">Palabras que nos inspiran.</h2>
</div>
<div class="md:w-2/3 grid grid-cols-1 md:grid-cols-2 gap-gutter">
<div class="bg-surface-container-low p-10 border border-outline-variant/30 flex flex-col h-full">
<div class="text-primary-container mb-6">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">format_quote</span>
</div>
<p class="font-body-lg text-body-lg italic mb-8 flex-grow text-on-surface">"Superaron cualquier expectativa. No solo fue la comida, que fue espectacular, sino la tranquilidad que nos dieron durante todo el proceso. Fue un sueño hecho realidad."</p>
<div class="border-t border-outline-variant pt-6">
<p class="font-label-caps text-label-caps font-bold">Elena &amp; Carlos</p>
<p class="font-body-sm text-body-sm text-outline">Finca La Montaña, Junio 2023</p>
</div>
</div>
<div class="bg-surface-container-low p-10 border border-outline-variant/30 flex flex-col h-full">
<div class="text-primary-container mb-6">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">format_quote</span>
</div>
<p class="font-body-lg text-body-lg italic mb-8 flex-grow text-on-surface">"Nuestros invitados todavía hablan del cóctel. La elegancia de cada bocado y la atención del personal fue impecable. MNQ es, sin duda, la mejor elección para una boda premium."</p>
<div class="border-t border-outline-variant pt-6">
<p class="font-label-caps text-label-caps font-bold">Patricia &amp; Javier</p>
<p class="font-body-sm text-body-sm text-outline">Castillo de Viñuelas, Septiembre 2023</p>
</div>
</div>
</div>
</div>
</section>
<!-- WhatsApp CTA -->
<section class="mb-section-gap px-margin-page max-w-container-max mx-auto">
<div class="relative bg-inverse-surface text-inverse-on-surface rounded-3xl p-16 md:p-24 overflow-hidden text-center">
<div class="absolute inset-0 opacity-10 pointer-events-none">
<div class="absolute top-0 left-0 w-64 h-64 border-2 border-primary-fixed rounded-full -translate-x-1/2 -translate-y-1/2"></div>
<div class="absolute bottom-0 right-0 w-96 h-96 border-2 border-primary-fixed rounded-full translate-x-1/2 translate-y-1/2"></div>
</div>
<h2 class="font-display-lg text-display-lg mb-8 relative z-10">¿Comenzamos a planear su gran día?</h2>
<p class="font-body-lg text-body-lg text-inverse-on-surface/80 max-w-xl mx-auto mb-12 relative z-10">Solicite una asesoría personalizada y reciba un presupuesto a medida para su boda exclusiva.</p>
<a class="inline-flex items-center gap-4 bg-primary-container text-on-primary-container font-label-caps text-label-caps px-10 py-5 rounded-full hover:bg-primary-fixed transition-all duration-300 scale-100 hover:scale-105 active:scale-95 relative z-10" href="#">
<span class="material-symbols-outlined">chat</span>
CONSULTAR POR WHATSAPP
</a>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-surface-container border-t border-outline-variant/20 w-full py-section-gap">
<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="flex flex-col gap-6">
<div class="font-headline-lg text-headline-lg text-on-surface">MNQ Catering</div>
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xs">© 2024 MNQ Catering y Eventos. Excelencia culinaria.</p>
</div>
<div class="grid grid-cols-2 gap-x-16 gap-y-4">
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Contacto</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Aviso Legal</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Instagram</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Facebook</a>
</div>
</div>
</footer>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 485 KiB