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

Home page responsive and Learn page developement

Browse Source
This commit is contained in:
rockyeverlast
2024-03-27 16:32:05 +05:30
parent 33bb4d6648
commit 9d4b22905d
39 changed files with 1916 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -3,9 +3,9 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>Rubix</title>
</head>
<body>

13
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "rubix",
"version": "0.0.0",
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
@@ -468,6 +469,18 @@
"react": ">=18"
}
},
"node_modules/@chakra-ui/icons": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
"integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
"dependencies": {
"@chakra-ui/icon": "3.2.0"
},
"peerDependencies": {
"@chakra-ui/system": ">=2.0.0",
"react": ">=18"
}
},
"node_modules/@chakra-ui/image": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",

1
package.json
View File

@@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",

1
public/vite.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/LearnCard1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/assets/images/LearnCard2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
src/assets/images/LearnCard3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
src/assets/images/LearnCard4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/assets/images/LearnCard5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/assets/images/discord.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

BIN
src/assets/images/fb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 460 B

BIN
src/assets/images/github.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 503 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 901 KiB

BIN
src/assets/images/linked.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 393 B

BIN
src/assets/images/reddit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 B

BIN
src/assets/images/stacksmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
src/assets/images/tele.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
src/assets/images/x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 457 B

80
src/components/Card/LearnCard.jsx Normal file
View File

@@ -0,0 +1,80 @@
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
const LearnCard = ({ id, src, alt, text }) => {
return (
<Box
backgroundImage={
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
}
padding={"1px"}
borderRadius={"10px"}
>
{/* {images.map((img) => (
<></>
))} */}
<Box
display="inline-block"
width={"600px"}
height={"300px"}
background={"#151419"}
borderRadius={"10px"}
key={id}
>
<Box padding={"1rem"}>
<Image src={src} alt={alt} />
</Box>
<Box padding={"1rem"} minHeight={"110px"}>
<Text
color={"#fff"}
fontSize={"18px"}
fontFamily={"Poppins"}
marginBottom={"20px"}
fontWeight={"300"}
>
{text}
</Text>
<Box
display={"flex"}
alignItems={"center"}
_hover={
{
// flexDirection: "column-reverse",
}
}
>
<Box
position={"relative"}
width={"10%"}
_before={{
content: '""',
width: "100%",
position: "absolute",
left: "0",
borderBottom: "1px solid #DE858E",
zIndex: "2",
}}
></Box>
<Button
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
}}
>
Visit Website
</Button>
</Box>
</Box>
</Box>
</Box>
);
};
export default LearnCard;

