39 lines
1.7 KiB
Plaintext
39 lines
1.7 KiB
Plaintext
---
|
||
import { programs } from '../../data/programs';
|
||
const icons: Record<string, string> = {
|
||
'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',
|
||
};
|
||
---
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<h2>Programmi</h2>
|
||
<p>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.</p>
|
||
</div>
|
||
<div class="pgrid">
|
||
{programs.map((p) => (
|
||
<a class="pgrid__item" href={`/programs/${p.slug}`}>
|
||
<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>
|
||
<h3>{p.title}</h3>
|
||
<p>{p.subtitle}</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; }
|
||
.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>
|