Pull after Yasin push on dev and conflict merge

2026-04-27 19:45:49 +00:00 · 2024-04-09 13:38:02 +05:30
parent e8305e7640 ee9ed5fc65
commit 3787d3dedb
33 changed files with 385 additions and 356 deletions
--- a/src/components/BuildPage/BuildBanner.jsx
+++ b/src/components/BuildPage/BuildBanner.jsx
@@ -34,10 +34,15 @@ const BuildBanner = () => {
      }}
    >
      <Container
+        alignItems={"center"}
+        display={"flex"}
+        height={"100vh"}
+        alignContent={"center"}
+        paddingTop={"10%"}
        maxW="container.xl"
        textAlign={"left"}
        marginTop={"2rem"}
-        paddingLeft={"4rem"}
+        paddingLeft={"3.5rem"}
        sx={{
          "@media (max-width: 435px)": {
            paddingLeft: "2rem",
@@ -55,9 +60,11 @@ const BuildBanner = () => {
          <Text
            as={"h2"}
            fontWeight={700}
-            fontSize={"60px"}
+            fontSize={"52px"}
            textTransform={"capitalize"}
            color={"#DE858E"}
+            lineHeight={"62px"}
+            letterSpacing={"1px"}
            sx={{
              "@media (max-width: 996px)": {
                fontSize: "35px",
@@ -76,7 +83,6 @@ const BuildBanner = () => {
            <span
              style={{
                color: "#fff",
-                fontWeight: "600",
              }}
            >
              {BannerContent[0].heading2}
@@ -101,69 +107,55 @@ const BuildBanner = () => {
              {BannerContent[1].subheading}
            </Text>
          </Box>
+          <Button
+            position={"relative"}
+            backgroundColor={"transparent"}
+            cursor={"pointer"}
+            transition="0.3s ease-in-out"
+            color={"#fff"}
+            width={"216px"}
+            marginTop={"2rem"}
+            height={"56px"}
+            fontFamily={"Poppins"}
+            fontWeight={"400"}
+            border={"1px solid white"}
+            borderRadius={"10px"}
+            fontSize={"20px"}
+            zIndex={"1"}
+            overflow={"hidden"}
+            sx={{
+              "::before": {
+                content: '""',
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: "65px",
+                height: "65px",
+                borderRadius: "50%",
+                transition: "0.35s linear",
+                zIndex: -1,
+                bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                opacity: "0",
+              },
+              "&:hover::before": {
+                width: "100%",
+                height: "120%",
+                borderRadius: "0px",
+                opacity: "1",
+              },
+            }}
+            _hover={{
+              color: "#000",
+              border: "none",
+              zIndex: 1,
+            }}
+          >
+            {BannerContent[2].btn}
+          </Button>
        </Box>
      </Container>
-      <Container
-        maxW="container.xl"
-        textAlign={"left"}
-        marginTop={"3rem"}
-        paddingLeft={"4rem"}
-        sx={{
-          "@media (max-width: 435px)": {
-            paddingLeft: "2rem",
-          },
-          "@media (max-width: 375px)": {
-            marginTop: "1rem",
-          },
-        }}
-      >
-        <Button
-          position={"relative"}
-          backgroundColor={"transparent"}
-          cursor={"pointer"}
-          transition="0.3s ease-in-out"
-          color={"#fff"}
-          width={"227px"}
-          height={"60px"}
-          fontFamily={"Poppins"}
-          fontWeight={"400"}
-          border={"1px solid white"}
-          borderRadius={"10px"}
-          fontSize={"20px"}
-          zIndex={"1"}
-          overflow={"hidden"}
-          sx={{
-            "::before": {
-              content: '""',
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              width: "65px",
-              height: "65px",
-              borderRadius: "50%",
-              transition: "0.35s linear",
-              zIndex: -1,
-              bgGradient:
-                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
-              opacity: "0",
-            },
-            "&:hover::before": {
-              width: "100%",
-              height: "120%",
-              borderRadius: "0px",
-              opacity: "1",
-            },
-          }}
-          _hover={{
-            color: "#000",
-            border: "none",
-            zIndex: 1,
-          }}
-        >
-          {BannerContent[2].btn}
-        </Button>
-      </Container>
    </Box>
  );
 };
--- a/src/components/BuildPage/Connect.jsx
+++ b/src/components/BuildPage/Connect.jsx
@@ -155,6 +155,7 @@ const Connect = () => {
                    ) : (
                      ""
                    )}
+                    {/* <>{console.log(item.logo1)}</> */}
                  </CardBody>
                </Card>
              </Box>
--- a/src/components/BuildPage/LearnMore.jsx
+++ b/src/components/BuildPage/LearnMore.jsx
@@ -26,9 +26,9 @@ const LearnMore = () => {
      <Text
        as={"h2"}
        paddingTop={"2rem"}
-        paddingBottom={"2rem"}
+        paddingBottom={"1rem"}
        fontWeight={700}
-        // fontSize={"40px"}
+        fontSize={"40px"}
        className="rubix-text-title"
        textAlign={"center"}
        textTransform={"capitalize"}
--- a/src/components/BuildPage/Solve.jsx
+++ b/src/components/BuildPage/Solve.jsx
@@ -154,8 +154,8 @@ const Solve = () => {
                  background={"transparent"}
                  color={"#fff"}
                  fontFamily={"Poppins"}
-                  //   fontWeight={"500"}
-                  fontSize={"18px"}
+                    fontWeight={"100"}
+                  fontSize={"16px"}
                  padding={"0px"}
                  _hover={{
                    background: "transparent",
--- a/src/components/BuildPage/Tools.jsx
+++ b/src/components/BuildPage/Tools.jsx
@@ -62,17 +62,17 @@ const Tools = () => {
      <Container maxW="container.xl">
        <Text
          fontFamily={"Mona Sans"}
-          fontWeight={"700"}
-          fontSize={"40px"}
+          fontWeight={"600"}
+          fontSize={"38px"}
          color={"#fff"}
        >
-          Tools and resources to help you succeed
+          Tools And Resources To Help You Succeed
        </Text>
      </Container>
      <Container
        maxW="container.xl"
        justifyContent={"center"}
-        marginTop={"4rem"}
+        marginTop={"3rem"}
        textAlign={"center"}
      >
        <SimpleGrid
@@ -83,7 +83,7 @@ const Tools = () => {
            <>
              <Box
                backgroundImage={
-                  "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
+                  "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f866), color-stop(0.67, #f8697a9e));"
                }
                padding={"1px"}
                borderRadius={"10px"}
@@ -94,8 +94,8 @@ const Tools = () => {
                  borderRadius={"10px"}
                  height={"100%"}
                >
-                  <CardHeader display={"flex"} justifyContent={"center"}>
-                    <Image src={item.img} />
+                  <CardHeader display={"flex"} justifyContent={"center"} paddingBottom={"15px"}>
+                    <Image height={"70px"} src={item.img} />
                    {/* <Heading size="md"></Heading> */}
                  </CardHeader>
                  <CardBody
@@ -106,13 +106,13 @@ const Tools = () => {
                    <Text
                      color={"#fff"}
                      fontFamily={"Poppins"}
-                      fontSize={"20px"}
+                      fontSize={"18px"}
                      textAlign={"center"}
                      fontWeight={"400"}
                      dangerouslySetInnerHTML={{ __html: item.title }}
                    />
                  </CardBody>
-                  <CardFooter justifyContent={"center"} cursor={"pointer"}>
+                  <CardFooter justifyContent={"center"} cursor={"pointer"} paddingTop={"15px"}>
                    <Image
                      src={arrow}
                      transition="all .5s"
@@ -132,13 +132,13 @@ const Tools = () => {
          cursor={"pointer"}
          transition="0.3s ease-in"
          color={"#fff"}
-          width={"227px"}
-          height={"60px"}
+          width={"216px"}
+          height={"54px"}
          fontFamily={"Poppins"}
          fontWeight={"400"}
          border={"1px solid white"}
          borderRadius={"10px"}
-          fontSize={"20px"}
+          fontSize={"18px"}
          zIndex={"1"}
          overflow={"hidden"}
          marginTop={"4rem"}
--- a/src/components/BuildPage/WhyBuild.jsx
+++ b/src/components/BuildPage/WhyBuild.jsx
@@ -115,7 +115,7 @@ const WhyBuild = () => {
                          textAlign="left"
                          fontFamily={"Mona Sans"}
                          fontWeight={"500"}
-                          fontSize={"30px"}
+                          fontSize={"28px"}
                          color={"#fff"}
                          sx={{
                            "@media (max-width: 435px)": {
@@ -135,7 +135,7 @@ const WhyBuild = () => {
                      fontWeight={"400"}
                      color={"#E8E8E8"}
                      width={"100%"}
-                      fontSize={"21px"}
+                      fontSize={"20px"}
                      paddingLeft={"0px"}
                      sx={{
                        "@media (max-width: 1024px)": {
--- a/src/components/Card/CommCard.jsx
+++ b/src/components/Card/CommCard.jsx
@@ -39,17 +39,17 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => {
            content: "''",
            position: "absolute",
            bottom: 0,
-            left: "20px",
-            height: "67%",
+            left: "15px",
+            height: "62%",
            width: "100%",
            borderLeft: "1px solid #ffffff70",
          }}
        >
          <img
            src={linkedin}
-            style={{ minWidth: "42px", height: "42px", marginBottom: "10px" }}
+            style={{ minWidth: "34px", height: "34px", marginBottom: "10px" }}
          />
-          <img src={games} style={{ minWidth: "42px", height: "42px" }} />
+          <img src={games} style={{ minWidth: "34px", height: "34px" }} />
        </Text>
      </Text>
      {/* <Text
--- a/src/components/Card/HappenCard.jsx
+++ b/src/components/Card/HappenCard.jsx
@@ -26,7 +26,7 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
          <br />
          {curentDate}
        </Text>
-        <Image src={CardImg2} />
+        <Image src={CardImg2} borderTopLeftRadius={"10px"} borderTopRightRadius={"10px"} />
        <Box padding={"1rem"}>
          <Text fontSize={"14px"} color={"#979797"} marginBottom={"10px"}>
            {date}
--- a/src/components/Card/InsightsCard.jsx
+++ b/src/components/Card/InsightsCard.jsx
@@ -9,7 +9,7 @@ const InsightsCard = ({ key, title, text }) => {
  return (
    <Box
      backgroundImage={
-        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
+        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75));"
      }
      padding={"1px"}
      borderRadius={"10px"}
--- a/src/components/Card/LearnCard.jsx
+++ b/src/components/Card/LearnCard.jsx
@@ -5,9 +5,6 @@ import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
 const LearnCard = ({ id, src, alt, text }) => {
  return (
    <Box
-      backgroundImage={
-        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
-      }
      padding={"1px"}
      borderRadius={"10px"}
    >
@@ -17,10 +14,11 @@ const LearnCard = ({ id, src, alt, text }) => {

      <Box
        display="inline-block"
-        width={"650px"}
+        width={"520px"}
        height={"300px"}
-        background={"#151419"}
+        background={"#161616"}
        borderRadius={"10px"}
+        padding={"20px"}
        key={id}
        sx={{
          "@media (max-width: 435px)": {
@@ -28,17 +26,17 @@ const LearnCard = ({ id, src, alt, text }) => {
          },
        }}
      >
-        <Box padding={"1rem"}>
-          <Image src={src} alt={alt} />
+        <Box padding={"1rem"} >
+          <Image height={"60px"} src={src} alt={alt} />
        </Box>

        <Box padding={"1rem"} height={"110px"}>
          <Text
-            color={"#fff"}
+            color={"#E8E8E8"}
            fontSize={"18px"}
            fontFamily={"Poppins"}
            marginBottom={"20px"}
-            fontWeight={"300"}
+            // fontWeight={"100"}
          >
            {text}
          </Text>
--- a/src/components/Community/CommunityBanner.jsx
+++ b/src/components/Community/CommunityBanner.jsx
@@ -35,10 +35,15 @@ const CommunityBanner = () => {
      }}
    >
      <Container
+        alignItems={"center"}
+        display={"flex"}
+        height={"100vh"}
+        alignContent={"center"}
+        paddingTop={"10%"}
        maxW="container.xl"
        textAlign={"left"}
        marginTop={"2rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"3.5rem"}
        sx={{
          "@media (max-width: 500px)": {
            paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
@@ -46,7 +51,7 @@ const CommunityBanner = () => {
        }}
      >
        <Box
-          width={"90%"}
+          width={"75%"}
          sx={{
            "@media (max-width: 500px)": {
              width: "100%",
@@ -56,9 +61,11 @@ const CommunityBanner = () => {
          <Text
            as={"h2"}
            fontWeight={700}
-            fontSize={"60px"}
+            fontSize={"52px"}
            // textTransform={"upperCase"}
            color={"#DE858E"}
+            lineHeight={"62px"}
+            letterSpacing={"1px"}
            sx={{
              "@media (max-width: 996px)": {
                fontSize: "35px",
@@ -69,22 +76,24 @@ const CommunityBanner = () => {
              },
              "@media (max-width: 500px)": {
                marginTop: "2rem",
-                marginBottom:'2rem',
-                fontSize:'36px'
+                marginBottom: "2rem",
+                fontSize: "36px",
              },
            }}
          >
-            {BannerContent[0].heading1} <br />
            <span
              style={{
                color: "#fff",
-                fontWeight: "600",
              }}
            >
-              {BannerContent[0].heading2}
-            </span>
+              {BannerContent[0].heading1}
+            </span>{" "}
+            <br />
+            {BannerContent[0].heading2}
          </Text>
-          <Box marginTop={"1.5rem"} width={"80%"}
+          <Box
+            marginTop={"1.5rem"}
+            width={"80%"}
            sx={{
              "@media (max-width: 500px)": {
                width: "100%",
@@ -93,7 +102,7 @@ const CommunityBanner = () => {
          >
            <Text
              color={"#fff"}
-              fontSize={"25px"}
+              fontSize={"20px"}
              fontWeight={"400"}
              lineHeight={"37.5px"}
              fontFamily={"Poppins"}
@@ -110,61 +119,60 @@ const CommunityBanner = () => {
              {BannerContent[1].subheading}
            </Text>
          </Box>
+          <Button
+            position={"relative"}
+            backgroundColor={"transparent"}
+            cursor={"pointer"}
+            transition="0.3s ease-in-out"
+            color={"#fff"}
+            width={"280px"}
+            height={"54px"}
+            fontFamily={"Poppins"}
+            fontWeight={"400"}
+            border={"1px solid white"}
+            borderRadius={"10px"}
+            fontSize={"18px"}
+            zIndex={"1"}
+            overflow={"hidden"}
+            marginTop={"2rem"}
+            sx={{
+              "::before": {
+                content: '""',
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: "65px",
+                height: "65px",
+                borderRadius: "50%",
+                transition: "0.35s linear",
+                zIndex: -1,
+                bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                opacity: "0",
+              },
+              "&:hover::before": {
+                width: "100%",
+                height: "120%",
+                borderRadius: "0px",
+                opacity: "1",
+              },
+              "@media (max-width: 500px)": {
+                fontSize: "14px",
+                width: "230px",
+                height: "44px",
+                marginTop: "2rem",
+              },
+            }}
+            _hover={{
+              color: "#000",
+              border: "none",
+              zIndex: 1,
+            }}
+          >
+            {BannerContent[2].btn}
+          </Button>
        </Box>
-        <Button
-          position={"relative"}
-          backgroundColor={"transparent"}
-          cursor={"pointer"}
-          transition="0.3s ease-in-out"
-          color={"#fff"}
-          width={"320px"}
-          height={"60px"}
-          fontFamily={"Poppins"}
-          fontWeight={"400"}
-          border={"1px solid white"}
-          borderRadius={"10px"}
-          fontSize={"20px"}
-          zIndex={"1"}
-          overflow={"hidden"}
-          marginTop={"3rem"}
-          sx={{
-            "::before": {
-              content: '""',
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              width: "65px",
-              height: "65px",
-              borderRadius: "50%",
-              transition: "0.35s linear",
-              zIndex: -1,
-              bgGradient:
-                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
-              opacity: "0",
-            },
-            "&:hover::before": {
-              width: "100%",
-              height: "120%",
-              borderRadius: "0px",
-              opacity: "1",
-            },
-            "@media (max-width: 500px)": {
-              fontSize: "14px",
-              width:'230px',
-              height:'44px',
-              marginTop:"2rem"
-            },
-            
-          }}
-          _hover={{
-            color: "#000",
-            border: "none",
-            zIndex: 1,
-          }}
-        >
-          {BannerContent[2].btn}
-        </Button>
      </Container>
    </Box>
  );
--- a/src/components/Community/CommunityCard.jsx
+++ b/src/components/Community/CommunityCard.jsx
@@ -130,7 +130,7 @@ const CommunityCard = () => {
        <Container
          maxW={"container.xl"}
          padding={"0 5rem"}
-          paddingBottom={"5rem"}
+          paddingBottom={"6rem"}
          sx={{
            "@media (max-width: 1024px)": {
              padding: "3rem",
@@ -140,10 +140,10 @@ const CommunityCard = () => {
        >
          <Text
            as={"h2"}
-            paddingTop={"3rem"}
-            paddingBottom={"2rem"}
+            paddingTop={"4rem"}
+            paddingBottom={"5rem"}
            fontWeight={700}
-            fontSize={"40px"}
+            fontSize={"38px"}
            textAlign={"left"}
            textTransform={"capitalize"}
            color={"#fff"}
@@ -160,8 +160,8 @@ const CommunityCard = () => {
            Rubix Community
          </Text>
          <SimpleGrid
-            spacing={10}
-            templateColumns="repeat(auto-fill, minmax(250px, 1fr))"
+            spacing={"50px"}
+            templateColumns="repeat(auto-fill, minmax(230px, 1fr))"
          >
            {individuals.map((item) => (
              <CommCard
--- a/src/components/Community/Connect.jsx
+++ b/src/components/Community/Connect.jsx
@@ -66,7 +66,8 @@ const Connect = () => {
      <Container
         maxW={"container.xl"}
         padding={"0 5rem"}
-         paddingBottom={"2rem"}
+         paddingBottom={"5rem"}
+         paddingTop={"5rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",
@@ -80,7 +81,7 @@ const Connect = () => {
          fontWeight={"700"}
          //   fontSize={"40px"}
          color={"#fff"}
-          marginBottom={"35px"}
+          marginBottom={"3rem"}
        >
          Connect with Rubix community
        </Text>
@@ -138,7 +139,7 @@ const Connect = () => {
                        <Image src={item.logo2} margin={"0 auto 20px auto"} />
                        <Text className="rubix-text-small" fontWeight={"400"}>
                          {item.social2}
-                        </Text>
+                        </Text> 
                      </Link>
                      {item.social3 ? (
                        <Link display={"grid"} placeContent={"center"}>
--- a/src/components/Community/Happen.jsx
+++ b/src/components/Community/Happen.jsx
@@ -81,7 +81,7 @@ const Happen = () => {
        >
          <Box>
            <SimpleGrid
-             spacing={4}
+             spacing={5}
             templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
            >
              {Latest.map((item) => (
@@ -103,8 +103,8 @@ const Happen = () => {
            cursor={"pointer"}
            transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
            color={"#fff"}
-            width={"227px"}
-            height={"60px"}
+            width={"216px"}
+            height={"54px"}
            fontFamily={"Poppins"}
            fontWeight={"400"}
            border={"1px solid white"}
--- a/src/components/Community/Insights.jsx
+++ b/src/components/Community/Insights.jsx
@@ -86,8 +86,8 @@ const Insights = () => {
            cursor={"pointer"}
            transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
            color={"#fff"}
-            width={"227px"}
-            height={"60px"}
+            width={"210px"}
+            height={"54px"}
            fontFamily={"Poppins"}
            fontWeight={"400"}
            border={"1px solid white"}
--- a/src/components/Community/LearnMore.jsx
+++ b/src/components/Community/LearnMore.jsx
@@ -26,8 +26,8 @@ const LearnMore = () => {
    >
      <Text
        as={"h2"}
-        paddingTop={"2rem"}
-        paddingBottom={"2rem"}
+        paddingTop={"3rem"}
+        paddingBottom={"1rem"}
        fontWeight={700}
        // fontSize={"40px"}
        className="rubix-text-title"
@@ -49,7 +49,7 @@ const LearnMore = () => {
        display={"grid"}
        placeContent={"center"}
        // height={"30vh"}
-        paddingBottom={"3rem"}
+        paddingBottom={"4rem"}
      >
        <Text
          color={"#E4E4E4"}
--- a/src/components/Community/Place.jsx
+++ b/src/components/Community/Place.jsx
@@ -45,13 +45,14 @@ const Place = () => {
    <Box
      // height={"100vh"}
      background={"#000"}
+      paddingTop={"4rem"}
+      paddingBottom={"4rem"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      backgroundImage={`url(${Banner})`}
    >
      <Box
        paddingLeft={"7rem"}
-        paddingBottom={"2rem"}
        // height={"50vh"}
        sx={{
          "@media (max-width: 435px)": {
@@ -61,10 +62,9 @@ const Place = () => {
      >
        <Text
          as={"h2"}
-          paddingTop={"2rem"}
-          paddingBottom={"2rem"}
+          paddingBottom={"3rem"}
          fontWeight={700}
-          fontSize={"40px"}
+          fontSize={"38px"}
          textTransform={"capitalize"}
          color={"#fff"}
          sx={{
--- a/src/components/Contact/Form.jsx
+++ b/src/components/Contact/Form.jsx
@@ -82,7 +82,7 @@ const Contact = () => {
        justifyContent={"start"}
        alignItems={"baseline"}
        gap={"2rem"}
-        padding={"3rem 0rem"}
+        paddingTop={"5rem"}
        sx={{
          "@media (max-width: 2160px)": {},
          "@media (max-width: 1440px)": {},
@@ -133,17 +133,18 @@ const Contact = () => {
            textTransform={"capitalize"}
            fontWeight={"500"}
            fontFamily={"Poppins"}
-            fontSize={"20px"}
+            fontSize={"18px"}
+            marginBottom={"10px"}
          >
            Contact Us
          </Badge>
-          <Box textAlign={"left"} marginBottom={"2rem"}>
+          <Box textAlign={"left"} marginBottom={"3rem"}>
            <Text
              as={"h2"}
              className="rubix-text-title"
-              fontWeight={"700"}
+              fontWeight={"600"}
              textTransform={"capitalize"}
-              lineHeight={"54px"}
+              lineHeight={"47px"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 768px)": {},
@@ -153,7 +154,7 @@ const Contact = () => {
              Start reaching <br /> your digital goals
            </Text>
          </Box>
-          <Box marginBottom={"2rem"}>
+          <Box marginBottom={"3em"}>
            <Badge
              textAlign={"left"}
              background={"transparent"}
@@ -161,7 +162,7 @@ const Contact = () => {
              textTransform={"capitalize"}
              fontWeight={"500"}
              fontFamily={"Poppins"}
-              fontSize={"20px"}
+              fontSize={"18px"}
            >
              Social Media
            </Badge>
@@ -177,7 +178,7 @@ const Contact = () => {
            </Box>
          </Box>

-          <Box marginBottom={"2rem"}>
+          <Box marginBottom={"3rem"}>
            <Badge
              textAlign={"left"}
              background={"transparent"}
@@ -186,6 +187,7 @@ const Contact = () => {
              fontWeight={"500"}
              fontFamily={"Poppins"}
              fontSize={"18px"}
+              padding={"0px"}
            >
              Chat to us
            </Badge>
@@ -213,6 +215,7 @@ const Contact = () => {
              fontWeight={"500"}
              fontFamily={"Poppins"}
              fontSize={"18px"}
+              padding={"0px"}
            >
              Call us
            </Badge>
@@ -284,9 +287,10 @@ const Contact = () => {
                <Box width={"100%"} minH={"120px"}>
                  <label
                    style={{
-                      fontSize: "22px",
-                      color: "#fff",
+                      fontSize: "20px",
+                      color: "#DFDFDF",
                      fontFamily: "Poppins",
+                      fontWeight:'400'
                    }}
                  >
                    First Name*
@@ -321,9 +325,10 @@ const Contact = () => {
                <Box width={"100%"} minH={"120px"}>
                  <label
                    style={{
-                      fontSize: "22px",
-                      color: "#fff",
+                      fontSize: "20px",
+                      color: "#DFDFDF",
                      fontFamily: "Poppins",
+                      fontWeight:'400'
                    }}
                  >
                    Last Name*
@@ -379,9 +384,10 @@ const Contact = () => {
                <Box width={"100%"} minH={"120px"}>
                  <label
                    style={{
-                      fontSize: "22px",
-                      color: "#fff",
+                      fontSize: "20px",
+                      color: "#DFDFDF",
                      fontFamily: "Poppins",
+                      fontWeight:'400'
                    }}
                  >
                    Email*
@@ -416,9 +422,10 @@ const Contact = () => {
                <Box width={"100%"} minH={"120px"}>
                  <label
                    style={{
-                      fontSize: "22px",
-                      color: "#fff",
+                      fontSize: "20px",
+                      color: "#DFDFDF",
                      fontFamily: "Poppins",
+                      fontWeight:'400'
                    }}
                  >
                    Phone*
@@ -461,9 +468,10 @@ const Contact = () => {
              <Box width={"100%"} minH={"120px"}>
                <label
                  style={{
-                    fontSize: "22px",
-                    color: "#fff",
+                    fontSize: "20px",
+                    color: "#DFDFDF",
                    fontFamily: "Poppins",
+                    fontWeight:'400'
                  }}
                >
                  Choose type of inquiry
@@ -519,15 +527,16 @@ const Contact = () => {
            >
              <label
                style={{
-                  fontSize: "22px",
-                  color: "#fff",
+                  fontSize: "20px",
+                  color: "#DFDFDF",
                  fontFamily: "Poppins",
+                  fontWeight:'400'
                }}
              >
                Message*
              </label>
              <Textarea
-                placeholder="Type your message here..."
+                // placeholder="Type your message here..."
                size="xl"
                resize="vertical"
                minH={"200px"}
@@ -543,6 +552,7 @@ const Contact = () => {
              />
              <Button
                type="submit"
+                border={"none"}
                isLoading={isLoading}
                loadingText="Submitting"
                fontFamily={"poppins"}
@@ -556,7 +566,7 @@ const Contact = () => {
                minHeight={"55px"}
                padding={"0rem 2rem 0rem 2rem"}
                _hover={{
-                  background: "#ef843c",
+                  background: "DE858E",
                  color: "#fff",
                }}
              >
--- a/src/components/HomePage/HomeBanner.jsx
+++ b/src/components/HomePage/HomeBanner.jsx
@@ -51,16 +51,28 @@ const HomeBanner = () => {
        },
      }}
    >
-      <Container maxW="container.lg" textAlign={"center"}>
+      <Container
+        maxW="container.lg"
+        alignItems={"center"}
+        display={"flex"}
+        justifyContent={"center"}
+        flexDirection={"column"}
+        height={"100vh"}
+        alignContent={"center"}
+        textAlign={"center"}
+        paddingTop={"12%"}
+      >
        {BannerContent.map((item, index) => {
          return (
            <Box key={index}>
              <Text
                as={"h2"}
                fontWeight={700}
-                fontSize={"60px"}
+                fontSize={"52px"}
                textTransform={"upperCase"}
                color={"#DE858E"}
+                lineHeight={"62px"}
+                // letterSpacing={"1px"}
                sx={{
                  "@media (max-width: 996px)": {
                    fontSize: "45px",
@@ -78,9 +90,10 @@ const HomeBanner = () => {
                {item.heading1}
                {!isSmallScreen ? (
                  <span
+                    fontSize={"42px"}
                    style={{
                      color: "#fff",
-                      fontWeight: "600",
+                      fontWeight: "500",
                    }}
                  >
                    {item.heading2}
@@ -89,7 +102,7 @@ const HomeBanner = () => {
                  <span
                    style={{
                      color: "#fff",
-                      fontWeight: "600",
+                      fontWeight: "500",
                      fontSize: "24px",
                    }}
                  >
@@ -97,39 +110,26 @@ const HomeBanner = () => {
                  </span>
                )}
              </Text>
-              <Container maxW="container.lg">
-                <Text
-                  color={"#fff"}
-                  fontSize={"25px"}
-                  fontWeight={"400"}
-                  lineHeight={"37.5px"}
-                  fontFamily={"Poppins"}
-                  sx={{
-                    "@media (max-width: 1024px)": {
-                      fontSize: "22px",
-                    },
-                    "@media (max-width: 600px)": {
-                      fontSize: "17px",
-                    },
-                  }}
-                >
-                  {item.subheading}
-                </Text>
-              </Container>
+              <Text
+                color={"#fff"}
+                fontSize={"22px"}
+                fontWeight={"400"}
+                lineHeight={"37.5px"}
+                fontFamily={"Poppins"}
+                sx={{
+                  "@media (max-width: 1024px)": {
+                    fontSize: "22px",
+                  },
+                  "@media (max-width: 600px)": {
+                    fontSize: "17px",
+                  },
+                }}
+              >
+                {item.subheading}
+              </Text>
            </Box>
          );
        })}
-      </Container>
-      <Container
-        maxW="container.md"
-        textAlign={"center"}
-        marginTop={"3rem"}
-        sx={{
-          "@media (max-width: 375px)": {
-            marginTop: "1rem",
-          },
-        }}
-      >
        {BannerContent[2] && (
          <Button
            position={"relative"}
@@ -137,15 +137,16 @@ const HomeBanner = () => {
            cursor={"pointer"}
            transition="0.3s ease-in-out"
            color={"#fff"}
-            width={"227px"}
-            height={"60px"}
+            width={"216px"}
+            height={"56px"}
            fontFamily={"Poppins"}
            fontWeight={"400"}
            border={"1px solid white"}
            borderRadius={"10px"}
-            fontSize={"20px"}
+            fontSize={"18px"}
            zIndex={"1"}
            overflow={"hidden"}
+            marginTop={"2rem"}
            sx={{
              "::before": {
                content: '""',
--- a/src/components/HomePage/Stats.jsx
+++ b/src/components/HomePage/Stats.jsx
@@ -34,7 +34,7 @@ const Stats = () => {
        as={"h2"}
        paddingTop={"2rem"}
        paddingBottom={"2rem"}
-        fontWeight={700}
+        fontWeight={500}
        fontSize={"40px"}
        textAlign={"center"}
        textTransform={"capitalize"}
@@ -90,7 +90,7 @@ const Stats = () => {
              position: "absolute",
              height: "100%",
              right: "-70px",
-              borderRight: "2px solid #EFEFEF",
+              borderRight: "1px solid #EFEFEF",
              zIndex: "2",
            }}
            sx={{
@@ -108,13 +108,14 @@ const Stats = () => {
                end={51400000}
                delay={0}
                style={{
-                  fontSize: `${isSmallScreen ? "23px" : "40px"}`,
-                  fontWeight: "700",
+                  fontSize: `${isSmallScreen ? "23px" : "38px"}`,
+                  fontWeight: "500",
                }}
              />
            )}
            <Text
              textTransform={"uppercase"}
+              color={"#ADADAD"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
@@ -136,7 +137,7 @@ const Stats = () => {
              position: "absolute",
              height: "100%",
              right: "-70px",
-              borderRight: "2px solid #EFEFEF",
+              borderRight: "1px solid #EFEFEF",
              zIndex: "2",
            }}
            sx={{
@@ -154,13 +155,14 @@ const Stats = () => {
                end={10247786}
                delay={0}
                style={{
-                  fontSize: `${isSmallScreen ? "23px" : "40px"}`,
-                  fontWeight: "700",
+                  fontSize: `${isSmallScreen ? "23px" : "38px"}`,
+                  fontWeight: "500",
                }}
              />
            )}
            <Text
              textTransform={"uppercase"}
+              color={"#ADADAD"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
@@ -179,13 +181,14 @@ const Stats = () => {
                end={174015}
                delay={0}
                style={{
-                  fontSize: `${isSmallScreen ? "23px" : "40px"}`,
+                  fontSize: `${isSmallScreen ? "23px" : "38px"}`,
                  fontWeight: "700",
                }}
              />
            )}
            <Text
              textTransform={"uppercase"}
+              color={"#ADADAD"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
@@ -227,7 +230,7 @@ const Stats = () => {
              position: "absolute",
              height: "100%",
              right: "-70px",
-              borderRight: "2px solid #EFEFEF",
+              borderRight: "1px solid #EFEFEF",
              zIndex: "2",
            }}
            sx={{
@@ -245,13 +248,14 @@ const Stats = () => {
                end={51400000}
                delay={0}
                style={{
-                  fontSize: `${isSmallScreen ? "23px" : "40px"}`,
-                  fontWeight: "700",
+                  fontSize: `${isSmallScreen ? "23px" : "38px"}`,
+                  fontWeight: "500",
                }}
              />
            )}
            <Text
              textTransform={"uppercase"}
+              color={"#ADADAD"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
@@ -270,13 +274,14 @@ const Stats = () => {
                end={10247786}
                delay={0}
                style={{
-                  fontSize: `${isSmallScreen ? "23px" : "40px"}`,
-                  fontWeight: "700",
+                  fontSize: `${isSmallScreen ? "23px" : "38px"}`,
+                  fontWeight: "500",
                }}
              />
            )}
            <Text
              textTransform={"uppercase"}
+              color={"#ADADAD"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
--- a/src/components/HomePage/WhitePaper.jsx
+++ b/src/components/HomePage/WhitePaper.jsx
@@ -26,7 +26,7 @@ const WhitePaper = () => {
      <Text
        as={"h2"}
        paddingTop={"2rem"}
-        paddingBottom={"2rem"}
+        paddingBottom={"1rem"}
        fontWeight={700}
        fontSize={"40px"}
        textAlign={"center"}
--- a/src/components/LearnPage/Faq.jsx
+++ b/src/components/LearnPage/Faq.jsx
@@ -1,4 +1,4 @@
-import banner from "../../assets/images/faqBg.webp";
+// import banner from "../../assets/images/faqBg.webp";
 import {
  Accordion,
  AccordionButton,
@@ -49,10 +49,12 @@ const accordion = [
 export const Faq = () => {
  return (
    <Box
-      backgroundImage={`url(${banner})`}
+      // backgroundImage={`url(${banner})`}
+      backgroundColor={"#101015"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      // backgroundAttachment={"fixed"}
+      borderBottom={"1px solid #ffffff59"}
    >
      <Container
        maxW={"container.xl"}
@@ -93,7 +95,7 @@ export const Faq = () => {
                  borderTop={"none"}
                  borderBottom={"none"}
                  marginBottom={"1rem"}
-                  padding={"1.5rem"}
+                  padding={"20px"}
                  borderRadius={"10px"}
                  background={"#161616"}
                >
@@ -107,7 +109,7 @@ export const Faq = () => {
                            textAlign="left"
                            fontFamily={"Mona Sans"}
                            fontWeight={"500"}
-                            fontSize={"30px"}
+                            fontSize={"24px"}
                            color={"#fff"}
                            sx={{
                              "@media (max-width: 1024px)": {},
@@ -131,7 +133,7 @@ export const Faq = () => {
                        fontWeight={"300"}
                        color={"#BDBDBD"}
                        width={"100%"}
-                        fontSize={"21px"}
+                        fontSize={"18px"}
                        paddingLeft={"0px"}
                        sx={{
                          "@media (max-width: 1024px)": {},
--- a/src/components/LearnPage/LearnBanner.jsx
+++ b/src/components/LearnPage/LearnBanner.jsx
@@ -3,7 +3,8 @@ import banner from "../../assets/images/learnBanner.webp";

 const BannerContent = [
  {
-    heading1: `Powerful blockchain tools`,
+    head:'Powerful',
+    heading1: ` blockchain tools`,
    heading2: `for developers`,
  },
  {
@@ -35,6 +36,11 @@ const LearnBanner = () => {
      }}
    >
      <Container
+        alignItems={"center"}
+        display={"flex"}
+        height={"100vh"}
+        alignContent={"center"}
+        paddingTop={"10%"}
        maxW="container.xl"
        textAlign={"left"}
        marginTop={"2rem"}
@@ -52,13 +58,16 @@ const LearnBanner = () => {
              width: "100%",
            },
          }}
-        >
+        >   
+           
          <Text
            as={"h2"}
            fontWeight={700}
-            fontSize={"60px"}
+            fontSize={"52px"}
            textTransform={"Capitalize"}
            color={"#DE858E"}
+            lineHeight={"62px"}
+            letterSpacing={"1px"}
            sx={{
              "@media (max-width: 996px)": {
                fontSize: "35px",
@@ -73,20 +82,24 @@ const LearnBanner = () => {
              },
            }}
          >
+            <span
+              style={{
+                color: "#fff",
+              }}
+            >{BannerContent[0].head}</span>
            {BannerContent[0].heading1} <br />
            <span
              style={{
                color: "#fff",
-                fontWeight: "600",
              }}
            >
              {BannerContent[0].heading2}
            </span>
          </Text>
-          <Box marginTop={"1.5rem"} width={"80%"}>
+          <Box marginTop={"10px"} width={"80%"}>
            <Text
              color={"#fff"}
-              fontSize={"25px"}
+              fontSize={"20px"}
              fontWeight={"400"}
              lineHeight={"37.5px"}
              fontFamily={"Poppins"}
@@ -102,69 +115,55 @@ const LearnBanner = () => {
              {BannerContent[1].subheading}
            </Text>
          </Box>
+          <Button
+            position={"relative"}
+            backgroundColor={"transparent"}
+            cursor={"pointer"}
+            transition="0.3s ease-in-out"
+            color={"#fff"}
+            width={"216px"}
+            marginTop={"2rem"}
+            height={"56px"}
+            fontFamily={"Poppins"}
+            fontWeight={"400"}
+            border={"1px solid white"}
+            borderRadius={"10px"}
+            fontSize={"20px"}
+            zIndex={"1"}
+            overflow={"hidden"}
+            sx={{
+              "::before": {
+                content: '""',
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: "65px",
+                height: "65px",
+                borderRadius: "50%",
+                transition: "0.35s linear",
+                zIndex: -1,
+                bgGradient:
+                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                opacity: "0",
+              },
+              "&:hover::before": {
+                width: "100%",
+                height: "120%",
+                borderRadius: "0px",
+                opacity: "1",
+              },
+            }}
+            _hover={{
+              color: "#000",
+              border: "none",
+              zIndex: 1,
+            }}
+          >
+            {BannerContent[2].btn}
+          </Button>
        </Box>
      </Container>
-      <Container
-        maxW="container.xl"
-        textAlign={"left"}
-        marginTop={"3rem"}
-        paddingLeft={"3.5rem"}
-        sx={{
-          "@media (max-width: 435px)": {
-            paddingLeft: "2rem",
-          },
-          "@media (max-width: 375px)": {
-            marginTop: "1rem",
-          },
-        }}
-      >
-        <Button
-          position={"relative"}
-          backgroundColor={"transparent"}
-          cursor={"pointer"}
-          transition="0.3s ease-in-out"
-          color={"#fff"}
-          width={"227px"}
-          height={"60px"}
-          fontFamily={"Poppins"}
-          fontWeight={"400"}
-          border={"1px solid white"}
-          borderRadius={"10px"}
-          fontSize={"20px"}
-          zIndex={"1"}
-          overflow={"hidden"}
-          sx={{
-            "::before": {
-              content: '""',
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              width: "65px",
-              height: "65px",
-              borderRadius: "50%",
-              transition: "0.35s linear",
-              zIndex: -1,
-              bgGradient:
-                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
-              opacity: "0",
-            },
-            "&:hover::before": {
-              width: "100%",
-              height: "120%",
-              borderRadius: "0px",
-              opacity: "1",
-            },
-          }}
-          _hover={{
-            color: "#000",
-            border: "none",
-            zIndex: 1,
-          }}
-        >
-          {BannerContent[2].btn}
-        </Button>
-      </Container>
    </Box>
  );
 };
--- a/src/components/LearnPage/LearnDev.jsx
+++ b/src/components/LearnPage/LearnDev.jsx
@@ -56,6 +56,7 @@ const LearnDev = () => {
      background={"#000"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
+      padding={"2rem 0 4rem 0"}
    >
      <Container maxW="container.xl">
        <Text
--- a/src/components/LearnPage/WhyRubix.jsx
+++ b/src/components/LearnPage/WhyRubix.jsx
@@ -118,7 +118,7 @@ const WhyRubix = () => {
                          textAlign="left"
                          fontFamily={"Mona Sans"}
                          fontWeight={"500"}
-                          fontSize={"30px"}
+                          fontSize={"28px"}
                          color={"#fff"}
                          sx={{
                            "@media (max-width: 435px)": {
@@ -138,7 +138,7 @@ const WhyRubix = () => {
                      fontWeight={"400"}
                      color={"#E8E8E8"}
                      width={"80%"}
-                      fontSize={"21px"}
+                      fontSize={"20px"}
                      paddingLeft={"0px"}
                      sx={{
                        "@media (max-width: 1024px)": {
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -52,19 +52,24 @@ const NavBar = () => {
    <>
      {!isMobile ? (
        <>
+        <Box
+         position={"fixed"}
+         zIndex={"999"}
+         width={"100%"}
+         >
          <Box
            backgroundColor={"#141315"}
-            position={"fixed"}
+            // position={"fixed"}
            zIndex={"9999"}
            width={"100%"}
            textAlign={"right"}
-            padding={"0.8px 0px"}
+            padding={"4px 0px"}
          >
            <Box marginRight={"6%"}>
-              <Link to="/" style={{ color: "#fff", marginRight: "2.5rem" }}>
+              <Link to="/" style={{ color: "#fff", marginRight: "2.5rem" ,fontSize:'14px'}}>
                WALLET
              </Link>
-              <Link to="/" style={{ color: "#fff", marginRight: "2.5rem" }}>
+              <Link to="/" style={{ color: "#fff", marginRight: "2.5rem",fontSize:'14px' }}>
                EXPLORER
              </Link>
            </Box>
@@ -80,11 +85,11 @@ const NavBar = () => {
              // "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
            }
            // boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
-            position={"fixed"}
+            // position={"fixed"}
            zIndex={"999"}
            width={"100%"}
            top={"0px"}
-            padding={"2.5rem 0 2rem 0"}
+            padding={"28px 0"}
            sx={{
              "@media (max-width: 996px)": {
                justifyContent: "space-between",
@@ -210,6 +215,7 @@ const NavBar = () => {
              </Link>
            </Box>
          </Box>
+          </Box>
        </>
      ) : (
        <MobileMenu />
--- a/src/components/SubnetsComponent/Component1.jsx
+++ b/src/components/SubnetsComponent/Component1.jsx
@@ -22,6 +22,7 @@ export const Component1 = () => {
          borderRadius={"28.5px"}
          color={"#fff"}
          border={"1px solid #A5A5A5"}
+          fontSize={"16px"}
          // _after={{
          //   content: "''",
          //   position: "absolute",
@@ -57,12 +58,12 @@ export const Component1 = () => {
        </Button>
      </Box>
      <UnorderedList color={"#E1E1E1"}>
-        <ListItem>Only L1 powering full mobile nodes</ListItem>
-        <ListItem>
+        <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>
+        <ListItem fontSize={"14px"}>
          High scalability, Partition tolerance and portability
        </ListItem>
      </UnorderedList>
--- a/src/components/SubnetsComponent/Component2.jsx
+++ b/src/components/SubnetsComponent/Component2.jsx
@@ -23,6 +23,7 @@ export const Component2 = () => {
          borderRadius={"28.5px"}
          color={"#fff"}
          border={"1px solid #A5A5A5"}
+          fontSize={"16px"}
          _after={{
            content: "''",
            position: "absolute",
@@ -46,9 +47,9 @@ export const Component2 = () => {
        </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>
+        <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>
    </>
  );
--- a/src/components/SubnetsComponent/Component3.jsx
+++ b/src/components/SubnetsComponent/Component3.jsx
@@ -29,6 +29,7 @@ export const Component3 = () => {
          borderRadius={"28.5px"}
          color={"#fff"}
          border={"1px solid #A5A5A5"}
+          fontSize={"16px"}
          _before={{
            content: "''",
            position: "absolute",
@@ -58,9 +59,9 @@ export const Component3 = () => {
        width={"552px"}
      >
        <UnorderedList color={"#E1E1E1"}>
-          <ListItem>No GAS fees</ListItem>
-          <ListItem>Incremental and modular infrastructure ask</ListItem>
-          <ListItem>
+          <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>
--- a/src/components/SubnetsComponent/Component4.jsx
+++ b/src/components/SubnetsComponent/Component4.jsx
@@ -23,12 +23,14 @@ export const Component4 = () => {
        <Button
          position={"relative"}
          background={"transparent"}
-          width={"165px"}
+          // width={"165px"}
          height={"57px"}
          borderRadius={"28.5px"}
          color={"#fff"}
          border={"1px solid #A5A5A5"}
          textTransform={"uppercase"}
+          fontSize={"16px"}
+          padding={"6px 20px"}
          _after={{
            content: "''",
            position: "absolute",
@@ -58,11 +60,11 @@ export const Component4 = () => {
        width={"565px"}
      >
        <UnorderedList color={"#E1E1E1"}>
-          <ListItem>
+          <ListItem fontSize={"14px"}>
            Permissioned subnets with no oracles and <br /> intermediaries
          </ListItem>
-          <ListItem>INo block space ransom</ListItem>
-          <ListItem>
+          <ListItem fontSize={"14px"}>INo block space ransom</ListItem>
+          <ListItem fontSize={"14px"}>
            Zero risk of transactions being blocked out of <br />
            chain.
          </ListItem>
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -34,7 +34,7 @@ export const NewSubnetComp = () => {
          start: "top top",
          scrub: 1,
          pin: true,
-          end: "bottom bottom",
+          end: "bottom bottom-=1000px",
          markers: true,
        },
      })
@@ -78,7 +78,7 @@ export const NewSubnetComp = () => {
    >
      <Box
        ref={mainBox}
-        height={"300vh"}
+        height={"100vh"}
        position={"relative"}
        display={"flex"}
        justifyContent={"center"}
--- a/src/components/SubnetsComponent/SubnetPage2.jsx
+++ b/src/components/SubnetsComponent/SubnetPage2.jsx
@@ -120,7 +120,7 @@ export const SubnetPage2 = () => {
                    >
                      01. Decentralisation
                    </Text>
-                    <Text fontSize={"18px"}>
+                    <Text fontSize={"16px"}>
                      Rubix Decentralised Identity(DID) issued at L1 is the
                      foundation for building digital ownership enhancing
                      applications
@@ -139,7 +139,7 @@ export const SubnetPage2 = () => {
                    >
                      01. Decentralisation
                    </Text>
-                    <Text fontSize={"18px"}>
+                    <Text fontSize={"16px"}>
                      Rubix Decentralised Identity(DID) issued at L1 is the
                      foundation for building digital ownership enhancing
                      applications
@@ -158,7 +158,7 @@ export const SubnetPage2 = () => {
                    >
                      01. Decentralisation
                    </Text>
-                    <Text fontSize={"18px"}>
+                    <Text fontSize={"16px"}>
                      Rubix Decentralised Identity(DID) issued at L1 is the
                      foundation for building digital ownership enhancing
                      applications
--- a/src/index.css
+++ b/src/index.css
@@ -15,12 +15,12 @@
  font-size: 25px !important;
 }
 .rubix-text-title {
-  font-size: 40px !important;
+  font-size: 38px !important;
  color: #fff;
 }

 .rubix-text-large {
-  font-size: 25px !important;
+  font-size: 22px !important;
  font-family: "Poppins" !important;
  color: #fff !important;
 }