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

Learn Page development and design

Browse Source
This commit is contained in:
rockyeverlast
2024-03-29 19:54:51 +05:30
parent d69d12a1e6
commit 85a98dd4d1
12 changed files with 410 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 340 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 308 KiB

BIN
src/assets/images/stackNew.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 623 KiB

5
src/components/Card/LearnCard.jsx
View File

@@ -22,6 +22,11 @@ const LearnCard = ({ id, src, alt, text }) => {
background={"#151419"}
borderRadius={"10px"}
key={id}
sx={{
"@media (max-width: 435px)": {
width: "390px",
},
}}
>
<Box padding={"1rem"}>
<Image src={src} alt={alt} />

157
src/components/LearnPage/Faq.jsx Normal file
View File

@@ -0,0 +1,157 @@
import banner from "../../assets/images/faqBg.png";
import {
Accordion,
AccordionButton,
// AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
Container,
Text,
} from "@chakra-ui/react";
import { AddIcon, MinusIcon } from "@chakra-ui/icons";
const accordion = [
{
id: 1,
title: `What is blockchain?`,
content: `Blockchain technology is an advanced database mechanism that allows transparent information sharing within a business network.
A blockchain database stories data in blocks that are linked together in a chain. The data is chronologically consistent because you cannot delete or modify the chain without consensus from the network.
As a result, you can use blockchain technology to create an immutable ledger, ensuring data security.\n\n
Blockchain technology is one of the most innovative and disruptive developments in the digital world.\n\n
It has the potential to transform various sectors and industries – from finance to healthcare to energy to agriculture and beyond.
The main benefits of blockchain technology `,
},
{
id: 2,
title: `What is Proof-Of-Pledge?`,
content: `Blockchain technology is one of the most innovative and disruptive developments in the digital world.\n\n
It has the potential to transform various sectors and industries – from finance to healthcare to energy to agriculture and beyond.
The main benefits of blockchain technology`,
},
{
id: 3,
title: `What are RBT Tokens?`,
content: `Blockchain technology is one of the most innovative and disruptive developments in the digital world.\n\n
It has the potential to transform various sectors and industries – from finance to healthcare to energy to agriculture and beyond.
The main benefits of blockchain technology`,
},
{
id: 4,
title: `What are Nodes?`,
content: `Blockchain technology is one of the most innovative and disruptive developments in the digital world.\n\n
It has the potential to transform various sectors and industries – from finance to healthcare to energy to agriculture and beyond.
The main benefits of blockchain technology`,
},
];
export const Faq = () => {
return (
<Box
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Container
maxW={"container.xl"}
padding={"5rem"}
sx={{
"@media (max-width: 435px)": {
padding: "2rem",
},
}}
>
<Text
as={"h2"}
// paddingTop={"3rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "35px",
},
"@media (max-width: 375px)": {
fontSize: "28px",
},
}}
>
Frequently Asked Questions
</Text>
<Box>
<Accordion allowToggle defaultIndex={[0]}>
{accordion.map((accord) => (
<>
<AccordionItem
key={accord.id}
borderTop={"none"}
borderBottom={"none"}
marginBottom={"1rem"}
padding={"1.5rem"}
borderRadius={"10px"}
background={"#161616"}
>
{({ isExpanded }) => (
<>
<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: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "18px",
},
}}
>
{accord.title}
</Box>
{isExpanded ? (
<MinusIcon color={"#fff"} fontSize={"20px"} />
) : (
<AddIcon color={"#fff"} fontSize={"20px"} />
)}
</AccordionButton>
</h2>
<AccordionPanel
pb={4}
fontFamily={"Poppins"}
fontWeight={"300"}
color={"#BDBDBD"}
width={"100%"}
fontSize={"21px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "18px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
},
}}
>
{accord.content}
</AccordionPanel>
</>
)}
</AccordionItem>
</>
))}
</Accordion>
</Box>
</Container>
</Box>
);
};

186
src/components/LearnPage/GetStarted.jsx
View File

