Merge branch 'dev' of https://github.com/WDI-Ideas/rubix into dev

2026-04-27 23:45:50 +00:00 · 2024-04-16 19:40:23 +05:30
parent 0f5dc2f619 c93bfd1388
commit 2b0ef61017
8 changed files with 174 additions and 96 deletions
--- a/src/components/ArticleInternalOne/ArticleInternalOne.jsx
+++ b/src/components/ArticleInternalOne/ArticleInternalOne.jsx
@@ -44,7 +44,7 @@ const ArticleInternalOne = () => {
            "@media (max-width: 600px)": {
              minHeight: "28px",
              minHeight: "40vh",
-              width:'100vw'
+              width: "100vw",
            },
          }}
        >
@@ -58,6 +58,7 @@ const ArticleInternalOne = () => {
              "@media (max-width: 600px)": {
                fontSize: "28px",
                lineHeight: "45px",
+                padding: "0px 1rem",
              },
            }}
          >
@@ -92,6 +93,12 @@ const ArticleInternalOne = () => {
          backgroundRepeat={"no-repeat"}
          backgroundSize={"cover"}
          position="relative"
+          sx={{
+            "@media (max-width: 600px)": {
+              height: "215px",
+              width: "100%",
+            },
+          }}
        >
          <Box
            position="absolute"
@@ -115,6 +122,12 @@ const ArticleInternalOne = () => {
          flexDirection={"column"}
          color="white"
          position={"relative"}
+          sx={{
+            "@media (max-width: 600px)": {
+              display: "block",
+              top: "inherit",
+            },
+          }}
        >
          <Box
            position={"absolute"}
@@ -124,13 +137,38 @@ const ArticleInternalOne = () => {
            flexDirection={"column"}
            alignItems={"center"}
            gap={2}
+            sx={{
+              "@media (max-width: 600px)": {
+                bottom: "0px",
+                top: "inherit",
+                display: "block",
+                width:'100%',
+                marginBottom:'20px',
+                marginTop:'20px'
+              },
+            }}
          >
-            <Text className="rubix-text-xsmall">Share</Text>
-
-            <Image cursor={"pointer"} mb={4} w={6} h={6} src={tele} />
-            <Image cursor={"pointer"} mb={4} w={6} h={6} src={x} />
-            <Image cursor={"pointer"} mb={4} w={6} h={6} src={fb} />
-            <Image cursor={"pointer"} mb={4} w={6} h={6} src={linked} />
+            <Text className="rubix-text-xsmall"
+            sx={{
+              "@media (max-width: 600px)": {
+                marginBottom:'15px'
+              },
+            }}
+            >Share</Text>
+            <Text
+              sx={{
+                "@media (max-width: 600px)": {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  width: "60%",
+                },
+              }}
+            >
+              <Image cursor={"pointer"} mb={4} w={6} h={6} src={tele} />
+              <Image cursor={"pointer"} mb={4} w={6} h={6} src={x} />
+              <Image cursor={"pointer"} mb={4} w={6} h={6} src={fb} />
+              <Image cursor={"pointer"} mb={4} w={6} h={6} src={linked} />
+            </Text>
          </Box>
          <Box
            bg="#000000"
@@ -141,14 +179,20 @@ const ArticleInternalOne = () => {
            gap={5}
            justifyContent={"start"}
            color="white"
+            sx={{
+              "@media (max-width: 600px)": {
+                width: "100%",
+              },
+            }}
          >
            <Box display={"flex"} gap={5} justifyContent={"start"}>
              <Chip title="INSIGHT" />
              <Chip title="BLOCKSPACE" />
            </Box>

-            <Box pt={5} pb={5}>
-              <Text pb={5} fontSize="xl">
+            <Box pt={5} pb={5}
+            >
+              <Text className="rubix-text-small" pb={5}>
                BlockSpace is the number of transactions which the blockchain
                will order before appending to the chain of previous
                transactions. For example, if max block space is 200KB and
@@ -159,7 +203,7 @@ const ArticleInternalOne = () => {
                Transactions that compete with each to pay higher fees are
                likely to be validated faster.
              </Text>
-              <Text fontSize="xl">
+              <Text  className="rubix-text-small">
                The BlockSpace limit is intended to protect the decentralized
                nature of monolithic blockchains from centralization via large
                blocks. It protects small miners from being outcompeted by large
@@ -177,10 +221,16 @@ const ArticleInternalOne = () => {
                style={{ marginBottom: 6 }}
                className="rubix-fw-700"
                fontSize="3xl"
+                sx={{
+                  "@media (max-width: 600px)": {
+                    fontSize: "20px",
+                    fontWeight: "500",
+                  },
+                }}
              >
                BTC vs BCH
              </Text>
-              <Text fontSize="xl">
+              <Text  className="rubix-text-small">
                Bitcoin has a BlockSpace of 2000 to 2500 transactions per block
                (block size of 1mb) created every 10 minutes. Bitcoin Cash (fork
                of Bitcoin) on the other hand has a BlockSpace of up to 70,000
@@ -189,7 +239,7 @@ const ArticleInternalOne = () => {
                transaction processing speed is close to 200 transactions per
                second as the BlockSpace in BCH is much higher.
              </Text>
-              <Text fontSize="xl">
+              <Text  className="rubix-text-small">
                Since Bitcoin is designed for homogeneous transactions (ledger
                for BTC transfers, not applications of heterogenous
                transactions), gas fee caused by limited BlockSpace is less of
@@ -206,10 +256,16 @@ const ArticleInternalOne = () => {
                style={{ marginBottom: 6 }}
                className="rubix-fw-700"
                fontSize="3xl"
+                sx={{
+                  "@media (max-width: 600px)": {
+                    fontSize: "20px",
+                    fontWeight: "500",
+                  },
+                }}
              >
                ETH vs SOL
              </Text>
-              <Text pb={5} fontSize="xl">
+              <Text pb={5}  className="rubix-text-small">
                Ethereum has borrowed most of the monolithic design concepts of
                Bitcoin, but with blocks being added in less time compared to
                Bitcoin. However, unlike Bitcoin, Ethereum intends to power
@@ -227,7 +283,7 @@ const ArticleInternalOne = () => {
                thousands of TB, meaning only few nodes can run full nodes,
                running against the thesis of decentralization.
              </Text>
-              <Text pb={5} fontSize="xl">
+              <Text pb={5}  className="rubix-text-small">
                Further, most of the activity on Ethereum chain is miners
                extracting value from users using a technique called MEV (Miner
                Extractable Value). Most of the MEV extracted in arbitrage
@@ -240,7 +296,7 @@ const ArticleInternalOne = () => {
                security, hindering wider adoption of Web3 by Web2 apps or
                enterprises.
              </Text>
-              <Text pb={5} fontSize="xl">
+              <Text pb={5}  className="rubix-text-small">
                While Ethereum community aims to reduce congestion issues by
                promoting Layer 2 solutions (L2), L2’s tend to be less
                decentralized. Even with some good Zero Knowledge solutions
@@ -250,7 +306,7 @@ const ArticleInternalOne = () => {
                potentially undermining the L1 token itself, which in turn
                compromises security of the underlying L1 chain.
              </Text>
-              <Text pb={5} fontSize="xl">
+              <Text pb={5}  className="rubix-text-small">
                SOL allows for more flexibility in the BlockSpace. To increase
                TPS, Solana overcame the requirement for validators to order
                transactions in the block before being validated by using a
@@ -265,7 +321,7 @@ const ArticleInternalOne = () => {
                be linked to inefficiency of the network to handle traffic even
                before the network is mainstream.
              </Text>
-              <Text fontSize="xl">
+              <Text  className="rubix-text-small">
                Monolithic chains like SOL, while trying to solve the scale
                constraints of Ethereum, usually end up attracting bots to clog
                the enhanced BlockSpace. Bots have caused significant issues to
@@ -281,11 +337,24 @@ const ArticleInternalOne = () => {
                src="https://www.rubix.net/wp-content/uploads/ethereum-with-limited-blockspace.webp   "
              />
            </Text>
-            <Box pt={5} pb={5}>
-              <Text mb={4} className="rubix-fw-500" fontSize="4xl">
+            <Box pt={5} pb={5}
+            sx={{
+              "@media (max-width: 600px)": {
+                marginBottom:'3rem'
+              },
+            }}
+            >
+              <Text mb={4} className="rubix-fw-500" fontSize="4xl"
+              sx={{
+                "@media (max-width: 600px)": {
+                  fontSize: "20px",
+                  fontWeight: "500",
+                },
+              }}
+              >
                Rubix with unlimited BlockSpace
              </Text>
-              <Text pb={5} fontSize="xl">
+              <Text pb={5}  className="rubix-text-small">
                Rubix is designed for subnets and app chains to enjoy the
                benefits of being in the same network without having to share
                data or resources among them. People or Apps can bring their own
@@ -316,10 +385,10 @@ const ArticleInternalOne = () => {
                perhaps the single biggest thought change in the web is owned &
                used.
              </Text>
-              <Text pb={5} fontSize="xl">
+              <Text pb={5}  className="rubix-text-small">
                To learn more about Rubix Subspaces, please DM us at @rubixchain
              </Text>
-              <Text pb={5} fontSize="xl">
+              <Text pb={5}  className="rubix-text-small">
                Co-authored with K.C Reddy and Gokul P S
              </Text>
            </Box>
--- a/src/components/Card/HomeCard.jsx
+++ b/src/components/Card/HomeCard.jsx
@@ -6,7 +6,7 @@ import { Badge } from "@chakra-ui/react";
 import { Link } from "react-router-dom";

 const HomeCard = ({ key, date, text, link }) => {
-  return (
+  return (   
    <Box
      backgroundImage={
        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75))"
--- a/src/components/Card/MobileHomeCard.jsx
+++ b/src/components/Card/MobileHomeCard.jsx
@@ -6,11 +6,12 @@ import { Badge } from "@chakra-ui/react";
 import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
+import { Link } from "react-router-dom";

 import { Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";

-const MobileHomeCard = ({ key, date, text }) => {
+const MobileHomeCard = ({ key, date, text, link }) => {
  return (
    <Box
      backgroundImage={
@@ -50,12 +51,15 @@ const MobileHomeCard = ({ key, date, text }) => {
            INSIGHT
          </Badge>

-          <Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}
-          sx={{
-            "@media (max-width: 600px)": {
-              margin: "15px 0px",
-            },
-          }}
+          <Text
+            fontSize={"12px"}
+            color={"#979797"}
+            margin={"25px 0px"}
+            sx={{
+              "@media (max-width: 600px)": {
+                margin: "15px 0px",
+              },
+            }}
          >
            {date}
          </Text>
@@ -95,18 +99,20 @@ const MobileHomeCard = ({ key, date, text }) => {
                zIndex: "2",
              }}
            ></Box>
-            <Button
-              position={"relative"}
-              backgroundColor={"transparent"}
-              color={"#fff"}
-              fontFamily={"Poppins"}
-              fontWeight={"400"}
-              _hover={{
-                backgroundColor: "transparent",
-              }}
-            >
-              Read More
-            </Button>
+            <Link to={link}>
+              <Button
+                position={"relative"}
+                backgroundColor={"transparent"}
+                color={"#fff"}
+                fontFamily={"Poppins"}
+                fontWeight={"400"}
+                _hover={{
+                  backgroundColor: "transparent",
+                }}
+              >
+                Read More
+              </Button>
+            </Link>
          </Box>
        </Box>
      </Box>
--- a/src/components/HomePage/Resources.jsx
+++ b/src/components/HomePage/Resources.jsx
@@ -51,7 +51,7 @@ const content = [
 const Content = {
  heading: `Rubix Insights`,
 };
-
+  
 const Resources = () => {
  return (
    <Box
--- a/src/components/MobileComponent/MobileSubnet.jsx
+++ b/src/components/MobileComponent/MobileSubnet.jsx
@@ -24,7 +24,7 @@ const MobileSubnet = () => {
        //   delay: 2500,
        //   disableOnInteraction: false,
        // }}
-        style={{ backgroundColor: "#000" }}
+        style={{ backgroundColor: "#000" ,paddingBottom: "6rem", position: "relative"}}
      >
        <SwiperSlide>
          <Box
--- a/src/components/MobileComponent/ResourcesMobile.jsx
+++ b/src/components/MobileComponent/ResourcesMobile.jsx
@@ -28,7 +28,7 @@ const content = [
 ];

 const Content = {
-  heading: `Resources and Latest Happenings`,
+  heading: `Resources and Latest Happenings`,  
 };

 const ResourcesMobile = () => {
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -90,7 +90,7 @@ export const NewSubnetComp = () => {
          // position={"absolute"}
          // top={"0"}
          // left={"0"}
-          height={"100vh"}
+          // height={"100vh"}
          width={"100%"}
          backgroundColor={"#000"}
          display={"grid"}
--- a/src/index.css
+++ b/src/index.css
@@ -109,56 +109,6 @@ span.swiper-pagination-bullet {
 .swiper-pagination-bullet-active {
  background: #fff ;
 }
-
-@media only screen and (max-width: 600px) {
-  .swiper-button-prev:after,
-  .swiper-button-next:after {
-    font-size: 20px;
-  }
-
-  .swiper-pagination-bullets {
-    height: fit-content !important;
-  }
-
-  .swiper-pagination {
-    top: 90% !important;
-  }
-
-  .subnet-mobile .swiper-pagination {
-    top: 94% !important;
-  }
-
-  .swiper-button-next {
-    right: -8px; 
-  }
-
-  .swiper-button-prev {
-    left: -8px;
-  }
-  .team-slider .swiper-button-prev {
-    left: 28px;
-  }
-  .team-slider .swiper-button-next {
-    right: 28px;
-  }
-  .fade-in {
-    opacity: 1;
-    transition: opacity 0.9s ease-in-out;
-    -webkit-transition: opacity 0.9s ease-in-out;
-    -moz-transition: opacity 0.9s ease-in-out;
-    -ms-transition: opacity 0.9s ease-in-out;
-    -o-transition: opacity 0.9s ease-in-out;
-  }
-
-  .fade-out {
-    opacity: 0;
-    transition: opacity 0.9s ease-in-out;
-    -webkit-transition: opacity 0.9s ease-in-out;
-    -moz-transition: opacity 0.9s ease-in-out;
-    -ms-transition: opacity 0.9s ease-in-out;
-    -o-transition: opacity 0.9s ease-in-out;
-  }
-}
 /* html {
  font-family: "Mona Sans";
 } */
@@ -210,3 +160,56 @@ span.swiper-pagination-bullet {
 .rubix-fw-900 {
  font-weight: 900 !important;
 }
+
+@media only screen and (max-width: 600px) {
+  .swiper-button-prev:after,
+  .swiper-button-next:after {
+    font-size: 20px;
+  }
+
+  .swiper-pagination-bullets {
+    height: fit-content !important;
+  }
+
+  .swiper-pagination {
+    top: 90% !important;
+  }
+
+  .subnet-mobile .swiper-pagination {
+    top: 94% !important;
+  }
+
+  .swiper-button-next {
+    right: -8px; 
+  }
+
+  .swiper-button-prev {
+    left: -8px;
+  }
+  .team-slider .swiper-button-prev {
+    left: 28px;
+  }
+  .team-slider .swiper-button-next {
+    right: 28px;
+  }
+  .fade-in {
+    opacity: 1;
+    transition: opacity 0.9s ease-in-out;
+    -webkit-transition: opacity 0.9s ease-in-out;
+    -moz-transition: opacity 0.9s ease-in-out;
+    -ms-transition: opacity 0.9s ease-in-out;
+    -o-transition: opacity 0.9s ease-in-out;
+  }
+
+  .fade-out {
+    opacity: 0;
+    transition: opacity 0.9s ease-in-out;
+    -webkit-transition: opacity 0.9s ease-in-out;
+    -moz-transition: opacity 0.9s ease-in-out;
+    -ms-transition: opacity 0.9s ease-in-out;
+    -o-transition: opacity 0.9s ease-in-out;
+  }
+  .rubix-text-small {
+    font-size: 14px !important;
+  }
+}