From 45e52144170c9df49c7bf0adff57f732ed0975c9 Mon Sep 17 00:00:00 2001 From: AdrianoDev Date: Thu, 2 Jul 2026 01:01:21 +0200 Subject: [PATCH] feat: homepage completa da design Figma Co-Authored-By: Claude Fable 5 --- src/components/Agenda.astro | 54 +++++++++++++++++++++++++ src/components/home/FeatureBlocks.astro | 35 ++++++++++++++++ src/components/home/HeroSlider.astro | 54 +++++++++++++++++++++++++ src/components/home/InfoColumns.astro | 26 ++++++++++++ src/components/home/MethodSteps.astro | 39 ++++++++++++++++++ src/components/home/PartnersStrip.astro | 18 +++++++++ src/components/home/ProgramsGrid.astro | 38 +++++++++++++++++ src/components/home/QuoteBanner.astro | 22 ++++++++++ src/components/home/TeamSection.astro | 34 ++++++++++++++++ src/components/home/TrainingCards.astro | 42 +++++++++++++++++++ src/pages/index.astro | 27 ++++++++++++- 11 files changed, 388 insertions(+), 1 deletion(-) create mode 100644 src/components/Agenda.astro create mode 100644 src/components/home/FeatureBlocks.astro create mode 100644 src/components/home/HeroSlider.astro create mode 100644 src/components/home/InfoColumns.astro create mode 100644 src/components/home/MethodSteps.astro create mode 100644 src/components/home/PartnersStrip.astro create mode 100644 src/components/home/ProgramsGrid.astro create mode 100644 src/components/home/QuoteBanner.astro create mode 100644 src/components/home/TeamSection.astro create mode 100644 src/components/home/TrainingCards.astro diff --git a/src/components/Agenda.astro b/src/components/Agenda.astro new file mode 100644 index 0000000..116b0c0 --- /dev/null +++ b/src/components/Agenda.astro @@ -0,0 +1,54 @@ +--- +import { agenda, disciplines, days, slots } from '../data/agenda'; +--- +
+
+

Agenda

