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

Build page development

Browse Source
This commit is contained in:
rockyeverlast
2024-04-02 15:22:12 +05:30
committed by satyam70288
parent 3657360b48
commit 7daae62639
10 changed files with 513 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@@ -7,12 +7,14 @@ import {
import HomePage from "./pages/HomePage";
import NavBar from "./components/NavBar/NavBar";
import LearnPage from "./pages/LearnPage";
import BuildPage from "./pages/BuildPage";
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<NavBar />}>
<Route index element={<HomePage />} />
<Route path="LearnPage" element={<LearnPage />} />
<Route path="BuildPage" element={<BuildPage />} />
</Route>
)
);

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 813 KiB

171
src/components/BuildPage/BuildBanner.jsx Normal file
View File

@@ -0,0 +1,171 @@
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/BuildBanner.png";
const BannerContent = [
{
heading1: `Build Next-Gen dApps`,
heading2: `with Rubix`,
},
{
subheading: `Whether you are developing a Web3 app or expanding your Web2 app to incorporate Web3 features,
building with Rubix is simple, fast, and easy.`,
},
{
btn: `Build Now`,
},
];
const BuildBanner = () => {
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"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
},
}}
>
<Box
width={"90%"}
sx={{
"@media (max-width: 435px)": {
width: "100%",
},
}}
>
<Text
as={"h2"}
fontWeight={700}
fontSize={"60px"}
textTransform={"upperCase"}
color={"#DE858E"}
sx={{
"@media (max-width: 996px)": {
fontSize: "35px",
},
"@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: 435px)": {
paddingLeft: "2rem",
},
"@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 BuildBanner;

177
src/components/BuildPage/WhyBuild.jsx Normal file
View File

@@ -0,0 +1,177 @@
import { Box, Container, Image, Text } from "@chakra-ui/react";
import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon,
} from "@chakra-ui/react";
import bg from "../../assets/images/whyRubix.png";
import cube from "../../assets/images/cube.png";
const accordion = [
{
id: 1,
title: `Unlimited concurrent transactions`,
content: `The Rubix network supports millions of concurrent transactions
by eliminating the need to queue transactions for the
blockchain.`,
},
{
id: 2,
title: `Scalability`,
content: `The Rubix network supports millions of concurrent transactions
by eliminating the need to queue transactions for the
blockchain.`,
},
{
id: 3,
title: `Truly decentralised, secure and private`,
content: `The Rubix network supports millions of concurrent transactions
by eliminating the need to queue transactions for the
blockchain.`,
},
{
id: 4,
title: `ROI friendly`,
content: `The Rubix network supports millions of concurrent transactions
by eliminating the need to queue transactions for the
blockchain.`,
},
];
const WhyBuild = () => {
return (
<Box
backgroundImage={`url(${bg})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
>
<Container
maxW={"container.xl"}
padding={"5rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width: 435px)": {},
}}
>
<Text
as={"h2"}
// paddingTop={"3rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"left"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "35px",
},
"@media (max-width: 475px)": {
fontSize: "26px",
textAlign: "center",
},
}}
>
Why developers choose Rubix
</Text>
<Box
display={"flex"}
alignItems={"flex-start"}
justifyContent={"space-between"}
gap={"2rem"}
sx={{
"@media (max-width: 435px)": {
flexDirection: "column-reverse",
alignItems: "center",
},
"@media (max-width: 375px)": {},
}}
>
<Box
width={"70%"}
sx={{
"@media (max-width: 435px)": {
width: "100%",
},
"@media (max-width: 375px)": {},
}}
>
<Accordion allowToggle defaultIndex={[0]}>
{accordion.map((accord) => (
<>
<AccordionItem
borderTop={"none"}
borderBottom={"1px solid white"}
marginBottom={"1rem"}
padding={"1rem 0"}
key={accord.id}
>
<h2>
<AccordionButton outline={"none"} paddingLeft={"0px"}>
<Box
as="span"
flex="1"
textAlign="left"
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"30px"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {},
}}
>
{accord.title}
</Box>
<AccordionIcon color={"#fff"} fontSize={"40px"} />
</AccordionButton>
</h2>
<AccordionPanel
pb={4}
fontFamily={"Poppins"}
fontWeight={"400"}
color={"#E8E8E8"}
width={"80%"}
fontSize={"21px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {
width: "100%",
},
"@media (max-width: 435px)": {
fontSize: "18px",
},
}}
>
{accord.content}
</AccordionPanel>
</AccordionItem>
</>
))}
</Accordion>
</Box>
<Box>
<Image
src={cube}
width={"550px"}
sx={{
"@media (max-width: 1024px)": {
width: "260px",
},
"@media (max-width: 435px)": {},
}}
/>
</Box>
</Box>
</Container>
</Box>
);
};
export default WhyBuild;

22
src/components/Card/HomeCard.jsx
View File

@@ -3,7 +3,7 @@ import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import cardimg from "../../assets/images/CardImg.png";
import { Badge } from "@chakra-ui/react";
const HomeCard = () => {
const HomeCard = ({ key, date, text }) => {
return (
<Box
backgroundImage={
@@ -12,7 +12,13 @@ const HomeCard = () => {
padding={"1px"}
borderRadius={"10px"}
>
<Box width={"502px"} background={"#151419"} borderRadius={"10px"}>
<Box
width={"502px"}
background={"#151419"}
borderRadius={"10px"}
minHeight={"502px"}
key={key}
>
<Image src={cardimg} />
<Box padding={"1rem"}>
<Badge
@@ -26,10 +32,16 @@ const HomeCard = () => {
</Badge>
<Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
Published: March 13, 2020
{date}
</Text>
<Text color={"#fff"} fontSize={"24px"} marginBottom={"20px"}>
Multichain over Blockchain — A reality check on security threat
<Text
color={"#fff"}
fontSize={"24px"}
marginBottom={"20px"}
minHeight={"73px"}
maxWidth={"460px"}
>
{text}
</Text>
<Box
display={"flex"}

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

@@ -1,6 +1,7 @@
import { Box, Button, Text } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import banner from "../../assets/images/bannerBg.gif";
import { ScaleFade } from "@chakra-ui/react";
const BannerContent = [
{
@@ -27,6 +28,9 @@ const HomeBanner = () => {
placeContent={"center"}
position="relative"
zIndex={"2"}
ScaleFade
initialScale={0.9}
in={true}
sx={{
"&::after": {
content: '""',

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

@@ -2,6 +2,24 @@
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import HomeCard from "../Card/HomeCard";
const content = [
{
id: 1,
date: `Published: March 13, 2020`,
text: `Multichain over Blockchain — A reality check on security threat`,
},
{
id: 2,
date: `Published: March 13, 2020`,
text: `Financial Times Crypto & Digital Assets Summit Panel`,
},
{
id: 3,
date: `Published: March 13, 2020`,
text: `Enterprise blockchains on a Public Chain!`,
},
];
const Content = {
heading: `Resources and Latest Happenings`,
};
@@ -55,8 +73,8 @@ const Resources = () => {
},
}}
>
{Array.from({ length: 4 }).map((_, index) => (
<HomeCard key={index} />
{content.map((item) => (
<HomeCard key={item.id} date={item.date} text={item.text} />
))}
</Box>
<Box textAlign={"center"} marginTop={"4rem"}>

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

@@ -34,93 +34,111 @@ const NavBar = () => {
return (
<>
{!isMobile ? (
<Box
display="flex"
color={"#fff"}
justifyContent={"space-around"}
alignItems={"center"}
background={
isScrolled ? "#0B0B27" : "transparent"
// "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
}
boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
position={"fixed"}
zIndex={"999"}
width={"100%"}
top={"0px"}
padding={"2rem 0rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-between",
},
"@media (max-width: 375px)": {
padding: "1rem",
},
}}
>
<Link to="/">
<Box
display={"flex"}
alignItems={"baseline"}
justifyContent={"center"}
>
<Image
src={logo}
width={"160px"}
sx={{
"@media (max-width: 1024px)": {
width: "100px",
},
"@media (max-width: 375px)": {
width: "100px",
},
}}
/>
</Box>
</Link>
<>
<Box
display={"flex"}
gap={"49px"}
backgroundColor={"#141315"}
position={"fixed"}
zIndex={"9999"}
width={"100%"}
textAlign={"right"}
>
<Box marginRight={"6%"}>
<Link to="/" style={{ color: "#fff", marginRight: "2.5rem" }}>
WALLET
</Link>
<Link to="/" style={{ color: "#fff", marginRight: "2.5rem" }}>
EXPLORER
</Link>
</Box>
</Box>
<Box
display="flex"
color={"#fff"}
justifyContent={"space-around"}
alignItems={"center"}
background={
isScrolled ? "#0B0B27" : "transparent"
// "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
}
boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
position={"fixed"}
zIndex={"999"}
width={"100%"}
top={"0px"}
padding={"2rem 0rem"}
sx={{
"@media (max-width: 1024px)": {
gap: "22px",
"@media (max-width: 996px)": {
justifyContent: "space-between",
},
"@media (max-width: 375px)": {
padding: "1rem",
},
}}
>
<Link to="/LearnPage">LEARN</Link>
<Link to="/">BUILD</Link>
<Link to="/">USE CASES</Link>
<Link to="/">COMMUNITY</Link>
<Link to="/">FOUNDATION</Link>
<Link
to="/"
style={{
display: "flex",
alignItems: "center",
gap: "5px",
}}
onMouseEnter={(e) => {
const arrowRight = document.querySelector(".arrow");
arrowRight.style.transform = "rotate(45deg)";
}}
onMouseLeave={(e) => {
const arrowRight = document.querySelector(".arrow");
arrowRight.style.transform = "none";
<Link to="/">
<Box
display={"flex"}
alignItems={"baseline"}
justifyContent={"center"}
>
<Image
src={logo}
width={"160px"}
sx={{
"@media (max-width: 1024px)": {
width: "100px",
},
"@media (max-width: 375px)": {
width: "100px",
},
}}
/>
</Box>
</Link>
<Box
display={"flex"}
gap={"49px"}
alignItems={"center"}
sx={{
"@media (max-width: 1024px)": {
gap: "22px",
},
}}
>
CONTACT US
<Image
src={arrow}
className="arrow"
<Link to="/LearnPage">LEARN</Link>
<Link to="/BuildPage">BUILD</Link>
<Link to="/">USE CASES</Link>
<Link to="/">COMMUNITY</Link>
<Link to="/">FOUNDATION</Link>
<Link
to="/"
style={{
transition: "transform 0.3s",
display: "flex",
alignItems: "center",
gap: "5px",
}}
/>
</Link>
onMouseEnter={(e) => {
const arrowRight = document.querySelector(".arrow");
arrowRight.style.transform = "rotate(45deg)";
}}
onMouseLeave={(e) => {
const arrowRight = document.querySelector(".arrow");
arrowRight.style.transform = "none";
}}
>
CONTACT US
<Image
src={arrow}
className="arrow"
style={{
transition: "transform 0.3s",
}}
/>
</Link>
</Box>
</Box>
</Box>
</>
) : (
<MobileMenu />
)}

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

@@ -1,5 +1,4 @@
import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { useEffect, useRef, useState } from "react";
import { Component1 } from "./Component1";
@@ -7,7 +6,8 @@ import { Component2 } from "./Component2";
import { Component3 } from "./Component3";
import { Component4 } from "./Component4";
// import { SubnetPage2 } from "./SubnetPage2";
import stack from "../../assets/images/stack.png";
import cube from "../../assets/images/cube.png";
import stack from "../../assets/images/stackNew.webp";
import { useInView, motion } from "framer-motion";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
@@ -181,9 +181,9 @@ export const NewSubnetComp = ({ showSubnet }) => {
01. Decentralisation
</Text>
<Text fontSize={"18px"}>
Rubix Decentralised Identity(DID) issued at L1 is the
Rubix Decentralised Identity( DID) issued at L1 is the
foundation for building digital ownership enhancing
applications
applications.
</Text>
</Box>
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
@@ -193,12 +193,14 @@ export const NewSubnetComp = ({ showSubnet }) => {
color={"#fff"}
marginBottom={"10px"}
>
01. Decentralisation
02. Ultra Scalability
</Text>
<Text fontSize={"18px"}>
Rubix Decentralised Identity(DID) issued at L1 is the
foundation for building digital ownership enhancing
applications
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"}>
@@ -208,12 +210,12 @@ export const NewSubnetComp = ({ showSubnet }) => {
color={"#fff"}
marginBottom={"10px"}
>
01. Decentralisation
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
Ideal for building automated, tokenized , consent-based
data/insight exchange apps which require secure,
decentralised identity-based encryption 
</Text>
</Box>
</Box>

14
src/pages/BuildPage.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React from "react";
import BuildBanner from "../components/BuildPage/BuildBanner";
import WhyBuild from "../components/BuildPage/WhyBuild";
const BuildPage = () => {
return (
<>
<BuildBanner />
<WhyBuild />
</>
);
};
export default BuildPage;