mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-29 04:15:50 +00:00
Rubix Home page development
This commit is contained in:
rockyeverlast
50
src/components/HomePage/Client.jsx
Normal file
50
src/components/HomePage/Client.jsx
Normal 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
129
src/components/HomePage/HomeBanner.jsx
Normal 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
37
src/components/HomePage/Resources.jsx
Normal 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
163
src/components/HomePage/Stats.jsx
Normal 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
112
src/components/HomePage/Subnets.jsx
Normal 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
73
src/components/HomePage/WhitePaper.jsx
Normal 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;
|
||||
Reference in New Issue
Block a user