From a463fbfe8f4d9c4ec6a8976900a79922743c86f5 Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Thu, 4 Apr 2024 20:45:49 +0530
Subject: [PATCH] updated banner/ form/stats/NewSubnet/Getstarted

---
 src/components/BuildPage/BuildBanner.jsx      |   2 +-
 src/components/BuildPage/Connect.jsx          |   1 +
 src/components/Contact/Form.jsx               |   5 +-
 src/components/HomePage/Stats.jsx             |   4 +-
 src/components/LearnPage/GetStarted.jsx       |   8 +-
 .../SubnetsComponent/NewSubnetComp.jsx        | 266 ++++++++++--------
 6 files changed, 153 insertions(+), 133 deletions(-)

diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx
index 313af4d..fb8a08e 100644
--- a/src/components/BuildPage/BuildBanner.jsx
+++ b/src/components/BuildPage/BuildBanner.jsx
@@ -56,7 +56,7 @@ const BuildBanner = () => {
             as={"h2"}
             fontWeight={700}
             fontSize={"60px"}
-            textTransform={"upperCase"}
+            textTransform={"capitalize"}
             color={"#DE858E"}
             sx={{
               "@media (max-width: 996px)": {
diff --git a/src/components/BuildPage/Connect.jsx b/src/components/BuildPage/Connect.jsx
index 8e19045..9b35ec0 100644
--- a/src/components/BuildPage/Connect.jsx
+++ b/src/components/BuildPage/Connect.jsx
@@ -108,6 +108,7 @@ const Connect = () => {
                   background={"#000"}
                   borderRadius={"10px"}
                   minH={"270px"}
+                  height={"100%"}
                   border={"1px solid #454545"}
                 >
                   <CardHeader
diff --git a/src/components/Contact/Form.jsx b/src/components/Contact/Form.jsx
index 4ff7520..15dc9f8 100644
--- a/src/components/Contact/Form.jsx
+++ b/src/components/Contact/Form.jsx
@@ -217,8 +217,7 @@ const Contact = () => {
               Call us
             </Badge>
             <Box marginTop={"10px"}>
-              <Link
-                to={`mailto:${email}`}
+              <Text
                 style={{
                   fontSize: "18px",
                   color: "#969696",
@@ -227,7 +226,7 @@ const Contact = () => {
                 }}
               >
                 914 578 1245
-              </Link>
+              </Text>
             </Box>
           </Box>
         </Box>
diff --git a/src/components/HomePage/Stats.jsx b/src/components/HomePage/Stats.jsx
index 0ba4460..475be5c 100644
--- a/src/components/HomePage/Stats.jsx
+++ b/src/components/HomePage/Stats.jsx
@@ -9,11 +9,12 @@ const StatsContent = {
 
 const Stats = () => {
   const { ref, inView } = useInView({
-    threshold: 0.3,
+    threshold: 0.5,
     triggerOnce: false,
   });
   return (
     <Box
+      ref={ref}
       height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
@@ -80,7 +81,6 @@ const Stats = () => {
         >
           <Box
             color={"#fff"}
-            ref={ref}
             textAlign={"center"}
             position={"relative"}
             _before={{
diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx
index 3dcd289..750a7fb 100644
--- a/src/components/LearnPage/GetStarted.jsx
+++ b/src/components/LearnPage/GetStarted.jsx
@@ -87,7 +87,7 @@ const GetStarted = () => {
                 "@media (max-width: 375px)": {},
               }}
             >
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted}
@@ -99,7 +99,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted2}
@@ -111,7 +111,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted}
@@ -123,7 +123,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted3}
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 7ee7265..4c30f4d 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -18,11 +18,11 @@ const SubnetContent = {
   heading: `decentralised Auto Syncing subnets`,
 };
 
-export const NewSubnetComp = ({ showSubnet }) => {
+export const NewSubnetComp = () => {
   const firstBoxRef = useRef(null);
   const secondBoxRef = useRef(null);
   const thirdBoxRef = useRef(null);
-  const mainBox = useRef(null);
+  const textBox = useRef(null);
 
   useEffect(() => {
     const animateBox = (boxRef) => {
@@ -40,13 +40,36 @@ export const NewSubnetComp = ({ showSubnet }) => {
         {
           position: "sticky",
           top: "-116px",
+          opacity: 0,
+          autoAlpha: 1,
         },
         {
-          transform: "translateX(0)",
+          // transform: "translateX(0)",
+          // duration: 0.5,
+          opacity: 1,
+          duration: 1,
+          autoAlpha: 0,
+        }
+      );
+      const tl2 = gsap.timeline({
+        scrollTrigger: {
+          trigger: textBox.current,
+          start: "top center+=50",
+          end: "bottom bottom+=100",
+          scrub: 1,
+          markers: false,
+        },
+      });
+      tl2.fromTo(
+        textBox.current,
+        {
+          opacity: 0,
+        },
+        {
+          opacity: 1,
           duration: 0.5,
         }
       );
-
       return () => {
         // Clean up
         tl.kill();
@@ -55,33 +78,10 @@ export const NewSubnetComp = ({ showSubnet }) => {
     animateBox(firstBoxRef);
     animateBox(secondBoxRef);
     animateBox(thirdBoxRef);
-
-    // const tl2 = gsap.timeline({
-    //   scrollTrigger: {
-    //     trigger: mainBox.current,
-    //     start: "top top",
-    //     end: "bottom bottom",
-    //     scrub: 1,
-    //     markers: false,
-    //   },
-    // });
-    // tl2.fromTo(
-    //   mainBox.current,
-    //   {
-    //     position: "sticky",
-    //     top: 60,
-    //     left: 0,
-    //     duration: 0.5,
-    //   },
-    //   {
-    //     position: "relative",
-    //     duration: 0.5,
-    //   }
-    // );
   }, []);
 
   return (
-    <Box ref={mainBox} backgroundColor={"#000"}>
+    <Box backgroundColor={"#000"}>
       <Box
         // height={"100vh"}
         backgroundColor={"#000"}
@@ -100,6 +100,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
             fontSize={"40px"}
             textTransform={"capitalize"}
             color={"#fff"}
+            ref={textBox}
             sx={{
               "@media (max-width: 1024px)": {},
               "@media (max-width: 600px)": {
@@ -118,6 +119,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
             position={"relative"}
             padding={"0 4rem"}
             paddingBottom={"50px"}
+            ref={textBox}
           >
             <Image
               src={cube}
@@ -148,6 +150,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component1 />
             </Box>
@@ -158,6 +161,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component2 />
             </Box>
@@ -168,6 +172,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component3 />
             </Box>
@@ -177,6 +182,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component4 />
             </Box>
@@ -190,104 +196,118 @@ export const NewSubnetComp = ({ showSubnet }) => {
         paddingBottom={"2rem"}
         ref={secondBoxRef}
       >
-        <Fade in={true}>
-          <Text
-            as={"h2"}
-            paddingTop={"2rem"}
-            fontWeight={700}
-            fontSize={"40px"}
-            textTransform={"capitalize"}
-            color={"#fff"}
-            marginBottom={"5rem"}
-            textAlign={"center"}
-            sx={{
-              "@media (max-width: 1024px)": {},
-              "@media (max-width: 600px)": {
-                fontSize: "28px",
-              },
-            }}
-          >
-            With Unmatched Privacy and Scalability
-          </Text>
-          <Container maxW="container.xl" textAlign={"center"}>
-            <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
-              <Box>
-                <Image
-                  src={cube}
-                  width={"480px"}
-                  //   position={"absolute"}
-                  left={"0"}
-                  right={"0"}
-                  marginLeft={"auto"}
-                  marginRight={"auto"}
-                  cursor={"pointer"}
-                  transform="translateY(-10%)"
-                  animation="floatAnimation 2s infinite alternate"
-                  // onClick={click}
-                  sx={{
-                    "@keyframes floatAnimation": {
-                      "0%": {
-                        transform: "translateY(0)",
-                      },
-                      "100%": {
-                        transform: "translateY(-20px)",
-                      },
+        <Text
+          ref={textBox}
+          as={"h2"}
+          paddingTop={"2rem"}
+          fontWeight={700}
+          fontSize={"40px"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+          marginBottom={"5rem"}
+          textAlign={"center"}
+          sx={{
+            "@media (max-width: 1024px)": {},
+            "@media (max-width: 600px)": {
+              fontSize: "28px",
+            },
+          }}
+        >
+          With Unmatched Privacy and Scalability
+        </Text>
+        <Container maxW="container.xl" textAlign={"center"}>
+          <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
+            <Box ref={textBox}>
+              <Image
+                src={cube}
+                width={"480px"}
+                //   position={"absolute"}
+                left={"0"}
+                right={"0"}
+                marginLeft={"auto"}
+                marginRight={"auto"}
+                cursor={"pointer"}
+                transform="translateY(-10%)"
+                animation="floatAnimation 2s infinite alternate"
+                // onClick={click}
+                sx={{
+                  "@keyframes floatAnimation": {
+                    "0%": {
+                      transform: "translateY(0)",
                     },
-                  }}
-                />
+                    "100%": {
+                      transform: "translateY(-20px)",
+                    },
+                  },
+                }}
+              />
+            </Box>
+            <Box width={"50%"}>
+              <Box
+                color={"#E1E1E1"}
+                textAlign={"left"}
+                marginBottom={"2rem"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  01. Decentralisation
+                </Text>
+                <Text fontSize={"18px"}>
+                  Rubix Decentralised Identity( DID) issued at L1 is the
+                  foundation for building digital ownership enhancing
+                  applications.
+                </Text>
               </Box>
-              <Box width={"50%"}>
-                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    01. Decentralisation
-                  </Text>
-                  <Text fontSize={"18px"}>
-                    Rubix Decentralised Identity( DID) issued at L1 is the
-                    foundation for building digital ownership enhancing
-                    applications.
-                  </Text>
-                </Box>
-                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    02. Ultra Scalability
-                  </Text>
-                  <Text fontSize={"18px"}>
-                    Unlike monolithic chains which become centralized and
-                    introduce latency to achieve high throughput, in the Rubix
-                    object chain architecture, where mobile nodes have real time
-                    full state data, the network TPS will increase with increase
-                    in numbers of nodes.
-                  </Text>
-                </Box>
-                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    03. Data Security and Privacy
-                  </Text>
-                  <Text fontSize={"18px"}>
-                    Rubix Decentralised Identity(DID) issued at L1 is the
-                    foundation for building digital ownership enhancing
-                    applications
-                  </Text>
-                </Box>
+              <Box
+                color={"#E1E1E1"}
+                textAlign={"left"}
+                marginBottom={"2rem"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  02. Ultra Scalability
+                </Text>
+                <Text fontSize={"18px"}>
+                  Unlike monolithic chains which become centralized and
+                  introduce latency to achieve high throughput, in the Rubix
+                  object chain architecture, where mobile nodes have real time
+                  full state data, the network TPS will increase with increase
+                  in numbers of nodes.
+                </Text>
+              </Box>
+              <Box
+                color={"#E1E1E1"}
+                textAlign={"left"}
+                marginBottom={"2rem"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  03. Data Security and Privacy
+                </Text>
+                <Text fontSize={"18px"}>
+                  Rubix Decentralised Identity(DID) issued at L1 is the
+                  foundation for building digital ownership enhancing
+                  applications
+                </Text>
               </Box>
             </Box>
-          </Container>
-        </Fade>
+          </Box>
+        </Container>
       </Box>
       <Box
         backgroundColor={"#000"}
@@ -332,7 +352,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
                     Single Comprehensive Stack:
                   </Text>
                   <Text fontSize={"16px"}>
-                    Full Mobile node SDK, Smart Contracts, DID's, Secondary
+                    Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
                     tokens ( FTs and NFTs) all in one place.
                   </Text>
                 </Box>