im trying to copy that design https://www.wix.com/website-template/view/html/3288,
and I have faced my first problem, after 3rd section here we see this cool scroll effect like small components come and overlay each other and then scrolling process continues,i wanna make the same but I actually doesnt know how, tried gsap but it works with horizontal not vertical:(
please help me, here is my code for what I have done at that page :

import React from "react";
import Image from "next/image";

import Navbar from "../Layouts/Navbar";
import Layout from "@/app/Layouts/Layout";

const HomePage = () => {
  return (
    <Layout>
      <div className="h-auto flex flex-col w-full relative gap-12">
        <section
          className="lg:h-[auto] lg:pb-10 lg:p-5 w-full rounded-[20px] p-14 flex justify-center items-center h-[600px] relative"
          style={{
            backgroundImage: 'url("/hero.png")',
            backgroundSize: "cover",
            backgroundPositionX:'center'
          }}
        >
          <div
            className="absolute inset-0 bg-black opacity-35"
            style={{ borderRadius: "20px" }}
          ></div>
          <div className="w-full flex justify-start gap-5 flex-col items-start h-full relative z-10">
            <Navbar/>
            <h1 className="sm:pt-7 text-white font-semibold text-[60px] lg:text-[6vw]">
              Reshaping the Future of <br /> Sustainable Construction
            </h1>
            <div className="lg:p-[34px] p-[50px] relative top-5 border rounded-full w-[50px] flex justify-center items-center h-[50px]"></div>
          </div>
        </section>

        <section
          className="sm:p-5 lg:flex-col lg:gap-5 lg:h-auto w-full rounded-[20px] bg-white p-7 flex justify-between gap-3 items-center h-[670px] relative"
        >
          <div className="lg:w-full lg:gap-5 lg:pl-0 lg:py-0 w-[550px] h-[100%] flex flex-col justify-between items-start py-5 pl-5">
            <div className="flex flex-col gap-3">
              <h4 className="text-[18px] font-extralight">Mission</h4>
              <h1 className="sm:text-[6.5vw] text-[47px]">We do right by humans and the planet.</h1>
            </div>
            <p className="sm:leading-8 sm:text-[17px] sm:w-full text-[22px] w-[80%] font-extralight leading-10">Walker Construction Co. is committed to making a positive impact on local communities and the environment they are a part of.</p>
            <button className="sm:w-[100px] sm:h-[100px] sm:text-[13px] sm:p-2 p-5 w-[130px] h-[130px] rounded-full border border-black text-[15px] font-extralight">LEARN HOW</button>
          </div>
          <div className="lg:w-full lg:h-[55vw] w-[520px] h-[100%]">
            <Image alt='main2' width={400} height={400} className="w-full rounded-[17px] h-full" src={'/main2.png'}/>
          </div>
        </section>

        <section
          className="lg:h-[auto] lg:pb-10 lg:p-5 w-full rounded-[20px] p-14 flex justify-center items-center h-[670px] relative"
          style={{
            backgroundImage: 'url("/main3.png")',
            backgroundSize: "cover",

          }}
        >
          <div
            className="absolute inset-0 bg-black opacity-35"
            style={{ borderRadius: "20px" }}
          ></div>
          <div className="lg:gap-14 lg:flex-col w-full z-10 h-full flex">
            <div className="flex-col lg:justify-start lg:items-start lg:gap-8 w-full text-white justify-between items-start flex">
              <div className="flex flex-col">
                <h4 className="text-[18px] font-extralight">Sectors</h4>
                <h1 className="sm:text-[30px] text-[47px]">Our Focus Areas</h1>
              </div>
              <p className="sm:w-[100%] sm:text-[18px] text-white text-[22px] font-extralight w-[550px]">We bring our expertise to multiple construction sectors, developing the industry's future and redefining what is possible, one project at a time.</p>
            </div>
            <button className="lg:w-[100px] lg:h-[100px] sm:text-[13px] sm:p-2 p-5 w-[150px] text-white h-[130px] rounded-full border border-white text-[15px] font-extralight">EXPLORE SECTORS</button>
          </div>
        </section>
      </div>
    </Layout>
  );
};
export default HomePage;

tried GSAP and tried find smth similar