redesigned homepage with GSAP scroll sections and fixed mobile services carousel snap

Added new scroll-based sections (Hero, Filosofia, Approccio, BeforeAfter, CTA) with GSAP ScrollTrigger animations. Fixed mobile carousel in ServicesSection: cards now snap correctly to one-per-swipe and dot indicators track accurately. Added ScrollProgressDots component and useGsapScrollTrigger hook. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-09 17:06:06 +02:00
parent 37d27e0bdb
commit d3f9496c05
22 changed files with 2236 additions and 324 deletions
@@ -0,0 +1,61 @@
+"use client";
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export default function FilosofiaSection() {
+  const sectionRef = useRef<HTMLElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(() => {
+    if (!contentRef.current) return;
+
+    gsap.fromTo(
+      Array.from(contentRef.current.children),
+      { y: 40, opacity: 0 },
+      {
+        y: 0,
+        opacity: 1,
+        duration: 0.8,
+        stagger: 0.15,
+        ease: "power3.out",
+        scrollTrigger: {
+          trigger: sectionRef.current,
+          start: "top 70%",
+          toggleActions: "play none none reverse",
+        },
+      }
+    );
+  }, { scope: sectionRef });
+
+  return (
+    <section
+      ref={sectionRef}
+      id="filosofia"
+      className="snap-section min-h-screen flex items-center justify-center px-6 lg:px-8 bg-dark-bg text-white py-32 lg:py-48"
+    >
+      <div ref={contentRef} className="max-w-4xl mx-auto text-center space-y-12">
+        <h2 className="text-sm font-bold uppercase tracking-[0.4em] text-primary">
+          La nostra idea
+        </h2>
+        <blockquote className="text-3xl md:text-4xl lg:text-6xl font-black leading-tight italic">
+          &ldquo;La forma segue la funzione. La struttura la rende
+          duratura.&rdquo;
+        </blockquote>
+        <p className="text-zinc-400 text-base lg:text-lg max-w-2xl mx-auto leading-relaxed">
+          Solido come cemento armato, fluido come un open-space. Zero fronzoli,
+          massima efficienza.
+        </p>
+        <a
+          href="/contatti"
+          className="inline-block border-2 border-white text-white px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:bg-white hover:text-dark-bg active:scale-[0.98]"
+        >
+          Inizia il Progetto
+        </a>
+      </div>
+    </section>
+  );
+}