318
src/components/Footer/Footer.jsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unescaped-entities */
import {
Box,
@@ -6,8 +7,12 @@ import {
Flex,
Image,
Input,
List,
ListItem,
Text,
UnorderedList,
} from "@chakra-ui/react";
import { useMediaQuery } from "@chakra-ui/react";
import {
FormControl,
FormLabel,
@@ -15,60 +20,281 @@ import {
FormHelperText,
} from "@chakra-ui/react";
import logo from "../../assets/images/rubix.png";
import x from "../../assets/images/x.png";
import linked from "../../assets/images/linked.png";
import github from "../../assets/images/github.png";
import tele from "../../assets/images/tele.png";
import reddit from "../../assets/images/reddit.png";
import fb from "../../assets/images/fb.png";
import discord from "../../assets/images/discord.png";
const Footer = () => {
const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
return (
<Box backgroundColor={"#101015"}>
<Container maxW="container.xl" padding={"4rem"}>
<Box paddingBottom={"2rem"}>
<Image src={logo} width={"150px"} />
</Box>
<Box>
<Box marginBottom={"20px"}>
<Text
fontSize={"28px"}
color={"#E9E9E9"}
fontFamily={"Mona Sans"}
fontWeight={"600"}
>
Stay up to date with Rubix
</Text>
<>
<Box backgroundColor={"#101015"} borderBottom={"1px solid #fff"}>
<Container
maxW="container.xl"
padding={"4rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 412px)": {
padding: "2rem",
},
}}
>
<Box paddingBottom={"2rem"}>
<Image src={logo} width={"150px"} />
</Box>
<Box>
<Text
fontSize={"18px"}
color={"#B0B0B0"}
fontFamily={"Poppins"}
fontWeight={"400"}
marginBottom={"1rem"}
>
Sign up for our newsletter and receive the <br /> latest updates.
</Text>
<Flex alignItems="center">
<Input
type="email"
placeholder="Email"
borderRadius={"0%"}
border={"none"}
background={"#444444"}
// value={}
// onChange={(e) => setEmail(e.target.value)}
/>
<Button
backgroundColor={"#DE858E"}
<Box
display={"flex"}
alignItems={"center"}
gap={"8rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
flexDirection: "column",
gap: "3rem",
alignItems: "flex-start",
},
}}
>
<Box>
<Box marginBottom={"20px"}>
<Text
fontSize={"28px"}
color={"#E9E9E9"}
fontFamily={"Mona Sans"}
fontWeight={"600"}
>
Stay up to date with Rubix
</Text>
</Box>
<Text
fontSize={"18px"}
color={"#B0B0B0"}
fontFamily={"Poppins"}
fontWeight={"400"}
color={"#fff"}
borderRadius={"0%"}
// onClick={handleSubmit}
marginBottom={"1rem"}
>
Submit
</Button>
</Flex>
Sign up for our newsletter and receive the{" "}
{isSmallScreen ? null : <br />} latest updates.
</Text>
<Flex alignItems="center">
<Input
type="email"
placeholder="Email"
borderRadius={"0%"}
border={"none"}
background={"#444444"}
padding={"1.5rem"}
borderTopLeftRadius={"5px"}
borderBottomLeftRadius={"5px"}
// value={}
// onChange={(e) => setEmail(e.target.value)}
/>
<Button
backgroundColor={"#DE858E"}
fontFamily={"Poppins"}
fontWeight={"400"}
color={"#fff"}
borderRadius={"0%"}
padding={"1.5rem 1.5rem"}
borderTopRightRadius={"5px"}
borderBottomRightRadius={"5px"}
width={"167px"}
// onClick={handleSubmit}
>
Submit
</Button>
</Flex>
</Box>
<Box
display={"flex"}
alignItems={"center"}
gap={"5rem"}
justifyContent={"flex-start"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
flexDirection: "column",
gap: "2rem",
},
}}
>
<Box>
<Text
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"22px"}
marginBottom={"2rem"}
>
Explore
</Text>
<UnorderedList
listStyleType={"none"}
color={"#B0B0B0"}
fontFamily={"Poppins"}
fontWeight={"400"}
marginLeft={"0px !important"}
>
<ListItem marginBottom={"1rem"}>Learn</ListItem>
<ListItem marginBottom={"1rem"}>Community</ListItem>
<ListItem marginBottom={"1rem"}>Wallet</ListItem>
<ListItem marginBottom={"1rem"}>Careers</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"22px"}
marginBottom={"2rem"}
>
Social
</Text>
<UnorderedList
listStyle={"none"}
listStyleType={"none"}
color={"#B0B0B0"}
fontFamily={"Poppins"}
fontWeight={"400"}
marginLeft={"0px !important"}
>
<ListItem
marginBottom={"1rem"}
display={"flex"}
alignItems={"center"}
gap={"10px"}
>
<Image src={tele} />
telegram
</ListItem>
<ListItem
marginBottom={"1rem"}
display={"flex"}
alignItems={"center"}
gap={"10px"}
>
<Image src={x} />
Twitter
</ListItem>
<ListItem
marginBottom={"1rem"}
display={"flex"}
alignItems={"center"}
gap={"10px"}
>
<Image src={github} />
GitHub
</ListItem>
<ListItem
marginBottom={"1rem"}
display={"flex"}
alignItems={"center"}
gap={"10px"}
>
<Image src={discord} />
Discord
</ListItem>
</UnorderedList>
</Box>
<Box
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
marginTop: "-2rem",
},
}}
>
<UnorderedList
listStyle={"none"}
listStyleType={"none"}
color={"#B0B0B0"}
fontFamily={"Poppins"}
fontWeight={"400"}
marginLeft={"0px !important"}
>
<ListItem
marginBottom={"1rem"}
display={"flex"}
alignItems={"center"}
gap={"10px"}
>
<Image src={reddit} />
Reddit
</ListItem>
<ListItem
marginBottom={"1rem"}
display={"flex"}
alignItems={"center"}
gap={"10px"}
>
<Image src={fb} />
Facebook
</ListItem>
<ListItem
marginBottom={"1rem"}
display={"flex"}
alignItems={"center"}
gap={"10px"}
>
<Image src={linked} />
LinkedIn
</ListItem>
</UnorderedList>
</Box>
</Box>
</Box>
</Box>
</Container>
</Box>
</Container>
</Box>
<Box backgroundColor={"#101015"}>
<Container
maxW="container.xl"
padding={"4rem"}
display={"flex"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
flexDirection: "column",
alignItems: "flex-start",
padding: "2rem",
},
}}
>
<Image src={logo} width={"100px"} paddingBottom={"5px"} />
<Text
color={"#fff"}
fontFamily={"Poppins"}
fontSize={"15px"}
fontWeight={"400"}
>
All rights reserved.
</Text>
<Text
color={"#fff"}
fontFamily={"Poppins"}
fontSize={"15px"}
fontWeight={"400"}
>
Privacy Policy
</Text>
<Text
color={"#fff"}
fontFamily={"Poppins"}
fontSize={"15px"}
fontWeight={"400"}
>
Terms Conditions
</Text>
</Container>
</Box>
</>
);
};

37
src/components/HomePage/Client.jsx
View File

