Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-27 19:45:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated banner/ form/stats/NewSubnet/Getstarted

Browse Source
This commit is contained in:
rockyeverlast
2024-04-04 20:45:49 +05:30
parent e4cdbdd705
commit a463fbfe8f
6 changed files with 153 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BuildPage/BuildBanner.jsx
View File

@@ -56,7 +56,7 @@ const BuildBanner = () => {
as={"h2"}
fontWeight={700}
fontSize={"60px"}
textTransform={"upperCase"}
textTransform={"capitalize"}
color={"#DE858E"}
sx={{
"@media (max-width: 996px)": {

1
src/components/BuildPage/Connect.jsx
View File

@@ -108,6 +108,7 @@ const Connect = () => {
background={"#000"}
borderRadius={"10px"}
minH={"270px"}
height={"100%"}
border={"1px solid #454545"}
>
<CardHeader

5
src/components/Contact/Form.jsx
View File

@@ -217,8 +217,7 @@ const Contact = () => {
Call us
</Badge>
<Box marginTop={"10px"}>
<Link
to={`mailto:${email}`}
<Text
style={{
fontSize: "18px",
color: "#969696",
@@ -227,7 +226,7 @@ const Contact = () => {
}}
>
914 578 1245
</Link>
</Text>
</Box>
</Box>
</Box>

4
src/components/HomePage/Stats.jsx
View File

@@ -9,11 +9,12 @@ const StatsContent = {
const Stats = () => {
const { ref, inView } = useInView({
threshold: 0.3,
threshold: 0.5,
triggerOnce: false,
});
return (
<Box
ref={ref}
height={"auto"}
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
@@ -80,7 +81,6 @@ const Stats = () => {
>
<Box
color={"#fff"}
ref={ref}
textAlign={"center"}
position={"relative"}
_before={{

8
src/components/LearnPage/GetStarted.jsx
View File

@@ -87,7 +87,7 @@ const GetStarted = () => {
"@media (max-width: 375px)": {},
}}
>
<TabPanel>
<TabPanel padding={"0px"}>
<Image
fit="cover"
src={getStarted}
@@ -99,7 +99,7 @@ const GetStarted = () => {
}}
/>
</TabPanel>
<TabPanel>
<TabPanel padding={"0px"}>
<Image
fit="cover"
src={getStarted2}
@@ -111,7 +111,7 @@ const GetStarted = () => {
}}
/>
</TabPanel>
<TabPanel>
<TabPanel padding={"0px"}>
<Image
fit="cover"
src={getStarted}
@@ -123,7 +123,7 @@ const GetStarted = () => {
}}
/>
</TabPanel>
<TabPanel>
<TabPanel padding={"0px"}>
<Image
fit="cover"
src={getStarted3}

266
src/components/SubnetsComponent/NewSubnetComp.jsx
View File

@@ -18,11 +18,11 @@ const SubnetContent = {
heading: `decentralised Auto Syncing subnets`,
};
export const NewSubnetComp = ({ showSubnet }) => {
export const NewSubnetComp = () => {
const firstBoxRef = useRef(null);
const secondBoxRef = useRef(null);
const thirdBoxRef = useRef(null);
const mainBox = useRef(null);
const textBox = useRef(null);
useEffect(() => {
const animateBox = (boxRef) => {
@@ -40,13 +40,36 @@ export const NewSubnetComp = ({ showSubnet }) => {
{
position: "sticky",
top: "-116px",
opacity: 0,
autoAlpha: 1,
},
{
transform: "translateX(0)",
// transform: "translateX(0)",
// duration: 0.5,
opacity: 1,
duration: 1,
autoAlpha: 0,
}
);
const tl2 = gsap.timeline({
scrollTrigger: {
trigger: textBox.current,
start: "top center+=50",
end: "bottom bottom+=100",
scrub: 1,
markers: false,
},
});
tl2.fromTo(
textBox.current,
{
opacity: 0,
},
{
opacity: 1,
duration: 0.5,
}
);
return () => {
// Clean up
tl.kill();
@@ -55,33 +78,10 @@ export const NewSubnetComp = ({ showSubnet }) => {
animateBox(firstBoxRef);
animateBox(secondBoxRef);
animateBox(thirdBoxRef);
// const tl2 = gsap.timeline({
// scrollTrigger: {
// trigger: mainBox.current,
// start: "top top",
// end: "bottom bottom",
// scrub: 1,
// markers: false,
// },
// });
// tl2.fromTo(
// mainBox.current,
// {
// position: "sticky",
// top: 60,
// left: 0,
// duration: 0.5,
// },
// {
// position: "relative",
// duration: 0.5,
// }
// );
}, []);
return (
<Box ref={mainBox} backgroundColor={"#000"}>
<Box backgroundColor={"#000"}>
<Box
// height={"100vh"}
backgroundColor={"#000"}
@@ -100,6 +100,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
fontSize={"40px"}
textTransform={"capitalize"}
color={"#fff"}
ref={textBox}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
@@ -118,6 +119,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
position={"relative"}
padding={"0 4rem"}
paddingBottom={"50px"}
ref={textBox}
>
<Image
src={cube}
@@ -148,6 +150,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
textAlign={"left"}
position={"relative"}
width={"383px"}
ref={textBox}
>
<Component1 />
</Box>
@@ -158,6 +161,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
textAlign={"left"}
position={"relative"}
width={"383px"}
ref={textBox}
>
<Component2 />
</Box>
@@ -168,6 +172,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
textAlign={"left"}
position={"relative"}
width={"383px"}
ref={textBox}
>
<Component3 />
</Box>
@@ -177,6 +182,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
textAlign={"left"}
position={"relative"}
width={"383px"}
ref={textBox}
>
<Component4 />
</Box>
@@ -190,104 +196,118 @@ export const NewSubnetComp = ({ showSubnet }) => {
paddingBottom={"2rem"}
ref={secondBoxRef}
>
<Fade in={true}>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"40px"}
textTransform={"capitalize"}
color={"#fff"}
marginBottom={"5rem"}
textAlign={"center"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
},
}}
>
With Unmatched Privacy and Scalability
</Text>
<Container maxW="container.xl" textAlign={"center"}>
<Box display={"flex"} alignItems={"center"} gap={"8rem"}>
<Box>
<Image
src={cube}
width={"480px"}
// position={"absolute"}
left={"0"}
right={"0"}
marginLeft={"auto"}
marginRight={"auto"}
cursor={"pointer"}
transform="translateY(-10%)"
animation="floatAnimation 2s infinite alternate"
// onClick={click}
sx={{
"@keyframes floatAnimation": {
"0%": {
transform: "translateY(0)",
},
"100%": {
transform: "translateY(-20px)",
},
<Text
ref={textBox}
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"40px"}
textTransform={"capitalize"}
color={"#fff"}
marginBottom={"5rem"}
textAlign={"center"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
},
}}
>
With Unmatched Privacy and Scalability
</Text>
<Container maxW="container.xl" textAlign={"center"}>
<Box display={"flex"} alignItems={"center"} gap={"8rem"}>
<Box ref={textBox}>
<Image
src={cube}
width={"480px"}
// position={"absolute"}
left={"0"}
right={"0"}
marginLeft={"auto"}
marginRight={"auto"}
cursor={"pointer"}
transform="translateY(-10%)"
animation="floatAnimation 2s infinite alternate"
// onClick={click}
sx={{
"@keyframes floatAnimation": {
"0%": {
transform: "translateY(0)",
},
}}
/>
"100%": {
transform: "translateY(-20px)",
},
},
}}
/>
</Box>
<Box width={"50%"}>
<Box
color={"#E1E1E1"}
textAlign={"left"}
marginBottom={"2rem"}
ref={textBox}
>
<Text
as={"h2"}
fontSize={"24px"}
color={"#fff"}
marginBottom={"10px"}
>
01. Decentralisation
</Text>
<Text fontSize={"18px"}>
Rubix Decentralised Identity( DID) issued at L1 is the
foundation for building digital ownership enhancing
applications.
</Text>
</Box>
<Box width={"50%"}>
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
<Text
as={"h2"}
fontSize={"24px"}
color={"#fff"}
marginBottom={"10px"}
>
01. Decentralisation
</Text>
<Text fontSize={"18px"}>
Rubix Decentralised Identity( DID) issued at L1 is the
foundation for building digital ownership enhancing
applications.
</Text>
</Box>
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
<Text
as={"h2"}
fontSize={"24px"}
color={"#fff"}
marginBottom={"10px"}
>
02. Ultra Scalability
</Text>
<Text fontSize={"18px"}>
Unlike monolithic chains which become centralized and
introduce latency to achieve high throughput, in the Rubix
object chain architecture, where mobile nodes have real time
full state data, the network TPS will increase with increase
in numbers of nodes.
</Text>
</Box>
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
<Text
as={"h2"}
fontSize={"24px"}
color={"#fff"}
marginBottom={"10px"}
>
03. Data Security and Privacy
</Text>
<Text fontSize={"18px"}>
Rubix Decentralised Identity(DID) issued at L1 is the
foundation for building digital ownership enhancing
applications
</Text>
</Box>
<Box
color={"#E1E1E1"}
textAlign={"left"}
marginBottom={"2rem"}
ref={textBox}
>
<Text
as={"h2"}
fontSize={"24px"}
color={"#fff"}
marginBottom={"10px"}
>
02. Ultra Scalability
</Text>
<Text fontSize={"18px"}>
Unlike monolithic chains which become centralized and
introduce latency to achieve high throughput, in the Rubix
object chain architecture, where mobile nodes have real time
full state data, the network TPS will increase with increase
in numbers of nodes.
</Text>
</Box>
<Box
color={"#E1E1E1"}
textAlign={"left"}
marginBottom={"2rem"}
ref={textBox}
>
<Text
as={"h2"}
fontSize={"24px"}
color={"#fff"}
marginBottom={"10px"}
>
03. Data Security and Privacy
</Text>
<Text fontSize={"18px"}>
Rubix Decentralised Identity(DID) issued at L1 is the
foundation for building digital ownership enhancing
applications
</Text>
</Box>
</Box>
</Container>
</Fade>
</Box>
</Container>
</Box>
<Box
backgroundColor={"#000"}
@@ -332,7 +352,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
Single Comprehensive Stack:
</Text>
<Text fontSize={"16px"}>
Full Mobile node SDK, Smart Contracts, DID's, Secondary
Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
tokens ( FTs and NFTs) all in one place.
</Text>
</Box>