qreastech/MNQ-Catering-y-Evento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: mobile-first responsive improvements across all pages

Browse Source
This commit is contained in:
Manuel
2026-05-10 16:09:26 +02:00
parent f1c1f54ef9
commit cc55641edf
6 changed files with 242 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/corporativo-business.astro
+31 -15
View File
@@ -8,31 +8,32 @@ import MainLayout from '../layouts/MainLayout.astro';
activeNav="corporativo"
>
<!-- ─── HERO ─── -->
<header style="padding-top:calc(var(--nav-h) + var(--space-section));padding-bottom:var(--space-section);overflow:hidden;">
<!-- ─── HERO ─── -->
<header style="padding-top:calc(var(--nav-h) + var(--space-8));padding-bottom:var(--space-8);overflow:hidden;">
<div class="page-wrap">
<div class="grid-12" style="align-items:center;gap:var(--space-8);">
<div style="grid-column:span 12;z-index:10;">
<p class="section-eyebrow reveal">Excelencia en Eventos</p>
<h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-8);">Corporativo<br />&amp; Business</h1>
<p class="text-muted reveal" style="--reveal-delay: 250;max-width:32rem;line-height:1.7;margin-bottom:var(--space-10);">
<h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-6);">Corporativo<br />&amp; Business</h1>
<p class="text-muted reveal" style="--reveal-delay: 250;max-width:32rem;line-height:1.7;margin-bottom:var(--space-8);">
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.
</p>
<div style="display:flex;gap:var(--space-6);flex-wrap:wrap;align-items:center;">
<div class="corp-hero-actions">
<a href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" class="btn btn-primary" target="_blank" rel="noreferrer">Solicitar Propuesta</a>
<a href="#servicios" class="btn-underline">Ver Servicios</a>
</div>
</div>
<div style="grid-column:span 12;position:relative;height:28rem;" class="reveal" style="--reveal-delay: 350;">
<img
src="/images/foto-corporativo.jpg"
alt="Eventos corporativos premium — MNQ"
class="rounded-lg border-outline-soft"
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
loading="eager"
/>
<div style="grid-column:span 12;position:relative;" class="reveal" style="--reveal-delay: 350;">
<div style="aspect-ratio: 16/9;" class="overflow-hidden rounded-lg border-outline-soft">
<img
src="/images/foto-corporativo.jpg"
alt="Eventos corporativos premium — MNQ"
style="width:100%;height:100%;object-fit:cover;object-position:center top;"
loading="eager"
/>
</div>
</div>
</div>
@@ -146,7 +147,22 @@ import MainLayout from '../layouts/MainLayout.astro';
grid-template-columns: 1fr;
gap: var(--space-4);
}
.corp-wide, .corp-tall { position: relative; min-height: 18rem; }
.corp-wide, .corp-tall { position: relative; min-height: 14rem; }
/* Hero actions stack on mobile */
.corp-hero-actions {
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: flex-start;
}
@media (min-width: 30rem) {
.corp-hero-actions {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 48rem) {
.corp-bento {
@@ -156,7 +172,7 @@ import MainLayout from '../layouts/MainLayout.astro';
}
.corp-wide { grid-column: span 2; }
.corp-tall { grid-row: span 2; min-height: auto; }
.corp-wide, .corp-tall { min-height: 20rem; }
[style*="grid-column:span 12"] { grid-column: span 6 !important; }
[style*="height:28rem"] { height: 36rem !important; }
}
</style>