diff --git a/src/assets/img/program-coaching.jpg b/src/assets/img/program-coaching.jpg new file mode 100644 index 0000000..65c54c3 Binary files /dev/null and b/src/assets/img/program-coaching.jpg differ diff --git a/src/assets/img/program-nutrition.jpg b/src/assets/img/program-nutrition.jpg new file mode 100644 index 0000000..d5432af Binary files /dev/null and b/src/assets/img/program-nutrition.jpg differ diff --git a/src/assets/img/program-performance-class.jpg b/src/assets/img/program-performance-class.jpg new file mode 100644 index 0000000..febde9d Binary files /dev/null and b/src/assets/img/program-performance-class.jpg differ diff --git a/src/assets/img/program-personal-training.jpg b/src/assets/img/program-personal-training.jpg new file mode 100644 index 0000000..9306886 Binary files /dev/null and b/src/assets/img/program-personal-training.jpg differ diff --git a/src/assets/img/program-pilates-flow.jpg b/src/assets/img/program-pilates-flow.jpg new file mode 100644 index 0000000..ebd5028 Binary files /dev/null and b/src/assets/img/program-pilates-flow.jpg differ diff --git a/src/assets/img/program-rehab.jpg b/src/assets/img/program-rehab.jpg new file mode 100644 index 0000000..56e716e Binary files /dev/null and b/src/assets/img/program-rehab.jpg differ diff --git a/src/components/PageHero.astro b/src/components/PageHero.astro index 7c65f7e..cd2b80c 100644 --- a/src/components/PageHero.astro +++ b/src/components/PageHero.astro @@ -14,10 +14,12 @@ const bg = bgImage ? await getImage({ src: bgImage, width: 1920 }) : null; diff --git a/src/components/home/ProgramsGrid.astro b/src/components/home/ProgramsGrid.astro index c407d25..564b2b8 100644 --- a/src/components/home/ProgramsGrid.astro +++ b/src/components/home/ProgramsGrid.astro @@ -1,13 +1,6 @@ --- 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', -}; +import { programIcons as icons } from '../../data/program-icons'; ---
diff --git a/src/data/program-icons.ts b/src/data/program-icons.ts new file mode 100644 index 0000000..8447cfc --- /dev/null +++ b/src/data/program-icons.ts @@ -0,0 +1,9 @@ +// Path SVG (stroke, viewBox 0 0 24 24) delle icone programmi, condivisi tra griglia home e sidebar +export const programIcons: 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', +}; diff --git a/src/pages/programs/[slug].astro b/src/pages/programs/[slug].astro index fa8de66..260fcc4 100644 --- a/src/pages/programs/[slug].astro +++ b/src/pages/programs/[slug].astro @@ -1,9 +1,11 @@ --- import Base from '../../layouts/Base.astro'; import PageHero from '../../components/PageHero.astro'; +import { Image } from 'astro:assets'; +import type { ImageMetadata } from 'astro'; import { programs } from '../../data/programs'; import { performanceClassPricing } from '../../data/pricing'; -import { CATEGORIES } from '../../lib/blog-const'; +import { programIcons } from '../../data/program-icons'; export const prerender = true; export function getStaticPaths() { @@ -11,9 +13,16 @@ export function getStaticPaths() { } const { program } = Astro.props; const others = programs.filter((p) => p.slug !== program.slug); +const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/program-*.jpg', { eager: true }); +const imgOf = (slug: string) => Object.entries(images).find(([p]) => p.includes(`program-${slug}.`))?.[1]?.default; +const heroImg = imgOf(program.slug); +// Categorie come da Figma (Performance class.pdf), non quelle del blog +const categories = ['Fitness', 'Salute', 'Stile di vita', 'Nutrizione']; +// Ordine card pricing come da Figma: tan, taupe, dark +const tones = ['tan', 'taupe', 'dark']; --- - +
@@ -23,6 +32,9 @@ const others = programs.filter((p) => p.slug !== program.slug);
    {program.features.map((f) =>
  • {f}
    • )}
