mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 19:45:49 +00:00
Merge branch 'dev' of https://github.com/WDI-Ideas/rubix into dev
This commit is contained in:
YasinShaikh123
@@ -102,7 +102,7 @@ const Stats = () => {
|
||||
>
|
||||
{inView && (
|
||||
<CountUp
|
||||
start={0}
|
||||
start={50000000}
|
||||
end={51400000}
|
||||
delay={0}
|
||||
style={{ fontSize: "38px", fontWeight: "500" }}
|
||||
@@ -148,7 +148,7 @@ const Stats = () => {
|
||||
>
|
||||
{inView && (
|
||||
<CountUp
|
||||
start={0}
|
||||
start={10000000}
|
||||
end={10247786}
|
||||
delay={0}
|
||||
style={{ fontSize: "38px", fontWeight: "500" }}
|
||||
@@ -173,7 +173,7 @@ const Stats = () => {
|
||||
<Box color={"#fff"} ref={ref} textAlign={"center"}>
|
||||
{inView && (
|
||||
<CountUp
|
||||
start={0}
|
||||
start={100000}
|
||||
end={174015}
|
||||
delay={0}
|
||||
style={{ fontSize: "38px", fontWeight: "500" }}
|
||||
@@ -237,7 +237,7 @@ const Stats = () => {
|
||||
>
|
||||
{inView && (
|
||||
<CountUp
|
||||
start={0}
|
||||
start={50000000}
|
||||
end={51400000}
|
||||
delay={0}
|
||||
style={{ fontSize: "38px", fontWeight: "500" }}
|
||||
@@ -262,7 +262,7 @@ const Stats = () => {
|
||||
<Box color={"#fff"} ref={ref} textAlign={"center"}>
|
||||
{inView && (
|
||||
<CountUp
|
||||
start={0}
|
||||
start={10000000}
|
||||
end={10247786}
|
||||
delay={0}
|
||||
style={{ fontSize: "38px", fontWeight: "500" }}
|
||||
|
||||
@@ -22,187 +22,112 @@ export const NewSubnetComp = () => {
|
||||
const firstBoxRef = useRef(null);
|
||||
const secondBoxRef = useRef(null);
|
||||
const thirdBoxRef = useRef(null);
|
||||
const textBox = useRef(null);
|
||||
const mainBox = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const animateBox = (boxRef) => {
|
||||
const tl = gsap.timeline({
|
||||
// gsap.set(firstBoxRef.current, { opacity: 1 });
|
||||
let tl = gsap
|
||||
.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: boxRef.current,
|
||||
start: "top center+=50",
|
||||
end: "bottom bottom+=100",
|
||||
trigger: mainBox.current,
|
||||
start: "top top",
|
||||
scrub: 1,
|
||||
markers: false,
|
||||
pin: true,
|
||||
end: "bottom bottom",
|
||||
markers: true,
|
||||
},
|
||||
});
|
||||
tl.fromTo(
|
||||
boxRef.current,
|
||||
{
|
||||
position: "sticky",
|
||||
top: "-116px",
|
||||
opacity: 0,
|
||||
// autoAlpha: 1,
|
||||
},
|
||||
{
|
||||
// transform: "translateX(0)",
|
||||
// duration: 0.5,
|
||||
opacity: 1,
|
||||
duration: 0.3,
|
||||
// autoAlpha: 0,
|
||||
}
|
||||
);
|
||||
return () => {
|
||||
// Clean up
|
||||
tl.kill();
|
||||
};
|
||||
})
|
||||
.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();
|
||||
};
|
||||
animateBox(firstBoxRef);
|
||||
animateBox(secondBoxRef);
|
||||
animateBox(thirdBoxRef);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box backgroundColor={"#000"}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#000",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
// height={"100vh"}
|
||||
backgroundColor={"#000"}
|
||||
ref={firstBoxRef}
|
||||
ref={mainBox}
|
||||
height={"300vh"}
|
||||
position={"relative"}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Container
|
||||
maxW="container.xl"
|
||||
textAlign={"center"}
|
||||
// display={"grid"}
|
||||
placeContent={"center"}
|
||||
<Box
|
||||
ref={firstBoxRef}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
height={"100vh"}
|
||||
width={"100%"}
|
||||
backgroundColor={"#000"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
ref={textBox}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
<Container
|
||||
maxW="container.xl"
|
||||
textAlign={"center"}
|
||||
// display={"grid"}
|
||||
placeContent={"center"}
|
||||
>
|
||||
{SubnetContent.heading}
|
||||
</Text>
|
||||
<Box
|
||||
display={"grid"}
|
||||
gridTemplateColumns={"repeat(2, 1fr)"}
|
||||
gridTemplateRows={"repeat(2, 1fr)"}
|
||||
gap={"17rem 4rem"}
|
||||
marginTop={"150px"}
|
||||
position={"relative"}
|
||||
padding={"0 4rem"}
|
||||
paddingBottom={"50px"}
|
||||
ref={textBox}
|
||||
>
|
||||
<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}
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-20px)",
|
||||
},
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Box
|
||||
gridColumn={"1/2"}
|
||||
textAlign={"left"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
ref={textBox}
|
||||
>
|
||||
<Component1 />
|
||||
</Box>
|
||||
|
||||
{SubnetContent.heading}
|
||||
</Text>
|
||||
<Box
|
||||
gridColumn={"1/2"}
|
||||
gridRow={"2"}
|
||||
textAlign={"left"}
|
||||
display={"grid"}
|
||||
gridTemplateColumns={"repeat(2, 1fr)"}
|
||||
gridTemplateRows={"repeat(2, 1fr)"}
|
||||
gap={"17rem 4rem"}
|
||||
marginTop={"150px"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
ref={textBox}
|
||||
padding={"0 4rem"}
|
||||
paddingBottom={"50px"}
|
||||
>
|
||||
<Component2 />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
gridColumn={"2/2"}
|
||||
gridRow={"2"}
|
||||
textAlign={"left"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
ref={textBox}
|
||||
>
|
||||
<Component3 />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
gridColumn={"2/2"}
|
||||
textAlign={"left"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
ref={textBox}
|
||||
>
|
||||
<Component4 />
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
height={"120vh"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"2rem"}
|
||||
ref={secondBoxRef}
|
||||
>
|
||||
<Text
|
||||
ref={textBox}
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
marginBottom={"5rem"}
|
||||
textAlign={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
With Unmatched Privacy and Scalability
|
||||
</Text>
|
||||
<Container maxW="container.xl" textAlign={"center"}>
|
||||
<Box display={"flex"} alignItems={"center"} gap={"8rem"}>
|
||||
<Box ref={textBox}>
|
||||
<Image
|
||||
src={cube}
|
||||
width={"480px"}
|
||||
// position={"absolute"}
|
||||
width={"410px"}
|
||||
position={"absolute"}
|
||||
left={"0"}
|
||||
right={"0"}
|
||||
marginLeft={"auto"}
|
||||
@@ -210,7 +135,7 @@ export const NewSubnetComp = () => {
|
||||
cursor={"pointer"}
|
||||
transform="translateY(-10%)"
|
||||
animation="floatAnimation 2s infinite alternate"
|
||||
// onClick={click}
|
||||
// onClick={handleImageClick}
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
@@ -222,82 +147,167 @@ export const NewSubnetComp = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box width={"50%"}>
|
||||
|
||||
<Box
|
||||
color={"#E1E1E1"}
|
||||
gridColumn={"1/2"}
|
||||
textAlign={"left"}
|
||||
marginBottom={"2rem"}
|
||||
ref={textBox}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
>
|
||||
<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>
|
||||
<Component1 />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
color={"#E1E1E1"}
|
||||
gridColumn={"1/2"}
|
||||
gridRow={"2"}
|
||||
textAlign={"left"}
|
||||
marginBottom={"2rem"}
|
||||
ref={textBox}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
>
|
||||
<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>
|
||||
<Component2 />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
color={"#E1E1E1"}
|
||||
gridColumn={"2/2"}
|
||||
gridRow={"2"}
|
||||
textAlign={"left"}
|
||||
marginBottom={"2rem"}
|
||||
ref={textBox}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
>
|
||||
<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>
|
||||
<Component3 />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
gridColumn={"2/2"}
|
||||
textAlign={"left"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
>
|
||||
<Component4 />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
height={"auto"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"2rem"}
|
||||
ref={thirdBoxRef}
|
||||
>
|
||||
<Fade in={true}>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
height={"100vh"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"2rem"}
|
||||
ref={secondBoxRef}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
marginBottom={"5rem"}
|
||||
textAlign={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
With Unmatched Privacy and Scalability
|
||||
</Text>
|
||||
<Container maxW="container.xl" textAlign={"center"}>
|
||||
<Box display={"flex"} alignItems={"center"} gap={"8rem"}>
|
||||
<Box>
|
||||
<Image
|
||||
src={cube}
|
||||
width={"480px"}
|
||||
// position={"absolute"}
|
||||
left={"0"}
|
||||
right={"0"}
|
||||
marginLeft={"auto"}
|
||||
marginRight={"auto"}
|
||||
cursor={"pointer"}
|
||||
transform="translateY(-10%)"
|
||||
animation="floatAnimation 2s infinite alternate"
|
||||
// onClick={click}
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-20px)",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</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"}
|
||||
padding={"2rem"}
|
||||
// paddingBottom={"2rem"}
|
||||
ref={thirdBoxRef}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
// width={"100vw"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
@@ -445,8 +455,8 @@ export const NewSubnetComp = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Fade>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user