141 lines
4.1 KiB
TypeScript
141 lines
4.1 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 BeforeAfterSection() {
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
const primaRef = useRef<HTMLDivElement>(null);
|
|
const dopoRef = useRef<HTMLDivElement>(null);
|
|
const ctaRef = useRef<HTMLDivElement>(null);
|
|
|
|
useGSAP(() => {
|
|
if (!sectionRef.current || !primaRef.current || !dopoRef.current) return;
|
|
|
|
// Prima fades in first
|
|
gsap.fromTo(
|
|
primaRef.current,
|
|
{ y: 30, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.8,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: sectionRef.current,
|
|
start: "top 70%",
|
|
toggleActions: "play none none reverse",
|
|
},
|
|
}
|
|
);
|
|
|
|
// Dopo fades in with slight delay
|
|
gsap.fromTo(
|
|
dopoRef.current,
|
|
{ y: 30, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.8,
|
|
delay: 0.3,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: sectionRef.current,
|
|
start: "top 70%",
|
|
toggleActions: "play none none reverse",
|
|
},
|
|
}
|
|
);
|
|
|
|
// CTA fades in after both panels
|
|
if (ctaRef.current) {
|
|
gsap.fromTo(
|
|
ctaRef.current,
|
|
{ y: 20, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.6,
|
|
delay: 0.6,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: sectionRef.current,
|
|
start: "top 70%",
|
|
toggleActions: "play none none reverse",
|
|
},
|
|
}
|
|
);
|
|
}
|
|
}, { scope: sectionRef });
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
className="snap-section min-h-screen flex items-center justify-center px-6 lg:px-8"
|
|
>
|
|
<div className="max-w-4xl mx-auto w-full">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20">
|
|
{/* Prima */}
|
|
<div
|
|
ref={primaRef}
|
|
className="bg-background p-8 lg:p-16 space-y-8"
|
|
>
|
|
<span className="material-symbols-outlined text-error text-5xl">
|
|
architecture
|
|
</span>
|
|
<h3 className="text-2xl lg:text-3xl font-black uppercase">Prima</h3>
|
|
<ul className="space-y-4 text-zinc-500">
|
|
{[
|
|
"Dati sparsi ovunque",
|
|
"Processi manuali e lenti",
|
|
"Sistemi vulnerabili",
|
|
"Zero visibilità strategica",
|
|
].map((item) => (
|
|
<li key={item} className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-error shrink-0" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Dopo */}
|
|
<div
|
|
ref={dopoRef}
|
|
className="bg-background p-8 lg:p-16 space-y-8"
|
|
>
|
|
<span className="material-symbols-outlined text-primary text-5xl">
|
|
domain
|
|
</span>
|
|
<h3 className="text-2xl lg:text-3xl font-black uppercase">Dopo</h3>
|
|
<ul className="space-y-4 text-zinc-900">
|
|
{[
|
|
"Un unico flusso di dati",
|
|
"Automazione dove serve",
|
|
"Sicurezza di livello enterprise",
|
|
"Dashboard per decidere in tempo reale",
|
|
].map((item) => (
|
|
<li key={item} className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-primary shrink-0" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div ref={ctaRef} className="text-center mt-12">
|
|
<a
|
|
href="/contatti"
|
|
className="inline-block bg-primary text-on-primary px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:brightness-110 active:scale-[0.98]"
|
|
>
|
|
Trasforma il tuo Business
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|