62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
"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-2xl sm:text-3xl md:text-4xl lg:text-6xl font-black leading-tight italic">
|
|
“La forma segue la funzione. La struttura la rende
|
|
duratura.”
|
|
</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-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:bg-white hover:text-dark-bg active:scale-[0.98]"
|
|
>
|
|
Inizia il Progetto
|
|
</a>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|