inner-page

src/components/SubnetsComponent/Component3.jsx

@@ -42,8 +42,8 @@ export const Component3 = () => {
           }}
           _hover={{
             background: "transparent",
-            width: "165px",
-            height: "57px",
+            // width: "165px",
+            // height: "57px",
             borderRadius: "28.5px",
             color: "#fff",
             border: "1px solid #A5A5A5",

src/components/SubnetsComponent/Component4.jsx

@@ -43,8 +43,8 @@ export const Component4 = () => {
           }}
           _hover={{
             background: "transparent",
-            width: "165px",
-            height: "57px",
+            // width: "165px",
+            // height: "57px",
             borderRadius: "28.5px",
             color: "#fff",
             border: "1px solid #A5A5A5",

src/components/SubnetsComponent/NewSubnetComp.jsx

@@ -1,5 +1,4 @@
 /* eslint-disable no-unused-vars */
-/ eslint-disable no-unused-vars /;
 import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
 import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
@@ -16,33 +15,33 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 // Initialize ScrollTrigger
 gsap.registerPlugin(ScrollTrigger);
 
-// const SubnetContent = {
-//   heading: `decentralised Auto Syncing subnets`,
-// };
+const SubnetContent = {
+  heading: `decentralised Auto Syncing subnets`,
+};
 
 export const NewSubnetComp = () => {
-  // const firstBoxRef = useRef(null);
-  // const secondBoxRef = useRef(null);
-  // const thirdBoxRef = useRef(null);
-  // const mainBox = useRef(null);
+  const firstBoxRef = useRef(null);
+  const secondBoxRef = useRef(null);
+  const thirdBoxRef = useRef(null);
+  const mainBox = useRef(null);
 
   useEffect(() => {
     // gsap.set(firstBoxRef.current, { opacity: 1 });
-    // let tl = gsap
-    //   .timeline({
-    //     scrollTrigger: {
-    //       trigger: mainBox.current,
-    //       start: "top top",
-    //       scrub: 1,
-    //       pin: true,
-    //       end: "bottom bottom-=500vh",
-    //       markers: false,
-    //     },
-    //   })
-    //   .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
-    //   .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
-    //   .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
-    //   .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });
+    let tl = gsap
+      .timeline({
+        scrollTrigger: {
+          trigger: mainBox.current,
+          start: "top top",
+          scrub: 1,
+          pin: true,
+          end: "bottom bottom-=500vh",
+          markers: false,
+        },
+      })
+      .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
+      .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
+      .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
+      .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });
 
     // .fromTo(
     //   firstBoxRef.current,
@@ -66,7 +65,7 @@ export const NewSubnetComp = () => {
     // );
 
     return () => {
-      // tl.kill();
+      tl.kill();
     };
   }, []);
 
@@ -78,18 +77,18 @@ export const NewSubnetComp = () => {
       }}
     >
       <Box
-        // ref={mainBox}
-        height={"auto"}
-        // position={"relative"}
-        // display={"flex"}
-        // justifyContent={"center"}
-        // alignItems={"center"}
+        ref={mainBox}
+        height={"100vh"}
+        position={"relative"}
+        display={"flex"}
+        justifyContent={"center"}
+        alignItems={"center"}
       >
         <Box
-          // ref={firstBoxRef}
-          // position={"absolute"}
-          // top={"0"}
-          // left={"0"}
+          ref={firstBoxRef}
+          position={"absolute"}
+          top={"0"}
+          left={"0"}
           height={"100vh"}
           width={"100%"}
           backgroundColor={"#000"}
@@ -101,12 +100,11 @@ export const NewSubnetComp = () => {
             textAlign={"center"}
             height={"100vh"}
             display={"grid"}
-            // p={10}
-            paddingTop={"10rem"}
             alignContent={"center"}
           >
             <Text
               as={"h2"}
+              paddingTop={"2rem"}
               fontWeight={700}
               fontSize={"40px"}
               textTransform={"capitalize"}
@@ -118,7 +116,7 @@ export const NewSubnetComp = () => {
                 },
               }}
             >
-              decentralised Auto Syncing subnets
+              {SubnetContent.heading}
             </Text>
             <Box
               display={"grid"}
@@ -201,16 +199,16 @@ export const NewSubnetComp = () => {
           width={"100%"}
           padding={"0 5rem"}
           paddingBottom={"2rem"}
-          // ref={secondBoxRef}
-          // position={"absolute"}
-          // top={"0"}
-          // left={"0"}
+          ref={secondBoxRef}
+          position={"absolute"}
+          top={"0"}
+          left={"0"}
           display={"grid"}
           placeContent={"center"}
         >
           <Text
             as={"h2"}
-            paddingTop={"10rem"}
+            paddingTop={"2rem"}
             fontWeight={700}
             fontSize={"40px"}
             textTransform={"capitalize"}
@@ -312,16 +310,16 @@ export const NewSubnetComp = () => {
           width={"100%"}
           padding={"2rem"}
           // paddingBottom={"2rem"}
-          // ref={thirdBoxRef}
-          // position={"absolute"}
-          // top={"0"}
-          // left={"0"}
+          ref={thirdBoxRef}
+          position={"absolute"}
+          top={"0"}
+          left={"0"}
           display={"grid"}
           placeContent={"center"}
         >
           <Text
             as={"h2"}
-            paddingTop={"5rem"}
+            paddingTop={"2rem"}
             fontWeight={700}
             fontSize={"40px"}
             textTransform={"capitalize"}