mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 23:45:50 +00:00
Added transition to mobile nav
This commit is contained in:
rockyeverlast
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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'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 < 10 kWh < 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>
|
||||
// );
|
||||
// };
|
||||
|
||||
Reference in New Issue
Block a user