65 lines
3.0 KiB
Plaintext
65 lines
3.0 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';
|
|
import trialImg from '../assets/img/trial-class.jpg';
|
|
import T from '../components/content/T.astro';
|
|
import TImg from '../components/content/TImg.astro';
|
|
import { t } from '../lib/content';
|
|
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 = false;
|
|
---
|
|
<Base title={t('training.meta.title')} description={t('training.meta.description')}>
|
|
<PageHero title={t('training.hero.title')} />
|
|
|
|
<section class="section" style="padding-bottom:0">
|
|
<div class="section-heading">
|
|
<T tag="training.intro.title" as="h2" />
|
|
<T tag="training.intro.subtitle" as="p" />
|
|
</div>
|
|
</section>
|
|
<TrainingCards />
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
{trainings.map((tr, i) => (
|
|
<div class:list={['tblock', { 'tblock--reverse': i % 2 === 1 }]} id={tr.id}>
|
|
{imgOf(tr.image) && <Image src={imgOf(tr.image)!} alt={t(`training.${tr.id}.title`)} widths={[500, 900]} sizes="(max-width:767px) 100vw, 45vw" data-reveal={i % 2 === 1 ? 'right' : 'left'} />}
|
|
<div data-reveal={i % 2 === 1 ? 'left' : 'right'}>
|
|
<h2 data-tag={`training.${tr.id}.title`}>{t(`training.${tr.id}.title`).toLowerCase()}</h2>
|
|
<T tag={`training.${tr.id}.description`} as="p" />
|
|
<a class="btn" href={tr.cta.href}><T tag={`training.${tr.id}.cta-label`} as="span" /></a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<Agenda />
|
|
|
|
<section class="section section--alt">
|
|
<div class="container trial">
|
|
<TImg tag="training.trial.image" src={trialImg} alt="Lezione di prova InsanityLab" widths={[500, 900]} sizes="(max-width:767px) 100vw, 45vw" data-reveal="left" />
|
|
<div data-reveal="right">
|
|
<T tag="training.trial.title" as="h2" />
|
|
<T tag="training.trial.body" as="p" />
|
|
<a class="btn btn--dark" href="/contact">{t('training.trial.cta')}</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 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
|
|
.trial img { width: 100%; height: auto; max-height: 460px; object-fit: cover; }
|
|
@media (max-width: 767px) { .trial { grid-template-columns: 1fr; gap: 24px; } }
|
|
@media (max-width: 767px) { .tblock { grid-template-columns: 1fr; gap: 24px; } .tblock--reverse img { order: 0; } }
|
|
</style>
|