From 034778b1e8797710e38f1ace40381236e4d27d1f Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Mon, 15 Apr 2024 20:44:59 +0530
Subject: [PATCH] Added transition to mobile nav

---
 src/components/MobileMenu/MobileMenu.jsx      | 566 +++++++++---------
 .../SubnetsComponent/NewSubnetComp.jsx        | 450 ++++++++++++++
 2 files changed, 730 insertions(+), 286 deletions(-)

diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx
index 5160401..4f4d7c7 100644
--- a/src/components/MobileMenu/MobileMenu.jsx
+++ b/src/components/MobileMenu/MobileMenu.jsx
@@ -12,7 +12,6 @@ import {
   AccordionIcon,
   IconButton,
   Text,
-  motion,
 } from "@chakra-ui/react";
 import { Box, Image } from "@chakra-ui/react";
 import { Link, useLocation } from "react-router-dom";
@@ -101,295 +100,290 @@ export const MobileMenu = () => {
         <HamburgerIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
       </Box>
 
-      {menu && (
+      <Box
+        position={"fixed"}
+        top={"0px"}
+        transform={menu ? "translateX(0)" : "translateX(100%)"}
+        transition={"all 0.6s ease-in-out"}
+        zIndex={999}
+        backgroundColor={"#101015"}
+        height={"100vh"}
+        width={"100%"}
+        overflow={"auto"}
+        opacity={menu ? 1 : 0}
+      >
         <Box
-          position={"fixed"}
-          top={"0px"}
-          zIndex={999}
-          backgroundColor={"#101015"}
-          height={"100vh"}
-          width={"100%"}
-          overflow={"auto"}
+          // backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          padding={"1rem 1rem"}
+          marginBottom={"4rem"}
+          gap={"2rem"}
+          sx={{
+            "@media (max-width: 1024px)": {},
+            "@media (max-width: 375px)": {
+              padding: "1rem",
+              alignItems: "baseline",
+            },
+          }}
         >
-          <Box
-            // backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
-            display={"flex"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            padding={"1rem 1rem"}
-            marginBottom={"4rem"}
-            gap={"2rem"}
-            sx={{
-              "@media (max-width: 1024px)": {},
-              "@media (max-width: 375px)": {
-                padding: "1rem",
-                alignItems: "baseline",
-              },
-            }}
-          >
-            <Box display={"flex"} alignItems={"center"}>
-              <Link to="/">
-                <Box
-                  display={"flex"}
-                  alignItems={"baseline"}
-                  justifyContent={"center"}
-                >
-                  <Image src={logo} width={"160px"} />
-                </Box>
-              </Link>
-            </Box>
-            <CloseIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
+          <Box display={"flex"} alignItems={"center"}>
+            <Link to="/">
+              <Box
+                display={"flex"}
+                alignItems={"baseline"}
+                justifyContent={"center"}
+              >
+                <Image src={logo} width={"160px"} />
+              </Box>
+            </Link>
           </Box>
-
-          <Accordion allowToggle>
-            {/* Learn */}
-            <AccordionItem borderTop={"none"} padding={"2rem 1rem"}>
-              <AccordionButton>
-                <Box as="span" flex="1" textAlign="left">
-                  <Text
-                    color={"#B0B0B0"}
-                    fontFamily={"Mona Sans"}
-                    fontWeight={"500"}
-                    fontSize={"20px"}
-                  >
-                    LEARN
-                  </Text>
-                </Box>
-                <AccordionIcon color={"#fff"} fontSize={"28px"} />
-              </AccordionButton>
-              <AccordionPanel pb={4}>
-                <Link to="/LearnPage" style={links} onClick={handleClick}>
-                  Learn
-                  <span
-                    style={
-                      location.pathname === "/LearnPage" ? active : linkStyle
-                    }
-                  />
-                </Link>
-                <Link
-                  to="https://learn.rubix.net/pop/"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  Proof-of-pledge Protocol
-                </Link>
-                <Link
-                  to="https://learn.rubix.net/smartcontract/"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                >
-                  Smart Contracts
-                </Link>
-                <Link
-                  to="https://learn.rubix.net/tokenomics/"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  Tokenomics in Rubix
-                </Link>
-              </AccordionPanel>
-            </AccordionItem>
-
-            {/* Build */}
-            <AccordionItem padding={"2rem 1rem"}>
-              <AccordionButton>
-                <Box as="span" flex="1" textAlign="left">
-                  <Text
-                    color={"#B0B0B0"}
-                    fontFamily={"Mona Sans"}
-                    fontWeight={"500"}
-                    fontSize={"20px"}
-                  >
-                    BUILD
-                  </Text>
-                </Box>
-                <AccordionIcon color={"#fff"} fontSize={"28px"} />
-              </AccordionButton>
-              <AccordionPanel pb={4}>
-                <Link to="/BuildPage" style={links} onClick={handleClick}>
-                  Build
-                  <span
-                    style={
-                      location.pathname === "/BuildPage" ? active : linkStyle
-                    }
-                  />
-                </Link>
-                <Link
-                  to="https://learn.rubix.net/node-setup/"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  Set up Rubix Node
-                </Link>
-                <Link
-                  to="https://learn.rubix.net/quorum/"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                >
-                  Quorum
-                </Link>
-                <Link
-                  to="https://learn.rubix.net/subnets/"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  Subnets
-                </Link>
-              </AccordionPanel>
-            </AccordionItem>
-
-            {/* UseCases */}
-            <AccordionItem padding={"2rem 1rem"}>
-              <AccordionButton>
-                <Box as="span" flex="1" textAlign="left">
-                  <Text
-                    color={"#B0B0B0"}
-                    fontFamily={"Mona Sans"}
-                    fontWeight={"500"}
-                    fontSize={"20px"}
-                  >
-                    USE CASES
-                  </Text>
-                </Box>
-                <AccordionIcon color={"#fff"} fontSize={"28px"} />
-              </AccordionButton>
-              <AccordionPanel pb={4}>
-                <Link to="/fin-tech" style={links} onClick={handleClick}>
-                  FinTech
-                  <span
-                    style={
-                      location.pathname === "/fin-tech" ? active : linkStyle
-                    }
-                  />
-                </Link>
-                <Link
-                  to="/ad-tech"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  AdTech
-                  <span
-                    style={
-                      location.pathname === "/ad-tech" ? active : linkStyle
-                    }
-                  />
-                </Link>
-                <Link
-                  to="/mar-tech"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  MarTech
-                  <span
-                    style={
-                      location.pathname === "/mar-tech" ? active : linkStyle
-                    }
-                  />
-                </Link>
-                <Link
-                  to="/health-tech"
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  HealthTech
-                  <span
-                    style={
-                      location.pathname === "/health-tech" ? active : linkStyle
-                    }
-                  />
-                </Link>
-              </AccordionPanel>
-            </AccordionItem>
-
-            {/* Community */}
-            <AccordionItem padding={"2rem 1rem"}>
-              <AccordionButton>
-                <Box as="span" flex="1" textAlign="left">
-                  <Text
-                    color={"#B0B0B0"}
-                    fontFamily={"Mona Sans"}
-                    fontWeight={"500"}
-                    fontSize={"20px"}
-                  >
-                    COMMUNITY
-                  </Text>
-                </Box>
-                <AccordionIcon color={"#fff"} fontSize={"28px"} />
-              </AccordionButton>
-              <AccordionPanel pb={4}>
-                <Link to="/community" style={links} onClick={handleClick}>
-                  Community
-                  <span
-                    style={
-                      location.pathname === "/community" ? active : linkStyle
-                    }
-                  />
-                </Link>
-              </AccordionPanel>
-            </AccordionItem>
-
-            {/* Wallet*/}
-            <AccordionItem padding={"2rem 1rem"}>
-              <AccordionButton>
-                <Box as="span" flex="1" textAlign="left">
-                  <Text
-                    color={"#B0B0B0"}
-                    fontFamily={"Mona Sans"}
-                    fontWeight={"500"}
-                    fontSize={"20px"}
-                  >
-                    AFFILIATES
-                  </Text>
-                </Box>
-                <AccordionIcon color={"#fff"} fontSize={"28px"} />
-              </AccordionButton>
-              <AccordionPanel pb={4}>
-                <Link
-                  to="https://rubixexplorer.com/"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  Wallet
-                </Link>
-                <Link
-                  to="https://getfexr.com/"
-                  style={links}
-                  onClick={handleClick}
-                >
-                  Explore
-                </Link>
-              </AccordionPanel>
-            </AccordionItem>
-          </Accordion>
-
-          <Link to="/Contact" onClick={handleClick}>
-            <Button
-              margin={"2rem 2rem"}
-              padding={"1.5rem 2rem"}
-              borderRadius="0px"
-              backgroundImage="radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)"
-            >
-              CONTACT US
-            </Button>
-          </Link>
+          <CloseIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
         </Box>
-      )}
+
+        <Accordion allowToggle>
+          {/* Learn */}
+          <AccordionItem borderTop={"none"} padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  LEARN
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link to="/LearnPage" style={links} onClick={handleClick}>
+                Learn
+                <span
+                  style={
+                    location.pathname === "/LearnPage" ? active : linkStyle
+                  }
+                />
+              </Link>
+              <Link
+                to="https://learn.rubix.net/pop/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                Proof-of-pledge Protocol
+              </Link>
+              <Link
+                to="https://learn.rubix.net/smartcontract/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+              >
+                Smart Contracts
+              </Link>
+              <Link
+                to="https://learn.rubix.net/tokenomics/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                Tokenomics in Rubix
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+
+          {/* Build */}
+          <AccordionItem padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  BUILD
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link to="/BuildPage" style={links} onClick={handleClick}>
+                Build
+                <span
+                  style={
+                    location.pathname === "/BuildPage" ? active : linkStyle
+                  }
+                />
+              </Link>
+              <Link
+                to="https://learn.rubix.net/node-setup/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                Set up Rubix Node
+              </Link>
+              <Link
+                to="https://learn.rubix.net/quorum/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+              >
+                Quorum
+              </Link>
+              <Link
+                to="https://learn.rubix.net/subnets/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                Subnets
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+
+          {/* UseCases */}
+          <AccordionItem padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  USE CASES
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link to="/fin-tech" style={links} onClick={handleClick}>
+                FinTech
+                <span
+                  style={location.pathname === "/fin-tech" ? active : linkStyle}
+                />
+              </Link>
+              <Link
+                to="/ad-tech"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                AdTech
+                <span
+                  style={location.pathname === "/ad-tech" ? active : linkStyle}
+                />
+              </Link>
+              <Link
+                to="/mar-tech"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                MarTech
+                <span
+                  style={location.pathname === "/mar-tech" ? active : linkStyle}
+                />
+              </Link>
+              <Link
+                to="/health-tech"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                HealthTech
+                <span
+                  style={
+                    location.pathname === "/health-tech" ? active : linkStyle
+                  }
+                />
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+
+          {/* Community */}
+          <AccordionItem padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  COMMUNITY
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link to="/community" style={links} onClick={handleClick}>
+                Community
+                <span
+                  style={
+                    location.pathname === "/community" ? active : linkStyle
+                  }
+                />
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+
+          {/* Wallet*/}
+          <AccordionItem padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  AFFILIATES
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link
+                to="https://rubixexplorer.com/"
+                style={links}
+                onClick={handleClick}
+              >
+                Wallet
+              </Link>
+              <Link
+                to="https://getfexr.com/"
+                style={links}
+                onClick={handleClick}
+              >
+                Explore
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+
+        <Link to="/Contact" onClick={handleClick}>
+          <Button
+            margin={"2rem 2rem"}
+            padding={"1.5rem 2rem"}
+            borderRadius="0px"
+            backgroundImage="radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)"
+          >
+            CONTACT US
+          </Button>
+        </Link>
+      </Box>
     </>
   );
 };
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 8a98483..e502bea 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -470,3 +470,453 @@ export const NewSubnetComp = () => {
     </div>
   );
 };
