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] 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