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

Merge branch 'dev' of https://github.com/WDI-Ideas/rubix into dev

Browse Source
This commit is contained in:
YasinShaikh123
2024-04-05 18:00:54 +05:30
parent f080d59512 a463fbfe8f
commit a9ab213a6e
20 changed files with 165 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/BuildBanner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 813 KiB

BIN
src/assets/images/BuildBanner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/images/faqBg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 MiB

BIN
src/assets/images/faqBg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
src/assets/images/form.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 MiB

BIN
src/assets/images/form.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
src/assets/images/learnBanner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 901 KiB

BIN
src/assets/images/learnBanner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
src/assets/images/whyRubix.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

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

@@ -1,5 +1,5 @@
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/BuildBanner.png";
import banner from "../../assets/images/BuildBanner.webp";
const BannerContent = [
{
@@ -37,7 +37,7 @@ const BuildBanner = () => {
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"5rem"}
paddingLeft={"4rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
@@ -56,7 +56,7 @@ const BuildBanner = () => {
as={"h2"}
fontWeight={700}
fontSize={"60px"}
textTransform={"upperCase"}
textTransform={"capitalize"}
color={"#DE858E"}
sx={{
"@media (max-width: 996px)": {
@@ -107,7 +107,7 @@ const BuildBanner = () => {
maxW="container.xl"
textAlign={"left"}
marginTop={"3rem"}
paddingLeft={"5rem"}
paddingLeft={"4rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",

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

6
src/components/BuildPage/Tools.jsx
View File

@@ -92,7 +92,7 @@ const Tools = () => {
<Card
background={"#131313"}
borderRadius={"10px"}
minH={"270px"}
height={"100%"}
>
<CardHeader display={"flex"} justifyContent={"center"}>
<Image src={item.img} />
@@ -130,7 +130,7 @@ const Tools = () => {
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
transition="0.3s ease-in"
color={"#fff"}
width={"227px"}
height={"60px"}
@@ -153,7 +153,7 @@ const Tools = () => {
width: "65px",
height: "65px",
borderRadius: "50%",
transition: "0.35s linear",
transition: "0.35s ease-in",
zIndex: -1,
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",

4
src/components/BuildPage/WhyBuild.jsx
View File

@@ -8,7 +8,7 @@ import {
AccordionPanel,
AccordionIcon,
} from "@chakra-ui/react";
import bg from "../../assets/images/whyRubix.png";
import bg from "../../assets/images/whyRubix.webp";
import cube from "../../assets/images/cube.png";
const accordion = [
@@ -46,7 +46,7 @@ const WhyBuild = () => {
>
<Container
maxW={"container.xl"}
padding={"5rem"}
padding={"4rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",

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

@@ -21,12 +21,11 @@ import {
ModalFooter,
Button,
} from "@chakra-ui/react";
import BGimage from "../../assets/images/form.png";
import BGimage from "../../assets/images/form.webp";
import formx from "../../assets/images/formx.png";
import formfb from "../../assets/images/formfb.png";
import forml from "../../assets/images/forml.png";
import { Link } from "react-router-dom";
import { ChevronDownIcon } from "@chakra-ui/icons";
const Contact = () => {
const {
@@ -218,8 +217,7 @@ const Contact = () => {
Call us
</Badge>
<Box marginTop={"10px"}>
<Link
to={`mailto:${email}`}
<Text
style={{
fontSize: "18px",
color: "#969696",
@@ -228,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={{

2
src/components/LearnPage/Faq.jsx
View File

@@ -1,4 +1,4 @@
import banner from "../../assets/images/faqBg.png";
import banner from "../../assets/images/faqBg.webp";
import {
Accordion,
AccordionButton,

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}

2
src/components/LearnPage/LearnBanner.jsx
View File

@@ -1,5 +1,5 @@
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/learnBanner.png";
import banner from "../../assets/images/learnBanner.webp";
const BannerContent = [
{

2
src/components/LearnPage/WhyRubix.jsx
View File

@@ -6,7 +6,7 @@ import {
AccordionPanel,
AccordionIcon,
} from "@chakra-ui/react";
import bg from "../../assets/images/whyRubix.png";
import bg from "../../assets/images/whyRubix.webp";
import cube from "../../assets/images/cube.png";
const accordion = [

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>