rubix/src/components/SubnetsComponent/SubnetPage2.jsx

/* eslint-disable react/prop-types */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";

const SubnetPage2 = ({ click }) => {
  return (
    <Box backgroundColor={"#000"} height={"auto"} padding={"5rem"}>
      <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>
    </Box>
  );
};

export default SubnetPage2;