rubix/src/components/MobileComponent/MobileSubnet3.jsx

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

const MobileSubnet3 = () => {
  return (
    <Box backgroundColor={"#000"} padding={"1.5rem"} paddingBottom={"4rem"}>
      {/* Subnet1 */}
      <Box>
        <Box
          display={"flex"}
          alignItems={"center"}
          position={"relative"}
          justifyContent={"space-between"}
        >
          <Text
            as={"h2"}
            paddingTop={"2rem"}
            fontWeight={700}
            fontSize={"20px"}
            textTransform={"capitalize"}
            color={"#fff"}
          >
            All In One Composable Stack
          </Text>
          <Image
            src={stack}
            width={"140px"}
            transform="translateY(-10%)"
            animation="floatAnimation 2s infinite alternate"
            zIndex={"0"}
            sx={{
              "@keyframes floatAnimation": {
                "0%": {
                  transform: "translateY(0)",
                },
                "100%": {
                  transform: "translateY(-20px)",
                },
              },
            }}
          />
        </Box>
        <Box>
          <Box>
            <Text
              as={"h2"}
              paddingTop={"1rem"}
              fontWeight={700}
              fontSize={"20px"}
              textTransform={"capitalize"}
              color={"#fff"}
            >
              Single Comprehensive Stack :
            </Text>
            <UnorderedList color={"#E1E1E1"}>
              <ListItem>
                Full Mobile node SDK, Smart Contracts, DIDs, Secondary tokens (
                FTs and NFTs) all in one place.
              </ListItem>
            </UnorderedList>
          </Box>
          <Box>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={700}
              fontSize={"20px"}
              textTransform={"capitalize"}
              color={"#fff"}
            >
              High Partition Tolerance :
            </Text>
            <UnorderedList color={"#E1E1E1"}>
              <ListItem>
                Issues in one shard wont affect other shards performance
              </ListItem>
            </UnorderedList>
          </Box>
          <Box>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={700}
              fontSize={"20px"}
              textTransform={"capitalize"}
              color={"#fff"}
            >
              Fully Deterministic :
            </Text>
            <UnorderedList color={"#E1E1E1"}>
              <ListItem>Apps can bring Own Block space( BYOB)</ListItem>
            </UnorderedList>
          </Box>
          <Box>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={700}
              fontSize={"20px"}
              textTransform={"capitalize"}
              color={"#fff"}
            >
              Unique token/object based architecture :
            </Text>
            <UnorderedList color={"#E1E1E1"}>
              <ListItem>Build unlimited FTs and NFTs all at L1!!</ListItem>
            </UnorderedList>
          </Box>
          <Box>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={700}
              fontSize={"20px"}
              textTransform={"capitalize"}
              color={"#fff"}
            >
              Green by the design :
            </Text>
            <UnorderedList color={"#E1E1E1"}>
              <ListItem>
                100,000 Rubix transactions consume &lt; 10 kWh &lt; 100000 Visa
                transactions
              </ListItem>
            </UnorderedList>
          </Box>

          <Box paddingBottom={"2rem"}>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={700}
              fontSize={"20px"}
              textTransform={"capitalize"}
              color={"#fff"}
            >
              Fixed, hard capped supply of RBT at 51.4 Million
            </Text>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default MobileSubnet3;