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

Rubix Home page development

Browse Source
This commit is contained in:
rockyeverlast
2024-03-22 15:02:23 +05:30
commit f9fd079bc0
53 changed files with 6863 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Carousel/Carousel.jsx Normal file
View File

@@ -0,0 +1,15 @@
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
const Carousel = () => {
return (
<Swiper spaceBetween={50} slidesPerView={3}>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
);
};
export default Carousel;

50
src/components/HomePage/Client.jsx Normal file
View File

@@ -0,0 +1,50 @@
import { Box, Container, Text, Image } from "@chakra-ui/react";
import client1 from "../../assets/images/client1.png";
const Client = () => {
const Content = {
heading: `Look Who's Building on Rubix`,
};
return (
<Box
height={"100vh"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
>
{Content.heading}
</Text>
<Container
maxW="container.lg"
display={"grid"}
placeContent={"center"}
height={"50vh"}
>
<Box
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
flexWrap={"wrap"}
>
<Image src={client1} />
<Image src={client1} />
<Image src={client1} />
<Image src={client1} />
<Image src={client1} />
</Box>
</Container>
</Box>
);
};
export default Client;

129
src/components/HomePage/HomeBanner.jsx Normal file
View File

@@ -0,0 +1,129 @@
import { Box, Button, Text } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import banner from "../../assets/images/bannerBg.gif";
const BannerContent = [
{
heading1: `Unlimited Objectchains`,
heading2: ` Scaling in Parallel`,
},
{
subheading: `Looking for a public L1 blockchain to quickly launch Tokenized,
Scalable Web 3 initiatives with 100% data sovereignty?`,
},
{
btn: `Build Now`,
},
];
const HomeBanner = () => {
return (
<Box
height={"100vh"}
backgroundImage={`url(${banner})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
display={"grid"}
placeContent={"center"}
>
<Container maxW="container.lg" textAlign={"center"}>
{BannerContent.map((item, index) => {
return (
<Box key={index}>
<Text
as={"h2"}
fontWeight={700}
fontSize={"60px"}
textTransform={"upperCase"}
color={"#DE858E"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
marginBottom: "2rem",
},
}}
>
{item.heading1}
<span
style={{
color: "#fff",
fontWeight: "600",
}}
>
{item.heading2}
</span>
</Text>
<Container maxW="container.lg">
<Text
color={"#fff"}
fontSize={"25px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "17px",
},
}}
>
{item.subheading}
</Text>
</Container>
</Box>
);
})}
</Container>
<Container maxW="container.md" textAlign={"center"} marginTop={"3rem"}>
{BannerContent[2] && (
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
color={"#fff"}
width={"227px"}
height={"60px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"20px"}
// sx={{
// "::before": {
// content: '""',
// position: "absolute",
// top: "50%",
// left: "50%",
// transform: "translate(-50%, -50%)",
// width: "0",
// height: "0",
// borderRadius: "50%",
// bgGradient:
// "radial-gradient(circle, #d4dae0, #b7bccd, #a49db6, #987c99, #8e5c74)",
// transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
// },
// "&:hover::before": {
// width: "100%",
// height: "100%",
// zIndex: "-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",
}}
>
{BannerContent[2].btn}
</Button>
)}
</Container>
</Box>
);
};
export default HomeBanner;

37
src/components/HomePage/Resources.jsx Normal file
View File

@@ -0,0 +1,37 @@
import { Box, Container, Text, Image } from "@chakra-ui/react";
const Content = {
heading: `Resources and Latest Happenings`,
};
const Resources = () => {
return (
<Box
height={"100vh"}
background={"#000"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
>
{Content.heading}
</Text>
<Container
maxW="container.lg"
display={"grid"}
placeContent={"center"}
height={"50vh"}
></Container>
</Box>
);
};
export default Resources;

163
src/components/HomePage/Stats.jsx Normal file
View File

@@ -0,0 +1,163 @@
import { Box, Container, Text } from "@chakra-ui/react";
import { useInView } from "react-intersection-observer";
import CountUp from "react-countup";
import banner from "../../assets/images/Statsbanner.png";
const StatsContent = {
heading: `Key Statistics`,
};
const Stats = () => {
const { ref, inView } = useInView({
threshold: 0.3,
triggerOnce: false,
});
return (
<Box
height={"80vh"}
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
},
}}
>
{StatsContent.heading}
</Text>
<Container
maxW="container.lg"
display={"grid"}
placeContent={"center"}
height={"50vh"}
>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"8rem"}
marginBottom={"6rem"}
>
<Box
color={"#fff"}
ref={ref}
textAlign={"center"}
position={"relative"}
_before={{
content: "''",
position: "absolute",
height: "100%",
right: "-70px",
borderRight: "2px solid #EFEFEF",
zIndex: "2",
}}
>
{inView && (
<CountUp
start={0}
end={51400000}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>Total Capped Supply</Text>
</Box>
<Box
color={"#fff"}
ref={ref}
textAlign={"center"}
position={"relative"}
_before={{
content: "''",
position: "absolute",
height: "100%",
right: "-70px",
borderRight: "2px solid #EFEFEF",
zIndex: "2",
}}
>
{inView && (
<CountUp
start={0}
end={10247786}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>Digital Asset Tools mined</Text>
</Box>
<Box color={"#fff"} ref={ref} textAlign={"center"}>
{inView && (
<CountUp
start={0}
end={174015}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>Live Nodes</Text>
</Box>
</Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"8rem"}
>
<Box
color={"#fff"}
ref={ref}
textAlign={"center"}
position={"relative"}
_before={{
content: "''",
position: "absolute",
height: "100%",
right: "-70px",
borderRight: "2px solid #EFEFEF",
zIndex: "2",
}}
>
{inView && (
<CountUp
start={0}
end={51400000}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>
Circulating Supply at level 4
</Text>
</Box>
<Box color={"#fff"} ref={ref} textAlign={"center"}>
{inView && (
<CountUp
start={0}
end={10247786}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
/>
)}
<Text textTransform={"uppercase"}>Transacitons</Text>
</Box>
</Box>
</Container>
</Box>
);
};
export default Stats;

112
src/components/HomePage/Subnets.jsx Normal file
View File

@@ -0,0 +1,112 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import Component1 from "../SubnetsComponent/Component1";
import Component2 from "../SubnetsComponent/Component2";
import cube from "../../assets/images/cube.png";
import Component3 from "../SubnetsComponent/Component3";
import Component4 from "../SubnetsComponent/Component4";
const SubnetContent = {
heading: `decentralised Auto Syncing subnets`,
};
const Subnets = () => {
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>
<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"}
/>
<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>
);
};
export default Subnets;

73
src/components/HomePage/WhitePaper.jsx Normal file
View File

@@ -0,0 +1,73 @@
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/whitePaperBg.png";
const SectionContent = {
heading: `The Rubix White paper`,
subContent: `Discover the endless potential of how the Rubix protocol can be used.`,
btnContent: `Click to Download`,
};
const WhitePaper = () => {
return (
<Box
height={"50vh"}
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
},
}}
>
{SectionContent.heading}
</Text>
<Container
maxW="container.sm"
textAlign={"center"}
display={"grid"}
placeContent={"center"}
height={"30vh"}
paddingBottom={"3rem"}
>
<Text
color={"#E4E4E4"}
fontSize={"22px"}
marginBottom={"2rem"}
fontFamily={"Poppins"}
>
{SectionContent.subContent}
</Text>
<Button
fontSize={"20px"}
minW={"284px"}
minH={"60px"}
fontFamily={"Poppins"}
backgroundColor={"transparent"}
border={"1px solid #fff"}
color={"#fff"}
fontWeight={"400"}
margin={"0 auto"}
_hover={{
backgroundColor: "transparent",
}}
>
{SectionContent.btnContent}
</Button>
</Container>
</Box>
);
};
export default WhitePaper;

7
src/components/LearnPage/LearnBanner.jsx Normal file
View File

@@ -0,0 +1,7 @@
import { Heading } from "@chakra-ui/react";
const LearnBanner = () => {
return <Heading>The spectacle before us was indeed sublime.</Heading>;
};
export default LearnBanner;

51
src/components/NavBar/NavBar.jsx Normal file
View File

@@ -0,0 +1,51 @@
/* eslint-disable no-unused-vars */
import { Box } from "@chakra-ui/react";
import { Outlet, Link, useLocation } from "react-router-dom";
const NavBar = () => {
const location = useLocation();
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>
<Box
display={"flex"}
gap={"49px"}
alignItems={"center"}
sx={{
"@media (max-width: 1024px)": {
gap: "22px",
},
}}
>
<Link to="/">Homepage</Link>
<Link to="/LearnPage">Learn</Link>
</Box>
</Box>
<Outlet />
</>
);
};
export default NavBar;

60
src/components/SubnetsComponent/Component1.jsx Normal file
View File

@@ -0,0 +1,60 @@
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import vector1 from "../../assets/images/Vector1.png";
const Component1 = () => {
return (
<>
<Box display={"flex"} position={"absolute"} top={"-70px"}>
<Button
position={"relative"}
background={"transparent"}
width={"165px"}
height={"57px"}
borderRadius={"28.5px"}
color={"#fff"}
border={"1px solid #A5A5A5"}
_after={{
content: "''",
position: "absolute",
backgroundImage: `url(${vector1})`,
backgroundRepeat: "no-repeat",
width: "383px",
height: "100%",
left: "165px",
top: "28px",
}}
_hover={{
background: "transparent",
width: "165px",
height: "57px",
borderRadius: "28.5px",
color: "#fff",
border: "1px solid #A5A5A5",
}}
>
P2P
</Button>
</Box>
<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>
</>
);
};
export default Component1;

57
src/components/SubnetsComponent/Component2.jsx Normal file
View File

@@ -0,0 +1,57 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import vector2 from "../../assets/images/Vector2.png";
const Component2 = () => {
return (
<>
<Box display={"flex"} position={"absolute"} top={"-70px"}>
<Button
position={"relative"}
background={"transparent"}
textTransform={"uppercase"}
width={"165px"}
height={"57px"}
borderRadius={"28.5px"}
color={"#fff"}
border={"1px solid #A5A5A5"}
_after={{
content: "''",
position: "absolute",
backgroundImage: `url(${vector2})`,
backgroundRepeat: "no-repeat",
width: "340px",
height: "100%",
left: "165px",
top: "-10px",
}}
_hover={{
background: "transparent",
width: "165px",
height: "57px",
borderRadius: "28.5px",
color: "#fff",
border: "1px solid #A5A5A5",
}}
>
Easier
</Button>
</Box>
<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>
</>
);
};
export default Component2;

73
src/components/SubnetsComponent/Component3.jsx Normal file
View File

@@ -0,0 +1,73 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import vector3 from "../../assets/images/Vector3.png";
const Component3 = () => {
return (
<>
<Box
display={"flex"}
position={"absolute"}
top={"-70px"}
justifyContent={"flex-end"}
width={"100%"}
>
<Button
position={"relative"}
background={"transparent"}
textTransform={"uppercase"}
width={"165px"}
height={"57px"}
borderRadius={"28.5px"}
color={"#fff"}
border={"1px solid #A5A5A5"}
_before={{
content: "''",
position: "absolute",
backgroundImage: `url(${vector3})`,
backgroundRepeat: "no-repeat",
width: "155px",
height: "100px",
left: "-155px",
top: "-40px",
}}
_hover={{
background: "transparent",
width: "165px",
height: "57px",
borderRadius: "28.5px",
color: "#fff",
border: "1px solid #A5A5A5",
}}
>
cheaper
</Button>
</Box>
<Box
display={"flex"}
flexDirection={"column"}
alignItems={"end"}
width={"552px"}
>
<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>
</>
);
};
export default Component3;

75
src/components/SubnetsComponent/Component4.jsx Normal file
View File

@@ -0,0 +1,75 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import vector4 from "../../assets/images/Vector4.png";
const Component4 = () => {
return (
<>
<Box
display={"flex"}
position={"absolute"}
top={"-70px"}
justifyContent={"flex-end"}
width={"100%"}
>
<Button
position={"relative"}
background={"transparent"}
width={"165px"}
height={"57px"}
borderRadius={"28.5px"}
color={"#fff"}
border={"1px solid #A5A5A5"}
textTransform={"uppercase"}
_after={{
content: "''",
position: "absolute",
backgroundImage: `url(${vector4})`,
backgroundRepeat: "no-repeat",
width: "155px",
height: "100%",
left: "-155px",
top: "28px",
}}
_hover={{
background: "transparent",
width: "165px",
height: "57px",
borderRadius: "28.5px",
color: "#fff",
border: "1px solid #A5A5A5",
}}
>
Self Sovereign
</Button>
</Box>
<Box
display={"flex"}
flexDirection={"column"}
alignItems={"end"}
width={"565px"}
>
<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>
</>
);
};
export default Component4;

18
src/components/Theme/Fonts.jsx Normal file
View File

@@ -0,0 +1,18 @@
import { Global } from "@emotion/react";
const Fonts = () => (
<Global
styles={`
@font-face {
font-family: 'Mona-Sans';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url('../../assets/fonts/Mona-Sans-Regular.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
`}
/>
);
export default Fonts;

19
src/components/Theme/Theme.jsx Normal file
View File

@@ -0,0 +1,19 @@
import { extendTheme } from "@chakra-ui/react";
import "@fontsource/poppins";
const theme = extendTheme({
fonts: {
body: `'Mona-Sans', sans-serif`,
p: `Poppins`,
},
styles: {
global: () => ({
body: {
// marginTop: { lg: "35px", md: "35px", base: "35px" },
boxSizing: "border-box",
},
}),
},
});
export default theme;