rubix/src/components/SubnetsComponent/NewSubnetComp.jsx

import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
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 stack from "../../assets/images/stack.png";
import { useInView, motion } from "framer-motion";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
const SubnetContent = {
  heading: `decentralised Auto Syncing subnets`,
};

export const NewSubnetComp = ({ showSubnet }) => {
  return (
    <>
      <Box
        // height={"100vh"}
        backgroundColor={"#000"}
      >
        <Container
          maxW="container.xl"
          textAlign={"center"}
          // display={"grid"}
          placeContent={"center"}
        >
          <Text
            as={"h2"}
            paddingTop={"2rem"}
            fontWeight={700}
            fontSize={"40px"}
            textTransform={"capitalize"}
            color={"#fff"}
            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"}
          >
            <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"}
            >
              <Component1 />
            </Box>

            <Box
              gridColumn={"1/2"}
              gridRow={"2"}
              textAlign={"left"}
              position={"relative"}
              width={"383px"}
            >
              <Component2 />
            </Box>

            <Box
              gridColumn={"2/2"}
              gridRow={"2"}
              textAlign={"left"}
              position={"relative"}
              width={"383px"}
            >
              <Component3 />
            </Box>

            <Box
              gridColumn={"2/2"}
              textAlign={"left"}
              position={"relative"}
              width={"383px"}
            >
              <Component4 />
            </Box>
          </Box>
        </Container>
      </Box>
      <Box
        backgroundColor={"#000"}
        height={"auto"}
        padding={"0 5rem"}
        paddingBottom={"2rem"}
      >
        <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",
              },
            }}
          >
            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"}
                  >
                    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"}
                  >
                    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>
            </Box>
          </Container>
        </Fade>
      </Box>
      <Box
        backgroundColor={"#000"}
        height={"auto"}
        padding={"0 5rem"}
        paddingBottom={"2rem"}
      >
        <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>
    </>
  );
};

// <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>;