Build Page and form page development

src/components/SubnetsComponent/NewSubnetComp.jsx

@@ -8,19 +8,84 @@ import { Component4 } from "./Component4";
 // import { SubnetPage2 } from "./SubnetPage2";
 import cube from "../../assets/images/cube.png";
 import stack from "../../assets/images/stackNew.webp";
-import { useInView, motion } from "framer-motion";
-import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+// Initialize ScrollTrigger
+gsap.registerPlugin(ScrollTrigger);
+
 const SubnetContent = {
   heading: `decentralised Auto Syncing subnets`,
 };
 
 export const NewSubnetComp = ({ showSubnet }) => {
+  const firstBoxRef = useRef(null);
+  const secondBoxRef = useRef(null);
+  const thirdBoxRef = useRef(null);
+  const mainBox = useRef(null);
+
+  useEffect(() => {
+    const animateBox = (boxRef) => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: boxRef.current,
+          start: "top center+=50",
+          end: "bottom bottom+=100",
+          scrub: 1,
+          markers: false,
+        },
+      });
+      tl.fromTo(
+        boxRef.current,
+        {
+          position: "sticky",
+          top: "-116px",
+        },
+        {
+          transform: "translateX(0)",
+          duration: 0.5,
+        }
+      );
+
+      return () => {
+        // Clean up
+        tl.kill();
+      };
+    };
+    animateBox(firstBoxRef);
+    animateBox(secondBoxRef);
+    animateBox(thirdBoxRef);
+
+    // const tl2 = gsap.timeline({
+    //   scrollTrigger: {
+    //     trigger: mainBox.current,
+    //     start: "top top",
+    //     end: "bottom bottom",
+    //     scrub: 1,
+    //     markers: false,
+    //   },
+    // });
+    // tl2.fromTo(
+    //   mainBox.current,
+    //   {
+    //     position: "sticky",
+    //     top: 60,
+    //     left: 0,
+    //     duration: 0.5,
+    //   },
+    //   {
+    //     position: "relative",
+    //     duration: 0.5,
+    //   }
+    // );
+  }, []);
+
   return (
-    <>
+    <Box ref={mainBox} backgroundColor={"#000"}>
       <Box
         // height={"100vh"}
         backgroundColor={"#000"}
+        ref={firstBoxRef}
       >
         <Container
           maxW="container.xl"
@@ -123,6 +188,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
         height={"auto"}
         padding={"0 5rem"}
         paddingBottom={"2rem"}
+        ref={secondBoxRef}
       >
         <Fade in={true}>
           <Text
@@ -213,9 +279,9 @@ export const NewSubnetComp = ({ showSubnet }) => {
                     03. Data Security and Privacy
                   </Text>
                   <Text fontSize={"18px"}>
-                    Ideal for building automated, tokenized , consent-based
-                    data/insight exchange apps which require secure,
-                    decentralised identity-based encryption 
+                    Rubix Decentralised Identity(DID) issued at L1 is the
+                    foundation for building digital ownership enhancing
+                    applications
                   </Text>
                 </Box>
               </Box>
@@ -228,6 +294,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
         height={"auto"}
         padding={"0 5rem"}
         paddingBottom={"2rem"}
+        ref={thirdBoxRef}
       >
         <Fade in={true}>
           <Text
@@ -379,7 +446,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
           </Container>
         </Fade>
       </Box>
-    </>
+    </Box>
   );
 };