rubix/src/components/SubnetsComponent/Component3.jsx

/* eslint-disable react/prop-types */
/* 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 vector3 from "../../assets/images/vector3.png";

export const Component3 = ({ id, title, content }) => {
  return (
    <>
      <Box
        display={"flex"}
        position={"absolute"}
        top={"-70px"}
        justifyContent={"flex-end"}
        width={"100%"}
      >
        <Button
          position={"relative"}
          background={"transparent"}
          textTransform={"uppercase"}
          width={"165px"}
          height={"57px"}
          borderRadius={"28.5px"}
          color={"#fff"}
          border={"1px solid #A5A5A5"}
          fontSize={"16px"}
          _before={{
            content: "''",
            position: "absolute",
            background: `url(${vector3})`,
            backgroundRepeat: "no-repeat",
            width: "155px",
            height: "100px",
            left: "-155px",
            top: "-40px",
          }}
          _hover={{
            background: "transparent",
            // width: "165px",
            // height: "57px",
            borderRadius: "28.5px",
            color: "#fff",
            border: "1px solid #A5A5A5",
          }}
        >
          cheaper
        </Button>
      </Box>
      <Box
        display={"flex"}
        flexDirection={"column"}
        alignItems={"end"}
        width={"552px"}
      >
        <UnorderedList color={"#E1E1E1"}>
          <ListItem fontSize={"14px"}>No GAS fees</ListItem>
          <ListItem fontSize={"14px"}>
            Incremental and modular infrastructure ask
          </ListItem>
          <ListItem fontSize={"14px"}>
            No expensive re training of development <br />
            resources
          </ListItem>
        </UnorderedList>
      </Box>
    </>
  );
};