+
+ {disciplines.map((d, i) => ( + + ))} +
+
+
+ {days.map((d) =>
{d}
)} + {slots.map((slot) => ( + <> +
{slot}
+ {days.map((_, dayIdx) => { + const entry = agenda.find((e) => e.day === dayIdx && e.slot === slot); + return entry + ?
{entry.discipline}{entry.time}{entry.trainer}
+ :
; + })} + + ))} +
+
+
+ + + + diff --git a/src/components/home/FeatureBlocks.astro b/src/components/home/FeatureBlocks.astro new file mode 100644 index 0000000..914f7fd --- /dev/null +++ b/src/components/home/FeatureBlocks.astro @@ -0,0 +1,35 @@ +--- +import { Image } from 'astro:assets'; +import featPerformance from '../../assets/img/feature-performance.jpg'; +import featBalance from '../../assets/img/feature-balance.jpg'; +import featLongevity from '../../assets/img/feature-longevity.jpg'; +const blocks = [ + { title: 'PERFORMANCE', image: featPerformance, reverse: false, + text: 'Allenamenti progettati su misura per adattarsi ai tuoi obiettivi e al tuo livello. Programmi mirati che sviluppano forza, resistenza e funzionalità in modo equilibrato. Un metodo efficace per migliorare le performance e ottenere risultati concreti e duraturi.' }, + { title: 'BALANCE', image: featBalance, reverse: true, + text: 'L’equilibrio tra corpo e mente è la base di ogni performance duratura. Attraverso movimento, recupero e gestione dello stress, costruiamo stabilità e controllo. Un approccio integrato che sostiene benessere, energia e continuità nel tempo.' }, + { title: 'LONGEVITY', image: featLongevity, reverse: false, + text: 'Benessere completo tra movimento, nutrizione e stile di vita. Un percorso personalizzato che unisce prevenzione, recupero ed equilibrio. Investi nella tua salute e qualità della vita nel tempo.' }, +]; +--- +
+
+ {blocks.map((b) => ( +
+ {b.title} +
+

{b.title}

+

{b.text}

+ Scopri +
+
+ ))} +
+
+ + diff --git a/src/components/home/HeroSlider.astro b/src/components/home/HeroSlider.astro new file mode 100644 index 0000000..75f3e9d --- /dev/null +++ b/src/components/home/HeroSlider.astro @@ -0,0 +1,54 @@ +--- +import { Image } from 'astro:assets'; +import hero1 from '../../assets/img/hero-1.jpg'; +const slides = [ + { title: ['PERFORMANCE.', 'BALANCE.', 'LONGEVITY.'], image: hero1, alt: 'Atleti InsanityLab' }, +]; +--- +
+ {slides.map((s, i) => ( +
+
+
+

{s.title.map((line) => {line})}

+ Scopri +
+ {s.alt} +
+
+ ))} + {slides.length > 1 && ( + <> + + + + )} +
+ + + + diff --git a/src/components/home/InfoColumns.astro b/src/components/home/InfoColumns.astro new file mode 100644 index 0000000..763bc2b --- /dev/null +++ b/src/components/home/InfoColumns.astro @@ -0,0 +1,26 @@ +--- +import infoPerformance from '../../assets/img/info-performance.jpg'; +import infoBalance from '../../assets/img/info-balance.jpg'; +import infoLongevity from '../../assets/img/info-longevity.jpg'; +const cols = [ + { title: 'PERFORMANCE.', image: infoPerformance }, + { title: 'BALANCE.', image: infoBalance }, + { title: 'LONGEVITY.', image: infoLongevity }, +]; +--- +
+ {cols.map((c) => ( + + {c.title} + + ))} +
+ + diff --git a/src/components/home/MethodSteps.astro b/src/components/home/MethodSteps.astro new file mode 100644 index 0000000..dfbbd1a --- /dev/null +++ b/src/components/home/MethodSteps.astro @@ -0,0 +1,39 @@ +--- +import { Image } from 'astro:assets'; +import type { ImageMetadata } from 'astro'; +import { methodIntro, methodExtraNote, methodSteps } from '../../data/method'; +const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/method-*.{jpg,png}', { eager: true }); +const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default; +--- +
+
+
+

Il metodo
InsanityLab

+

Metodo Insanitylab')} /> +

+

{methodExtraNote}

+
+ {methodSteps.map((s) => ( +
+
+ {imgOf(s.image) && } + {s.n} +
+

{s.title}

+

{s.text}

+
+ ))} +
+
+
+ + diff --git a/src/components/home/PartnersStrip.astro b/src/components/home/PartnersStrip.astro new file mode 100644 index 0000000..f5e8bf6 --- /dev/null +++ b/src/components/home/PartnersStrip.astro @@ -0,0 +1,18 @@ +--- +import { Image } from 'astro:assets'; +import type { ImageMetadata } from 'astro'; +import { partners } from '../../data/partners'; +const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/partner-*.{jpg,png}', { eager: true }); +const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default; +--- +
+
+ {partners.map((p) => imgOf(p.image) && {p.name})} +
+
+ + diff --git a/src/components/home/ProgramsGrid.astro b/src/components/home/ProgramsGrid.astro new file mode 100644 index 0000000..d4c1c98 --- /dev/null +++ b/src/components/home/ProgramsGrid.astro @@ -0,0 +1,38 @@ +--- +import { programs } from '../../data/programs'; +const icons: Record = { + 'personal-training': 'M4 12h3m10 0h3M9 8v8m6-8v8M7 10v4m10-4v4', + 'performance-class': 'M13 3l-2 7h4l-6 11 2-8H7l4-10z', + 'coaching': 'M12 3a4 4 0 110 8 4 4 0 010-8zm-7 18a7 7 0 0114 0', + 'pilates-flow': 'M12 4a2 2 0 110 4 2 2 0 010-4zM6 20c2-6 10-6 12 0M12 8v6', + 'rehab': 'M12 21C7 17 3 13 3 9a5 5 0 019-3 5 5 0 019 3c0 4-4 8-9 12z', + 'nutrition': 'M12 3c4 0 7 3 7 8s-3 10-7 10-7-5-7-10 3-8 7-8zm0-1v4', +}; +--- +
+
+
+

