33 lines
2.0 KiB
Plaintext
33 lines
2.0 KiB
Plaintext
---
|
|
import { getImage } from 'astro:assets';
|
|
import infoPerformance from '../../assets/img/info-performance.jpg';
|
|
import infoBalance from '../../assets/img/info-balance.jpg';
|
|
import infoLongevity from '../../assets/img/info-longevity.jpg';
|
|
import T from '../content/T.astro';
|
|
import { contentImageUrl } from '../../lib/content';
|
|
// getImage garantisce l'emissione dell'asset anche quando il file è byte-identico
|
|
// ad altri import (Astro dedupa e non emette l'originale usato solo come background).
|
|
const cols = await Promise.all([
|
|
{ titleTag: 'home.info.col1.title', imageTag: 'home.info.col1.image', image: infoPerformance },
|
|
{ titleTag: 'home.info.col2.title', imageTag: 'home.info.col2.image', image: infoBalance },
|
|
{ titleTag: 'home.info.col3.title', imageTag: 'home.info.col3.image', image: infoLongevity },
|
|
].map(async (c) => ({ ...c, bg: contentImageUrl(c.imageTag, (await getImage({ src: c.image, width: 1200 })).src) })));
|
|
---
|
|
<section class="info" aria-label="pilastri">
|
|
{cols.map((c, i) => (
|
|
<a class="info__col" href="/programs" style={`background-image:url(${c.bg});--reveal-delay:${i * 0.15}s`} data-reveal="fade" data-tag={c.imageTag}>
|
|
<T tag={c.titleTag} as="span" class="info__title" />
|
|
</a>
|
|
))}
|
|
</section>
|
|
|
|
<style>
|
|
.info { display: grid; grid-template-columns: repeat(3, 1fr); }
|
|
/* Proporzioni Figma: colonna 413x308 su frame 1209 — l'altezza scala con la larghezza */
|
|
.info__col { position: relative; aspect-ratio: 413 / 308; min-height: 320px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-decoration: none; }
|
|
.info__col::before { content: ''; position: absolute; inset: 0; background: rgba(30,24,20,.35); transition: background .2s; }
|
|
.info__col:hover::before { background: rgba(30,24,20,.15); }
|
|
.info__title { position: relative; color: #fff; font-family: var(--font-heading); font-weight: 600; letter-spacing: .1em; font-size: 1.1rem; }
|
|
@media (max-width: 767px) { .info { grid-template-columns: 1fr; } .info__col { aspect-ratio: auto; } }
|
|
</style>
|