rubix/src/components/SubnetsComponent/NewSubnetComp.jsx

import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { useEffect, useRef, useState } from "react";
import { Component1 } from "./Component1";
import { Component2 } from "./Component2";
import { Component3 } from "./Component3";
import { Component4 } from "./Component4";
// import { SubnetPage2 } from "./SubnetPage2";
import cube from "../../assets/images/cube.png";
import stack from "../../assets/images/stackNew.webp";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// Initialize ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

const SubnetContent = {
  heading: `decentralised Auto Syncing subnets`,
};

export const NewSubnetComp = () => {
  const firstBoxRef = useRef(null);
  const secondBoxRef = useRef(null);
  const thirdBoxRef = useRef(null);
  const textBox = 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",
          opacity: 0,
          autoAlpha: 1,
        },
        {
          // transform: "translateX(0)",
          // duration: 0.5,
          opacity: 1,
          duration: 1,
          autoAlpha: 0,
        }
      );
      const tl2 = gsap.timeline({
        scrollTrigger: {
          trigger: textBox.current,
          start: "top center+=50",
          end: "bottom bottom+=100",
          scrub: 1,
          markers: false,
        },
      });
      tl2.fromTo(
        textBox.current,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 0.5,
        }
      );
      return () => {
        // Clean up
        tl.kill();
      };
    };
    animateBox(firstBoxRef);
    animateBox(secondBoxRef);
    animateBox(thirdBoxRef);
  }, []);

  return (
    <Box backgroundColor={"#000"}>
      <Box
        // height={"100vh"}
        backgroundColor={"#000"}
        ref={firstBoxRef}
      >
        <Container
          maxW="container.xl"
          textAlign={"center"}
          // display={"grid"}
          placeContent={"center"}
        >
          <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",
              },
            }}
          >
            {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}
              sx={{
                "@keyframes floatAnimation": {
                  "0%": {
                    transform: "translateY(0)",
                  },
                  "100%": {
                    transform: "translateY(-20px)",
                  },
                },
              }}
            />

            <Box
              gridColumn={"1/2"}
              textAlign={"left"}
              position={"relative"}
              width={"383px"}
              ref={textBox}
            >
              <Component1 />
            </Box>

            <Box
              gridColumn={"1/2"}
              gridRow={"2"}
              textAlign={"left"}
              position={"relative"}
              width={"383px"}
              ref={textBox}
            >
              <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={"auto"}
        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"}
                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"}
                ref={textBox}
              >
                <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"}
                ref={textBox}
              >
                <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"}
                ref={textBox}
              >
                <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={"auto"}
        padding={"0 5rem"}
        paddingBottom={"2rem"}
        ref={thirdBoxRef}
      >
        <Fade in={true}>
          <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",
              },
            }}
          >
            All In One Composable Stack
          </Text>
          <Container maxW="container.xl" textAlign={"center"}>
            <Box display={"flex"} alignItems={"start"} gap={"3rem"}>
              <Box width={"100%"}>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"right"}
                  marginBottom={"2rem"}
                >
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Single Comprehensive Stack:
                  </Text>
                  <Text fontSize={"16px"}>
                    Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
                    tokens ( FTs and NFTs) all in one place.
                  </Text>
                </Box>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"right"}
                  marginBottom={"2rem"}
                >
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    High Partition Tolerence:
                  </Text>
                  <Text fontSize={"16px"}>
                    Issues in one shard wont affect other shards performance
                  </Text>
                </Box>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"right"}
                  marginBottom={"2rem"}
                >
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Fully Deterministic:
                  </Text>
                  <Text fontSize={"16px"}>
                    App can bring own Block space ( BYOB )
                  </Text>
                </Box>
              </Box>
              <Box>
                <Image
                  src={stack}
                  width={"700px"}
                  //   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={"100%"}>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"left"}
                  marginBottom={"2rem"}
                  minHeight={"80px"}
                >
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Unique Token/Object Based Architecture
                  </Text>
                  <Text fontSize={"16px"}>
                    : Build unlimited FTs and NFTs all at L1!!
                  </Text>
                </Box>
                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Green By The Design
                  </Text>
                  <Text fontSize={"16px"}>
                    : 100000 Rubix Transaction consume &lt; 10 kWh &lt; 100000
                    Visa transaction
                  </Text>
                </Box>
                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Fixed Hard Capped Supply Of RBT At 51.4 Million
                  </Text>
                  {/* <Text fontSize={"18px"}>
                  </Text> */}
                </Box>
              </Box>
            </Box>
          </Container>
        </Fade>
      </Box>
    </Box>
  );
};

