Adriano
1b9a3c1343
- ServicesGrid: filtra grid !== false come /services (via Small Group, Rehab, Holistic Class, Reformer Class dalla griglia Servizi in home) - promo-eventi: badge "solo per apertura nuova sede Settembre 2026" - MethodSteps e about: .tcard/.method__circle usano :global(img) così gli override <img> di <TImg> (senza cid) ricevono border-radius/object-fit - about: griglia team a flex centrato, ultima riga incompleta non piu a sinistra - team: rimosso Antonello D'Alessandro (staff about e homeTeam) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
41 lines
1.8 KiB
Plaintext
41 lines
1.8 KiB
Plaintext
---
|
|
import { services } from '../../data/services';
|
|
import { serviceIcons as icons } from '../../data/service-icons';
|
|
import T from '../content/T.astro';
|
|
|
|
// Stessa convenzione di /services: le voci con grid:false (Small Group, Rehab,
|
|
// Holistic Class, Reformer Class) sono approfondimenti dei riquadri Training e
|
|
// non compaiono nella griglia Servizi.
|
|
const gridServices = services.filter((p) => p.grid !== false);
|
|
---
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-heading" data-reveal>
|
|
<T tag="home.services.title" as="h2" />
|
|
<T tag="home.services.body" as="p" />
|
|
</div>
|
|
<div class="pgrid">
|
|
{gridServices.map((p, i) => (
|
|
<a class="pgrid__item" href={`/services/${p.slug}`} data-reveal style={`--reveal-delay:${(i % 3) * 0.15}s`}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="var(--c-accent-dark)" stroke-width="1.4" width="52" height="52" aria-hidden="true"><path d={icons[p.slug]} /></svg>
|
|
<T tag={`service.${p.slug}.title`} as="h3" />
|
|
<T tag={`service.${p.slug}.subtitle`} as="p" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 40px; text-align: center; }
|
|
.pgrid__item { text-decoration: none; transition: transform .3s ease; }
|
|
.pgrid__item:hover { transform: translateY(-4px); }
|
|
.pgrid__item:hover h3 { color: var(--c-accent-dark); }
|
|
.pgrid__item h3 { transition: color .3s ease; }
|
|
.pgrid__item svg { margin-inline: auto; }
|
|
.pgrid__item h3 { text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; margin: 18px 0 6px; }
|
|
.pgrid__item p { font-size: .85rem; color: var(--c-text-light); margin: 0; }
|
|
@media (max-width: 767px) { .pgrid { grid-template-columns: 1fr 1fr; } }
|
|
@media (max-width: 480px) { .pgrid { grid-template-columns: 1fr; } }
|
|
</style>
|