'use client';
import { SectionTitle } from '@/components';
import { servicesVerticalScrollSectionData } from '@/constants/data';
import Image from 'next/image';
import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import { useEffect } from 'react';
export default function SolutionsVerticalScrollSection() {
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
const servicesSections: HTMLElement[] =
gsap.utils.toArray('.services-section');
gsap.set('.services-section', {
zIndex: (i, target, targets) => targets.length - i,
});
servicesSections.forEach((section, index) => {
ScrollTrigger.create({
trigger: section,
start: 'top top',
scrub: true,
pin: true,
// markers: true,
pinSpacing: index === servicesSections.length - 1,
onUpdate: self => {
const last = index === servicesSections.length - 1;
if (!last) {
const progress = +self.progress.toFixed(2);
const animText = section.querySelector('.anim-text');
const animImg = section.querySelector('.anim-img');
gsap.to(section, {
yPercent: 100 * progress,
ease: 'none',
onComplete: () => {
// Set the final position after animation completes
gsap.set(section, {
opacity: 1 - progress,
ease: 'none',
});
},
});
if (progress > 0) {
const nextPanel = servicesSections[index + 1];
gsap.to(nextPanel, {
opacity: progress,
ease: 'none',
});
}
// if (animText) {
// gsap.from(animText, {
// opacity: 1 - +progress,
// ease: 'none',
// });
// }
// if (animImg) {
// gsap.from(animImg, {
// yPercent: progress * 100, // Use progress directly
// ease: 'none',
// });
// }
}
},
});
});
}, []);
return (
<div className="bg-lighthouse py-28 overflow-hidden">
<section className="mb-44">
<div className="container">
<SectionTitle
title="How We Do It"
subtitle="We are your comprehensive data partner for targeted marketing"
/>
</div>
</section>
{servicesVerticalScrollSectionData.map((services, index) => (
<section
key={services.id}
className="services-section min-h-screen-scree"
>
<div className="container flex flex-col">
<div className="flex items-start w-full gap-9">
<div
className={`anim-img flex flex-col items-center justify-center w-full min-h-screen ${
index % 2 !== 0 ? 'order-last' : 'order-first'
}`}
>
<Image
src={services.imageUrl}
className="object-cover"
placeholder="blur"
alt={services.imageAlt}
/>
</div>
<div className="anim-text opacity-1 flex items-center w-full h-screen">
<div className="relative">
<div
className={`opacity-20 text-right text-zinc-800 text-[150px] font-semibold leading-[130px] absolute top-[-130px] ${
index % 2 !== 0 ? 'left-0' : 'right-0'
}`}
>
{services.badge}
</div>
<h5 className="font-medium text-color-primary anim">
{services.subtitle}
</h5>
<h2 className="text-color-secondary font-bold text-4xl tracking-wide leading-[4.5rem] sm:text-[3.3rem] sm:leading-[4.5rem]">
{services.title}
</h2>
<p className="mt-3 mb-5 font-normal leading-8 text-color-blue-200">
{services.content}
</p>
</div>
</div>
</div>
</div>
</section>
))}
</div>
);
}