rubix/src/components/StaticSubComponents/StaticSubNet.jsx

/* eslint-disable no-unused-vars */
// / eslint-disable no-unused-vars /
// / eslint-disable no-unused-vars /;
import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { useEffect, useRef, useState } from "react";
// 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";
import StaticSubnetOne from "./StaticSubs/StaticSubnetOne";
import StaticSubnetTwo from "./StaticSubs/StaticSubnetTwo";
import StaticSubnetThree from "./StaticSubs/StaticSubnetThree";
import StaticSubnetFour from "./StaticSubs/StaticSubnetFour";

const StaticSubNet = () => {
  return (
    <div
      style={{
        backgroundColor: "#000",
        overflow: "hidden",
      }}
    >
      <Box
        // ref={mainBox}
        height={"auto"}
        // position={"relative"}
        // display={"flex"}
        // justifyContent={"center"}
        // alignItems={"center"}
      >
        <Box
          // ref={firstBoxRef}
          // position={"absolute"}
          // top={"0"}
          // left={"0"}
          // height={"100vh"}
          width={"100%"}
          backgroundColor={"#000"}
          display={"grid"}
          alignContent={"center"}
        >
          <Container
            maxW="container.xl"
            textAlign={"center"}
            // height={"100vh"}
            display={"grid"}
            // p={10}
            paddingTop={"4rem"}
            alignContent={"center"}
          >
            <Text
              as={"h2"}
              fontWeight={700}
              fontSize={"40px"}
              textTransform={"capitalize"}
              color={"#fff"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 600px)": {
                  fontSize: "28px",
                },
              }}
            >
              decentralised Auto Syncing subnets
            </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"}
              >
                <StaticSubnetOne />
              </Box>

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

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

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

        <Box
          backgroundColor={"#101015"}
          // height={"100vh"}
          width={"100%"}
          padding={"0 5rem"}
          paddingBottom={"2rem"}
          // ref={secondBoxRef}
          // position={"absolute"}
          // top={"0"}
          // left={"0"}
          display={"grid"}
          placeContent={"center"}
        >
          <Text
            as={"h2"}
            paddingTop={"4rem"}
            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"}
          width={"100%"}
          padding={"2rem"}
          // paddingBottom={"2rem"}
          // ref={thirdBoxRef}
          // position={"absolute"}
          // top={"0"}
          // left={"0"}
          display={"grid"}
          placeContent={"center"}
        >
          <Text
            as={"h2"}
            paddingTop={"5rem"}
            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={"5rem"}>
              <Box width={"100%"}>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"right"}
                  marginBottom={"2rem"}
                  minHeight={"80px"}
                >
                  <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 Transactions consume &lt; 10 kWh &lt; 100000
                    Visa transactions
                  </Text>
                </Box>
                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    51.4 Million RBT
                  </Text>
                  <Text fontSize={"16px"}>Fixed Supply. Hardcapped </Text>
                </Box>
              </Box>
            </Box>
          </Container>
        </Box>
      </Box>
    </div>
  );
};

export default StaticSubNet;