From dc674a40ec319e9e40ee3a3a922d41e4aa95edc4 Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Tue, 21 May 2024 16:58:55 +0530
Subject: [PATCH] New Static sub component made

---
 src/components/BlogPost/BlogPost.jsx          |   3 +-
 .../StaticSubComponents/StaticSubNet.jsx      | 420 ++++++++++++++++++
 .../StaticSubs/StaticSubnetFour.jsx           |  77 ++++
 .../StaticSubs/StaticSubnetOne.jsx            |  76 ++++
 .../StaticSubs/StaticSubnetThree.jsx          |  76 ++++
 .../StaticSubs/StaticSubnetTwo.jsx            |  64 +++
 src/index.css                                 |   4 +
 src/pages/HomePage.jsx                        |   7 +-
 8 files changed, 724 insertions(+), 3 deletions(-)
 create mode 100644 src/components/StaticSubComponents/StaticSubNet.jsx
 create mode 100644 src/components/StaticSubComponents/StaticSubs/StaticSubnetFour.jsx
 create mode 100644 src/components/StaticSubComponents/StaticSubs/StaticSubnetOne.jsx
 create mode 100644 src/components/StaticSubComponents/StaticSubs/StaticSubnetThree.jsx
 create mode 100644 src/components/StaticSubComponents/StaticSubs/StaticSubnetTwo.jsx

