From 4488277baa5c68c7c046aac72d21c906c56c5d76 Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Mon, 8 Apr 2024 12:27:38 +0530
Subject: [PATCH] Updated Stats and NewSubnet Page

---
 src/components/HomePage/Stats.jsx             |  10 +-
 .../SubnetsComponent/NewSubnetComp.jsx        | 460 +++++++++---------
 2 files changed, 240 insertions(+), 230 deletions(-)

diff --git a/src/components/HomePage/Stats.jsx b/src/components/HomePage/Stats.jsx
index 475be5c..7102c70 100644
--- a/src/components/HomePage/Stats.jsx
+++ b/src/components/HomePage/Stats.jsx
@@ -102,7 +102,7 @@ const Stats = () => {
           >
             {inView && (
               <CountUp
-                start={0}
+                start={50000000}
                 end={51400000}
                 delay={0}
                 style={{ fontSize: "40px", fontWeight: "700" }}
@@ -147,7 +147,7 @@ const Stats = () => {
           >
             {inView && (
               <CountUp
-                start={0}
+                start={10000000}
                 end={10247786}
                 delay={0}
                 style={{ fontSize: "40px", fontWeight: "700" }}
@@ -171,7 +171,7 @@ const Stats = () => {
           <Box color={"#fff"} ref={ref} textAlign={"center"}>
             {inView && (
               <CountUp
-                start={0}
+                start={100000}
                 end={174015}
                 delay={0}
                 style={{ fontSize: "40px", fontWeight: "700" }}
@@ -234,7 +234,7 @@ const Stats = () => {
           >
             {inView && (
               <CountUp
-                start={0}
+                start={50000000}
                 end={51400000}
                 delay={0}
                 style={{ fontSize: "40px", fontWeight: "700" }}
@@ -258,7 +258,7 @@ const Stats = () => {
           <Box color={"#fff"} ref={ref} textAlign={"center"}>
             {inView && (
               <CountUp
-                start={0}
+                start={10000000}
                 end={10247786}
                 delay={0}
                 style={{ fontSize: "40px", fontWeight: "700" }}
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 1b730ca..acbe7fa 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -22,187 +22,112 @@ export const NewSubnetComp = () => {
   const firstBoxRef = useRef(null);
   const secondBoxRef = useRef(null);
   const thirdBoxRef = useRef(null);
-  const textBox = useRef(null);
+  const mainBox = useRef(null);
 
   useEffect(() => {
-    const animateBox = (boxRef) => {
-      const tl = gsap.timeline({
+    // gsap.set(firstBoxRef.current, { opacity: 1 });
+    let tl = gsap
+      .timeline({
         scrollTrigger: {
-          trigger: boxRef.current,
-          start: "top center+=50",
-          end: "bottom bottom+=100",
+          trigger: mainBox.current,
+          start: "top top",
           scrub: 1,
-          markers: false,
+          pin: true,
+          end: "bottom bottom",
+          markers: true,
         },
-      });
-      tl.fromTo(
-        boxRef.current,
-        {
-          position: "sticky",
-          top: "-116px",
-          opacity: 0,
-          // autoAlpha: 1,
-        },
-        {
-          // transform: "translateX(0)",
-          // duration: 0.5,
-          opacity: 1,
-          duration: 0.3,
-          // autoAlpha: 0,
-        }
-      );
-      return () => {
-        // Clean up
-        tl.kill();
-      };
+      })
+      .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,
+    //   { opacity: 1, duration: 3, transform: "translateX(0vw)" },
+    //   { opacity: 0, duration: 3, transform: "translateX(100vw)" }
+    // )
+    // .fromTo(
+    //   secondBoxRef.current,
+    //   { opacity: 0, duration: 1, transform: "translateX(-100vw)" },
+    //   { opacity: 1, duration: 1, transform: "translateX(0vw)" }
+    // )
+    // .fromTo(
+    //   secondBoxRef.current,
+    //   { opacity: 1, duration: 3, transform: "translateX(0vw)" },
+    //   { opacity: 0, duration: 3, transform: "translateX(100vw)" }
+    // )
+    // .fromTo(
+    //   thirdBoxRef.current,
+    //   { opacity: 0, duration: 1, transform: "translateX(-100vw)" },
+    //   { opacity: 1, duration: 1, transform: "translateX(0vw)" }
+    // );
+
+    return () => {
+      tl.kill();
     };
-    animateBox(firstBoxRef);
-    animateBox(secondBoxRef);
-    animateBox(thirdBoxRef);
   }, []);
 
   return (
-    <Box backgroundColor={"#000"}>
+    <div
+      style={{
+        backgroundColor: "#000",
+        overflow: "hidden",
+      }}
+    >
       <Box
-        // height={"100vh"}
-        backgroundColor={"#000"}
-        ref={firstBoxRef}
+        ref={mainBox}
+        height={"300vh"}
+        position={"relative"}
+        display={"flex"}
+        justifyContent={"center"}
+        alignItems={"center"}
       >
-        <Container
-          maxW="container.xl"
-          textAlign={"center"}
-          // display={"grid"}
-          placeContent={"center"}
+        <Box
+          ref={firstBoxRef}
+          position={"absolute"}
+          top={"0"}
+          left={"0"}
+          height={"100vh"}
+          width={"100%"}
+          backgroundColor={"#000"}
         >
-          <Text
-            as={"h2"}
-            paddingTop={"2rem"}
-            fontWeight={700}
-            fontSize={"40px"}
-            textTransform={"capitalize"}
-            color={"#fff"}
-            ref={textBox}
-            sx={{
-              "@media (max-width: 1024px)": {},
-              "@media (max-width: 600px)": {
-                fontSize: "28px",
-              },
-            }}
+          <Container
+            maxW="container.xl"
+            textAlign={"center"}
+            // display={"grid"}
+            placeContent={"center"}
           >
-            {SubnetContent.heading}
-          </Text>
-          <Box
-            display={"grid"}
-            gridTemplateColumns={"repeat(2, 1fr)"}
-            gridTemplateRows={"repeat(2, 1fr)"}
-            gap={"17rem 4rem"}
-            marginTop={"150px"}
-            position={"relative"}
-            padding={"0 4rem"}
-            paddingBottom={"50px"}
-            ref={textBox}
-          >
-            <Image
-              src={cube}
-              width={"410px"}
-              position={"absolute"}
-              left={"0"}
-              right={"0"}
-              marginLeft={"auto"}
-              marginRight={"auto"}
-              cursor={"pointer"}
-              transform="translateY(-10%)"
-              animation="floatAnimation 2s infinite alternate"
-              // onClick={handleImageClick}
+            <Text
+              as={"h2"}
+              paddingTop={"2rem"}
+              fontWeight={700}
+              fontSize={"40px"}
+              textTransform={"capitalize"}
+              color={"#fff"}
               sx={{
-                "@keyframes floatAnimation": {
-                  "0%": {
-                    transform: "translateY(0)",
-                  },
-                  "100%": {
-                    transform: "translateY(-20px)",
-                  },
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 600px)": {
+                  fontSize: "28px",
                 },
               }}
-            />
-
-            <Box
-              gridColumn={"1/2"}
-              textAlign={"left"}
-              position={"relative"}
-              width={"383px"}
-              ref={textBox}
             >
-              <Component1 />
-            </Box>
-
+              {SubnetContent.heading}
+            </Text>
             <Box
-              gridColumn={"1/2"}
-              gridRow={"2"}
-              textAlign={"left"}
+              display={"grid"}
+              gridTemplateColumns={"repeat(2, 1fr)"}
+              gridTemplateRows={"repeat(2, 1fr)"}
+              gap={"17rem 4rem"}
+              marginTop={"150px"}
               position={"relative"}
-              width={"383px"}
-              ref={textBox}
+              padding={"0 4rem"}
+              paddingBottom={"50px"}
             >
-              <Component2 />
-            </Box>
-
-            <Box
-              gridColumn={"2/2"}
-              gridRow={"2"}
-              textAlign={"left"}
-              position={"relative"}
-              width={"383px"}
-              ref={textBox}
-            >
-              <Component3 />
-            </Box>
-
-            <Box
-              gridColumn={"2/2"}
-              textAlign={"left"}
-              position={"relative"}
-              width={"383px"}
-              ref={textBox}
-            >
-              <Component4 />
-            </Box>
-          </Box>
-        </Container>
-      </Box>
-      <Box
-        backgroundColor={"#000"}
-        height={"120vh"}
-        padding={"0 5rem"}
-        paddingBottom={"2rem"}
-        ref={secondBoxRef}
-      >
-        <Text
-          ref={textBox}
-          as={"h2"}
-          paddingTop={"2rem"}
-          fontWeight={700}
-          fontSize={"40px"}
-          textTransform={"capitalize"}
-          color={"#fff"}
-          marginBottom={"5rem"}
-          textAlign={"center"}
-          sx={{
-            "@media (max-width: 1024px)": {},
-            "@media (max-width: 600px)": {
-              fontSize: "28px",
-            },
-          }}
-        >
-          With Unmatched Privacy and Scalability
-        </Text>
-        <Container maxW="container.xl" textAlign={"center"}>
-          <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
-            <Box ref={textBox}>
               <Image
                 src={cube}
-                width={"480px"}
-                //   position={"absolute"}
+                width={"410px"}
+                position={"absolute"}
                 left={"0"}
                 right={"0"}
                 marginLeft={"auto"}
@@ -210,7 +135,7 @@ export const NewSubnetComp = () => {
                 cursor={"pointer"}
                 transform="translateY(-10%)"
                 animation="floatAnimation 2s infinite alternate"
-                // onClick={click}
+                // onClick={handleImageClick}
                 sx={{
                   "@keyframes floatAnimation": {
                     "0%": {
@@ -222,82 +147,167 @@ export const NewSubnetComp = () => {
                   },
                 }}
               />
-            </Box>
-            <Box width={"50%"}>
+
               <Box
-                color={"#E1E1E1"}
+                gridColumn={"1/2"}
                 textAlign={"left"}
-                marginBottom={"2rem"}
-                ref={textBox}
+                position={"relative"}
+                width={"383px"}
               >
-                <Text
-                  as={"h2"}
-                  fontSize={"24px"}
-                  color={"#fff"}
-                  marginBottom={"10px"}
-                >
-                  01. Decentralisation
-                </Text>
-                <Text fontSize={"18px"}>
-                  Rubix Decentralised Identity( DID) issued at L1 is the
-                  foundation for building digital ownership enhancing
-                  applications.
-                </Text>
+                <Component1 />
               </Box>
+
               <Box
-                color={"#E1E1E1"}
+                gridColumn={"1/2"}
+                gridRow={"2"}
                 textAlign={"left"}
-                marginBottom={"2rem"}
-                ref={textBox}
+                position={"relative"}
+                width={"383px"}
               >
-                <Text
-                  as={"h2"}
-                  fontSize={"24px"}
-                  color={"#fff"}
-                  marginBottom={"10px"}
-                >
-                  02. Ultra Scalability
-                </Text>
-                <Text fontSize={"18px"}>
-                  Unlike monolithic chains which become centralized and
-                  introduce latency to achieve high throughput, in the Rubix
-                  object chain architecture, where mobile nodes have real time
-                  full state data, the network TPS will increase with increase
-                  in numbers of nodes.
-                </Text>
+                <Component2 />
               </Box>
+
               <Box
-                color={"#E1E1E1"}
+                gridColumn={"2/2"}
+                gridRow={"2"}
                 textAlign={"left"}
-                marginBottom={"2rem"}
-                ref={textBox}
+                position={"relative"}
+                width={"383px"}
               >
-                <Text
-                  as={"h2"}
-                  fontSize={"24px"}
-                  color={"#fff"}
-                  marginBottom={"10px"}
-                >
-                  03. Data Security and Privacy
-                </Text>
-                <Text fontSize={"18px"}>
-                  Rubix Decentralised Identity(DID) issued at L1 is the
-                  foundation for building digital ownership enhancing
-                  applications
-                </Text>
+                <Component3 />
+              </Box>
+
+              <Box
+                gridColumn={"2/2"}
+                textAlign={"left"}
+                position={"relative"}
+                width={"383px"}
+              >
+                <Component4 />
               </Box>
             </Box>
-          </Box>
-        </Container>
-      </Box>
-      <Box
-        backgroundColor={"#000"}
-        height={"auto"}
-        padding={"0 5rem"}
-        paddingBottom={"2rem"}
-        ref={thirdBoxRef}
-      >
-        <Fade in={true}>
+          </Container>
+        </Box>
+
+        <Box
+          backgroundColor={"#000"}
+          height={"100vh"}
+          padding={"0 5rem"}
+          paddingBottom={"2rem"}
+          ref={secondBoxRef}
+          position={"absolute"}
+          top={"0"}
+          left={"0"}
+        >
+          <Text
+            as={"h2"}
+            paddingTop={"2rem"}
+            fontWeight={700}
+            fontSize={"40px"}
+            textTransform={"capitalize"}
+            color={"#fff"}
+            marginBottom={"5rem"}
+            textAlign={"center"}
+            sx={{
+              "@media (max-width: 1024px)": {},
+              "@media (max-width: 600px)": {
+                fontSize: "28px",
+              },
+            }}
+          >
+            With Unmatched Privacy and Scalability
+          </Text>
+          <Container maxW="container.xl" textAlign={"center"}>
+            <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
+              <Box>
+                <Image
+                  src={cube}
+                  width={"480px"}
+                  //   position={"absolute"}
+                  left={"0"}
+                  right={"0"}
+                  marginLeft={"auto"}
+                  marginRight={"auto"}
+                  cursor={"pointer"}
+                  transform="translateY(-10%)"
+                  animation="floatAnimation 2s infinite alternate"
+                  // onClick={click}
+                  sx={{
+                    "@keyframes floatAnimation": {
+                      "0%": {
+                        transform: "translateY(0)",
+                      },
+                      "100%": {
+                        transform: "translateY(-20px)",
+                      },
+                    },
+                  }}
+                />
+              </Box>
+              <Box width={"50%"}>
+                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+                  <Text
+                    as={"h2"}
+                    fontSize={"24px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    01. Decentralisation
+                  </Text>
+                  <Text fontSize={"18px"}>
+                    Rubix Decentralised Identity( DID) issued at L1 is the
+                    foundation for building digital ownership enhancing
+                    applications.
+                  </Text>
+                </Box>
+                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+                  <Text
+                    as={"h2"}
+                    fontSize={"24px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    02. Ultra Scalability
+                  </Text>
+                  <Text fontSize={"18px"}>
+                    Unlike monolithic chains which become centralized and
+                    introduce latency to achieve high throughput, in the Rubix
+                    object chain architecture, where mobile nodes have real time
+                    full state data, the network TPS will increase with increase
+                    in numbers of nodes.
+                  </Text>
+                </Box>
+                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+                  <Text
+                    as={"h2"}
+                    fontSize={"24px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    03. Data Security and Privacy
+                  </Text>
+                  <Text fontSize={"18px"}>
+                    Rubix Decentralised Identity(DID) issued at L1 is the
+                    foundation for building digital ownership enhancing
+                    applications
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
+          </Container>
+        </Box>
+
+        <Box
+          backgroundColor={"#000"}
+          height={"100vh"}
+          padding={"2rem"}
+          // paddingBottom={"2rem"}
+          ref={thirdBoxRef}
+          position={"absolute"}
+          top={"0"}
+          left={"0"}
+          // width={"100vw"}
+        >
           <Text
             as={"h2"}
             paddingTop={"2rem"}
@@ -445,8 +455,8 @@ export const NewSubnetComp = () => {
               </Box>
             </Box>
           </Container>
-        </Fade>
+        </Box>
       </Box>
-    </Box>
+    </div>
   );
 };