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

feat: page transitions, scroll progress bar, and staggered value cards

Browse Source
This commit is contained in:
Manuel
2026-05-10 15:41:03 +02:00
parent 97c05ff620
commit f1c1f54ef9
3 changed files with 113 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/nosotros.astro
+38 -3
View File
@@ -63,17 +63,17 @@ import MainLayout from '../layouts/MainLayout.astro';
<h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">Valores que nos definen</h2>
</div>
<div class="grid-3">
<div class="value-card">
<div class="value-card value-card-animate" data-value-delay="0">
<span class="material-symbols-outlined text-primary icon-lg">verified</span>
<h3 class="text-headline-md">Calidad</h3>
<p class="text-body-sm text-muted leading-relaxed">Innegociable. Desde la frescura del producto hasta el último detalle del servicio de sala.</p>
</div>
<div class="value-card">
<div class="value-card value-card-animate" data-value-delay="150">
<span class="material-symbols-outlined text-primary icon-lg">history_edu</span>
<h3 class="text-headline-md">Tradición</h3>
<p class="text-body-sm text-muted leading-relaxed">Honramos las técnicas clásicas que han forjado la gran cocina, aplicándolas con respeto.</p>
</div>
<div class="value-card">
<div class="value-card value-card-animate" data-value-delay="300">
<span class="material-symbols-outlined text-primary icon-lg">architecture</span>
<h3 class="text-headline-md">Vanguardia</h3>
<p class="text-body-sm text-muted leading-relaxed">Innovamos en presentaciones y texturas para sorprender a los paladares contemporáneos.</p>
@@ -147,4 +147,39 @@ import MainLayout from '../layouts/MainLayout.astro';
}
.quote-card-desktop { display: block !important; }
}
/* ─── VALUE CARD TIMELINE ANIMATION ──────────── */
.value-card-animate {
opacity: 0;
transform: translateY(20px) rotate(var(--card-tilt, 0deg));
transition:
opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--value-delay, 0) * 1ms);
}
.value-card-animate.visible {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
.value-card-animate:nth-child(1) { --card-tilt: 0deg; }
.value-card-animate:nth-child(2) { --card-tilt: 0deg; }
.value-card-animate:nth-child(3) { --card-tilt: 0deg; }
/* subtle stacking effect */
@media (min-width: 48rem) {
.value-card-animate:nth-child(1) { --card-tilt: -1.5deg; }
.value-card-animate:nth-child(2) { --card-tilt: 0deg; }
.value-card-animate:nth-child(3) { --card-tilt: 1.5deg; }
}
</style>
<script>
// Override IntersectionObserver to also handle value-card timing
const valueCards = document.querySelectorAll('.value-card-animate');
valueCards.forEach((card) => {
const delay = (card as HTMLElement).dataset.valueDelay || '0';
(card as HTMLElement).style.setProperty('--value-delay', delay);
});
</script>