+ {heroImg && ( + {program.title} + )}
{program.faq.map((item, i) => (
@@ -34,9 +46,16 @@ const others = programs.filter((p) => p.slug !== program.slug);
@@ -55,15 +74,15 @@ const others = programs.filter((p) => p.slug !== program.slug);

Contattaci per i dettagli di questo programma. Scrivici →

) : (
- {g.plans.map((p) => ( -
+ {g.plans.map((p, i) => ( +

{p.monthly}€

al mese, semestrale

{p.entries} {p.entries === 1 ? 'ingresso settimanale' : 'ingressi settimanali'}

{p.note}

{p.installments}

{p.best}

- Acquista + Acquista
))}
@@ -79,20 +98,27 @@ const others = programs.filter((p) => p.slug !== program.slug); .prog { display: grid; grid-template-columns: 2.2fr 1fr; gap: 60px; } .prog__features { padding-left: 20px; display: grid; gap: 8px; margin-bottom: 30px; } .prog__features li::marker { color: var(--c-accent); } + .prog__img { width: 100%; height: auto; margin-bottom: 30px; } .prog__faq details { border-top: 1px solid #e4ded6; padding-block: 14px; } .prog__faq summary { cursor: pointer; font-family: var(--font-heading); font-size: .85rem; letter-spacing: .08em; color: var(--c-heading); } .prog__side h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .16em; margin-top: 30px; } - .prog__side a { text-decoration: none; color: var(--c-text); } - .prog__side a:hover { color: var(--c-accent-dark); } + .prog__cat { font-family: var(--font-heading); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text); margin-bottom: 10px; } + .prog__other { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--c-text); margin-bottom: 14px; font-family: var(--font-heading); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; } + .prog__other:hover { color: var(--c-accent-dark); } + .prog__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--c-accent); color: #fff; flex-shrink: 0; } .price__group { border-top: 1px solid #ddd5ca; padding-block: 18px; } .price__group summary { cursor: pointer; font-family: var(--font-heading); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--c-heading); } .price__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; } - .price__card { background: #fff; padding: 36px 28px; text-align: center; } - .price__amount { font-family: var(--font-heading); font-size: 2.6rem; color: var(--c-heading); margin: 0; } - .price__per { color: var(--c-text-light); font-size: .8rem; } - .price__entries { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--c-heading); } - .price__card p { margin-bottom: 6px; font-size: .85rem; } - .price__best { font-weight: 600; color: var(--c-accent-dark); } - .price__card .btn { margin-top: 16px; } + /* Card colorate come nel Figma: tan / taupe / dark, testo bianco, prezzo grande */ + .price__card { padding: 44px 28px; text-align: center; color: #fff; } + .price__card--tan { background: var(--c-accent); } + .price__card--taupe { background: #6b5d5b; } + .price__card--dark { background: var(--c-dark); } + .price__card .price__amount { font-family: var(--font-heading); font-size: clamp(2.6rem, 4.7vw, 4rem); font-weight: 500; color: #fff; margin: 0; line-height: 1.1; } + .price__card .price__per { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; opacity: .85; margin-bottom: 22px; } + .price__card .price__entries { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; border-top: 1px solid rgba(255,255,255,.25); padding-top: 18px; } + .price__card p { margin-bottom: 6px; font-size: .82rem; } + .price__card .price__best { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; } + .price__card .btn { margin-top: 18px; } @media (max-width: 991px) { .prog { grid-template-columns: 1fr; } .price__row { grid-template-columns: 1fr; } } diff --git a/src/pages/programs/index.astro b/src/pages/programs/index.astro index d2446df..90f0530 100644 --- a/src/pages/programs/index.astro +++ b/src/pages/programs/index.astro @@ -1,11 +1,15 @@ --- import Base from '../../layouts/Base.astro'; import PageHero from '../../components/PageHero.astro'; +import { Image } from 'astro:assets'; +import type { ImageMetadata } from 'astro'; import { programs } from '../../data/programs'; +const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/program-*.jpg', { eager: true }); +const imgOf = (slug: string) => Object.entries(images).find(([p]) => p.includes(`program-${slug}.`))?.[1]?.default; export const prerender = true; --- - +
@@ -13,12 +17,19 @@ export const prerender = true;

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) => ( -
@@ -27,11 +38,16 @@ export const prerender = true;