diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro index 8273961..6956f4a 100644 --- a/src/layouts/MainLayout.astro +++ b/src/layouts/MainLayout.astro @@ -8,6 +8,7 @@ import '../styles/base.css'; import '../styles/layout.css'; import '../styles/components.css'; import '../styles/utilities.css'; +import '../styles/animations.css'; interface Props { title: string; @@ -49,5 +50,36 @@ const { + + diff --git a/src/pages/bodas-reales.astro b/src/pages/bodas-reales.astro index 7dc6e3a..d1203e0 100644 --- a/src/pages/bodas-reales.astro +++ b/src/pages/bodas-reales.astro @@ -32,15 +32,15 @@ import MainLayout from '../layouts/MainLayout.astro';
-

+

Donde cada detalle cuenta una historia de amor.

-

+

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.

-
+

Excelencia Culinaria

Sinfonía de sabores diseñada para el paladar más exigente.

@@ -97,15 +97,15 @@ import MainLayout from '../layouts/MainLayout.astro';
-

El Arte de la Mesa

-

+

El Arte de la Mesa

+

Mantelería de lino fino, cristalería de bohemia y una curaduría floral que respira vida en cada rincón.

-
+
Texturas nobles

Texturas Nobles

@@ -113,7 +113,7 @@ import MainLayout from '../layouts/MainLayout.astro';
-
+
Canapés premium

Cristal & Oro

@@ -121,7 +121,7 @@ import MainLayout from '../layouts/MainLayout.astro';
-
+
Platos de autor

Platos de Autor

diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro index b010c0c..d859757 100644 --- a/src/pages/contacto.astro +++ b/src/pages/contacto.astro @@ -14,8 +14,8 @@ import MainLayout from '../layouts/MainLayout.astro';
- Contacto -

+ Contacto +

Hablemos de su próximo evento.

diff --git a/src/pages/corporativo-business.astro b/src/pages/corporativo-business.astro index e4345ad..76aea55 100644 --- a/src/pages/corporativo-business.astro +++ b/src/pages/corporativo-business.astro @@ -14,9 +14,9 @@ import MainLayout from '../layouts/MainLayout.astro';

-

Excelencia en Eventos

-

Corporativo
& Business

-

+

Excelencia en Eventos

+

Corporativo
& Business

+

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.

@@ -25,7 +25,7 @@ import MainLayout from '../layouts/MainLayout.astro';
-
+
Eventos corporativos premium — MNQ
-

Servicios Especializados

-
+

Servicios Especializados

+
diff --git a/src/pages/index.astro b/src/pages/index.astro index f36c57f..a08121f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -17,15 +17,15 @@ import MainLayout from '../layouts/MainLayout.astro';
-

+

Catering premium para eventos memorables

-

+

MNQ: donde la tradición
se encuentra con la exclusividad

@@ -39,15 +39,15 @@ import MainLayout from '../layouts/MainLayout.astro';
- Nuestra Propuesta -

Experiencias Gastronómicas a Medida

+ Nuestra Propuesta +

Experiencias Gastronómicas a Medida

-
+
Bodas Reales — MNQ Catering
-
+

Bodas

El arte de celebrar el amor con un banquete inolvidable diseñado hasta el último detalle.

Saber más @@ -65,7 +65,7 @@ import MainLayout from '../layouts/MainLayout.astro';
-
+
Corporativo — MNQ Catering
-
+

Eventos Corporativos

Reforzamos la identidad de su empresa a través de una propuesta culinaria de primer nivel.

Saber más @@ -83,7 +83,7 @@ import MainLayout from '../layouts/MainLayout.astro';
-
+
Reuniones Familiares — MNQ Catering
-
+

Reuniones Familiares

La calidez del hogar elevada por la excelencia de nuestra cocina de autor.

Saber más @@ -108,8 +108,8 @@ import MainLayout from '../layouts/MainLayout.astro';
- Galería -

Momentos MNQ

+ Galería +

Momentos MNQ

- Postre de autor con oro - Canapés premium - Vieiras con azafrán - Mesa de boda - Plato MNQ Catering - Bartender de coctelería + Postre de autor con oro + Canapés premium + Vieiras con azafrán + Mesa de boda + Plato MNQ Catering + Bartender de coctelería
@@ -131,17 +131,17 @@ import MainLayout from '../layouts/MainLayout.astro';
-
+
★★★ ★★
-

+

Lo que nuestros clientes dicen sobre nosotros

-
+

"MNQ transformó nuestra boda en un sueño gastronómico. La atención al detalle y la calidad de los ingredientes superaron cualquier expectativa."

@@ -153,7 +153,7 @@ import MainLayout from '../layouts/MainLayout.astro';
-
+

"Para nuestro evento corporativo anual necesitábamos algo que reflejara nuestra marca. MNQ fue la elección perfecta: sobriedad y sabor excepcional."

diff --git a/src/pages/nosotros.astro b/src/pages/nosotros.astro index 8cf0bc0..391dd5a 100644 --- a/src/pages/nosotros.astro +++ b/src/pages/nosotros.astro @@ -14,8 +14,8 @@ import MainLayout from '../layouts/MainLayout.astro';
- Nuestra Esencia -

El arte de la hospitalidad elevada.

+ Nuestra Esencia +

El arte de la hospitalidad elevada.

Desde nuestra fundación, MNQ Catering ha redefinido el concepto de exclusividad culinaria. No solo servimos comida; curamos momentos que perduran en la memoria de los paladares más exigentes.

@@ -59,8 +59,8 @@ import MainLayout from '../layouts/MainLayout.astro';
- Pilares de Marca -

Valores que nos definen

+ Pilares de Marca +

Valores que nos definen

@@ -87,8 +87,8 @@ import MainLayout from '../layouts/MainLayout.astro';
- El Capital Humano -

Mentes tras el menú

+ El Capital Humano +

Mentes tras el menú

Un equipo multidisciplinar de chefs, sommeliers y diseñadores de eventos unidos por un propósito común.

diff --git a/src/pages/reuniones-familiares.astro b/src/pages/reuniones-familiares.astro index 601ac25..692b749 100644 --- a/src/pages/reuniones-familiares.astro +++ b/src/pages/reuniones-familiares.astro @@ -23,9 +23,9 @@ import MainLayout from '../layouts/MainLayout.astro';
- Eventos Sociales -

Reuniones Familiares con Alma

-

+ Eventos Sociales +

Reuniones Familiares con Alma

+

Creamos experiencias culinarias íntimas donde cada detalle cuenta. Desde bautizos hasta aniversarios dorados, transformamos su mesa en un escenario de recuerdos inolvidables.

-

Momentos que Merecen Excelencia

-

+

Momentos que Merecen Excelencia

+

"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."

@@ -108,8 +108,8 @@ import MainLayout from '../layouts/MainLayout.astro';
- Culinaria de Autor -

Platos que Cuentan Historias

+ Culinaria de Autor +

Platos que Cuentan Historias

@@ -175,10 +175,10 @@ import MainLayout from '../layouts/MainLayout.astro';
-

+

Menús Diseñados Exclusivamente para Usted

-

+

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.

    diff --git a/src/styles/animations.css b/src/styles/animations.css new file mode 100644 index 0000000..0947d67 --- /dev/null +++ b/src/styles/animations.css @@ -0,0 +1,257 @@ +/* ════════════════════════════════════════════ + MNQ — PREMIUM ANIMATIONS + Elegant, slow, gold-accented. No bounce. + ════════════════════════════════════════════ */ + +/* ─── SCROLL REVEAL ─────────────────────────── */ + +.reveal { + opacity: 0; + transform: translateY(28px); + transition: + opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), + transform 800ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* stagger via CSS variable set by JS */ +.reveal { transition-delay: calc(var(--reveal-delay, 0) * 1ms); } + +/* Variante horizontal (desde izquierda) */ +.reveal-left { + opacity: 0; + transform: translateX(-32px); + transition: + opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), + transform 900ms cubic-bezier(0.22, 1, 0.36, 1); +} +.reveal-left.visible { + opacity: 1; + transform: translateX(0); +} + +/* Variante scale (para imágenes de galería) */ +.reveal-scale { + opacity: 0; + transform: scale(0.94); + transition: + opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), + transform 700ms cubic-bezier(0.22, 1, 0.36, 1); +} +.reveal-scale.visible { + opacity: 1; + transform: scale(1); +} + +/* ─── HERO ENTRANCE ──────────────────────────── */ + +@keyframes mnq-rise { + from { + opacity: 0; + transform: translateY(36px); + filter: blur(4px); + } + to { + opacity: 1; + transform: translateY(0); + filter: blur(0); + } +} + +.hero-enter { + animation: mnq-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) both; +} +.hero-enter-1 { animation-delay: 200ms; } +.hero-enter-2 { animation-delay: 500ms; } +.hero-enter-3 { animation-delay: 780ms; } +.hero-enter-4 { animation-delay: 1050ms; } + +/* ─── GOLD SHIMMER (botones) ─────────────────── */ + +.btn, .btn-pill, .btn-primary, .btn-dark, .btn-ghost { + position: relative; + overflow: hidden; +} + +.btn::after, +.btn-pill::after, +.btn-primary::after, +.btn-dark::after, +.btn-ghost::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient( + 105deg, + transparent 30%, + rgb(255 255 255 / 22%) 50%, + transparent 70% + ); + transform: translateX(-120%) skewX(-18deg); + pointer-events: none; + transition: none; +} + +.btn:hover::after, +.btn-pill:hover::after, +.btn-primary:hover::after, +.btn-dark:hover::after, +.btn-ghost:hover::after { + animation: shimmer-sweep 550ms cubic-bezier(0.25, 0, 0.6, 1) forwards; +} + +@keyframes shimmer-sweep { + from { transform: translateX(-120%) skewX(-18deg); } + to { transform: translateX(160%) skewX(-18deg); } +} + +/* ─── WHATSAPP PULSE GLOW ────────────────────── */ + +@keyframes wa-glow { + 0%, 100% { + box-shadow: + 0 0 0 0 rgb(212 175 55 / 50%), + 0 25px 50px -12px rgb(31 26 23 / 20%); + } + 50% { + box-shadow: + 0 0 0 10px rgb(212 175 55 / 0%), + 0 25px 50px -12px rgb(31 26 23 / 20%); + } +} + +.whatsapp-float { + animation: wa-glow 2.8s ease-in-out infinite; +} + +/* ─── GOLD LINE DRAW ─────────────────────────── */ + +.gold-line { + transform-origin: left center; + transform: scaleX(0); + transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.gold-line.visible { + transform: scaleX(1); +} + +/* ─── HEADER SCROLL ELEVATION ────────────────── */ + +.site-header { + transition: + background 300ms ease, + box-shadow 300ms ease; +} + +.site-header.is-scrolled { + box-shadow: 0 4px 24px rgb(0 0 0 / 10%); + background: rgb(255 248 240 / 97%); +} + +/* ─── EYEBROW GOLD BLINK ─────────────────────── */ + +@keyframes eyebrow-in { + from { + opacity: 0; + letter-spacing: 0.5em; + color: transparent; + } + to { + opacity: 1; + letter-spacing: 0.3em; + color: var(--color-primary); + } +} + +.section-eyebrow.reveal.visible { + animation: eyebrow-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both; +} + +/* ─── LOGO EYE SUBTLE GLOW (header) ─────────── */ + +@keyframes eye-shimmer { + 0%, 100% { filter: brightness(1) drop-shadow(0 0 0px rgb(212 175 55 / 0%)); } + 50% { filter: brightness(1.08) drop-shadow(0 0 6px rgb(212 175 55 / 30%)); } +} + +.site-logo-banner { + animation: eye-shimmer 5s ease-in-out infinite; +} + +/* ─── BENTO CARD HOVER LIFT ──────────────────── */ + +.bento-card { + transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.bento-card:hover { + transform: translateY(-4px); +} + +/* ─── TESTIMONIAL CARD HOVER ─────────────────── */ + +.testimonial-card { + transition: transform 400ms ease, box-shadow 400ms ease; +} + +.testimonial-card:hover { + transform: translateY(-6px); + box-shadow: 0 20px 40px -12px rgb(115 92 0 / 12%); +} + +/* ─── DARK CTA — CANDLE AMBIENT ──────────────── */ + +@keyframes candle-glow { + 0%, 100% { opacity: 0.06; } + 33% { opacity: 0.09; } + 66% { opacity: 0.05; } +} + +.cta-dark::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse at 50% 0%, var(--color-primary-container), transparent 65%); + pointer-events: none; + animation: candle-glow 6s ease-in-out infinite; + z-index: 0; +} + +/* ─── NAV LINK UNDERLINE SLIDE ───────────────── */ + +.nav-link { + position: relative; +} + +.nav-link:not(.active)::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 100%; + height: 1px; + background: var(--color-primary); + transform: scaleX(0); + transform-origin: right; + transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.nav-link:hover::after { + transform: scaleX(1); + transform-origin: left; +} + +/* ─── REDUCE MOTION ──────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +}