From 1ed4b05eb876881efcb2dfc59820cd9dcdd0abff Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 16:12:52 +0530
Subject: [PATCH 1/2] spacing

---
 src/components/HomePage/HomeBanner.jsx        | 44 +++++++++----------
 src/components/HomePage/Stats.jsx             | 23 ++++++----
 src/components/NavBar/NavBar.jsx              | 18 +++++---
 .../SubnetsComponent/Component1.jsx           |  7 +--
 .../SubnetsComponent/Component2.jsx           |  7 +--
 .../SubnetsComponent/Component3.jsx           |  7 +--
 .../SubnetsComponent/Component4.jsx           | 10 +++--
 .../SubnetsComponent/SubnetPage2.jsx          |  6 +--
 8 files changed, 69 insertions(+), 53 deletions(-)

diff --git a/src/components/HomePage/HomeBanner.jsx b/src/components/HomePage/HomeBanner.jsx
index 9306611..16245fc 100644
--- a/src/components/HomePage/HomeBanner.jsx
+++ b/src/components/HomePage/HomeBanner.jsx
@@ -50,16 +50,27 @@ 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"}
                 sx={{
                   "@media (max-width: 996px)": {
                     fontSize: "45px",
@@ -75,19 +86,19 @@ const HomeBanner = () => {
                 }}
               >
                 {item.heading1}
-                <span
+                <Text
+                fontSize={"42px"}
                   style={{
                     color: "#fff",
-                    fontWeight: "600",
+                    fontWeight: "500",
                   }}
                 >
                   {item.heading2}
-                </span>
+                </Text>
               </Text>
-              <Container maxW="container.lg">
                 <Text
                   color={"#fff"}
-                  fontSize={"25px"}
+                  fontSize={"22px"}
                   fontWeight={"400"}
                   lineHeight={"37.5px"}
                   fontFamily={"Poppins"}
@@ -102,21 +113,9 @@ const HomeBanner = () => {
                 >
                   {item.subheading}
                 </Text>
-              </Container>
             </Box>
           );
         })}
-      </Container>
-      <Container
-        maxW="container.md"
-        textAlign={"center"}
-        marginTop={"3rem"}
-        sx={{
-          "@media (max-width: 375px)": {
-            marginTop: "1rem",
-          },
-        }}
-      >
         {BannerContent[2] && (
           <Button
             position={"relative"}
@@ -124,15 +123,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: '""',
diff --git a/src/components/HomePage/Stats.jsx b/src/components/HomePage/Stats.jsx
index 475be5c..27bc502 100644
--- a/src/components/HomePage/Stats.jsx
+++ b/src/components/HomePage/Stats.jsx
@@ -33,7 +33,7 @@ const Stats = () => {
         as={"h2"}
         paddingTop={"2rem"}
         paddingBottom={"2rem"}
-        fontWeight={700}
+        fontWeight={500}
         fontSize={"40px"}
         textAlign={"center"}
         textTransform={"capitalize"}
@@ -88,7 +88,7 @@ const Stats = () => {
               position: "absolute",
               height: "100%",
               right: "-70px",
-              borderRight: "2px solid #EFEFEF",
+              borderRight: "1px solid #EFEFEF",
               zIndex: "2",
             }}
             sx={{
@@ -105,11 +105,12 @@ const Stats = () => {
                 start={0}
                 end={51400000}
                 delay={0}
-                style={{ fontSize: "40px", fontWeight: "700" }}
+                style={{ fontSize: "38px", fontWeight: "500" }}
               />
             )}
             <Text
               textTransform={"uppercase"}
+              color={"#ADADAD"}
               sx={{
                 "@media (max-width: 1024px)": {},
                 "@media (max-width: 435px)": {
@@ -133,7 +134,7 @@ const Stats = () => {
               position: "absolute",
               height: "100%",
               right: "-70px",
-              borderRight: "2px solid #EFEFEF",
+              borderRight: "1px solid #EFEFEF",
               zIndex: "2",
             }}
             sx={{
@@ -150,11 +151,12 @@ const Stats = () => {
                 start={0}
                 end={10247786}
                 delay={0}
-                style={{ fontSize: "40px", fontWeight: "700" }}
+                style={{ fontSize: "38px", fontWeight: "500" }}
               />
             )}
             <Text
               textTransform={"uppercase"}
+              color={"#ADADAD"}
               sx={{
                 "@media (max-width: 1024px)": {},
                 "@media (max-width: 435px)": {
@@ -174,11 +176,12 @@ const Stats = () => {
                 start={0}
                 end={174015}
                 delay={0}
-                style={{ fontSize: "40px", fontWeight: "700" }}
+                style={{ fontSize: "38px", fontWeight: "500" }}
               />
             )}
             <Text
               textTransform={"uppercase"}
+              color={"#ADADAD"}
               sx={{
                 "@media (max-width: 1024px)": {},
                 "@media (max-width: 435px)": {
@@ -220,7 +223,7 @@ const Stats = () => {
               position: "absolute",
               height: "100%",
               right: "-70px",
-              borderRight: "2px solid #EFEFEF",
+              borderRight: "1px solid #EFEFEF",
               zIndex: "2",
             }}
             sx={{
@@ -237,11 +240,12 @@ const Stats = () => {
                 start={0}
                 end={51400000}
                 delay={0}
-                style={{ fontSize: "40px", fontWeight: "700" }}
+                style={{ fontSize: "38px", fontWeight: "500" }}
               />
             )}
             <Text
               textTransform={"uppercase"}
+              color={"#ADADAD"}
               sx={{
                 "@media (max-width: 1024px)": {},
                 "@media (max-width: 435px)": {
@@ -261,11 +265,12 @@ const Stats = () => {
                 start={0}
                 end={10247786}
                 delay={0}
-                style={{ fontSize: "40px", fontWeight: "700" }}
+                style={{ fontSize: "38px", fontWeight: "500" }}
               />
             )}
             <Text
               textTransform={"uppercase"}
+              color={"#ADADAD"}
               sx={{
                 "@media (max-width: 1024px)": {},
                 "@media (max-width: 435px)": {
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index e21c9c8..0f6cda1 100644
--- 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",
@@ -195,6 +200,7 @@ const NavBar = () => {
               </Link>
             </Box>
           </Box>
+          </Box>
         </>
       ) : (
         <MobileMenu />
diff --git a/src/components/SubnetsComponent/Component1.jsx b/src/components/SubnetsComponent/Component1.jsx
index b631b30..08eec9d 100644
--- 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>
diff --git a/src/components/SubnetsComponent/Component2.jsx b/src/components/SubnetsComponent/Component2.jsx
index e9a6115..fc6f795 100644
--- 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>
     </>
   );
diff --git a/src/components/SubnetsComponent/Component3.jsx b/src/components/SubnetsComponent/Component3.jsx
index 5f1358a..b1b82d9 100644
--- 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>
diff --git a/src/components/SubnetsComponent/Component4.jsx b/src/components/SubnetsComponent/Component4.jsx
index 65504cf..94cdcd1 100644
--- 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>
diff --git a/src/components/SubnetsComponent/SubnetPage2.jsx b/src/components/SubnetsComponent/SubnetPage2.jsx
index 085dc7e..cd3e3b7 100644
--- 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

From ee9ed5fc6507deb136c986bd0c9445825c1cd281 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:00:11 +0530
Subject: [PATCH 2/2] spacing

---
 src/components/BuildPage/BuildBanner.jsx      | 120 +++++++--------
 src/components/BuildPage/Connect.jsx          |  16 +-
 src/components/BuildPage/LearnMore.jsx        |   4 +-
 src/components/BuildPage/Solve.jsx            |   4 +-
 src/components/BuildPage/Tools.jsx            |  24 +--
 src/components/BuildPage/WhyBuild.jsx         |   4 +-
 src/components/Card/CommCard.jsx              |   8 +-
 src/components/Card/HappenCard.jsx            |   2 +-
 src/components/Card/InsightsCard.jsx          |   2 +-
 src/components/Card/LearnCard.jsx             |  16 +-
 src/components/Community/CommunityBanner.jsx  | 138 +++++++++---------
 src/components/Community/CommunityCard.jsx    |  12 +-
 src/components/Community/Connect.jsx          |   7 +-
 src/components/Community/Happen.jsx           |   6 +-
 src/components/Community/Insights.jsx         |   4 +-
 src/components/Community/LearnMore.jsx        |   6 +-
 src/components/Community/Place.jsx            |   8 +-
 src/components/Contact/Form.jsx               |  54 ++++---
 src/components/HomePage/HomeBanner.jsx        |   1 +
 src/components/HomePage/WhitePaper.jsx        |   2 +-
 src/components/LearnPage/Faq.jsx              |  10 +-
 src/components/LearnPage/LearnBanner.jsx      | 133 +++++++++--------
 src/components/LearnPage/LearnDev.jsx         |   1 +
 src/components/LearnPage/WhyRubix.jsx         |   4 +-
 .../SubnetsComponent/NewSubnetComp.jsx        |   4 +-
 src/index.css                                 |   4 +-
 26 files changed, 305 insertions(+), 289 deletions(-)

diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx
index fb8a08e..272cc63 100644
--- 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>
   );
 };
diff --git a/src/components/BuildPage/Connect.jsx b/src/components/BuildPage/Connect.jsx
index 9b35ec0..50d53cd 100644
--- a/src/components/BuildPage/Connect.jsx
+++ b/src/components/BuildPage/Connect.jsx
@@ -147,12 +147,16 @@ const Connect = () => {
                         {item.social2}
                       </Text>
                     </Link>
-                    <Link display={"grid"} placeContent={"center"}>
-                      <Image src={item.logo3} margin={"0 auto 20px auto"} />
-                      <Text className="rubix-text-small" fontWeight={"400"}>
-                        {item.social3}
-                      </Text>
-                    </Link>
+                    {item.social3 ? (
+                        <Link display={"grid"} placeContent={"center"}>
+                          <Image src={item.logo3} margin={"0 auto 20px auto"} />
+                          <Text className="rubix-text-small" fontWeight={"400"}>
+                            {item.social3}
+                          </Text>
+                        </Link>
+                      ) : (
+                        ""
+                      )}
                     {/* <>{console.log(item.logo1)}</> */}
                   </CardBody>
                 </Card>
diff --git a/src/components/BuildPage/LearnMore.jsx b/src/components/BuildPage/LearnMore.jsx
index e20cc8c..a51215b 100644
--- 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"}
diff --git a/src/components/BuildPage/Solve.jsx b/src/components/BuildPage/Solve.jsx
index 7240002..9f2ad33 100644
--- 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",
diff --git a/src/components/BuildPage/Tools.jsx b/src/components/BuildPage/Tools.jsx
index 11b0f90..6fa7cf9 100644
--- 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"}
diff --git a/src/components/BuildPage/WhyBuild.jsx b/src/components/BuildPage/WhyBuild.jsx
index 6d3c5c1..929effd 100644
--- 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)": {
diff --git a/src/components/Card/CommCard.jsx b/src/components/Card/CommCard.jsx
index 40a7c4c..33f5c26 100644
--- 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
diff --git a/src/components/Card/HappenCard.jsx b/src/components/Card/HappenCard.jsx
index 32fffec..d7ff43d 100644
--- 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}
diff --git a/src/components/Card/InsightsCard.jsx b/src/components/Card/InsightsCard.jsx
index a32c954..6dc96a0 100644
--- 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"}
diff --git a/src/components/Card/LearnCard.jsx b/src/components/Card/LearnCard.jsx
index 6b043f7..1e546c8 100644
--- 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>
diff --git a/src/components/Community/CommunityBanner.jsx b/src/components/Community/CommunityBanner.jsx
index d8cf892..f34f9da 100644
--- 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>
   );
diff --git a/src/components/Community/CommunityCard.jsx b/src/components/Community/CommunityCard.jsx
index cdb2510..077f669 100644
--- 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
diff --git a/src/components/Community/Connect.jsx b/src/components/Community/Connect.jsx
index 4d39841..d1fba9f 100644
--- 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"}>
diff --git a/src/components/Community/Happen.jsx b/src/components/Community/Happen.jsx
index ab9b686..58b1e1d 100644
--- 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"}
diff --git a/src/components/Community/Insights.jsx b/src/components/Community/Insights.jsx
index 528da5b..9687954 100644
--- 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"}
diff --git a/src/components/Community/LearnMore.jsx b/src/components/Community/LearnMore.jsx
index c4fefc9..7e77a94 100644
--- 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"}
diff --git a/src/components/Community/Place.jsx b/src/components/Community/Place.jsx
index 4bcc5f2..26ca2c7 100644
--- 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={{
diff --git a/src/components/Contact/Form.jsx b/src/components/Contact/Form.jsx
index 15dc9f8..22734e4 100644
--- 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",
                 }}
               >
diff --git a/src/components/HomePage/HomeBanner.jsx b/src/components/HomePage/HomeBanner.jsx
index 16245fc..24c4eb7 100644
--- a/src/components/HomePage/HomeBanner.jsx
+++ b/src/components/HomePage/HomeBanner.jsx
@@ -71,6 +71,7 @@ const HomeBanner = () => {
                 textTransform={"upperCase"}
                 color={"#DE858E"}
                 lineHeight={"62px"}
+                // letterSpacing={"1px"}
                 sx={{
                   "@media (max-width: 996px)": {
                     fontSize: "45px",
diff --git a/src/components/HomePage/WhitePaper.jsx b/src/components/HomePage/WhitePaper.jsx
index 4ca12e4..decc550 100644
--- 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"}
diff --git a/src/components/LearnPage/Faq.jsx b/src/components/LearnPage/Faq.jsx
index 2259fb1..4239f54 100644
--- a/src/components/LearnPage/Faq.jsx
+++ b/src/components/LearnPage/Faq.jsx
@@ -49,9 +49,11 @@ const accordion = [
 export const Faq = () => {
   return (
     <Box
-      backgroundImage={`url(${banner})`}
+      // backgroundImage={`url(${banner})`}
+      backgroundColor={"#101015"}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
+      borderBottom={"1px solid #ffffff59"}
     >
       <Container
         maxW={"container.xl"}
@@ -92,7 +94,7 @@ export const Faq = () => {
                   borderTop={"none"}
                   borderBottom={"none"}
                   marginBottom={"1rem"}
-                  padding={"1.5rem"}
+                  padding={"20px"}
                   borderRadius={"10px"}
                   background={"#161616"}
                 >
@@ -106,7 +108,7 @@ export const Faq = () => {
                             textAlign="left"
                             fontFamily={"Mona Sans"}
                             fontWeight={"500"}
-                            fontSize={"30px"}
+                            fontSize={"24px"}
                             color={"#fff"}
                             sx={{
                               "@media (max-width: 1024px)": {},
@@ -130,7 +132,7 @@ export const Faq = () => {
                         fontWeight={"300"}
                         color={"#BDBDBD"}
                         width={"100%"}
-                        fontSize={"21px"}
+                        fontSize={"18px"}
                         paddingLeft={"0px"}
                         sx={{
                           "@media (max-width: 1024px)": {},
diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx
index 59bd44c..f6f50ee 100644
--- 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>
   );
 };
diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx
index 4e3df51..57f9eba 100644
--- 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
diff --git a/src/components/LearnPage/WhyRubix.jsx b/src/components/LearnPage/WhyRubix.jsx
index ba6494a..efacc76 100644
--- 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)": {
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index acbe7fa..d342a94 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -33,7 +33,7 @@ export const NewSubnetComp = () => {
           start: "top top",
           scrub: 1,
           pin: true,
-          end: "bottom bottom",
+          end: "bottom bottom-=1000px",
           markers: true,
         },
       })
@@ -77,7 +77,7 @@ export const NewSubnetComp = () => {
     >
       <Box
         ref={mainBox}
-        height={"300vh"}
+        height={"100vh"}
         position={"relative"}
         display={"flex"}
         justifyContent={"center"}
diff --git a/src/index.css b/src/index.css
index bae8f62..786ca53 100644
--- 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;
 }