Rubix Home page development

src/components/SubnetsComponent/Component1.jsx

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