@@ -32,6 +32,14 @@ const Client = () => {
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 996px)": {
paddingBottom: "3rem",
},
}}
>
<Text
as={"h2"}
@@ -42,6 +50,14 @@ const Client = () => {
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "35px",
},
"@media (max-width: 412px)": {
fontSize: "29px",
},
}}
>
{Content.heading}
</Text>
@@ -50,6 +66,14 @@ const Client = () => {
display={"grid"}
placeContent={"center"}
height={"65vh"}
sx={{
"@media (max-width: 1024px)": {
height: "40vh",
},
"@media (max-width: 996px)": {
height: "auto",
},
}}
>
<Box
display={"flex"}
@@ -57,6 +81,13 @@ const Client = () => {
alignItems={"center"}
// flexWrap={"wrap"}
marginBottom={"8rem"}
sx={{
"@media (max-width: 996px)": {
flexDirection: "column",
rowGap: "3rem",
marginBottom: "3rem",
},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
@@ -69,6 +100,12 @@ const Client = () => {
// justifyContent={"space-between"}
alignItems={"center"}
// flexWrap={"wrap"}
sx={{
"@media (max-width: 996px)": {
flexDirection: "column",
rowGap: "3rem",
},
}}
>
<Image src={ensurity} sx={imgWidth} />
<Image src={exr} sx={imgWidth} />

62
src/components/HomePage/HomeBanner.jsx
View File

@@ -25,6 +25,14 @@ const HomeBanner = () => {
backgroundSize={"cover"}
display={"grid"}
placeContent={"center"}
sx={{
"@media (max-width: 1024px)": {
height: "70vh",
},
"@media (max-width: 600px)": {
height: "85vh",
},
}}
>
<Container maxW="container.lg" textAlign={"center"}>
{BannerContent.map((item, index) => {
@@ -37,11 +45,17 @@ const HomeBanner = () => {
textTransform={"upperCase"}
color={"#DE858E"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
fontSize: "45px",
},
"@media (max-width: 600px)": {
fontSize: "28px",
marginBottom: "2rem",
},
"@media (max-width: 412px)": {
fontSize: "24px",
marginTop: "2rem",
},
}}
>
{item.heading1}
@@ -62,7 +76,9 @@ const HomeBanner = () => {
lineHeight={"37.5px"}
fontFamily={"Poppins"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 600px)": {
fontSize: "17px",
},
@@ -75,13 +91,22 @@ const HomeBanner = () => {
);
})}
</Container>
<Container maxW="container.md" textAlign={"center"} marginTop={"3rem"}>
<Container
maxW="container.md"
textAlign={"center"}
marginTop={"3rem"}
sx={{
"@media (max-width: 375px)": {
marginTop: "1rem",
},
}}
>
{BannerContent[2] && (
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
transition="0.3s ease-in-out"
color={"#fff"}
width={"227px"}
height={"60px"}
@@ -90,12 +115,35 @@ const HomeBanner = () => {
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"20px"}
zIndex={"1"}
overflow={"hidden"}
sx={{
"::before": {
content: '""',
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "65px",
height: "65px",
borderRadius: "50%",
transition: "0.35s linear",
zIndex: -1,
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
opacity: "0",
},
"&:hover::before": {
width: "100%",
height: "120%",
borderRadius: "0px",
opacity: "1",
},
}}
_hover={{
color: "#000",
border: "none",
bgGradient:
"radial-gradient(circle, #d4dae0, #b7bccd, #a49db6, #987c99, #8e5c74)",
transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
zIndex: 1,
}}
>
{BannerContent[2].btn}

42
src/components/HomePage/Resources.jsx
View File

@@ -23,6 +23,14 @@ const Resources = () => {
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "35px",
},
"@media (max-width: 375px)": {
fontSize: "28px",
},
}}
>
{Content.heading}
</Text>
@@ -30,6 +38,11 @@ const Resources = () => {
paddingLeft={"7rem"}
paddingBottom={"2rem"}
// height={"50vh"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "3rem",
},
}}
>
<Box
display={"flex"}
@@ -60,12 +73,35 @@ const Resources = () => {
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"20px"}
zIndex={"1"}
overflow={"hidden"}
sx={{
"::before": {
content: '""',
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "65px",
height: "65px",
borderRadius: "50%",
transition: "0.35s linear",
zIndex: -1,
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
opacity: "0",
},
"&:hover::before": {
width: "100%",
height: "120%",
borderRadius: "0px",
opacity: "1",
},
}}
_hover={{
color: "#000",
border: "none",
bgGradient:
"radial-gradient(circle, #d4dae0, #b7bccd, #a49db6, #987c99, #8e5c74)",
transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
zIndex: 1,
}}
>
View More

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

@@ -18,6 +18,14 @@ const Stats = () => {
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 600px)": {
fontSize: "28px",
},
}}
>
<Text
as={"h2"}
@@ -42,6 +50,13 @@ const Stats = () => {
display={"grid"}
placeContent={"center"}
height={"50vh"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
height: "auto",
paddingBottom: "2rem",
},
}}
>
<Box
display={"flex"}
@@ -49,6 +64,19 @@ const Stats = () => {
alignItems={"center"}
gap={"8rem"}
marginBottom={"6rem"}
flexWrap={"wrap"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
flexDirection: "column",
gap: "4rem",
marginBottom: "4rem",
},
"@media (max-width: 375px)": {
gap: "2rem",
marginBottom: "2rem",
},
}}
>
<Box
color={"#fff"}
@@ -63,6 +91,14 @@ const Stats = () => {
borderRight: "2px solid #EFEFEF",
zIndex: "2",
}}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
_before: {
borderRight: "none",
},
},
}}
>
{inView && (
<CountUp
@@ -72,7 +108,20 @@ const Stats = () => {
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>Total Capped Supply</Text>
<Text
textTransform={"uppercase"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
},
}}
>
Total Capped Supply
</Text>
</Box>
<Box
color={"#fff"}
@@ -87,6 +136,14 @@ const Stats = () => {
borderRight: "2px solid #EFEFEF",
zIndex: "2",
}}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
_before: {
borderRight: "none",
},
},
}}
>
{inView && (
<CountUp
@@ -96,7 +153,20 @@ const Stats = () => {
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>Digital Asset Tools mined</Text>
<Text
textTransform={"uppercase"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
},
}}
>
Digital Asset Tools mined
</Text>
</Box>
<Box color={"#fff"} ref={ref} textAlign={"center"}>
{inView && (
@@ -107,7 +177,20 @@ const Stats = () => {
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>Live Nodes</Text>
<Text
textTransform={"uppercase"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
},
}}
>
Live Nodes
</Text>
</Box>
</Box>
@@ -116,6 +199,16 @@ const Stats = () => {
justifyContent={"center"}
alignItems={"center"}
gap={"8rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
flexDirection: "column",
gap: "4rem",
},
"@media (max-width: 375px)": {
gap: "2rem",
},
}}
>
<Box
color={"#fff"}
@@ -130,6 +223,14 @@ const Stats = () => {
borderRight: "2px solid #EFEFEF",
zIndex: "2",
}}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
_before: {
borderRight: "none",
},
},
}}
>
{inView && (
<CountUp
@@ -139,7 +240,18 @@ const Stats = () => {
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>
<Text
textTransform={"uppercase"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
},
}}
>
Circulating Supply at level 4
</Text>
</Box>
@@ -152,7 +264,20 @@ const Stats = () => {
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>Transacitons</Text>
<Text
textTransform={"uppercase"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
},
}}
>
Transacitons
</Text>
</Box>
</Box>
</Container>

