mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-29 03:05:50 +00:00
Build Page and form page development
This commit is contained in:
rockyeverlast
216
src/components/BuildPage/Connect.jsx
Normal file
216
src/components/BuildPage/Connect.jsx
Normal file
@@ -0,0 +1,216 @@
|
||||
/* eslint-disable no-undef */
|
||||
/* eslint-disable no-unused-vars */
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
Container,
|
||||
Heading,
|
||||
Image,
|
||||
SimpleGrid,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import banner from "../../assets/images/Statsbanner.png";
|
||||
import tel from "../../assets/images/tel.png";
|
||||
import red from "../../assets/images/red.png";
|
||||
import git from "../../assets/images/git.png";
|
||||
import twitch from "../../assets/images/twitch.png";
|
||||
import twit from "../../assets/images/twit.png";
|
||||
import face from "../../assets/images/face.png";
|
||||
import lin from "../../assets/images/lin.png";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: 1,
|
||||
head: `Innovator Dialogue`,
|
||||
logo1: tel,
|
||||
logo2: red,
|
||||
social1: `Telegram`,
|
||||
social2: `Reddit`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
head: `Developer Resources`,
|
||||
logo1: git,
|
||||
logo2: twitch,
|
||||
social1: `GitHub`,
|
||||
social2: `Discord`,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
head: `Social Media`,
|
||||
logo1: twit,
|
||||
logo2: face,
|
||||
logo3: lin,
|
||||
social1: `Twitter`,
|
||||
social2: `Facebook`,
|
||||
social3: `LinkedIn`,
|
||||
},
|
||||
];
|
||||
|
||||
const Connect = () => {
|
||||
return (
|
||||
<Box
|
||||
// height={"80vh"}
|
||||
// backgroundImage={`url(${banner})`}
|
||||
// backgroundSize={"cover"}
|
||||
// backgroundRepeat={"no-repeat"}
|
||||
backgroundColor={"#000"}
|
||||
padding={"5rem"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
height: "auto",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Container maxW="container.xl">
|
||||
<Text
|
||||
className="rubix-text-title"
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"700"}
|
||||
// fontSize={"40px"}
|
||||
color={"#fff"}
|
||||
textAlign={"center"}
|
||||
>
|
||||
Connect with Rubix community
|
||||
</Text>
|
||||
</Container>
|
||||
|
||||
<Container
|
||||
maxW="container.xl"
|
||||
justifyContent={"center"}
|
||||
marginTop={"4rem"}
|
||||
textAlign={"center"}
|
||||
>
|
||||
<SimpleGrid
|
||||
spacing={4}
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<>
|
||||
<Box
|
||||
padding={"1px"}
|
||||
borderRadius={"10px"}
|
||||
key={item.id}
|
||||
_hover={{
|
||||
backgroundImage:
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A))",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
background={"#000"}
|
||||
borderRadius={"10px"}
|
||||
minH={"270px"}
|
||||
border={"1px solid #454545"}
|
||||
>
|
||||
<CardHeader
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
paddingBottom={"0px"}
|
||||
marginTop={"2rem"}
|
||||
>
|
||||
{/* <Image src={item.img} /> */}
|
||||
<Heading
|
||||
size="md"
|
||||
className="rubix-text-large"
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item.head}
|
||||
</Heading>
|
||||
</CardHeader>
|
||||
<CardBody
|
||||
padding={"0px"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
gap={"2.5rem"}
|
||||
>
|
||||
<Link display={"grid"} placeContent={"center"}>
|
||||
<Box>
|
||||
<Image src={item.logo1} margin={"0 auto 20px auto"} />
|
||||
</Box>
|
||||
<Text className="rubix-text-small" fontWeight={"400"}>
|
||||
{item.social1}
|
||||
</Text>
|
||||
</Link>
|
||||
<Link display={"grid"} placeContent={"center"}>
|
||||
<Image src={item.logo2} margin={"0 auto 20px auto"} />
|
||||
<Text className="rubix-text-small" fontWeight={"400"}>
|
||||
{item.social2}
|
||||
</Text>
|
||||
</Link>
|
||||
<Link display={"grid"} placeContent={"center"}>
|
||||
<Image src={item.logo3} margin={"0 auto 20px auto"} />
|
||||
<Text className="rubix-text-small" fontWeight={"400"}>
|
||||
{item.social3}
|
||||
</Text>
|
||||
</Link>
|
||||
{/* <>{console.log(item.logo1)}</> */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Box>
|
||||
</>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<Button
|
||||
// className="rubix-text-medium"
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
cursor={"pointer"}
|
||||
transition="0.3s ease-in-out"
|
||||
color={"#fff"}
|
||||
height={"60px"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
border={"1px solid white"}
|
||||
borderRadius={"10px"}
|
||||
fontSize={"20px"}
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
marginTop={"4rem"}
|
||||
textAlign={"center"}
|
||||
padding={"0 2rem"}
|
||||
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,
|
||||
}}
|
||||
>
|
||||
Explore our community
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Connect;
|
||||
112
src/components/BuildPage/LearnMore.jsx
Normal file
112
src/components/BuildPage/LearnMore.jsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { Box, Button, Container, Text } from "@chakra-ui/react";
|
||||
import banner from "../../assets/images/moreBanner.png";
|
||||
|
||||
const SectionContent = {
|
||||
heading: `Connect with us to learn more!`,
|
||||
subContent: `With minimal computing power and curiosity to explore Web3 and its potential, anyone can build with the Rubix community.`,
|
||||
btnContent: `Contact Us`,
|
||||
};
|
||||
|
||||
const LearnMore = () => {
|
||||
return (
|
||||
<Box
|
||||
height={"50vh"}
|
||||
backgroundImage={`url(${banner})`}
|
||||
backgroundSize={"cover"}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
height: "auto",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
paddingBottom={"2rem"}
|
||||
fontWeight={700}
|
||||
// fontSize={"40px"}
|
||||
className="rubix-text-title"
|
||||
textAlign={"center"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{SectionContent.heading}
|
||||
</Text>
|
||||
<Container
|
||||
maxW="container.md"
|
||||
textAlign={"center"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
height={"30vh"}
|
||||
paddingBottom={"3rem"}
|
||||
>
|
||||
<Text
|
||||
color={"#E4E4E4"}
|
||||
// fontSize={"22px"}
|
||||
className="rubix-text-large"
|
||||
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"}
|
||||
// transition="0.3s ease-in-out"
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
padding={"0 3rem"}
|
||||
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,
|
||||
}}
|
||||
>
|
||||
{SectionContent.btnContent}
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default LearnMore;
|
||||
176
src/components/BuildPage/Solve.jsx
Normal file
176
src/components/BuildPage/Solve.jsx
Normal file
@@ -0,0 +1,176 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable no-unused-vars */
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
Box,
|
||||
Container,
|
||||
SimpleGrid,
|
||||
Heading,
|
||||
Button,
|
||||
Text,
|
||||
Image,
|
||||
Divider,
|
||||
Collapse,
|
||||
} from "@chakra-ui/react";
|
||||
import image1 from "../../assets/images/dollar.png";
|
||||
import token from "../../assets/images/token.png";
|
||||
import collab from "../../assets/images/collab.png";
|
||||
import loyalty from "../../assets/images/loyalty.png";
|
||||
import logistics from "../../assets/images/logistics.png";
|
||||
import action from "../../assets/images/action.png";
|
||||
import { useState } from "react";
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: 1,
|
||||
img: image1,
|
||||
title: "DeFi Apps",
|
||||
content: `Use Rubix to develop DeFi apps with improved payment processing,
|
||||
money transfers, record keeping, and compliance reporting.</br>
|
||||
</br>
|
||||
Use Rubix to develop a variety of DeFi apps. Rubix can also help
|
||||
you with improving payment processing, money transfers, record
|
||||
keeping, and compliance reporting.`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: token,
|
||||
title: "Tokenization",
|
||||
content: `Rubix allows you to build ultra-scalable, interoperable,
|
||||
and permissioned networks across industries at low or no cost, without any intermediaries.</br>
|
||||
</br>
|
||||
Rubix allows you to build ultra-scalable, interoperable, and permissioned
|
||||
networks to build asset tokenization use cases across industries at low or no cost, without any intermediaries.
|
||||
`,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: collab,
|
||||
title: "Data Collaboration",
|
||||
content: `Rubix in tandem with the right privacy-enhancing tools,
|
||||
can help organisations build trustless and permissionless data collaboration use cases.</br>
|
||||
</br>
|
||||
|
||||
Rubix in tandem with the right privacy-enhancing tools, can help organisations build trustless and permissionless data collaboration use cases.
|
||||
The plethora of use cases could range from simple insight sharing to running acquisition campaigns on second-party data or
|
||||
non-competing brands building federated learning-based look-alike models without sharing PII data with each other.`,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: loyalty,
|
||||
title: "Brand Loyalty",
|
||||
content: `RBuild token-gated NFTs to provide a tiered experience to different segments. Mount ROI enhancing cross-brand open loyalty programs.</br>
|
||||
</br>
|
||||
|
||||
Brands looking for innovative mechanisms to engage and retain customers can quickly build token-gated NFTs to provide a tiered experience to different segments.</br>
|
||||
</br>
|
||||
Using smart contracts and secondary tokens, ROI enhancing cross-brand open loyalty programs can easily be mounted
|
||||
`,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: logistics,
|
||||
title: "Supply Chain And logistics",
|
||||
content: `Supply chain management is complex. Leverage Rubix to track goods, automate your process, improve your workflow, share data transparently, increase efficiency, deliver quality, and save money.`,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: action,
|
||||
title: "ESG & Climate Action",
|
||||
content: `Rubix has a number of applications, from decentralising and gamifying climate action to enabling businesses to meet net zero targets, streamlining ESG reporting, and improving carbon markets, climate finance, and beyond`,
|
||||
},
|
||||
];
|
||||
|
||||
const Solve = () => {
|
||||
const [collapseStates, setCollapseStates] = useState(items.map(() => false));
|
||||
const [expandedCardIndex, setExpandedCardIndex] = useState(null);
|
||||
const handleToggle = (index) => {
|
||||
setExpandedCardIndex((prevIndex) => (prevIndex === index ? null : index));
|
||||
setCollapseStates((prevStates) => {
|
||||
const updatedStates = [...prevStates]; // Create a copy of previous states
|
||||
updatedStates[index] = !updatedStates[index]; // Toggle the state of the clicked card
|
||||
return updatedStates; // Return the updated states
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box backgroundColor={"#00020E"} padding={"5rem"}>
|
||||
<Container maxW="container.xl">
|
||||
<Text
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"700"}
|
||||
fontSize={"40px"}
|
||||
color={"#fff"}
|
||||
>
|
||||
Solving Real-World Issues And Business Problems
|
||||
</Text>
|
||||
</Container>
|
||||
<Container
|
||||
maxW="container.xl"
|
||||
justifyContent={"center"}
|
||||
marginTop={"4rem"}
|
||||
>
|
||||
<SimpleGrid
|
||||
spacing={20}
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
>
|
||||
{items.map((item, index) => (
|
||||
<Card
|
||||
backgroundColor={"#00020E"}
|
||||
key={item.id}
|
||||
// marginBottom={"20px"}
|
||||
>
|
||||
<CardHeader paddingLeft={"0px"} paddingRight={"0px"}>
|
||||
<Image src={item.img} marginBottom={"20px"} />
|
||||
<Heading
|
||||
size="md"
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"600"}
|
||||
fontSize={"20px"}
|
||||
color={"#fff"}
|
||||
>
|
||||
{" "}
|
||||
{item.title}
|
||||
</Heading>
|
||||
</CardHeader>
|
||||
<Divider color={"#fff"} />
|
||||
<CardBody
|
||||
paddingLeft={"0px"}
|
||||
paddingRight={"0px"}
|
||||
paddingBottom={"0px"}
|
||||
color={"#E8E8E8"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"17px"}
|
||||
>
|
||||
<Collapse startingHeight={55} in={expandedCardIndex === index}>
|
||||
<Text dangerouslySetInnerHTML={{ __html: item.content }} />
|
||||
</Collapse>
|
||||
<Button
|
||||
onClick={() => handleToggle(index)}
|
||||
background={"transparent"}
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
// fontWeight={"500"}
|
||||
fontSize={"18px"}
|
||||
padding={"0px"}
|
||||
_hover={{
|
||||
background: "transparent",
|
||||
}}
|
||||
>
|
||||
{expandedCardIndex === index ? "Less" : "....More"}
|
||||
</Button>
|
||||
</CardBody>
|
||||
<CardFooter padding={"0px"}></CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Solve;
|
||||
182
src/components/BuildPage/Tools.jsx
Normal file
182
src/components/BuildPage/Tools.jsx
Normal file
@@ -0,0 +1,182 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
Container,
|
||||
Heading,
|
||||
Image,
|
||||
SimpleGrid,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import banner from "../../assets/images/Statsbanner.png";
|
||||
import read from "../../assets/images/read.png";
|
||||
import support from "../../assets/images/support.png";
|
||||
import access from "../../assets/images/access.png";
|
||||
import wallet from "../../assets/images/wallet.png";
|
||||
import arrow from "../../assets/images/toolArrow.png";
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: 1,
|
||||
img: read,
|
||||
title: "Read our </br> Resources",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: support,
|
||||
title: "Reach Out To Us </br> For Support",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: access,
|
||||
title: "Access The </br> Developer Portal",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: wallet,
|
||||
title: "Wallet",
|
||||
},
|
||||
];
|
||||
|
||||
const Tools = () => {
|
||||
return (
|
||||
<Box
|
||||
// height={"80vh"}
|
||||
backgroundImage={`url(${banner})`}
|
||||
backgroundSize={"cover"}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
padding={"5rem"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
height: "auto",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Container maxW="container.xl">
|
||||
<Text
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"700"}
|
||||
fontSize={"40px"}
|
||||
color={"#fff"}
|
||||
>
|
||||
Tools and resources to help you succeed
|
||||
</Text>
|
||||
</Container>
|
||||
<Container
|
||||
maxW="container.xl"
|
||||
justifyContent={"center"}
|
||||
marginTop={"4rem"}
|
||||
textAlign={"center"}
|
||||
>
|
||||
<SimpleGrid
|
||||
spacing={4}
|
||||
templateColumns="repeat(auto-fill, minmax(250px, 1fr))"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<>
|
||||
<Box
|
||||
backgroundImage={
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
|
||||
}
|
||||
padding={"1px"}
|
||||
borderRadius={"10px"}
|
||||
key={item.id}
|
||||
>
|
||||
<Card
|
||||
background={"#131313"}
|
||||
borderRadius={"10px"}
|
||||
minH={"270px"}
|
||||
>
|
||||
<CardHeader display={"flex"} justifyContent={"center"}>
|
||||
<Image src={item.img} />
|
||||
{/* <Heading size="md"></Heading> */}
|
||||
</CardHeader>
|
||||
<CardBody
|
||||
padding={"0px"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
fontSize={"20px"}
|
||||
textAlign={"center"}
|
||||
fontWeight={"400"}
|
||||
dangerouslySetInnerHTML={{ __html: item.title }}
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter justifyContent={"center"} cursor={"pointer"}>
|
||||
<Image
|
||||
src={arrow}
|
||||
transition="all .5s"
|
||||
_hover={{
|
||||
transform: "rotate(45deg)",
|
||||
}}
|
||||
/>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Box>
|
||||
</>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<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"}
|
||||
marginTop={"4rem"}
|
||||
textAlign={"center"}
|
||||
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,
|
||||
}}
|
||||
>
|
||||
Learn Now
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tools;
|
||||
@@ -1,3 +1,5 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Box, Container, Image, Text } from "@chakra-ui/react";
|
||||
import {
|
||||
Accordion,
|
||||
@@ -12,40 +14,35 @@ 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.`,
|
||||
title: `Truly Decentralised, Fully Scalable`,
|
||||
content: `With its peer-to-peer and decentralised architecture, Rubix is a one-of-a-kind network that can rapidly grow its validators – a critical threshold to realise the full potential of Web3. A Rubix node can run on any laptop, computer, or server. Once Rubix is installed on a system,
|
||||
it’s automatically connected to the peers in the network to start validation.
|
||||
This is why Rubix is able to offer unlimited concurrent transactions and validators,
|
||||
as each transaction happens between peers without the need to queue transactions to commit to 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.`,
|
||||
title: `A Network of Subnets`,
|
||||
content: `With its peer-to-peer and decentralised architecture, Rubix is a one-of-a-kind network that can rapidly grow its validators – a critical threshold to realise the full potential of Web3.
|
||||
A Rubix node can run on any laptop, computer, or server.
|
||||
Once Rubix is installed on a system, it’s automatically connected to the peers in the network to start validation.`,
|
||||
},
|
||||
{
|
||||
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.`,
|
||||
title: `Highly Secure`,
|
||||
content: `With its peer-to-peer and decentralised architecture, Rubix is a one-of-a-kind network that can rapidly grow its validators – a critical threshold to realise the full potential of Web3.
|
||||
A Rubix node can run on any laptop, computer, or server.`,
|
||||
},
|
||||
];
|
||||
|
||||
const WhyBuild = () => {
|
||||
return (
|
||||
<Box
|
||||
backgroundImage={`url(${bg})`}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundSize={"cover"}
|
||||
// backgroundImage={`url(${bg})`}
|
||||
// backgroundRepeat={"no-repeat"}
|
||||
// backgroundSize={"cover"}
|
||||
backgroundColor={"#000"}
|
||||
>
|
||||
<Container
|
||||
maxW={"container.xl"}
|
||||
@@ -76,7 +73,7 @@ const WhyBuild = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
Why developers choose Rubix
|
||||
Why Build On Rubix
|
||||
</Text>
|
||||
<Box
|
||||
display={"flex"}
|
||||
@@ -137,7 +134,7 @@ const WhyBuild = () => {
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
color={"#E8E8E8"}
|
||||
width={"80%"}
|
||||
width={"100%"}
|
||||
fontSize={"21px"}
|
||||
paddingLeft={"0px"}
|
||||
sx={{
|
||||
|
||||
Reference in New Issue
Block a user