Rubix Home page development

src/components/SubnetsComponent/Component2.jsx

@@ -0,0 +1,57 @@
+/* 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 vector2 from "../../assets/images/Vector2.png";
+
+const Component2 = () => {
+  return (
+    <>
+      <Box display={"flex"} position={"absolute"} top={"-70px"}>
+        <Button
+          position={"relative"}
+          background={"transparent"}
+          textTransform={"uppercase"}
+          width={"165px"}
+          height={"57px"}
+          borderRadius={"28.5px"}
+          color={"#fff"}
+          border={"1px solid #A5A5A5"}
+          _after={{
+            content: "''",
+            position: "absolute",
+            backgroundImage: `url(${vector2})`,
+            backgroundRepeat: "no-repeat",
+            width: "340px",
+            height: "100%",
+            left: "165px",
+            top: "-10px",
+          }}
+          _hover={{
+            background: "transparent",
+            width: "165px",
+            height: "57px",
+            borderRadius: "28.5px",
+            color: "#fff",
+            border: "1px solid #A5A5A5",
+          }}
+        >
+          Easier
+        </Button>
+      </Box>
+      <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>
+    </>
+  );
+};
+
+export default Component2;