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,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' },
+];
+---
+<section class="hero" aria-label="presentazione">
+  {slides.map((s, i) => (
+    <div class:list={['hero__slide', { 'is-active': i === 0 }]}>
+      <div class="container hero__in">
+        <div class="hero__text">
+          <h1>{s.title.map((line) => <span class="hero__line">{line}</span>)}</h1>
+          <a class="btn" href="/programs">Scopri</a>
+        </div>
+        <Image src={s.image} alt={s.alt} class="hero__img" widths={[600, 1000, 1400]} sizes="(max-width: 991px) 100vw, 60vw" loading="eager" />
+      </div>
+    </div>
+  ))}
+  {slides.length > 1 && (
+    <>
+      <button class="hero__arrow hero__arrow--prev" aria-label="precedente">‹</button>
+      <button class="hero__arrow hero__arrow--next" aria-label="successiva">›</button>
+    </>
+  )}
+</section>
+
+<style>
+  .hero { position: relative; background:
+    repeating-linear-gradient(to bottom, transparent 0 10px, rgba(0,0,0,.05) 10px 11px) left top / 40% 60% no-repeat, #fff; }
+  .hero__slide { display: none; }
+  .hero__slide.is-active { display: block; }
+  .hero__in { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; min-height: calc(100vh - var(--header-h)); gap: 30px; }
+  .hero__line { display: block; }
+  .hero__text h1 { font-weight: 500; }
+  .hero__img { object-fit: cover; height: 100%; max-height: calc(100vh - var(--header-h)); width: 100%; }
+  .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 3rem; color: var(--c-heading); cursor: pointer; }
+  .hero__arrow--prev { left: 12px; } .hero__arrow--next { right: 12px; }
+  @media (max-width: 991px) { .hero__in { grid-template-columns: 1fr; padding-block: 40px; min-height: 0; } }
+</style>
+
+<script>
+  const slides = document.querySelectorAll('.hero__slide');
+  if (slides.length > 1) {
+    let cur = 0;
+    const show = (i: number) => {
+      slides[cur].classList.remove('is-active');
+      cur = (i + slides.length) % slides.length;
+      slides[cur].classList.add('is-active');
+    };
+    document.querySelector('.hero__arrow--prev')?.addEventListener('click', () => show(cur - 1));
+    document.querySelector('.hero__arrow--next')?.addEventListener('click', () => show(cur + 1));
+  }
+</script>