// <Box
//   backgroundColor={"#000"}
//   height={"auto"}
//   padding={"0 5rem"}
//   paddingBottom={"2rem"}
//   // position={stickyPosition ? "sticky" : "static"}
//   // top={stickyPosition ? "98px" : "auto"}
// >
//   <Fade in={true}>
//     <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",
//         },
//       }}
//     >
//       All In One Composable Stack
//     </Text>
//     <Container maxW="container.xl" textAlign={"center"}>
//       <Box display={"flex"} alignItems={"start"} gap={"3rem"}>
//         <Box width={"100%"}>
//           <Box color={"#E1E1E1"} textAlign={"right"} marginBottom={"2rem"}>
//             <Text
//               as={"h2"}
//               fontSize={"20px"}
//               color={"#fff"}
//               marginBottom={"10px"}
//             >
//               Single Comprehensive Stack:
//             </Text>
//             <Text fontSize={"16px"}>
//               Full Mobile node SDK, Smart Contracts, DID's, Secondary tokens
//               ( FTs and NFTs) all in one place.
//             </Text>
//           </Box>
//           <Box color={"#E1E1E1"} textAlign={"right"} marginBottom={"2rem"}>
//             <Text
//               as={"h2"}
//               fontSize={"20px"}
//               color={"#fff"}
//               marginBottom={"10px"}
//             >
//               High Partition Tolerence:
//             </Text>
//             <Text fontSize={"16px"}>
//               Issues in one shard wont affect other shards performance
//             </Text>
//           </Box>
//           <Box color={"#E1E1E1"} textAlign={"right"} marginBottom={"2rem"}>
//             <Text
//               as={"h2"}
//               fontSize={"20px"}
//               color={"#fff"}
//               marginBottom={"10px"}
//             >
//               Fully Deterministic:
//             </Text>
//             <Text fontSize={"16px"}>
//               App can bring own Block space ( BYOB )
//             </Text>
//           </Box>
//         </Box>
//         <Box>
//           <Image
//             src={stack}
//             width={"700px"}
//             //   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={"100%"}>
//           <Box
//             color={"#E1E1E1"}
//             textAlign={"left"}
//             marginBottom={"2rem"}
//             minHeight={"80px"}
//           >
//             <Text
//               as={"h2"}
//               fontSize={"20px"}
//               color={"#fff"}
//               marginBottom={"10px"}
//             >
//               Unique Token/Object Based Architecture
//             </Text>
//             <Text fontSize={"16px"}>
//               : Build unlimited FTs and NFTs all at L1!!
//             </Text>
//           </Box>
//           <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
//             <Text
//               as={"h2"}
//               fontSize={"20px"}
//               color={"#fff"}
//               marginBottom={"10px"}
//             >
//               Green By The Design
//             </Text>
//             <Text fontSize={"16px"}>
//               : 100000 Rubix Transaction consume &lt; 10 kWh &lt; 100000
//               Visa transaction
//             </Text>
//           </Box>
//           <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
//             <Text
//               as={"h2"}
//               fontSize={"20px"}
//               color={"#fff"}
//               marginBottom={"10px"}
//             >
//               Fixed Hard Capped Supply Of RBT At 51.4 Million
//             </Text>
//             {/* <Text fontSize={"18px"}>
//               </Text> */}
//           </Box>
//         </Box>
//       </Box>
//     </Container>
//   </Fade>
// </Box>;