rubix/src/components/HomePage/Subnets.jsx

/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
  List,
  ListItem,
  ListIcon,
  OrderedList,
  UnorderedList,
} from "@chakra-ui/react";
import Component1 from "../SubnetsComponent/Component1";
import Component2 from "../SubnetsComponent/Component2";
import cube from "../../assets/images/cube.png";
import Component3 from "../SubnetsComponent/Component3";
import Component4 from "../SubnetsComponent/Component4";

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

const Subnets = () => {
  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"}
          />

          <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>
  );
};

export default Subnets;