diff --git a/src/components/BlogPost/BlogPost.jsx b/src/components/BlogPost/BlogPost.jsx
index c476d8e..f2acafc 100644
--- a/src/components/BlogPost/BlogPost.jsx
+++ b/src/components/BlogPost/BlogPost.jsx
@@ -41,6 +41,7 @@ const BlogPost = () => {
     : null;
 
   console.log(matchingBlogPost);
+  console.log(matchingBlogPost.content);
 
   return (
     <>
@@ -79,7 +80,6 @@ const BlogPost = () => {
               textAlign={"center"}
               className="rubix-fw-600"
               fontSize={"40px"}
-              fontFamily={"Mona Sans"}
               color={"#fff"}
               sx={{
                 "@media (max-width: 600px)": {
@@ -272,6 +272,7 @@ const BlogPost = () => {
               </Box>
 
               <Box
+                className="blog-post"
                 pt={5}
                 pb={5}
                 sx={{
diff --git a/src/components/StaticSubComponents/StaticSubNet.jsx b/src/components/StaticSubComponents/StaticSubNet.jsx
new file mode 100644
index 0000000..95330eb
--- /dev/null
+++ b/src/components/StaticSubComponents/StaticSubNet.jsx
@@ -0,0 +1,420 @@
+/* eslint-disable no-unused-vars */
+// / eslint-disable no-unused-vars /
+// / eslint-disable no-unused-vars /;
+import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
+import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+// import { SubnetPage2 } from "./SubnetPage2";
+import cube from "../../assets/images/cube.png";
+import stack from "../../assets/images/stackNew.webp";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import StaticSubnetOne from "./StaticSubs/StaticSubnetOne";
+import StaticSubnetTwo from "./StaticSubs/StaticSubnetTwo";
+import StaticSubnetThree from "./StaticSubs/StaticSubnetThree";
+import StaticSubnetFour from "./StaticSubs/StaticSubnetFour";
+
+const StaticSubNet = () => {
+  return (
+    <div
+      style={{
+        backgroundColor: "#000",
+        overflow: "hidden",
+      }}
+    >
+      <Box
+        // ref={mainBox}
+        height={"auto"}
+        // position={"relative"}
+        // display={"flex"}
+        // justifyContent={"center"}
+        // alignItems={"center"}
+      >
+        <Box
+          // ref={firstBoxRef}
+          // position={"absolute"}
+          // top={"0"}
+          // left={"0"}
+          // height={"100vh"}
+          width={"100%"}
+          backgroundColor={"#000"}
+          display={"grid"}
+          alignContent={"center"}
+        >
+          <Container
+            maxW="container.xl"
+            textAlign={"center"}
+            // height={"100vh"}
+            display={"grid"}
+            // p={10}
+            paddingTop={"4rem"}
+            alignContent={"center"}
+          >
+            <Text
+              as={"h2"}
+              fontWeight={700}
+              fontSize={"40px"}
+              textTransform={"capitalize"}
+              color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 600px)": {
+                  fontSize: "28px",
+                },
+              }}
+            >
+              decentralised Auto Syncing subnets
+            </Text>
+            <Box
+              display={"grid"}
+              gridTemplateColumns={"repeat(2, 1fr)"}
+              gridTemplateRows={"repeat(2, 1fr)"}
+              gap={"17rem 4rem"}
+              marginTop={"150px"}
+              position={"relative"}
+              padding={"0 4rem"}
+              paddingBottom={"50px"}
+            >
+              <Image
+                src={cube}
+                width={"410px"}
+                position={"absolute"}
+                left={"0"}
+                right={"0"}
+                marginLeft={"auto"}
+                marginRight={"auto"}
+                cursor={"pointer"}
+                transform="translateY(-10%)"
+                animation="floatAnimation 2s infinite alternate"
+                // onClick={handleImageClick}
+                sx={{
+                  "@keyframes floatAnimation": {
+                    "0%": {
+                      transform: "translateY(0)",
+                    },
+                    "100%": {
+                      transform: "translateY(-20px)",
+                    },
+                  },
+                }}
+              />
+
+              <Box
+                gridColumn={"1/2"}
+                textAlign={"left"}
+                position={"relative"}
+                width={"383px"}
+              >
+                <StaticSubnetOne />
+              </Box>
+
+              <Box
+                gridColumn={"1/2"}
+                gridRow={"2"}
+                textAlign={"left"}
+                position={"relative"}
+                width={"383px"}
+              >
+                <StaticSubnetTwo />
+              </Box>
+
+              <Box
+                gridColumn={"2/2"}
+                gridRow={"2"}
+                textAlign={"left"}
+                position={"relative"}
+                width={"383px"}
+              >
+                <StaticSubnetThree />
+              </Box>
+
+              <Box
+                gridColumn={"2/2"}
+                textAlign={"left"}
+                position={"relative"}
+                width={"383px"}
+              >
+                <StaticSubnetFour />
+              </Box>
+            </Box>
+          </Container>
+        </Box>
+
+        <Box
+          backgroundColor={"#101015"}
+          // height={"100vh"}
+          width={"100%"}
+          padding={"0 5rem"}
+          paddingBottom={"2rem"}
+          // ref={secondBoxRef}
+          // position={"absolute"}
+          // top={"0"}
+          // left={"0"}
+          display={"grid"}
+          placeContent={"center"}
+        >
+          <Text
+            as={"h2"}
+            paddingTop={"4rem"}
+            fontWeight={700}
+            fontSize={"40px"}
+            textTransform={"capitalize"}
+            color={"#fff"}
+            marginBottom={"5rem"}
+            textAlign={"center"}
+            sx={{
+              "@media (max-width: 1024px)": {},
+              "@media (max-width: 600px)": {
+                fontSize: "28px",
+              },
+            }}
+          >
+            With Unmatched Privacy and Scalability
+          </Text>
+          <Container maxW="container.xl" textAlign={"center"}>
+            <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
+              <Box>
+                <Image
+                  src={cube}
+                  width={"480px"}
+                  //   position={"absolute"}
+                  left={"0"}
+                  right={"0"}
+                  marginLeft={"auto"}
+                  marginRight={"auto"}
+                  cursor={"pointer"}
+                  transform="translateY(-10%)"
+                  animation="floatAnimation 2s infinite alternate"
+                  // onClick={click}
+                  sx={{
+                    "@keyframes floatAnimation": {
+                      "0%": {
+                        transform: "translateY(0)",
+                      },
+                      "100%": {
+                        transform: "translateY(-20px)",
+                      },
+                    },
+                  }}
+                />
+              </Box>
+              <Box width={"50%"}>
+                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+                  <Text
+                    as={"h2"}
+                    fontSize={"24px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    01. Decentralisation
+                  </Text>
+                  <Text fontSize={"18px"}>
+                    Rubix Decentralised Identity(DID) issued at L1 is the
+                    foundation for building digital ownership enhancing
+                    applications.
+                  </Text>
+                </Box>
+                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+                  <Text
+                    as={"h2"}
+                    fontSize={"24px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    02. Ultra Scalability
+                  </Text>
+                  <Text fontSize={"18px"}>
+                    Unlike monolithic chains which become centralized and
+                    introduce latency to achieve high throughput in the Rubix
+                    object chain architecture, where mobile nodes have real time
+                    full state data, the network TPS will increase with increase
+                    in numbers of nodes.
+                  </Text>
+                </Box>
+                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+                  <Text
+                    as={"h2"}
+                    fontSize={"24px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    03. Data Security and Privacy
+                  </Text>
+                  <Text fontSize={"18px"}>
+                    Rubix Decentralised Identity(DID) issued at L1 is the
+                    foundation for building digital ownership enhancing
+                    applications
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
+          </Container>
+        </Box>
+
+        <Box
+          backgroundColor={"#000"}
+          // height={"100vh"}
+          width={"100%"}
+          padding={"2rem"}
+          // paddingBottom={"2rem"}
+          // ref={thirdBoxRef}
+          // position={"absolute"}
+          // top={"0"}
+          // left={"0"}
+          display={"grid"}
+          placeContent={"center"}
+        >
+          <Text
+            as={"h2"}
+            paddingTop={"5rem"}
+            fontWeight={700}
+            fontSize={"40px"}
+            textTransform={"capitalize"}
+            color={"#fff"}
+            marginBottom={"5rem"}
+            textAlign={"center"}
+            sx={{
+              "@media (max-width: 1024px)": {},
+              "@media (max-width: 600px)": {
+                fontSize: "28px",
+              },
+            }}
+          >
+            All In One Composable Stack
+          </Text>
+          <Container maxW="container.xl" textAlign={"center"}>
+            <Box display={"flex"} alignItems={"start"} gap={"5rem"}>
+              <Box width={"100%"}>
+                <Box
+                  color={"#E1E1E1"}
+                  textAlign={"right"}
+                  marginBottom={"2rem"}
+                  minHeight={"80px"}
+                >
+                  <Text
+                    as={"h2"}
+                    fontSize={"20px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    Single Comprehensive Stack:
+                  </Text>
+                  <Text fontSize={"16px"}>
+                    Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
+                    tokens ( FTs and NFTs) all in one place.
+                  </Text>
+                </Box>
+                <Box
+                  color={"#E1E1E1"}
+                  textAlign={"right"}
+                  marginBottom={"2rem"}
+                >
+                  <Text
+                    as={"h2"}
+                    fontSize={"20px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    High Partition Tolerence:
+                  </Text>
+                  <Text fontSize={"16px"}>
+                    Issues in one shard wont affect other shards performance
+                  </Text>
+                </Box>
+                <Box
+                  color={"#E1E1E1"}
+                  textAlign={"right"}
+                  marginBottom={"2rem"}
+                >
+                  <Text
+                    as={"h2"}
+                    fontSize={"20px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    Fully Deterministic
+                  </Text>
+                  <Text fontSize={"16px"}>
+                    App can bring own Block space ( BYOB )
+                  </Text>
+                </Box>
+              </Box>
+              <Box>
+                <Image
+                  src={stack}
+                  width={"700px"}
+                  //   position={"absolute"}
+                  left={"0"}
+                  right={"0"}
+                  marginLeft={"auto"}
+                  marginRight={"auto"}
+                  cursor={"pointer"}
+                  transform="translateY(-10%)"
+                  animation="floatAnimation 2s infinite alternate"
+                  // onClick={click}
+                  sx={{
+                    "@keyframes floatAnimation": {
+                      "0%": {
+                        transform: "translateY(0)",
+                      },
+                      "100%": {
+                        transform: "translateY(-20px)",
+                      },
+                    },
+                  }}
+                />
+              </Box>
+              <Box width={"100%"}>
+                <Box
+                  color={"#E1E1E1"}
+                  textAlign={"left"}
+                  marginBottom={"2rem"}
+                  minHeight={"80px"}
+                >
+                  <Text
+                    as={"h2"}
+                    fontSize={"20px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    Unique Token/Object Based Architecture
+                  </Text>
+                  <Text fontSize={"16px"}>
+                    Build unlimited FTs and NFTs all at L1!!
+                  </Text>
+                </Box>
+                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+                  <Text
+                    as={"h2"}
+                    fontSize={"20px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    Green By The Design
+                  </Text>
+                  <Text fontSize={"16px"}>
+                    100000 Rubix Transactions consume &lt; 10 kWh &lt; 100000
+                    Visa transactions
+                  </Text>
+                </Box>
+                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+                  <Text
+                    as={"h2"}
+                    fontSize={"20px"}
+                    color={"#fff"}
+                    marginBottom={"10px"}
+                  >
+                    51.4 Million RBT
+                  </Text>
+                  <Text fontSize={"16px"}>Fixed Supply. Hardcapped </Text>
+                </Box>
+              </Box>
+            </Box>
+          </Container>
+        </Box>
+      </Box>
+    </div>
+  );
+};
+
+export default StaticSubNet;
diff --git a/src/components/StaticSubComponents/StaticSubs/StaticSubnetFour.jsx b/src/components/StaticSubComponents/StaticSubs/StaticSubnetFour.jsx
new file mode 100644
index 0000000..ecc1460
--- /dev/null
+++ b/src/components/StaticSubComponents/StaticSubs/StaticSubnetFour.jsx
@@ -0,0 +1,77 @@
+/* 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 vector4 from "../../../assets/images/vector4.png";
+
+const StaticSubnetFour = () => {
+  return (
+    <>
+      <Box
+        display={"flex"}
+        position={"absolute"}
+        top={"-70px"}
+        justifyContent={"flex-end"}
+        width={"100%"}
+      >
+        <Button
+          position={"relative"}
+          background={"transparent"}
+          // width={"165px"}
+          height={"57px"}
+          borderRadius={"28.5px"}
+          color={"#fff"}
+          border={"1px solid #A5A5A5"}
+          textTransform={"uppercase"}
+          fontSize={"16px"}
+          padding={"6px 20px"}
+          _after={{
+            content: "''",
+            position: "absolute",
+            background: `url(${vector4})`,
+            backgroundRepeat: "no-repeat",
+            width: "155px",
+            height: "100%",
+            left: "-155px",
+            top: "28px",
+          }}
+          _hover={{
+            background: "transparent",
+            // width: "165px",
+            // height: "57px",
+            borderRadius: "28.5px",
+            color: "#fff",
+            border: "1px solid #A5A5A5",
+          }}
+        >
+          Self Sovereign
+        </Button>
+      </Box>
+      <Box
+        display={"flex"}
+        flexDirection={"column"}
+        alignItems={"end"}
+        width={"565px"}
+      >
+        <UnorderedList color={"#E1E1E1"}>
+          <ListItem fontSize={"14px"}>
+            Permissioned subnets with no oracles and <br /> intermediaries
+          </ListItem>
+          <ListItem fontSize={"14px"}>No block space ransom</ListItem>
+          <ListItem fontSize={"14px"}>
+            Zero risk of transactions being blocked out of <br />
+            chain.
+          </ListItem>
+        </UnorderedList>
+      </Box>
+    </>
+  );
+};
+
+export default StaticSubnetFour;
diff --git a/src/components/StaticSubComponents/StaticSubs/StaticSubnetOne.jsx b/src/components/StaticSubComponents/StaticSubs/StaticSubnetOne.jsx
new file mode 100644
index 0000000..6def281
--- /dev/null
+++ b/src/components/StaticSubComponents/StaticSubs/StaticSubnetOne.jsx
@@ -0,0 +1,76 @@
+/* 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 vector1 from "../../../assets/images/vector1.png";
+
+const StaticSubnetOne = () => {
+  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"}
+          fontSize={"16px"}
+          // _after={{
+          //   content: "''",
+          //   position: "absolute",
+          //   backgroundImage: `url(${vector1})`,
+          //   backgroundRepeat: "no-repeat",
+          //   width: "383px",
+          //   height: "100%",
+          //   left: "165px",
+          //   top: "28px",
+          // }}
+          sx={{
+            "::after": {
+              content: "''",
+              position: "absolute",
+              background: `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 fontSize={"14px"}>
+          Only L1 powering full mobile nodes
+        </ListItem>
+        <ListItem fontSize={"14px"}>
+          Mobile nodes with full state data will settle P2P . Consensus provided
+          by nearby node validators.
+        </ListItem>
+        <ListItem fontSize={"14px"}>
+          High scalability, Partition tolerance and portability
+        </ListItem>
+      </UnorderedList>
+    </>
+  );
+};
+
+export default StaticSubnetOne;
diff --git a/src/components/StaticSubComponents/StaticSubs/StaticSubnetThree.jsx b/src/components/StaticSubComponents/StaticSubs/StaticSubnetThree.jsx
new file mode 100644
index 0000000..5e6d9ac
--- /dev/null
+++ b/src/components/StaticSubComponents/StaticSubs/StaticSubnetThree.jsx
@@ -0,0 +1,76 @@
+/* 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";
+
+const StaticSubnetThree = () => {
+  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>
+    </>
+  );
+};
+
+export default StaticSubnetThree;
diff --git a/src/components/StaticSubComponents/StaticSubs/StaticSubnetTwo.jsx b/src/components/StaticSubComponents/StaticSubs/StaticSubnetTwo.jsx
new file mode 100644
index 0000000..29e1d1c
--- /dev/null
+++ b/src/components/StaticSubComponents/StaticSubs/StaticSubnetTwo.jsx
@@ -0,0 +1,64 @@
+/* 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 StaticSubnetTwo = () => {
+  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"}
+          fontSize={"16px"}
+          _after={{
+            content: "''",
+            position: "absolute",
+            background: `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 fontSize={"14px"}>
+          Leverage own infrastructure for block space
+        </ListItem>
+        <ListItem fontSize={"14px"}>
+          Smart contracts in Rust , GoLang and C/C++
+        </ListItem>
+        <ListItem fontSize={"14px"}>
+          WASM compiler for smooth code migration
+        </ListItem>
+      </UnorderedList>
+    </>
+  );
+};
+
+export default StaticSubnetTwo;
diff --git a/src/index.css b/src/index.css
index a9854d5..cf801fb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -195,6 +195,10 @@ span.swiper-pagination-bullet {
   right: 98%;
 }
 
+.blog-post .rubix-text-small h1 {
+  font-size: 2em;
+}
+
 @media only screen and (max-width: 600px) {
   .tabspagination .swiper-button-prev,
   .tabspagination .swiper-button-next {
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 6bb0d9e..ae67e4b 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -14,6 +14,8 @@ import PartnerMobile from "../components/MobileComponent/PartnerMobile";
 import ResourcesMobile from "../components/MobileComponent/ResourcesMobile";
 import Loader from "../components/Loader/Loader";
 import { useGetBlogQuery } from "../Redux/slice/blogsSlice";
+import StaticSubNet from "../components/StaticSubComponents/StaticSubNet";
+
 //
 
 // import { useBreakpointValue } from "@chakra-ui/react";
@@ -44,8 +46,9 @@ const HomePage = () => {
       {!isLoading ? (
         <>
           <HomeBanner />
-          {/* <NewSubnetComp /> */}
-          {!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
+
+          {/* {!isMobile ? <NewSubnetComp /> : <MobileSubnet />} */}
+          {!isMobile ? <StaticSubNet /> : <MobileSubnet />}
           <Stats />
           <WhitePaper />
           {!isMobile ? <Partner /> : <PartnerMobile />}