Mauricio López Coria
105 lines
3.3 KiB
Plaintext
105 lines
3.3 KiB
Plaintext
---
|
|
// "Por qué elegirnos" — Uniform 3-column grid with glass cards
|
|
import SectionEyebrow from './SectionEyebrow.astro';
|
|
import type { TranslationKey } from '@/i18n/ui';
|
|
import MateIcon from './icons/MateIcon.astro';
|
|
import SovereigntyIcon from './icons/SovereigntyIcon.astro';
|
|
import GlobeIcon from './icons/GlobeIcon.astro';
|
|
|
|
interface Props {
|
|
t: (key: TranslationKey) => string;
|
|
}
|
|
const { t } = Astro.props;
|
|
|
|
const items = [
|
|
{ Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey },
|
|
{ Icon: SovereigntyIcon, titleKey: 'diff.sovereignty.title' as TranslationKey, bodyKey: 'diff.sovereignty.body' as TranslationKey },
|
|
{ Icon: GlobeIcon, titleKey: 'diff.infra.title' as TranslationKey, bodyKey: 'diff.infra.body' as TranslationKey },
|
|
];
|
|
---
|
|
<section class="py-24 md:py-32" style="background: var(--hds-bg);" id="por-que-elegirnos">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-3xl mb-16 md:mb-20 reveal">
|
|
<SectionEyebrow text={t('diff.eyebrow')} />
|
|
<h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
|
|
{t('diff.title')}
|
|
</h2>
|
|
<p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
|
|
{t('diff.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="diff-grid">
|
|
{items.map((item, i) => (
|
|
<article class="glass-card diff-card p-8 flex flex-col" data-diff-index={i}>
|
|
<div class="flex flex-col flex-grow">
|
|
<div class="icon-circle mb-6">
|
|
<item.Icon class="w-7 h-7" />
|
|
</div>
|
|
<h3 class="text-xl md:text-2xl font-semibold mb-4" style="color: var(--hds-fg);">
|
|
{t(item.titleKey)}
|
|
</h3>
|
|
<p class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
|
|
{t(item.bodyKey)}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
import gsap from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
document.querySelectorAll('.diff-card').forEach((card) => {
|
|
card.addEventListener('mousemove', (e) => {
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
(e.currentTarget as HTMLElement).style.setProperty('--mouse-x', `${x}%`);
|
|
(e.currentTarget as HTMLElement).style.setProperty('--mouse-y', `${y}%`);
|
|
});
|
|
});
|
|
|
|
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
if (!prefersReduced) {
|
|
gsap.from('.diff-card', {
|
|
scrollTrigger: {
|
|
trigger: '.diff-grid',
|
|
start: 'top 80%',
|
|
toggleActions: 'play none none none',
|
|
},
|
|
opacity: 0,
|
|
y: 40,
|
|
duration: 0.7,
|
|
stagger: 0.12,
|
|
ease: 'power3.out',
|
|
clearProps: 'transform,opacity',
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.diff-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.diff-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
.diff-card {
|
|
min-height: 240px;
|
|
}
|
|
</style>
|