rubix/src/components/MobileComponent/MobileSubnet.jsx

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 } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

const MobileSubnet = () => {
  return (
    <>
      <Swiper>
        <SwiperSlide></SwiperSlide>
        <Box backgroundColor={"#000"} padding={"1.5rem"}>
          {/* Subnet1 */}
          <Box>
            <Box
              display={"flex"}
              alignItems={"center"}
              justifyContent={"space-between"}
            >
              <Text
                as={"h2"}
                paddingTop={"2rem"}
                fontWeight={700}
                fontSize={"20px"}
                textTransform={"capitalize"}
                color={"#fff"}
              >
                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"}
                >
                  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>
                    High scalability, Partition tolerance and portability
                  </ListItem>
                </UnorderedList>
              </Box>

              <Box>
                <Text
                  as={"h2"}
                  paddingTop={"2rem"}
                  fontWeight={700}
                  fontSize={"20px"}
                  textTransform={"capitalize"}
                  color={"#fff"}
                >
                  Self Sovereign
                </Text>
                <UnorderedList color={"#E1E1E1"}>
                  <ListItem>
                    Permissioned subnets with no oracles and <br />{" "}
                    intermediaries
                  </ListItem>
                  <ListItem>INo block space ransom</ListItem>
                  <ListItem>
                    Zero risk of transactions being blocked out of <br />
                    chain.
                  </ListItem>
                </UnorderedList>
              </Box>

              <Box>
                <Text
                  as={"h2"}
                  paddingTop={"2rem"}
                  fontWeight={700}
                  fontSize={"20px"}
                  textTransform={"capitalize"}
                  color={"#fff"}
                >
                  Easier
                </Text>
                <UnorderedList color={"#E1E1E1"}>
                  <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={700}
                  fontSize={"20px"}
                  textTransform={"capitalize"}
                  color={"#fff"}
                >
                  cheaper
                </Text>
                <UnorderedList color={"#E1E1E1"}>
                  <ListItem>No GAS fees</ListItem>
                  <ListItem>
                    Incremental and modular infrastructure ask
                  </ListItem>
                  <ListItem>
                    No expensive re training of development <br />
                    resources
                  </ListItem>
                </UnorderedList>
              </Box>
            </Box>
          </Box>
        </Box>
        <SwiperSlide></SwiperSlide>
        <MobileSubnet2 />
        <SwiperSlide></SwiperSlide>
        <MobileSubnet3 />
      </Swiper>
    </>
  );
};

export default MobileSubnet;