189
src/components/HomePage/Subnets.jsx
View File

@@ -13,99 +13,130 @@ import Component2 from "../SubnetsComponent/Component2";
import cube from "../../assets/images/cube.png";
import Component3 from "../SubnetsComponent/Component3";
import Component4 from "../SubnetsComponent/Component4";
import SubnetPage2 from "../SubnetsComponent/SubnetPage2";
import { useState } from "react";
const SubnetContent = {
heading: `decentralised Auto Syncing subnets`,
};
const Subnets = () => {
const [showSubnetPage, setShowSubnetPage] = useState(true);
const handleImageClick = () => {
setShowSubnetPage(false);
};
const handleSubnetPage2Click = () => {
setShowSubnetPage(true); // Show Subnets component when SubnetPage2 is clicked
};
return (
<Box
// height={"100vh"}
backgroundColor={"#000"}
>
<Container
maxW="container.xl"
textAlign={"center"}
// display={"grid"}
placeContent={"center"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"40px"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
},
}}
>
{SubnetContent.heading}
</Text>
<>
{showSubnetPage ? (
<Box
display={"grid"}
gridTemplateColumns={"repeat(2, 1fr)"}
gridTemplateRows={"repeat(2, 1fr)"}
gap={"17rem 4rem"}
marginTop={"150px"}
position={"relative"}
padding={"0 4rem"}
paddingBottom={"50px"}
// height={"100vh"}
backgroundColor={"#000"}
>
<Image
src={cube}
width={"410px"}
position={"absolute"}
left={"0"}
right={"0"}
marginLeft={"auto"}
marginRight={"auto"}
/>
<Box
gridColumn={"1/2"}
textAlign={"left"}
position={"relative"}
width={"383px"}
<Container
maxW="container.xl"
textAlign={"center"}
// display={"grid"}
placeContent={"center"}
>
<Component1 />
</Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"40px"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
},
}}
>
{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"}
>
<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"}
gridRow={"2"}
textAlign={"left"}
position={"relative"}
width={"383px"}
>
<Component2 />
</Box>
<Box
gridColumn={"1/2"}
textAlign={"left"}
position={"relative"}
width={"383px"}
>
<Component1 />
</Box>
<Box
gridColumn={"2/2"}
gridRow={"2"}
textAlign={"left"}
position={"relative"}
width={"383px"}
>
<Component3 />
</Box>
<Box
gridColumn={"1/2"}
gridRow={"2"}
textAlign={"left"}
position={"relative"}
width={"383px"}
>
<Component2 />
</Box>
<Box
gridColumn={"2/2"}
textAlign={"left"}
position={"relative"}
width={"383px"}
>
<Component4 />
</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>
</Container>
</Box>
) : (
<SubnetPage2 click={handleSubnetPage2Click} />
)}
</>
);
};

