diff --git a/src/assets/images/faqBg.png b/src/assets/images/faqBg.png new file mode 100644 index 0000000..9f8f4ac Binary files /dev/null and b/src/assets/images/faqBg.png differ diff --git a/src/assets/images/getStarted1.png b/src/assets/images/getStarted1.png new file mode 100644 index 0000000..b3fa9d1 Binary files /dev/null and b/src/assets/images/getStarted1.png differ diff --git a/src/assets/images/getStarted2.png b/src/assets/images/getStarted2.png new file mode 100644 index 0000000..7edcf89 Binary files /dev/null and b/src/assets/images/getStarted2.png differ diff --git a/src/assets/images/getStarted3.png b/src/assets/images/getStarted3.png new file mode 100644 index 0000000..721ef5e Binary files /dev/null and b/src/assets/images/getStarted3.png differ diff --git a/src/assets/images/stackNew.webp b/src/assets/images/stackNew.webp new file mode 100644 index 0000000..4fb3e4d Binary files /dev/null and b/src/assets/images/stackNew.webp differ diff --git a/src/components/Card/LearnCard.jsx b/src/components/Card/LearnCard.jsx index 8e23866..6b043f7 100644 --- a/src/components/Card/LearnCard.jsx +++ b/src/components/Card/LearnCard.jsx @@ -22,6 +22,11 @@ const LearnCard = ({ id, src, alt, text }) => { background={"#151419"} borderRadius={"10px"} key={id} + sx={{ + "@media (max-width: 435px)": { + width: "390px", + }, + }} > {alt} diff --git a/src/components/LearnPage/Faq.jsx b/src/components/LearnPage/Faq.jsx new file mode 100644 index 0000000..6902ee0 --- /dev/null +++ b/src/components/LearnPage/Faq.jsx @@ -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 ( + + + + Frequently Asked Questions + + + + + {accordion.map((accord) => ( + <> + + {({ isExpanded }) => ( + <> +

+ + + {accord.title} + + {isExpanded ? ( + + ) : ( + + )} + +

+ + {accord.content} + + + )} + + + ))} + + + + + ); +}; diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx index 5539310..553967a 100644 --- a/src/components/LearnPage/GetStarted.jsx +++ b/src/components/LearnPage/GetStarted.jsx @@ -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 ( - + { }, "@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 = () => { - + - - - - + + + + - - + + - Start by reading our whitepaper - - - Start by reading our whitepaper + + - Install a Rubix node on your laptop - - - Start by reading our whitepaper + + - Migrate your current use case or process to Rubix - - - Start by reading our whitepaper + + - Design your first dApp diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx index 3a53612..540ae09 100644 --- a/src/components/LearnPage/LearnBanner.jsx +++ b/src/components/LearnPage/LearnBanner.jsx @@ -39,8 +39,20 @@ const LearnBanner = () => { textAlign={"left"} marginTop={"2rem"} paddingLeft={"5rem"} + sx={{ + "@media (max-width: 435px)": { + paddingLeft: "2rem", + }, + }} > - + { 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", }, diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx index 0ac223f..54623e7 100644 --- a/src/components/LearnPage/LearnDev.jsx +++ b/src/components/LearnPage/LearnDev.jsx @@ -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 ( { 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}
+ {Content.heading} {isSmallScreen ? null :
} {Content.span} @@ -84,6 +90,9 @@ const LearnDev = () => { paddingBottom={"2rem"} // height={"50vh"} sx={{ + "@media (max-width: 1024px)": { + paddingLeft: "5rem", + }, "@media (max-width: 435px)": { paddingLeft: "3rem", }, diff --git a/src/components/LearnPage/WhyRubix.jsx b/src/components/LearnPage/WhyRubix.jsx index 3f8b74c..bae5381 100644 --- a/src/components/LearnPage/WhyRubix.jsx +++ b/src/components/LearnPage/WhyRubix.jsx @@ -47,10 +47,19 @@ const WhyRubix = () => { backgroundRepeat={"no-repeat"} backgroundSize={"cover"} > - + { 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)": {}, + }} > - + {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} @@ -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} @@ -118,7 +157,16 @@ const WhyRubix = () => { - + diff --git a/src/pages/LearnPage.jsx b/src/pages/LearnPage.jsx index 08edfa7..5a7b308 100644 --- a/src/pages/LearnPage.jsx +++ b/src/pages/LearnPage.jsx @@ -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 = () => { +