Manuel
252 lines
14 KiB
HTML
252 lines
14 KiB
HTML
<!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:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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' 200, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
input:focus, textarea:focus {
|
|
outline: none;
|
|
border-bottom-color: #d4af37 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container">
|
|
<!-- TopAppBar Shell -->
|
|
<header class="fixed top-0 w-full z-50 h-20 bg-surface/80 backdrop-blur-md border-b border-outline/10">
|
|
<nav 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-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-variant 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-variant hover:text-primary transition-colors duration-300" href="#">Social</a>
|
|
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary border-b-2 border-primary pb-1" href="#">Contacto</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-primary scale-95 active:scale-90 transition-transform cursor-pointer" data-icon="chat">chat</span>
|
|
<button class="font-label-caps text-label-caps tracking-[0.15em] uppercase bg-primary text-on-primary px-6 py-3 rounded-[12px] hover:opacity-80 transition-all duration-300">WhatsApp</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main class="pt-40 pb-section-gap">
|
|
<!-- Hero Section -->
|
|
<section class="max-w-container-max mx-auto px-margin-page mb-section-gap">
|
|
<div class="grid grid-cols-12 gap-gutter">
|
|
<div class="col-span-12 md:col-span-7">
|
|
<h1 class="font-display-lg text-display-lg text-on-surface mb-8">Hablemos de su próximo evento.</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-lg">
|
|
Diseñamos experiencias gastronómicas a medida. Permítanos conocer sus necesidades para crear una propuesta única y exclusiva.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Contact Content Grid -->
|
|
<section class="max-w-container-max mx-auto px-margin-page">
|
|
<div class="grid grid-cols-12 gap-section-gap items-start">
|
|
<!-- Contact Info Column -->
|
|
<div class="col-span-12 md:col-span-4 flex flex-col gap-12">
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-label-caps text-label-caps text-primary uppercase">Ubicación</span>
|
|
<div class="flex items-start gap-4">
|
|
<span class="material-symbols-outlined text-primary" data-icon="location_on">location_on</span>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">Paseo de la Castellana 120,<br/>28046 Madrid, España</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-label-caps text-label-caps text-primary uppercase">Teléfono</span>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-primary" data-icon="call">call</span>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">+34 912 345 678</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-label-caps text-label-caps text-primary uppercase">Email</span>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-primary" data-icon="mail">mail</span>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">eventos@mnqcatering.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 border-l border-primary/20 pl-6 py-4">
|
|
<p class="font-headline-md text-headline-md text-primary italic">"Excelencia en cada detalle, pasión en cada plato."</p>
|
|
</div>
|
|
</div>
|
|
<!-- Form Column -->
|
|
<div class="col-span-12 md:col-span-8">
|
|
<form class="grid grid-cols-1 md:grid-cols-2 gap-x-gutter gap-y-12">
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Nombre Completo</label>
|
|
<input class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0" placeholder="Ej. Javier Sotomayor" type="text"/>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Correo Electrónico</label>
|
|
<input class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0" placeholder="javier@empresa.com" type="email"/>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Tipo de Evento</label>
|
|
<select class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0 appearance-none">
|
|
<option>Seleccione una opción</option>
|
|
<option>Boda</option>
|
|
<option>Evento Corporativo</option>
|
|
<option>Celebración Social</option>
|
|
<option>Otro</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Fecha Estimada</label>
|
|
<input class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0" type="date"/>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2 flex flex-col gap-2">
|
|
<label class="font-label-caps text-[10px] tracking-widest text-primary uppercase">Mensaje o Requerimientos Especiales</label>
|
|
<textarea class="bg-transparent border-t-0 border-x-0 border-b border-outline-variant py-4 font-body-lg text-on-surface focus:ring-0 resize-none" placeholder="Cuéntenos más sobre su visión..." rows="4"></textarea>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2 flex justify-end">
|
|
<button class="group flex items-center gap-4 font-label-caps text-label-caps text-primary border-b-2 border-primary pb-2 uppercase tracking-[0.2em] hover:opacity-70 transition-opacity">
|
|
Enviar Solicitud
|
|
<span class="material-symbols-outlined transform group-hover:translate-x-2 transition-transform" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Stylized Map Section -->
|
|
<section class="mt-section-gap max-w-container-max mx-auto px-margin-page">
|
|
<div class="relative h-[500px] w-full rounded-lg overflow-hidden border border-outline-variant/20 grayscale contrast-75 brightness-105">
|
|
<img alt="Mapa de Madrid" class="w-full h-full object-cover" data-alt="A high-end, minimalist architectural map visualization of a European city grid, rendered in soft ivory and muted grey tones to match a luxury aesthetic. The lighting is diffused and even, creating a calm and professional atmosphere. The map highlights key arteries in a subtle gold tint, emphasizing a premium and exclusive location context for a bespoke catering service." data-location="Madrid, Spain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDa1iS9fPPY_oBxiDtge7eQHmYG62AI1CJeDl00hJNDPBBJCZ073_OUQykqX1b0jW2pr103NyJxwr-HGiazBIBMvthNnhlgf_LrCVZf9BMAYFkFbqHu6phbYmePhKZpqQ1_gFHv5FxIXKBR7ajtzwbN1rDLIoRj0KwVkyRbjNAq9UNWVdTu0lAl1Xfy5RqV4PDVpGy-pmDcFFEGtRHuPk7DVRy3J-nUdZRQRyx-eW2ExDKT-UxDiR5cHU5UpF5AWnoDQxk-5LG9UzIN"/>
|
|
<div class="absolute inset-0 bg-surface/10 pointer-events-none"></div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
|
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center animate-pulse">
|
|
<div class="w-4 h-4 rounded-full bg-primary shadow-lg shadow-primary/50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer Shell -->
|
|
<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-[300px]">© 2024 MNQ Catering y Eventos. Excelencia culinaria.</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-12 gap-y-6">
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-label-caps text-[10px] text-primary uppercase">Menú</span>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Bodas</a>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Corporativo</a>
|
|
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Social</a>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-label-caps text-[10px] text-primary uppercase">Compañía</span>
|
|
<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>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-label-caps text-[10px] text-primary uppercase">Social</span>
|
|
<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>
|
|
</div>
|
|
</footer>
|
|
<!-- Floating WhatsApp CTA -->
|
|
<a class="fixed bottom-12 right-12 z-[60] flex items-center gap-4 bg-primary text-on-primary pl-8 pr-6 py-5 rounded-full shadow-2xl hover:scale-105 active:scale-95 transition-all duration-300 group" href="#">
|
|
<span class="font-label-caps text-label-caps tracking-widest uppercase">Consultar via WhatsApp</span>
|
|
<div class="w-10 h-10 rounded-full bg-on-primary/10 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-primary" data-icon="chat" data-weight="fill" style="font-variation-settings: 'FILL' 1;">chat</span>
|
|
</div>
|
|
</a>
|
|
</body></html> |