@@ -1,14 +1,23 @@
/* eslint-disable no-unused-vars */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
import getStarted from "../../assets/images/getStarted.png";
import getStarted1 from "../../assets/images/getStarted.png";
import getStarted2 from "../../assets/images/getStarted.png";
import getStarted3 from "../../assets/images/getStarted.png";
import getStarted2 from "../../assets/images/getStarted2.png";
import getStarted3 from "../../assets/images/getStarted3.png";
const GetStarted = () => {
return (
<Box backgroundColor={"#000"}>
<Container maxW={"container.xl"} padding={"0 5rem"}>
<Container
maxW={"container.xl"}
padding={"0 5rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width: 435px)": {},
}}
>
<Text
as={"h2"}
paddingTop={"3rem"}
@@ -24,6 +33,7 @@ const GetStarted = () => {
},
"@media (max-width: 375px)": {
fontSize: "28px",
textAlign: "center",
},
}}
>
@@ -35,6 +45,15 @@ const GetStarted = () => {
fontSize={"20px"}
width={"70%"}
color={"#CFCFCF"}
sx={{
"@media (max-width: 435px)": {
width: "100%",
},
"@media (max-width: 375px)": {
fontSize: "16px",
textAlign: "center",
},
}}
>
Rubix allows developers to build on a fast, secure, and scalable chain
that has a unique approach to data sharing, objects.
@@ -42,46 +61,165 @@ const GetStarted = () => {
<Box padding={"4rem 0"}>
<Tabs
defaultIndex={1}
display={"flex"}
defaultIndex={0}
orientation="vertical"
// display={"flex"}
flexDirection={"row-reverse"}
justifyContent={"space-between"}
// justifyContent={"space-between"}
width={"100%"}
border={"none"}
sx={{
"@media (max-width: 435px)": {
orientation: "horizontal",
flexDirection: "column",
gap: "2rem",
},
"@media (max-width: 375px)": {},
}}
>
<TabPanels display={"flex"} justifyContent={"center"}>
<TabPanels
display={"flex"}
justifyContent={"center"}
sx={{
"@media (max-width: 435px)": {
minH: "290px",
},
"@media (max-width: 375px)": {},
}}
>
<TabPanel>
<Image
boxSize="200px"
fit="cover"
src="https://images5.alphacoders.com/810/thumbbig-810547.webp"
src={getStarted}
sx={{
"@media (max-width: 435px)": {
width: "250px",
},
"@media (max-width: 375px)": {},
}}
/>
</TabPanel>
<TabPanel>
<Image fit="cover" src={getStarted} />
</TabPanel>
<TabPanel>
<Image
boxSize="200px"
fit="cover"
src="https://images5.alphacoders.com/810/thumbbig-810547.webp"
src={getStarted2}
sx={{
"@media (max-width: 435px)": {
width: "250px",
},
"@media (max-width: 375px)": {},
}}
/>
</TabPanel>
<TabPanel>
<Image fit="cover" src={getStarted} />
<Image
fit="cover"
src={getStarted}
sx={{
"@media (max-width: 435px)": {
width: "250px",
},
"@media (max-width: 375px)": {},
}}
/>
</TabPanel>
<TabPanel>
<Image
fit="cover"
src={getStarted3}
width={"300px"}
sx={{
"@media (max-width: 435px)": {
width: "250px",
},
"@media (max-width: 375px)": {},
}}
/>
</TabPanel>
</TabPanels>
<TabList flexDirection={"column"} width={"100%"} border={"none"}>
<Tab color="#fff" justifyContent={"left"}>
<TabList
// flexDirection={"column"}
width={"100%"}
border={"none"}
gap={"3rem"}
sx={{
"@media (max-width: 1024px)": {
textAlign: "left",
},
"@media (max-width: 375px)": {},
}}
>
<Tab
color="#fff"
justifyContent={"left"}
fontSize={"20px"}
fontFamily={"Poppins"}
textAlign={"left"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "15px",
},
"@media (max-width: 435px)": {
textAlign: "center",
justifyContent: "center",
},
}}
>
- Start by reading our whitepaper
</Tab>
<Tab color="#fff" justifyContent={"left"}>
- Start by reading our whitepaper
<Tab
color="#fff"
justifyContent={"left"}
fontSize={"20px"}
fontFamily={"Poppins"}
textAlign={"left"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "15px",
},
"@media (max-width: 435px)": {
textAlign: "center",
justifyContent: "center",
},
}}
>
- Install a Rubix node on your laptop
</Tab>
<Tab color="#fff" justifyContent={"left"}>
- Start by reading our whitepaper
<Tab
color="#fff"
justifyContent={"left"}
fontSize={"20px"}
fontFamily={"Poppins"}
textAlign={"left"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "15px",
},
"@media (max-width: 435px)": {
textAlign: "center",
justifyContent: "center",
},
}}
>
- Migrate your current use case or process to Rubix
</Tab>
<Tab color="#fff" justifyContent={"left"}>
- Start by reading our whitepaper
<Tab
color="#fff"
justifyContent={"left"}
fontSize={"20px"}
fontFamily={"Poppins"}
textAlign={"left"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "15px",
},
"@media (max-width: 435px)": {
textAlign: "center",
justifyContent: "center",
},
}}
>
- Design your first dApp
</Tab>
</TabList>
</Tabs>

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

