rubix/src/components/MobileComponent/MobileSubnet.jsx

/* eslint-disable no-unused-vars */
import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
import MobileSubnet2 from "./MobileSubnet2";
import MobileSubnet3 from "./MobileSubnet3";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import { Navigation, Pagination, Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

const MobileSubnet = () => {
  const font = "14px";
  return (
    <>
      <Swiper
        pagination={true}
        navigation={false}
        modules={[Navigation, Pagination, Autoplay]}
        loop={true}
        // autoplay={{
        //   delay: 2500,
        //   disableOnInteraction: false,
        // }}
        style={{ backgroundColor: "#000" }}
      >
        <SwiperSlide>
          <Box
            backgroundColor={"#000"}
            padding={"1.5rem"}
            display={"grid"}
            alignContent={"center"}
          >
            {/* Subnet1 */}
            <Box>
              <Box
                display={"flex"}
                alignItems={"center"}
                justifyContent={"space-between"}
              >
                <Text
                  as={"h2"}
                  paddingTop={"2rem"}
                  fontWeight={500}
                  fontSize={"20px"}
                  textTransform={"capitalize"}
                  color={"#fff"}
                  sx={{
                    "@media (max-width: 1024px)": {},
                    "@media (max-width: 375px)": {
                      fontSize: "18px",
                    },
                  }}
                >
                  decentralised Auto Syncing subnets
                </Text>
                {/* <Image
                  src={cube}
                  width={"140px"}
                  transform="translateY(-10%)"
                  animation="floatAnimation 2s infinite alternate"
                  sx={{
                    "@keyframes floatAnimation": {
                      "0%": {
                        transform: "translateY(0)",
                      },
                      "100%": {
                        transform: "translateY(-20px)",
                      },
                    },
                  }}
                /> */}
              </Box>
              <Box>
                <Box>
                  <Text
                    as={"h2"}
                    paddingTop={"2rem"}
                    fontWeight={700}
                    fontSize={"20px"}
                    textTransform={"capitalize"}
                    color={"#fff"}
                    sx={{
                      "@media (max-width: 1024px)": {},
                      "@media (max-width: 375px)": {
                        fontSize: "18px",
                      },
                    }}
                  >
                    P2P
                  </Text>
                  <UnorderedList color={"#E1E1E1"}>
                    <ListItem>Only L1 powering full mobile nodes</ListItem>
                    <ListItem>
                      Mobile nodes with full state data will settle P2P .
                      Consensus provided by nearby node validators.
                    </ListItem>
                    <ListItem fontSize={"14px"}>
                      High scalability, Partition tolerance and portability
                    </ListItem>
                  </UnorderedList>
                </Box>

                <Box>
                  <Text
                    as={"h2"}
                    paddingTop={"2rem"}
                    fontWeight={500}
                    fontSize={"16px"}
                    textTransform={"capitalize"}
                    color={"#fff"}
                    sx={{
                      "@media (max-width: 1024px)": {},
                      "@media (max-width: 375px)": {
                        fontSize: "18px",
                      },
                    }}
                  >
                    Self Sovereign
                  </Text>
                  <UnorderedList color={"#E1E1E1"}>
                    <ListItem>
                      Permissioned subnets with no oracles and <br />{" "}
                      intermediaries
                    </ListItem>
                    <ListItem fontSize={"14px"}>
                      INo block space ransom
                    </ListItem>
                    <ListItem fontSize={"14px"}>
                      Zero risk of transactions being blocked out of <br />
                      chain.
                    </ListItem>
                  </UnorderedList>
                </Box>

                <Box>
                  <Text
                    as={"h2"}
                    paddingTop={"2rem"}
                    fontWeight={500}
                    fontSize={"16px"}
                    textTransform={"capitalize"}
                    color={"#fff"}
                    sx={{
                      "@media (max-width: 1024px)": {},
                      "@media (max-width: 375px)": {
                        fontSize: "18px",
                      },
                    }}
                  >
                    Easier
                  </Text>
                  <UnorderedList
                    color={"#E1E1E1"}
                    sx={{
                      "@media (max-width: 1024px)": {},
                      "@media (max-width: 375px)": {
                        fontSize: font,
                      },
                    }}
                  >
                    <ListItem>
                      Leverage own infrastructure for block space
                    </ListItem>
                    <ListItem>
                      Smart contracts in Rust , GoLang and C/C++
                    </ListItem>
                    <ListItem>WASM compiler for smooth code migration</ListItem>
                  </UnorderedList>
                </Box>

                <Box>
                  <Text
                    as={"h2"}
                    paddingTop={"2rem"}
                    fontWeight={500}
                    fontSize={"16px"}
                    textTransform={"capitalize"}
                    color={"#fff"}
                    sx={{
                      "@media (max-width: 1024px)": {},
                      "@media (max-width: 375px)": {
                        fontSize: "18px",
                      },
                    }}
                  >
                    cheaper
                  </Text>
                  <UnorderedList color={"#E1E1E1"}>
                    <ListItem>No GAS fees</ListItem>
                    <ListItem>
                      Incremental and modular infrastructure ask
                    </ListItem>
                    <ListItem fontSize={"14px"}>
                      No expensive re training of development <br />
                      resources
                    </ListItem>
                  </UnorderedList>
                </Box>
              </Box>
            </Box>
          </Box>
        </SwiperSlide>
        <SwiperSlide>
          <MobileSubnet2 font={font} />
        </SwiperSlide>
        <SwiperSlide>
          <MobileSubnet3 font={font} />
        </SwiperSlide>
      </Swiper>
    </>
  );
};

export default MobileSubnet;