+
+// import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
+// import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
+// import { useEffect, useRef, useState } from "react";
+// import { Component1 } from "./Component1";
+// import { Component2 } from "./Component2";
+// import { Component3 } from "./Component3";
+// import { Component4 } from "./Component4";
+// // import { SubnetPage2 } from "./SubnetPage2";
+// import cube from "../../assets/images/cube.png";
+// import stack from "../../assets/images/stackNew.webp";
+// import { gsap } from "gsap";
+// import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+// // Initialize ScrollTrigger
+// gsap.registerPlugin(ScrollTrigger);
+
+// // const SubnetContent = {
+// //   heading: `decentralised Auto Syncing subnets`,
+// // };
+
+// export const NewSubnetComp = () => {
+//   const firstBoxRef = useRef(null);
+//   const secondBoxRef = useRef(null);
+//   const thirdBoxRef = useRef(null);
+//   const mainBox = useRef(null);
+
+//   useEffect(() => {
+//     gsap.set(firstBoxRef.current, { opacity: 1 });
+//     let tl = gsap
+//       .timeline({
+//         scrollTrigger: {
+//           trigger: mainBox.current,
+//           start: "top top",
+//           scrub: 1,
+//           pin: true,
+//           end: "bottom bottom",
+//           markers: false,
+//         },
+//       })
+//       .fromTo(firstBoxRef.current, { alpha: 1 }, { alpha: 0 })
+//       .fromTo(secondBoxRef.current, { alpha: 0 }, { alpha: 1 })
+//       .fromTo(secondBoxRef.current, { alpha: 1 }, { alpha: 0 })
+//       .fromTo(thirdBoxRef.current, { alpha: 0 }, { alpha: 1 });
+
+//     return () => {
+//       tl.kill();
+//     };
+//   }, []);
+
+//   return (
+//     <div
+//       style={{
+//         backgroundColor: "#000",
+//         overflow: "hidden",
+//       }}
+//     >
+//       <Box
+//         ref={mainBox}
+//         height={"300vh"}
+//         position={"relative"}
+//         display={"flex"}
+//         justifyContent={"center"}
+//         alignItems={"center"}
+//       >
+//         <Box
+//           ref={firstBoxRef}
+//           position={"absolute"}
+//           top={"0"}
+//           left={"0"}
+//           height={"100vh"}
+//           width={"100%"}
+//           backgroundColor={"#000"}
+//           display={"grid"}
+//           alignContent={"center"}
+//         >
+//           <Container
+//             maxW="container.xl"
+//             textAlign={"center"}
+//             height={"100vh"}
+//             display={"grid"}
+//             // p={10}
+//             paddingTop={"10rem"}
+//             alignContent={"center"}
+//           >
+//             <Text
+//               as={"h2"}
+//               fontWeight={700}
+//               fontSize={"40px"}
+//               textTransform={"capitalize"}
+//               color={"#fff"}
+//               sx={{
+//                 "@media (max-width: 1024px)": {},
+//                 "@media (max-width: 600px)": {
+//                   fontSize: "28px",
+//                 },
+//               }}
+//             >
+//               decentralised Auto Syncing subnets
+//             </Text>
+//             <Box
+//               display={"grid"}
+//               gridTemplateColumns={"repeat(2, 1fr)"}
+//               gridTemplateRows={"repeat(2, 1fr)"}
+//               gap={"17rem 4rem"}
+//               marginTop={"150px"}
+//               position={"relative"}
+//               padding={"0 4rem"}
+//               paddingBottom={"50px"}
+//             >
+//               <Image
+//                 src={cube}
+//                 width={"410px"}
+//                 position={"absolute"}
+//                 left={"0"}
+//                 right={"0"}
+//                 marginLeft={"auto"}
+//                 marginRight={"auto"}
+//                 cursor={"pointer"}
+//                 transform="translateY(-10%)"
+//                 animation="floatAnimation 2s infinite alternate"
+//                 // onClick={handleImageClick}
+//                 sx={{
+//                   "@keyframes floatAnimation": {
+//                     "0%": {
+//                       transform: "translateY(0)",
+//                     },
+//                     "100%": {
+//                       transform: "translateY(-20px)",
+//                     },
+//                   },
+//                 }}
+//               />
+
+//               <Box
+//                 gridColumn={"1/2"}
+//                 textAlign={"left"}
+//                 position={"relative"}
+//                 width={"383px"}
+//               >
+//                 <Component1 />
+//               </Box>
+
+//               <Box
+//                 gridColumn={"1/2"}
+//                 gridRow={"2"}
+//                 textAlign={"left"}
+//                 position={"relative"}
+//                 width={"383px"}
+//               >
+//                 <Component2 />
+//               </Box>
+
+//               <Box
+//                 gridColumn={"2/2"}
+//                 gridRow={"2"}
+//                 textAlign={"left"}
+//                 position={"relative"}
+//                 width={"383px"}
+//               >
+//                 <Component3 />
+//               </Box>
+
+//               <Box
+//                 gridColumn={"2/2"}
+//                 textAlign={"left"}
+//                 position={"relative"}
+//                 width={"383px"}
+//               >
+//                 <Component4 />
+//               </Box>
+//             </Box>
+//           </Container>
+//         </Box>
+
+//         <Box
+//           backgroundColor={"#000"}
+//           height={"100vh"}
+//           width={"100%"}
+//           padding={"0 5rem"}
+//           paddingBottom={"2rem"}
+//           ref={secondBoxRef}
+//           position={"absolute"}
+//           top={"0"}
+//           left={"0"}
+//           display={"grid"}
+//           placeContent={"center"}
+//         >
+//           <Text
+//             as={"h2"}
+//             paddingTop={"10rem"}
+//             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)",
+//                       },
+//                     },
+//                   }}
+//                 />
+//               </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>
+//             </Box>
+//           </Container>
+//         </Box>
+
+//         <Box
+//           backgroundColor={"#000"}
+//           height={"100vh"}
+//           width={"100%"}
+//           padding={"2rem"}
+//           paddingBottom={"2rem"}
+//           ref={thirdBoxRef}
+//           position={"absolute"}
+//           top={"0"}
+//           left={"0"}
+//           display={"grid"}
+//           placeContent={"center"}
+//         >
+//           <Text
+//             as={"h2"}
+//             paddingTop={"5rem"}
+//             fontWeight={700}
+//             fontSize={"40px"}
+//             textTransform={"capitalize"}
+//             color={"#fff"}
+//             marginBottom={"5rem"}
+//             textAlign={"center"}
+//             sx={{
+//               "@media (max-width: 1024px)": {},
+//               "@media (max-width: 600px)": {
+//                 fontSize: "28px",
+//               },
+//             }}
+//           >
+//             All In One Composable Stack
+//           </Text>
+//           <Container maxW="container.xl" textAlign={"center"}>
+//             <Box display={"flex"} alignItems={"start"} gap={"5rem"}>
+//               <Box width={"100%"}>
+//                 <Box
+//                   color={"#E1E1E1"}
+//                   textAlign={"right"}
+//                   marginBottom={"2rem"}
+//                 >
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     Single Comprehensive Stack:
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
+//                     tokens ( FTs and NFTs) all in one place.
+//                   </Text>
+//                 </Box>
+//                 <Box
+//                   color={"#E1E1E1"}
+//                   textAlign={"right"}
+//                   marginBottom={"2rem"}
+//                 >
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     High Partition Tolerence:
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     Issues in one shard wont affect other shards performance
+//                   </Text>
+//                 </Box>
+//                 <Box
+//                   color={"#E1E1E1"}
+//                   textAlign={"right"}
+//                   marginBottom={"2rem"}
+//                 >
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     Fully Deterministic
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     App can bring own Block space ( BYOB )
+//                   </Text>
+//                 </Box>
+//               </Box>
+//               <Box>
+//                 <Image
+//                   src={stack}
+//                   width={"700px"}
+//                   //   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={"100%"}>
+//                 <Box
+//                   color={"#E1E1E1"}
+//                   textAlign={"left"}
+//                   marginBottom={"2rem"}
+//                   minHeight={"80px"}
+//                 >
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     Unique Token/Object Based Architecture
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     Build unlimited FTs and NFTs all at L1!!
+//                   </Text>
+//                 </Box>
+//                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     Green By The Design
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     100000 Rubix Transactions consume &lt; 10 kWh &lt; 100000
+//                     Visa transactions
+//                   </Text>
+//                 </Box>
+//                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     51.4 Million RBT
+//                   </Text>
+//                   <Text fontSize={"16px"}>Fixed Supply.Hardcapped </Text>
+//                 </Box>
+//               </Box>
+//             </Box>
+//           </Container>
+//         </Box>
+//       </Box>
+//     </div>
+//   );
+// };