Programmi

+

Questi sono i programmi delle classi di Insanity Lab selezionati per voi. Abbiamo scelto i migliori percorsi per offrirvi un’esperienza di allenamento completa e mirata.

+
+
+ {programs.map((p) => ( + + +

{p.title}

+

{p.subtitle}

+ + ))} +
+
+
+ + diff --git a/src/components/home/QuoteBanner.astro b/src/components/home/QuoteBanner.astro new file mode 100644 index 0000000..09a6e06 --- /dev/null +++ b/src/components/home/QuoteBanner.astro @@ -0,0 +1,22 @@ +--- +import quoteBg from '../../assets/img/quote-bg.jpg'; +--- +
+
+

“

+
+

PERFORMANCE È SPINGERE OLTRE I PROPRI LIMITI, BALANCE È SAPERLI ASCOLTARE, LONGEVITY È COSTRUIRE NEL TEMPO CIÒ CHE DAVVERO CONTA.

+ Insanitylab +
+
+
+ + diff --git a/src/components/home/TeamSection.astro b/src/components/home/TeamSection.astro new file mode 100644 index 0000000..65cb0b7 --- /dev/null +++ b/src/components/home/TeamSection.astro @@ -0,0 +1,34 @@ +--- +import { Image } from 'astro:assets'; +import type { ImageMetadata } from 'astro'; +import { team, homeTeam } from '../../data/team'; +const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/team-*.{jpg,png}', { eager: true }); +const members = homeTeam.map((short) => team.find((m) => m.shortName === short)!).filter((m) => m.image); +const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default; +--- +
+
+
+

Team
Trainer

+ Scopri team +
+
+ {members.map((m) => ( +
+ {m.name} +
{m.shortName}
+
+ ))} +
+
+
+ + diff --git a/src/components/home/TrainingCards.astro b/src/components/home/TrainingCards.astro new file mode 100644 index 0000000..93b2fbe --- /dev/null +++ b/src/components/home/TrainingCards.astro @@ -0,0 +1,42 @@ +--- +import { Image } from 'astro:assets'; +import type { ImageMetadata } from 'astro'; +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; +const tones = ['taupe', 'tan', 'dark', 'charcoal']; +// riga 1 (training 0-1): card, foto | riga 2 (training 2-3): foto, card +const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1; +--- +
+ {trainings.map((t, i) => { + const img = imgOf(t.image); + const card = ( +
+

{t.title}

+

{t.caption}

+ Scopri → +
+ ); + const photo = img ? {t.title} : null; + return isSwapRow(i) ? <>{photo}{card} : <>{card}{photo}; + })} +
+ + diff --git a/src/pages/index.astro b/src/pages/index.astro index 86dcea2..665a928 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,32 @@ --- import Base from '../layouts/Base.astro'; +import HeroSlider from '../components/home/HeroSlider.astro'; +import InfoColumns from '../components/home/InfoColumns.astro'; +import FeatureBlocks from '../components/home/FeatureBlocks.astro'; +import QuoteBanner from '../components/home/QuoteBanner.astro'; +import TrainingCards from '../components/home/TrainingCards.astro'; +import ProgramsGrid from '../components/home/ProgramsGrid.astro'; +import Agenda from '../components/Agenda.astro'; +import TeamSection from '../components/home/TeamSection.astro'; +import MethodSteps from '../components/home/MethodSteps.astro'; +import PartnersStrip from '../components/home/PartnersStrip.astro'; export const prerender = true; --- -

Homepage in costruzione

+ + + + +
+
+

Training

+

Porta i tuoi allenamenti al livello successivo: trova il percorso più adatto alle tue esigenze.

+
+
+ + + + + +