38
src/components/HomePage/WhitePaper.jsx
View File

@@ -14,6 +14,14 @@ const WhitePaper = () => {
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 600px)": {
fontSize: "28px",
},
}}
>
<Text
as={"h2"}
@@ -59,8 +67,36 @@ const WhitePaper = () => {
color={"#fff"}
fontWeight={"400"}
margin={"0 auto"}
// transition="0.3s ease-in-out"
zIndex={"1"}
overflow={"hidden"}
sx={{
"::before": {
content: '""',
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "65px",
height: "65px",
borderRadius: "50%",
transition: "0.35s linear",
zIndex: -1,
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
opacity: "0",
},
"&:hover::before": {
width: "100%",
height: "120%",
borderRadius: "0px",
opacity: "1",
},
}}
_hover={{
backgroundColor: "transparent",
color: "#000",
border: "none",
zIndex: 1,
}}
>
{SectionContent.btnContent}

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

@@ -1,7 +1,157 @@
import { Heading } from "@chakra-ui/react";
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/learnBanner.png";
const BannerContent = [
{
heading1: `Powerful blockchain tools`,
heading2: `for developers`,
},
{
subheading: `Rubix allows developers to build on a fast, secure,
and scalable chain that has a unique approach to data sharing,
objects, and energy efficiency, so developers have a license to be creative.`,
},
{
btn: `Learn Now`,
},
];
const LearnBanner = () => {
return <Heading>The spectacle before us was indeed sublime.</Heading>;
return (
<Box
height={"100vh"}
backgroundImage={`url(${banner})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
display={"grid"}
placeContent={"center"}
sx={{
"@media (max-width: 1024px)": {
height: "70vh",
},
"@media (max-width: 600px)": {
height: "85vh",
},
}}
>
<Container
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"5rem"}
>
<Box width={"90%"}>
<Text
as={"h2"}
fontWeight={700}
fontSize={"60px"}
textTransform={"upperCase"}
color={"#DE858E"}
sx={{
"@media (max-width: 996px)": {
fontSize: "45px",
},
"@media (max-width: 600px)": {
fontSize: "28px",
marginBottom: "2rem",
},
"@media (max-width: 412px)": {
fontSize: "24px",
marginTop: "2rem",
},
}}
>
{BannerContent[0].heading1} <br />
<span
style={{
color: "#fff",
fontWeight: "600",
}}
>
{BannerContent[0].heading2}
</span>
</Text>
<Box marginTop={"1.5rem"} width={"80%"}>
<Text
color={"#fff"}
fontSize={"25px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 600px)": {
fontSize: "17px",
},
}}
>
{BannerContent[1].subheading}
</Text>
</Box>
</Box>
</Container>
<Container
maxW="container.xl"
textAlign={"left"}
marginTop={"3rem"}
paddingLeft={"5rem"}
sx={{
"@media (max-width: 375px)": {
marginTop: "1rem",
},
}}
>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"227px"}
height={"60px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"20px"}
zIndex={"1"}
overflow={"hidden"}
sx={{
"::before": {
content: '""',
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "65px",
height: "65px",
borderRadius: "50%",
transition: "0.35s linear",
zIndex: -1,
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
opacity: "0",
},
"&:hover::before": {
width: "100%",
height: "120%",
borderRadius: "0px",
opacity: "1",
},
}}
_hover={{
color: "#000",
border: "none",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Container>
</Box>
);
};
export default LearnBanner;

117
src/components/LearnPage/LearnDev.jsx Normal file
View File

@@ -0,0 +1,117 @@
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import LearnCard from "../Card/LearnCard";
import chainx from "../../assets/images/LearnCard2.png";
import ensurity from "../../assets/images/LearnCard4.png";
import exr from "../../assets/images/LearnCard5.png";
import finalo from "../../assets/images/LearnCard1.png";
import jupiter from "../../assets/images/LearnCard3.png";
// import { Badge } from "@chakra-ui/react";
const content = [
{
id: 1,
src: `${chainx}`,
alt: "ChainX",
text: `Building a Web3 infrastructure to support nonprofit communities, starting with YMCA`,
},
{
id: 2,
src: ensurity,
alt: "Ensurity",
text: `Building solutions for an easier transition from Web2 to Web3 for global enterprises with a focus on public sector companies.`,
},
{
id: 3,
src: exr,
alt: "EXR",
text: `A metaverse, XR, and Web3 entity offering solutions that infuse gamification and tokenomics.`,
},
{
id: 4,
src: finalo,
alt: "Finalo Education",
text: `Delivers KYC/DID solutions for banks, and financial institutions, a highly secure algorithm for quantum security and a password-less authentication process for secure scaling`,
},
{
id: 5,
src: jupiter,
alt: "Jupiter",
text: `Mobile-based wallet that generates and stores private keys on a mobile device`,
},
];
const Content = {
heading: `Enabling developers across a variety`,
span: `of applications`,
};
const LearnDev = () => {
return (
<Box
// height={"100vh"}
background={"#000"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Container maxW="container.xl">
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingLeft={"4rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"left"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "35px",
},
"@media (max-width: 375px)": {
fontSize: "28px",
},
}}
>
{Content.heading} <br />
{Content.span}
</Text>
</Container>
<Box
paddingLeft={"7rem"}
paddingBottom={"2rem"}
// height={"50vh"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "3rem",
},
}}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"25px"}
overflowX={"auto"}
overflowY={"auto"}
sx={{
"&::-webkit-scrollbar": {
width: "0px",
},
}}
>
{content.map((item) => (
<LearnCard
key={item.id}
src={item.src}
alt={item.alt}
text={item.text}
/>
))}
</Box>
</Box>
</Box>
);
};
export default LearnDev;

82
src/components/LearnPage/WhyRubix.jsx Normal file
View File

@@ -0,0 +1,82 @@
import { Box, Container, Text } from "@chakra-ui/react";
import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon,
} from "@chakra-ui/react";
import bg from "../../assets/images/whyRubix.png";
const WhyRubix = () => {
return (
<Box
backgroundImage={`url(${bg})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
>
<Container maxW={"container.xl"} padding={"0 5rem"}>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingLeft={"4rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"left"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "35px",
},
"@media (max-width: 375px)": {
fontSize: "28px",
},
}}
>
Why developers choose Rubix
</Text>
<Box>
<Accordion allowToggle>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
Section 1 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
Section 2 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</AccordionPanel>
</AccordionItem>
</Accordion>
</Box>
</Container>
</Box>
);
};
export default WhyRubix;