@@ -39,8 +39,20 @@ const LearnBanner = () => {
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"5rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
},
}}
>
<Box width={"90%"}>
<Box
width={"90%"}
sx={{
"@media (max-width: 435px)": {
width: "100%",
},
}}
>
<Text
as={"h2"}
fontWeight={700}
@@ -49,7 +61,7 @@ const LearnBanner = () => {
color={"#DE858E"}
sx={{
"@media (max-width: 996px)": {
fontSize: "45px",
fontSize: "35px",
},
"@media (max-width: 600px)": {
fontSize: "28px",
@@ -98,6 +110,9 @@ const LearnBanner = () => {
marginTop={"3rem"}
paddingLeft={"5rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
},
"@media (max-width: 375px)": {
marginTop: "1rem",
},

15
src/components/LearnPage/LearnDev.jsx
View File

@@ -6,6 +6,7 @@ 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 { useMediaQuery } from "@chakra-ui/react";
// import { Badge } from "@chakra-ui/react";
@@ -48,6 +49,7 @@ const Content = {
};
const LearnDev = () => {
const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
return (
<Box
// height={"100vh"}
@@ -67,15 +69,19 @@ const LearnDev = () => {
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
"@media (max-width: 996px)": {
fontSize: "35px",
},
"@media (max-width: 435px)": {
fontSize: "26px",
paddingLeft: "2rem",
},
"@media (max-width: 375px)": {
fontSize: "28px",
fontSize: "",
},
}}
>
{Content.heading} <br />
{Content.heading} {isSmallScreen ? null : <br />}
{Content.span}
</Text>
</Container>
@@ -84,6 +90,9 @@ const LearnDev = () => {
paddingBottom={"2rem"}
// height={"50vh"}
sx={{
"@media (max-width: 1024px)": {
paddingLeft: "5rem",
},
"@media (max-width: 435px)": {
paddingLeft: "3rem",
},

62
src/components/LearnPage/WhyRubix.jsx
View File

@@ -47,10 +47,19 @@ const WhyRubix = () => {
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
>
<Container maxW={"container.xl"} padding={"0 5rem"}>
<Container
maxW={"container.xl"}
padding={"5rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width: 435px)": {},
}}
>
<Text
as={"h2"}
paddingTop={"3rem"}
// paddingTop={"3rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
@@ -58,11 +67,12 @@ const WhyRubix = () => {
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
"@media (max-width: 1024px)": {
fontSize: "35px",
},
"@media (max-width: 375px)": {
fontSize: "28px",
"@media (max-width: 475px)": {
fontSize: "26px",
textAlign: "center",
},
}}
>
@@ -73,8 +83,23 @@ const WhyRubix = () => {
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%"}>
<Box
width={"70%"}
sx={{
"@media (max-width: 435px)": {
width: "100%",
},
"@media (max-width: 375px)": {},
}}
>
<Accordion allowToggle defaultIndex={[0]}>
{accordion.map((accord) => (
<>
@@ -95,6 +120,12 @@ const WhyRubix = () => {
fontWeight={"500"}
fontSize={"30px"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {},
}}
>
{accord.title}
</Box>
@@ -109,6 +140,14 @@ const WhyRubix = () => {
width={"80%"}
fontSize={"21px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {
width: "100%",
},
"@media (max-width: 435px)": {
fontSize: "18px",
},
}}
>
{accord.content}
</AccordionPanel>
@@ -118,7 +157,16 @@ const WhyRubix = () => {
</Accordion>
</Box>
<Box>
<Image src={cube} width={"550px"} />
<Image
src={cube}
width={"550px"}
sx={{
"@media (max-width: 1024px)": {
width: "260px",
},
"@media (max-width: 435px)": {},
}}
/>
</Box>
</Box>
</Container>

2
src/pages/LearnPage.jsx
View File

@@ -1,4 +1,5 @@
import Footer from "../components/Footer/Footer";
import { Faq } from "../components/LearnPage/Faq";
import GetStarted from "../components/LearnPage/GetStarted";
import LearnBanner from "../components/LearnPage/LearnBanner";
import LearnDev from "../components/LearnPage/LearnDev";
@@ -11,6 +12,7 @@ const LearnPage = () => {
<LearnDev />
<WhyRubix />
<GetStarted />
<Faq />
<Footer />
</>
);