Adriano
8f47cf9e94
Il <p> reso da <T> collassava i newline (white-space: normal). Aggiunto white-space: pre-line al paragrafo, ancorato al contenitore col cid via :global. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
170 lines
7.1 KiB
Plaintext
170 lines
7.1 KiB
Plaintext
---
|
|
import type { ImageMetadata } from 'astro';
|
|
import Base from '../layouts/Base.astro';
|
|
import PageHero from '../components/PageHero.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="/services">{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>
|
|
|
|
<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">
|
|
<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>
|
|
|
|
</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%; }
|
|
/* pre-line preserva gli a-capo del testo (il <p> reso da <T> non eredita il cid → :global). */
|
|
.about-img-row__text :global([data-tag="about.studios.body3"]) { white-space: pre-line; }
|
|
/* flex + center così l'ultima riga incompleta (es. staff: 5 membri → 2 nell'ultima riga)
|
|
resta centrata invece di appoggiarsi a sinistra. */
|
|
.tgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
|
|
.tcard { width: calc((100% - 80px) / 3); }
|
|
/* :global(img) perché gli <img> di override resi da <TImg> non ereditano il cid. */
|
|
.tcard :global(img) { aspect-ratio: 3/4; object-fit: cover; width: 100%; 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,
|
|
.about-img-row { grid-template-columns: 1fr; }
|
|
.tcard { width: 100%; }
|
|
.about-img-row--reverse { direction: ltr; }
|
|
}
|
|
</style>
|