58 lines
2.4 KiB
Plaintext
58 lines
2.4 KiB
Plaintext
---
|
|
import Base from '../layouts/Base.astro';
|
|
import PageHero from '../components/PageHero.astro';
|
|
import TrainingCards from '../components/home/TrainingCards.astro';
|
|
import Agenda from '../components/Agenda.astro';
|
|
import { Image } from 'astro:assets';
|
|
import { trainings } from '../data/trainings';
|
|
const images = import.meta.glob<{ default: ImageMetadata }>('../assets/img/training-*.{jpg,png}', { eager: true });
|
|
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1]?.default;
|
|
export const prerender = true;
|
|
---
|
|
<Base title="Training" description="One to One, Small Groups, Performance Class e Fit Remote: trova il training InsanityLab più adatto a te.">
|
|
<PageHero title="training" />
|
|
|
|
<section class="section" style="padding-bottom:0">
|
|
<div class="section-heading">
|
|
<h2>Training</h2>
|
|
<p>Porta i tuoi allenamenti al livello successivo: programmi completi e percorsi su misura. Trova il training più adatto alle tue esigenze.</p>
|
|
</div>
|
|
</section>
|
|
<TrainingCards />
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
{trainings.map((t, i) => (
|
|
<div class:list={['tblock', { 'tblock--reverse': i % 2 === 1 }]} id={t.id}>
|
|
{imgOf(t.image) && <Image src={imgOf(t.image)!} alt={t.title} widths={[500, 900]} sizes="(max-width:767px) 100vw, 45vw" />}
|
|
<div>
|
|
<h2>{t.title.toLowerCase()}</h2>
|
|
<p>{t.description}</p>
|
|
<a class="btn" href={t.cta.href}>{t.cta.label}</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<Agenda />
|
|
|
|
<section class="section section--alt">
|
|
<div class="container trial">
|
|
<div>
|
|
<h2>Prenota la lezione di prova</h2>
|
|
<p>La lezione di prova è l'occasione perfetta per conoscere il metodo, vivere l'esperienza in prima persona e capire il percorso più adatto a te. Inizia oggi il tuo percorso: prenota la tua lezione di prova.</p>
|
|
<a class="btn btn--dark" href="/contact">Prenota</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Base>
|
|
|
|
<style>
|
|
.tblock { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-block: 40px; scroll-margin-top: calc(var(--header-h) + 20px); }
|
|
.tblock--reverse img { order: 2; }
|
|
.tblock h2 { letter-spacing: .1em; }
|
|
.trial { max-width: 720px; text-align: center; }
|
|
@media (max-width: 767px) { .tblock { grid-template-columns: 1fr; gap: 24px; } .tblock--reverse img { order: 0; } }
|
|
</style>
|