chore: bootstrap MNQ Astro site
This commit is contained in:
Manuel
@@ -0,0 +1,12 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-grid">
|
||||
<div>
|
||||
<p class="brand">MNQ Catering y Evento</p>
|
||||
<p class="text-muted">Experiencias gastronómicas premium para bodas, eventos corporativos y celebraciones familiares.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="footer-title">Contacto directo</p>
|
||||
<a href="https://wa.me/5491112345678" class="link-accent" target="_blank" rel="noreferrer">Escribir por WhatsApp</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,14 @@
|
||||
<header class="site-header">
|
||||
<div class="container nav-wrap">
|
||||
<a href="/" class="brand">MNQ Catering y Evento</a>
|
||||
<nav aria-label="Principal">
|
||||
<ul class="nav-list">
|
||||
<li><a href="/nosotros">Nosotros</a></li>
|
||||
<li><a href="/bodas-reales">Bodas Reales</a></li>
|
||||
<li><a href="/corporativo-business">Corporativo & Business</a></li>
|
||||
<li><a href="/reuniones-familiares">Reuniones Familiares</a></li>
|
||||
<li><a href="/contacto">Contacto</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,9 @@
|
||||
<a
|
||||
class="whatsapp-float"
|
||||
href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="Abrir conversación por WhatsApp"
|
||||
>
|
||||
WhatsApp
|
||||
</a>
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import SiteHeader from '../components/SiteHeader.astro';
|
||||
import SiteFooter from '../components/SiteFooter.astro';
|
||||
import WhatsAppButton from '../components/WhatsAppButton.astro';
|
||||
import '../styles/tokens.css';
|
||||
import '../styles/base.css';
|
||||
import '../styles/layout.css';
|
||||
import '../styles/components.css';
|
||||
import '../styles/utilities.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description = 'MNQ Catering y Evento · Experiencias premium para momentos inolvidables.' } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
</head>
|
||||
<body>
|
||||
<SiteHeader />
|
||||
<main class="container section-stack">
|
||||
<slot />
|
||||
</main>
|
||||
<SiteFooter />
|
||||
<WhatsAppButton />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Bodas Reales | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Servicio · Bodas Reales</p>
|
||||
<h1>Bodas con identidad propia y ejecución impecable.</h1>
|
||||
<p>Diseñamos menú, ambientación gastronómica y experiencia de servicio para que cada boda se sienta única, elegante y personal.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20boda" target="_blank" rel="noreferrer">Cotizar boda por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Contacto | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Contacto</p>
|
||||
<h1>Coordinemos tu evento por WhatsApp.</h1>
|
||||
<p>Canal principal de atención para asesorarte rápido y enviarte una propuesta personalizada.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20hablar%20sobre%20mi%20evento" target="_blank" rel="noreferrer">Iniciar conversación por WhatsApp</a>
|
||||
|
||||
<form class="contact-form" aria-label="Formulario de contacto secundario">
|
||||
<label>
|
||||
Nombre
|
||||
<input type="text" name="nombre" placeholder="Tu nombre" />
|
||||
</label>
|
||||
<label>
|
||||
Email
|
||||
<input type="email" name="email" placeholder="tu@email.com" />
|
||||
</label>
|
||||
<label>
|
||||
Mensaje
|
||||
<textarea name="mensaje" rows="4" placeholder="Contanos brevemente tu evento"></textarea>
|
||||
</label>
|
||||
<button type="submit" class="button-secondary">Enviar (secundario)</button>
|
||||
</form>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Corporativo & Business | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Servicio · Corporativo & Business</p>
|
||||
<h1>Eventos empresariales con timing, imagen y calidad premium.</h1>
|
||||
<p>Ofrecemos propuestas ejecutivas para lanzamientos, directorios y jornadas corporativas con foco en puntualidad y presentación profesional.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" target="_blank" rel="noreferrer">Solicitar propuesta por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="MNQ Catering y Evento | Home">
|
||||
<section class="hero card">
|
||||
<p class="eyebrow">Catering premium para eventos memorables</p>
|
||||
<h1>Diseñamos experiencias gastronómicas a la altura de tu celebración.</h1>
|
||||
<p>Con enfoque editorial, servicio impecable y ejecución personalizada para cada ocasión.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20asesoramiento%20para%20mi%20evento" target="_blank" rel="noreferrer">Cotizar por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Nosotros | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Nosotros</p>
|
||||
<h1>Hospitalidad, estética y excelencia operativa.</h1>
|
||||
<p>MNQ nace para elevar celebraciones con una propuesta premium que combina gastronomía, diseño y coordinación integral del evento.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20conocer%20su%20propuesta" target="_blank" rel="noreferrer">Hablar por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout title="Reuniones Familiares | MNQ Catering y Evento">
|
||||
<section class="card section-stack-sm">
|
||||
<p class="eyebrow">Servicio · Reuniones Familiares</p>
|
||||
<h1>Celebraciones íntimas con calidez y refinamiento.</h1>
|
||||
<p>Desde aniversarios hasta cenas privadas, creamos experiencias cuidadas para disfrutar en familia sin resignar elegancia.</p>
|
||||
<a class="button-primary" href="https://wa.me/5491112345678?text=Hola%20MNQ%2C%20quiero%20cotizar%20una%20reunion%20familiar" target="_blank" rel="noreferrer">Consultar por WhatsApp</a>
|
||||
</section>
|
||||
</MainLayout>
|
||||
@@ -0,0 +1,33 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.6;
|
||||
color: var(--color-on-surface);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-serif);
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
.site-header {
|
||||
border-bottom: 1px solid rgb(31 26 23 / 10%);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid rgb(31 26 23 / 10%);
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
|
||||
.footer-title,
|
||||
.eyebrow {
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid rgb(31 26 23 / 8%);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.button-primary,
|
||||
.button-secondary {
|
||||
width: fit-content;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: var(--color-primary);
|
||||
color: #201a14;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: var(--color-secondary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: transparent;
|
||||
color: var(--color-on-surface);
|
||||
border-color: rgb(31 26 23 / 25%);
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid rgb(31 26 23 / 20%);
|
||||
padding: 0.75rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.whatsapp-float {
|
||||
position: fixed;
|
||||
right: var(--space-4);
|
||||
bottom: var(--space-4);
|
||||
z-index: 50;
|
||||
background: #25d366;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
min-height: 48px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.container {
|
||||
width: min(100% - 2rem, 72rem);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.section-stack {
|
||||
padding-block: var(--space-8) var(--space-12);
|
||||
}
|
||||
|
||||
.section-stack-sm {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.nav-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
padding-block: var(--space-4);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.nav-wrap {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
:root {
|
||||
--color-primary: #d4af37;
|
||||
--color-secondary: #a67c1b;
|
||||
--color-surface: #fffdf8;
|
||||
--color-on-surface: #1f1a17;
|
||||
--color-error: #b3261e;
|
||||
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-serif: 'Playfair Display', Georgia, serif;
|
||||
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: clamp(1.5rem, 5vw, 2.25rem);
|
||||
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-12: 3rem;
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 20px;
|
||||
|
||||
--shadow-soft: 0 8px 24px rgb(31 26 23 / 8%);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.text-muted {
|
||||
color: rgb(31 26 23 / 72%);
|
||||
}
|
||||
|
||||
.link-accent {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
Reference in New Issue
Block a user