rubix/src/components/SubnetsComponent/SubnetPage2.jsx

/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { SubnetPage3 } from "./SubnetPage3";

export const SubnetPage2 = () => {
  const [showSubnet, setShowSubnet] = useState(1);
  // const [showSubnet3, setShowSubnet3] = useState(false);
  // const [showStickyPosition, setShowStickyPosition] = useState(false);

  // useEffect(() => {
  //   const handleScroll = () => {
  //     const threshold = 400; // Adjust this threshold according to your design
  //     if (window.scrollY > threshold && !showSubnet3) {
  //       setShowStickyPosition(true);
  //     }
  //   };

  //   window.addEventListener("scroll", handleScroll);

  //   return () => {
  //     window.removeEventListener("scroll", handleScroll);
  //   };
  // }, [showSubnet3]);

  // useEffect(() => {
  //   if (showStickyPosition) {
  //     setShowSubnet3(true);
  //   }
  // }, [showStickyPosition]);
  useEffect(() => {
    const handleScroll = () => {
      const threshold1 = 400; // Threshold to switch to SubnetPage2
      const threshold2 = 700; // Threshold to switch to SubnetPage3
      if (window.scrollY > threshold2 && showSubnet < 2) {
        setShowSubnet(2);
      } else if (window.scrollY > threshold1 && showSubnet < 1) {
        setShowSubnet(1);
      }
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [showSubnet]);

  return (
    <>
      {showSubnet === 1 && (
        <Box
          backgroundColor={"#000"}
          height={"auto"}
          padding={"0 5rem"}
          paddingBottom={"2rem"}
          position={"sticky"}
          top={"50px"}
        >
          <Fade in={showSubnet}>
            <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={"16px"}>
                      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"}
                    >
                      01. Decentralisation
                    </Text>
                    <Text fontSize={"16px"}>
                      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"}
                    >
                      01. Decentralisation
                    </Text>
                    <Text fontSize={"16px"}>
                      Rubix Decentralised Identity(DID) issued at L1 is the
                      foundation for building digital ownership enhancing
                      applications
                    </Text>
                  </Box>
                </Box>
              </Box>
            </Container>
          </Fade>
        </Box>
      )}
      {showSubnet === 2 && <SubnetPage3 />}
    </>
  );
};