diff --git a/src/app/page.tsx b/src/app/page.tsx index 9b2e32f..ea98a96 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,6 +2,9 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import ReactLenis from "lenis/react"; +import { useEffect, useRef } from "react"; +import gsap from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; import ContactSplit from '@/components/sections/contact/ContactSplit'; import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix'; import FooterSimple from '@/components/sections/footer/FooterSimple'; @@ -13,7 +16,29 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne'; import SplitAbout from '@/components/sections/about/SplitAbout'; import { Clock, Smile, TrendingUp, Zap, Smartphone, Rocket, Shield, BarChart, Headphones } from "lucide-react"; +gsap.registerPlugin(ScrollTrigger); + export default function LandingPage() { + const sectionsRef = useRef([]); + + useEffect(() => { + sectionsRef.current.forEach((section) => { + gsap.fromTo(section, + { opacity: 0, y: 50, scale: 0.95 }, + { + opacity: 1, + y: 0, + scale: 1, + duration: 1, + ease: "power2.out", scrollTrigger: { + trigger: section, + start: "top 85%", end: "top 30%", scrub: true, + } + } + ); + }); + }, []); + return ( -