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,39 @@
+---
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import { methodIntro, methodExtraNote, methodSteps } from '../../data/method';
+const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/method-*.{jpg,png}', { eager: true });
+const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default;
+---
+<section class="section section--alt">
+  <div class="container">
+    <div class="section-heading">
+      <h2>Il metodo<br />InsanityLab</h2>
+      <p set:html={methodIntro.replace('Metodo Insanitylab', '<strong>Metodo Insanitylab</strong>')} />
+    </div>
+    <p class="method__note">{methodExtraNote}</p>
+    <div class="method__row">
+      {methodSteps.map((s) => (
+        <div class:list={['method__step', { 'method__step--extra': s.extra }]}>
+          <div class="method__circle">
+            {imgOf(s.image) && <Image src={imgOf(s.image)!} alt="" widths={[220]} sizes="220px" />}
+            <span>{s.n}</span>
+          </div>
+          <h3>{s.title}</h3>
+          <p>{s.text}</p>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .method__note { text-align: right; font-size: .8rem; color: var(--c-text-light); max-width: 260px; margin-left: auto; }
+  .method__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; position: relative; }
+  .method__circle { position: relative; width: 150px; height: 150px; margin: 0 auto 20px; border: 1px dashed var(--c-accent-dark); border-radius: 50%; padding: 8px; }
+  .method__circle img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
+  .method__circle span { position: absolute; top: -6px; left: -6px; font-family: var(--font-heading); font-size: 2.4rem; color: var(--c-heading); background: var(--c-bg-alt); padding: 0 8px; }
+  .method__step h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; }
+  .method__step p { font-size: .85rem; color: var(--c-text-light); }
+  @media (max-width: 767px) { .method__row { grid-template-columns: 1fr 1fr; } }
+</style>