/* eslint-disable no-unused-vars */
// / eslint-disable no-unused-vars /
// / eslint-disable no-unused-vars /;
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-=500vh",
    //       markers: false,
    //     },
    //   })
    //   .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
    //   .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
    //   .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
    //   .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });

    // .fromTo(
    //   firstBoxRef.current,
    //   { opacity: 1, duration: 3, transform: "translateX(0vw)" },
    //   { opacity: 0, duration: 3, transform: "translateX(100vw)" }
    // )
    // .fromTo(
    //   secondBoxRef.current,
    //   { opacity: 0, duration: 1, transform: "translateX(-100vw)" },
    //   { opacity: 1, duration: 1, transform: "translateX(0vw)" }
    // )
    // .fromTo(
    //   secondBoxRef.current,
    //   { opacity: 1, duration: 3, transform: "translateX(0vw)" },
    //   { opacity: 0, duration: 3, transform: "translateX(100vw)" }
    // )
    // .fromTo(
    //   thirdBoxRef.current,
    //   { opacity: 0, duration: 1, transform: "translateX(-100vw)" },
    //   { opacity: 1, duration: 1, transform: "translateX(0vw)" }
    // );

    return () => {
      // tl.kill();
    };
  }, []);

  return (
    <div
      style={{
        backgroundColor: "#000",
        overflow: "hidden",
      }}
    >
      <Box
        // ref={mainBox}
        height={"auto"}
        // 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={"4rem"}
            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={"#101015"}
          // 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={"4rem"}
            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"}
                  minHeight={"80px"}
                >
                  <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>
  );
};

// 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>
//   );
// };