138
src/components/MobileComponent/MobileSubnet.jsx Normal file
View File

@@ -0,0 +1,138 @@
import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
import MobileSubnet2 from "./MobileSubnet2";
import MobileSubnet3 from "./MobileSubnet3";
const MobileSubnet = () => {
return (
<>
<Box backgroundColor={"#000"} padding={"1.5rem"}>
{/* Subnet1 */}
<Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
decentralised Auto Syncing subnets
</Text>
<Image
src={cube}
width={"140px"}
transform="translateY(-10%)"
animation="floatAnimation 2s infinite alternate"
sx={{
"@keyframes floatAnimation": {
"0%": {
transform: "translateY(0)",
},
"100%": {
transform: "translateY(-20px)",
},
},
}}
/>
</Box>
<Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
P2P
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Only L1 powering full mobile nodes</ListItem>
<ListItem>
Mobile nodes with full state data will settle P2P . Consensus
provided by nearby node validators.
</ListItem>
<ListItem>
High scalability, Partition tolerance and portability
</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Self Sovereign
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
Permissioned subnets with no oracles and <br /> intermediaries
</ListItem>
<ListItem>INo block space ransom</ListItem>
<ListItem>
Zero risk of transactions being blocked out of <br />
chain.
</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Easier
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Leverage own infrastructure for block space</ListItem>
<ListItem>Smart contracts in Rust , GoLang and C/C++</ListItem>
<ListItem>WASM compiler for smooth code migration</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
cheaper
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>No GAS fees</ListItem>
<ListItem>Incremental and modular infrastructure ask</ListItem>
<ListItem>
No expensive re training of development <br />
resources
</ListItem>
</UnorderedList>
</Box>
</Box>
</Box>
</Box>
<MobileSubnet2 />
<MobileSubnet3 />
</>
);
};
export default MobileSubnet;

132
src/components/MobileComponent/MobileSubnet2.jsx Normal file
View File

@@ -0,0 +1,132 @@
import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
const MobileSubnet2 = () => {
return (
<Box backgroundColor={"#000"} padding={"1.5rem"}>
{/* Subnet1 */}
<Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
With unmatched privacy and scalability
</Text>
<Image
src={cube}
width={"140px"}
transform="translateY(-10%)"
animation="floatAnimation 2s infinite alternate"
sx={{
"@keyframes floatAnimation": {
"0%": {
transform: "translateY(0)",
},
"100%": {
transform: "translateY(-20px)",
},
},
}}
/>
</Box>
<Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
P2P
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Only L1 powering full mobile nodes</ListItem>
<ListItem>
Mobile nodes with full state data will settle P2P . Consensus
provided by nearby node validators.
</ListItem>
<ListItem>
High scalability, Partition tolerance and portability
</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Self Sovereign
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
Permissioned subnets with no oracles and <br /> intermediaries
</ListItem>
<ListItem>INo block space ransom</ListItem>
<ListItem>
Zero risk of transactions being blocked out of <br />
chain.
</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Easier
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Leverage own infrastructure for block space</ListItem>
<ListItem>Smart contracts in Rust , GoLang and C/C++</ListItem>
<ListItem>WASM compiler for smooth code migration</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
cheaper
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>No GAS fees</ListItem>
<ListItem>Incremental and modular infrastructure ask</ListItem>
<ListItem>
No expensive re training of development <br />
resources
</ListItem>
</UnorderedList>
</Box>
</Box>
</Box>
</Box>
);
};
export default MobileSubnet2;

