202 lines
7.9 KiB
Plaintext
202 lines
7.9 KiB
Plaintext
---
|
|
import type { ImageMetadata } from 'astro';
|
|
import Base from '../layouts/Base.astro';
|
|
import PageHero from '../components/PageHero.astro';
|
|
import Timeline from '../components/about/Timeline.astro';
|
|
import { team } from '../data/team';
|
|
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/*.{jpg,png}', { eager: true });
|
|
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1]?.default;
|
|
const founders = team.filter((m) => m.founder);
|
|
const staff = team.filter((m) => !m.founder);
|
|
export const prerender = false;
|
|
---
|
|
<Base title={t('about.meta.title')} description={t('about.meta.description')}>
|
|
<PageHero title={t('about.hero.title')} />
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="about-img-row">
|
|
<div class="about-img-row__text section-heading">
|
|
<T tag="about.mission.title" as="h2" />
|
|
<T tag="about.mission.body" as="p" />
|
|
</div>
|
|
{imgOf('about-training-group') && (
|
|
<div class="about-img-row__img">
|
|
<TImg tag="about.mission.image" src={imgOf('about-training-group')!} alt="Training group InsanityLab" widths={[600, 900]} sizes="(max-width:767px) 100vw, 50vw" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section--alt">
|
|
<div class="container about-2col">
|
|
<div>
|
|
<T tag="about.direzione.title" as="h2" />
|
|
<T tag="about.direzione.body" as="p" />
|
|
<a class="btn" href="/programs">{t('about.direzione.cta')}</a>
|
|
</div>
|
|
<div>
|
|
<T tag="about.approccio.title" as="h2" />
|
|
<T tag="about.approccio.body" as="p" />
|
|
<a class="btn btn--dark" href="/contact">{t('about.approccio.cta')}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="about-img-row about-img-row--reverse">
|
|
<div class="about-img-row__text section-heading">
|
|
<T tag="about.about.title" as="h2" />
|
|
<T tag="about.about.body" as="p" />
|
|
</div>
|
|
{imgOf('about-pushup') && (
|
|
<div class="about-img-row__img about-img-row__img--native">
|
|
<TImg tag="about.about.image" src={imgOf('about-pushup')!} alt="Allenamento InsanityLab" widths={[320, 640]} sizes="320px" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Timeline />
|
|
|
|
<section class="section section--dark">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<T tag="about.convenzioni.title" as="h2" />
|
|
<T tag="about.convenzioni.body" as="p" />
|
|
</div>
|
|
<ul class="conv">
|
|
<T tag="about.convenzioni.item1" as="li" />
|
|
<T tag="about.convenzioni.item2" as="li" />
|
|
<T tag="about.convenzioni.item3" as="li" />
|
|
</ul>
|
|
<p class="conv__cta">{t('about.convenzioni.cta-text')} {t('global.contact.email')} · {t('global.contact.phone')}</p>
|
|
{imgOf('about-conventions') && (
|
|
<div class="round-img">
|
|
<TImg tag="about.convenzioni.image" src={imgOf('about-conventions')!} alt="Convenzioni aziendali" widths={[360, 720]} sizes="360px" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<T tag="about.team.title" as="h2" />
|
|
<T tag="about.team.body" as="p" />
|
|
</div>
|
|
<div class="tgrid tgrid--founders">
|
|
{founders.map((m) => {
|
|
const slug = m.shortName.toLowerCase();
|
|
return (
|
|
<article class="tcard">
|
|
{m.imageAbout && imgOf(m.imageAbout) && <TImg tag={`team.${slug}.image-about`} src={imgOf(m.imageAbout)!} alt={m.name} widths={[300, 500]} sizes="(max-width:767px) 100vw, 33vw" />}
|
|
<T tag={`team.${slug}.short-name`} as="h3" />
|
|
<T tag={`team.${slug}.role`} as="p" class="tcard__role" />
|
|
<T tag={`team.${slug}.bio`} as="p" />
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
<p class="section-heading" style="margin-top:60px">{t('about.team.staff-intro')}</p>
|
|
<div class="tgrid">
|
|
{staff.map((m) => {
|
|
const slug = m.shortName.toLowerCase();
|
|
return (
|
|
<article class="tcard">
|
|
{m.imageAbout && imgOf(m.imageAbout) && <TImg tag={`team.${slug}.image-about`} src={imgOf(m.imageAbout)!} alt={m.name} widths={[300, 500]} sizes="(max-width:767px) 100vw, 33vw" />}
|
|
<T tag={`team.${slug}.short-name`} as="h3" />
|
|
<T tag={`team.${slug}.role`} as="p" class="tcard__role" />
|
|
<T tag={`team.${slug}.bio`} as="p" />
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section--alt">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<T tag="about.metodo.title" as="h2" />
|
|
<T tag="about.metodo.body" as="p" />
|
|
</div>
|
|
<div class="about-img-row">
|
|
<div class="about-img-row__text section-heading">
|
|
<T tag="about.metodo.closing" as="p" />
|
|
</div>
|
|
{imgOf('about-team-group') && (
|
|
<div class="round-img">
|
|
<TImg tag="about.metodo.image" src={imgOf('about-team-group')!} alt="Il team InsanityLab" widths={[360, 720]} sizes="360px" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="about-img-row">
|
|
<div class="about-img-row__text section-heading">
|
|
<T tag="about.studios.title" as="h2" />
|
|
<T tag="about.studios.body1" as="p" />
|
|
<T tag="about.studios.body2" as="p" />
|
|
<T tag="about.studios.body3" as="p" />
|
|
</div>
|
|
{imgOf('about-studios') && (
|
|
<div class="about-img-row__img">
|
|
<TImg tag="about.studios.image" src={imgOf('about-studios')!} alt="In-Sanity Studios" widths={[600, 900]} sizes="(max-width:767px) 100vw, 50vw" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section--alt">
|
|
<div class="container">
|
|
<div class="about-img-row">
|
|
{imgOf('about-vision') && (
|
|
<div class="round-img">
|
|
<TImg tag="about.vision.image" src={imgOf('about-vision')!} alt="La comunità InsanityLab" widths={[360, 720]} sizes="360px" />
|
|
</div>
|
|
)}
|
|
<div class="about-img-row__text section-heading">
|
|
<T tag="about.vision.title" as="h2" />
|
|
<T tag="about.vision.body1" as="p" />
|
|
<T tag="about.vision.body2" as="p" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Base>
|
|
|
|
<style>
|
|
.about-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
|
|
.about-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
|
|
.about-img-row--reverse { direction: rtl; }
|
|
.about-img-row--reverse > * { direction: ltr; }
|
|
.about-img-row__img img { width: 100%; height: auto; display: block; }
|
|
.about-img-row__img--native { max-width: 320px; margin: 0 auto; }
|
|
.conv { max-width: 760px; margin: 0 auto 30px; display: grid; gap: 18px; padding-left: 20px; }
|
|
.conv__cta { text-align: center; font-family: var(--font-heading); letter-spacing: .06em; }
|
|
.round-img { max-width: 380px; margin: 30px auto 0; }
|
|
.round-img img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 100%; }
|
|
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
|
|
.tcard img { aspect-ratio: 3/4; object-fit: cover; margin-bottom: 16px; }
|
|
.tcard h3 { text-transform: lowercase; letter-spacing: .2em; }
|
|
.tcard__role { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-accent-dark); }
|
|
.tcard p { font-size: .9rem; }
|
|
@media (max-width: 767px) {
|
|
.about-2col,
|
|
.tgrid,
|
|
.about-img-row { grid-template-columns: 1fr; }
|
|
.about-img-row--reverse { direction: ltr; }
|
|
}
|
|
</style>
|