feat: homepage completa da design Figma

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 01:01:21 +02:00
parent 2fdd1b9a7f
commit 45e5214417
11 changed files with 388 additions and 1 deletions
@@ -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;
+---
+<section class="tcards">
+  {trainings.map((t, i) => {
+    const img = imgOf(t.image);
+    const card = (
+      <div class:list={['tcards__cell', `tcards__cell--${tones[i]}`]}>
+        <h3>{t.title}</h3>
+        <p>{t.caption}</p>
+        <a class="tcards__link" href={t.cta.href}>Scopri →</a>
+      </div>
+    );
+    const photo = img ? <Image src={img} alt={t.title} class="tcards__img" widths={[400, 700]} sizes="(max-width: 767px) 50vw, 25vw" /> : null;
+    return isSwapRow(i) ? <>{photo}{card}</> : <>{card}{photo}</>;
+  })}
+</section>
+
+<style>
+  .tcards { display: grid; grid-template-columns: repeat(4, 1fr); }
+  .tcards__cell { padding: 48px 36px; display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1; }
+  .tcards__cell--taupe { background: #6b5d5b; }
+  .tcards__cell--dark { background: var(--c-dark); }
+  .tcards__cell--charcoal { background: #27252a; }
+  .tcards__cell--taupe h3, .tcards__cell--taupe p,
+  .tcards__cell--dark h3, .tcards__cell--dark p,
+  .tcards__cell--charcoal h3, .tcards__cell--charcoal p { color: #efe9e3; }
+  .tcards__cell--tan { background: var(--c-accent); }
+  .tcards__cell--tan h3, .tcards__cell--tan p { color: #fff; }
+  .tcards__cell h3 { text-transform: uppercase; letter-spacing: .12em; }
+  .tcards__cell p { font-size: .88rem; }
+  .tcards__link { color: #fff; font-family: var(--font-heading); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; margin-top: 18px; }
+  .tcards__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
+  @media (max-width: 767px) { .tcards { grid-template-columns: repeat(2, 1fr); } }
+</style>