151
src/components/MobileComponent/MobileSubnet3.jsx Normal file
View File

@@ -0,0 +1,151 @@
import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
import stack from "../../assets/images/stacksmall.png";
const MobileSubnet3 = () => {
return (
<Box backgroundColor={"#000"} padding={"1.5rem"}>
{/* Subnet1 */}
<Box>
<Box
display={"flex"}
alignItems={"center"}
position={"relative"}
justifyContent={"space-between"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
All In One Composable Stack
</Text>
<Image
src={stack}
// position={"absolute"}
// right={"0"}
// top={"0"}
// marginLeft={"auto"}
// marginRight={"auto"}
width={"140px"}
transform="translateY(-10%)"
animation="floatAnimation 2s infinite alternate"
zIndex={"0"}
sx={{
"@keyframes floatAnimation": {
"0%": {
transform: "translateY(0)",
},
"100%": {
transform: "translateY(-20px)",
},
},
}}
/>
</Box>
<Box>
<Box>
<Text
as={"h2"}
paddingTop={"1rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Single Comprehensive Stack :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
Full Mobile node SDK, Smart Contracts, DIDs, Secondary tokens (
FTs and NFTs) all in one place.
</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
High Partition Tolerance :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
Issues in one shard wont affect other shards performance
</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Fully Deterministic :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Apps can bring Own Block space( BYOB)</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Unique token/object based architecture :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Build unlimited FTs and NFTs all at L1!!</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Green by the design :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
100,000 Rubix transactions consume &lt; 10 kWh &lt; 100000 Visa
transactions
</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
>
Fixed, hard capped supply of RBT at 51.4 Million
</Text>
</Box>
</Box>
</Box>
</Box>
);
};
export default MobileSubnet3;

149
src/components/MobileMenu/MobileMenu.jsx Normal file
View File

@@ -0,0 +1,149 @@
import { HamburgerIcon } from "@chakra-ui/icons";
import {
Menu,
MenuButton,
MenuList,
MenuItem,
// MenuItemOption,
// MenuGroup,
// MenuOptionGroup,
// MenuDivider,
IconButton,
} from "@chakra-ui/react";
import { Box, Image } from "@chakra-ui/react";
import { Link, useLocation } from "react-router-dom";
// import { Button } from "@chakra-ui/react";
// import { HashLink } from "react-router-hash-link";
import logo from "../../assets/images/rubix.png";
import { useEffect, useState } from "react";
export const MobileMenu = () => {
const [isScrolled, setIsScrolled] = useState(false);
const location = useLocation();
useEffect(() => {
const handleScroll = () => {
const scrollPosition = window.scrollY;
setIsScrolled(scrollPosition > 0);
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
const active = {
color: "#F46E15",
fontFamily: "Poppins",
fontSize: "14px",
fontStyle: "normal",
fontWeight: "500",
lineHeight: "normal",
marginBottom: "1rem",
};
const linkStyle = {
color: "#070707",
fontFamily: "Poppins",
fontSize: "14px",
fontStyle: "normal",
fontWeight: "500",
lineHeight: "normal",
marginBottom: "1rem",
};
return (
<Box
position={"fixed"}
top={"0px"}
zIndex={999}
backgroundColor={isScrolled ? "#4f2878" : "transparent"}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
width={"100%"}
padding={"2rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 375px)": {
padding: "1rem",
alignItems: "baseline",
},
}}
>
<Box display={"flex"} alignItems={"center"}>
<Link to="/" style={linkStyle}>
<Box
display={"flex"}
alignItems={"baseline"}
justifyContent={"center"}
>
<Image src={logo} width={"160px"} />
</Box>
</Link>
</Box>
<Menu backgroundColor={"#fff"}>
<MenuButton
as={IconButton}
aria-label="Options"
icon={<HamburgerIcon />}
variant="outline"
backgroundColor={"#fff"}
/>
<MenuList>
{/* <MenuItem paddingLeft={"0px"}></MenuItem> */}
<MenuItem
justifyContent={"center"}
sx={{
"&:focus": {
backgroundColor: "#fff",
},
}}
>
<Link
to="/About"
// onClick={() => scrollToSection("about")}
style={location.pathname === "/About" ? active : linkStyle}
>
About us
</Link>
</MenuItem>
<MenuItem justifyContent={"center"}>
<Link
to="/Services"
smooth
// onClick={() => scrollToSection("offer")}
style={location.pathname === "/Services" ? active : linkStyle}
>
What we offer
</Link>
</MenuItem>
<MenuItem justifyContent={"center"}>
{" "}
<Link
to="/Whyus"
smooth
// onClick={() => scrollToSection("whyUs")}
style={location.pathname === "/Whyus" ? active : linkStyle}
>
Why Us
</Link>
</MenuItem>
<MenuItem justifyContent={"center"}>
{" "}
<Link
to="/whatWeDo"
smooth
// onClick={() => scrollToSection("weDo")}
style={location.pathname === "/whatWeDo" ? active : linkStyle}
>
What we do
</Link>
</MenuItem>
</MenuList>
</Menu>
</Box>
);
};

118
src/components/NavBar/NavBar.jsx
View File

@@ -1,48 +1,104 @@
/* eslint-disable no-unused-vars */
import { Box } from "@chakra-ui/react";
import { Box, Image } from "@chakra-ui/react";
import { Outlet, Link, useLocation } from "react-router-dom";
import { useEffect, useState } from "react";
import logo from "../../assets/images/rubix.png";
import { MobileMenu } from "../MobileMenu/MobileMenu";
const NavBar = () => {
const [isScrolled, setIsScrolled] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const location = useLocation();
useEffect(() => {
const handleScroll = () => {
const scrollPosition = window.scrollY;
setIsScrolled(scrollPosition > 0);
};
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener("scroll", handleScroll);
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleResize);
};
}, []);
const isMobile = windowWidth <= 996;
return (
<>
<Box
display="flex"
color={"#fff"}
justifyContent={"space-around"}
alignItems={"center"}
backgroundColor={"transparent"}
boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
position={"fixed"}
zIndex={"999"}
width={"100%"}
top={"0px"}
padding={"5px"}
>
<Link to="/">
<Box
display={"flex"}
alignItems={"baseline"}
justifyContent={"center"}
>
<h1>Rubix</h1>
</Box>
</Link>
{!isMobile ? (
<Box
display={"flex"}
gap={"49px"}
display="flex"
color={"#fff"}
justifyContent={"space-around"}
alignItems={"center"}
backgroundColor={
isScrolled
? // ? "linear-gradient(to right, #331e8c, #7b2789, #a73f85, #c76086, #de858e);"
"#4f2878"
: "transparent"
}
boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
position={"fixed"}
zIndex={"999"}
width={"100%"}
top={"0px"}
padding={"2rem"}
sx={{
"@media (max-width: 1024px)": {
gap: "22px",
"@media (max-width: 996px)": {
justifyContent: "space-between",
},
"@media (max-width: 375px)": {
padding: "1rem",
},
}}
>
<Link to="/">Homepage</Link>
<Link to="/LearnPage">Learn</Link>
<Link to="/">
<Box
display={"flex"}
alignItems={"baseline"}
justifyContent={"center"}
>
<Image
src={logo}
width={"160px"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 375px)": {
width: "100px",
},
}}
/>
</Box>
</Link>
<Box
display={"flex"}
gap={"49px"}
alignItems={"center"}
sx={{
"@media (max-width: 1024px)": {
gap: "22px",
},
}}
>
<Link to="/LearnPage">LEARN</Link>
<Link to="/">BUILD</Link>
<Link to="/">USE CASES</Link>
<Link to="/">COMMUNITY</Link>
<Link to="/">FOUNDATION</Link>
<Link to="/">CONTACT US</Link>
</Box>
</Box>
</Box>
) : (
<MobileMenu />
)}
<Outlet />
</>
);

1
src/components/SubnetsComponent/Component1.jsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {

103
src/components/SubnetsComponent/SubnetPage2.jsx Normal file
View File

@@ -0,0 +1,103 @@
/* eslint-disable react/prop-types */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
const SubnetPage2 = ({ click }) => {
return (
<Box backgroundColor={"#000"} height={"auto"} padding={"5rem"}>
<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"}
>
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"}
>
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>
</Box>
</Container>
</Box>
);
};
export default SubnetPage2;

20
src/pages/HomePage.jsx
View File

@@ -1,3 +1,4 @@
import { useEffect, useState } from "react";
import Footer from "../components/Footer/Footer";
import Client from "../components/HomePage/Client";
import HomeBanner from "../components/HomePage/HomeBanner";
@@ -5,12 +6,29 @@ import Resources from "../components/HomePage/Resources";
import Stats from "../components/HomePage/Stats";
import Subnets from "../components/HomePage/Subnets";
import WhitePaper from "../components/HomePage/WhitePaper";
import MobileSubnet from "../components/MobileComponent/MobileSubnet";
const HomePage = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
const isMobile = windowWidth <= 996;
return (
<>
<HomeBanner />
<Subnets />
{!isMobile ? <Subnets /> : <MobileSubnet />}
<Stats />
<WhitePaper />
<Client />

10
src/pages/LearnPage.jsx
View File

@@ -1,7 +1,15 @@
import LearnBanner from "../components/LearnPage/LearnBanner";
import LearnDev from "../components/LearnPage/LearnDev";
import WhyRubix from "../components/LearnPage/WhyRubix";
const LearnPage = () => {
return <LearnBanner />;
return (
<>
<LearnBanner />
<LearnDev />
<WhyRubix />
</>
);
};
export default LearnPage;