From 416018def5c1ae4089c19d7aee44cb5c634405f1 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Tue, 16 Apr 2024 17:08:05 +0530 Subject: [PATCH] responsive --- .../ArticleInternalOne/ArticleInternalOne.jsx | 18 +- src/components/BuildPage/BuildBanner.jsx | 40 +++-- src/components/BuildPage/Connect.jsx | 37 +++- src/components/BuildPage/LearnMore.jsx | 109 +++++++----- src/components/BuildPage/Solve.jsx | 61 ++++++- src/components/BuildPage/Tools.jsx | 24 ++- src/components/BuildPage/WhyBuild.jsx | 40 +++-- src/components/Card/LearnCard.jsx | 44 ++++- src/components/Card/MobileHomeCard.jsx | 18 +- src/components/Card/PlaceCard.jsx | 10 +- src/components/Community/CommunityBanner.jsx | 11 +- src/components/Community/CommunityCard.jsx | 4 +- src/components/Community/Connect.jsx | 2 +- src/components/Community/LearnMore.jsx | 4 +- src/components/Community/Place.jsx | 8 +- src/components/Footer/MobileFooter.jsx | 2 +- src/components/LearnPage/Faq.jsx | 50 ++++-- src/components/LearnPage/GetStarted.jsx | 91 ++++------ src/components/LearnPage/LearnBanner.jsx | 32 ++-- src/components/LearnPage/LearnDev.jsx | 22 +-- src/components/LearnPage/WhyRubix.jsx | 24 ++- .../MobileComponent/MobileCommunityCard.jsx | 11 +- .../MobileComponent/MobilePlace.jsx | 108 ++++++++++++ .../MobileComponent/MobileSolve.jsx | 166 ++++++++++++++++++ .../MobileComponent/MobileSubnet.jsx | 55 +++--- .../MobileComponent/MobileSubnet2.jsx | 21 ++- .../MobileComponent/MobileSubnet3.jsx | 36 ++-- .../MobileComponent/PartnerMobile.jsx | 5 +- .../MobileComponent/ResourcesMobile.jsx | 11 +- src/components/MobileComponent/ToolMobile.jsx | 146 +++++++++++++++ src/components/MobileMenu/MobileMenu.jsx | 4 +- .../SubnetsComponent/NewSubnetComp.jsx | 100 +++++------ src/components/UseCase/UseCase.jsx | 83 ++++++++- src/index.css | 12 +- src/pages/BuildPage.jsx | 27 ++- src/pages/Community.jsx | 5 +- src/pages/HomePage.jsx | 2 +- 37 files changed, 1077 insertions(+), 366 deletions(-) create mode 100644 src/components/MobileComponent/MobilePlace.jsx create mode 100644 src/components/MobileComponent/MobileSolve.jsx create mode 100644 src/components/MobileComponent/ToolMobile.jsx diff --git a/src/components/ArticleInternalOne/ArticleInternalOne.jsx b/src/components/ArticleInternalOne/ArticleInternalOne.jsx index b23276c..dd61279 100644 --- a/src/components/ArticleInternalOne/ArticleInternalOne.jsx +++ b/src/components/ArticleInternalOne/ArticleInternalOne.jsx @@ -40,10 +40,26 @@ const ArticleInternalOne = () => { alignItems={"center"} flexDirection={"column"} color="white" + sx={{ + "@media (max-width: 600px)": { + minHeight: "28px", + minHeight: "40vh", + width:'100vw' + }, + }} > Bring your own BlockSpace diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx index 228146d..7c0e92b 100644 --- a/src/components/BuildPage/BuildBanner.jsx +++ b/src/components/BuildPage/BuildBanner.jsx @@ -16,7 +16,7 @@ const BannerContent = [ }, ]; -const BuildBanner = () => { +const BuildBanner = () => { return ( { marginTop={"2rem"} paddingLeft={"3.5rem"} sx={{ - "@media (max-width: 435px)": { - paddingLeft: "2rem", + "@media (max-width: 500px)": { + paddingLeft: "1rem", // Correctly target paddingLeft instead of padding }, }} > @@ -69,15 +69,12 @@ const BuildBanner = () => { letterSpacing={"1px"} sx={{ "@media (max-width: 996px)": { - fontSize: "35px", + fontSize: "46px", }, "@media (max-width: 600px)": { - fontSize: "28px", - marginBottom: "2rem", - }, - "@media (max-width: 412px)": { - fontSize: "24px", - marginTop: "2rem", + fontSize: "40px", + marginBottom: "0rem", + lineHeight: "54px", }, }} > @@ -90,7 +87,12 @@ const BuildBanner = () => { {BannerContent[0].heading2} - + { "@media (max-width: 1024px)": { fontSize: "22px", }, - "@media (max-width: 600px)": { - fontSize: "17px", - width: "100%", + "@media (max-width: 500px)": { + fontSize: "16px", + lineHeight: "28px", }, }} > @@ -154,6 +156,16 @@ const BuildBanner = () => { borderRadius: "0px", opacity: "1", }, + "@media (max-width: 500px)": { + fontSize: "14px", + width: "230px", + height: "44px", + marginTop: "2rem", + bgGradient: + "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)", + color: "#000", + fontWeight: "600", + }, }} _hover={{ color: "#000", diff --git a/src/components/BuildPage/Connect.jsx b/src/components/BuildPage/Connect.jsx index a820fab..5df7ce4 100644 --- a/src/components/BuildPage/Connect.jsx +++ b/src/components/BuildPage/Connect.jsx @@ -60,13 +60,13 @@ const items = [ ]; const Connect = () => { - return ( + return ( @@ -79,17 +79,25 @@ const Connect = () => { "@media (max-width: 1024px)": { padding: "3rem", }, - "@media (max-width: 435px)": {}, + "@media (max-width: 500px)": { + padding: "4rem 1rem", + }, }} > Connect with Rubix community @@ -113,17 +121,34 @@ const Connect = () => { borderRadius={"10px"} minH={"270px"} border={"1px solid #454545"} + sx={{ + "@media (max-width: 500px)": { + minHeight: "200px", + }, + }} > {/* */} {item.head} diff --git a/src/components/BuildPage/LearnMore.jsx b/src/components/BuildPage/LearnMore.jsx index 4e0174a..73299f6 100644 --- a/src/components/BuildPage/LearnMore.jsx +++ b/src/components/BuildPage/LearnMore.jsx @@ -30,14 +30,14 @@ const LearnMore = () => { paddingBottom={"1rem"} 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", + "@media (max-width: 500px)": { + fontSize: "20px", + fontWeight: "500", + marginBottom: "5px", }, }} > @@ -54,55 +54,72 @@ const LearnMore = () => { {SectionContent.subContent} diff --git a/src/components/BuildPage/Solve.jsx b/src/components/BuildPage/Solve.jsx index e84d16f..e93e616 100644 --- a/src/components/BuildPage/Solve.jsx +++ b/src/components/BuildPage/Solve.jsx @@ -88,13 +88,34 @@ const Solve = () => { }; return ( - - + + Solving Real-World Issues And Business Problems @@ -103,10 +124,21 @@ const Solve = () => { maxW="container.xl" justifyContent={"center"} marginTop={"4rem"} + sx={{ + "@media (max-width: 600px)": { + marginTop: "2rem ", + padding: "0px", + }, + }} > {items.map((item, index) => ( { fontWeight={"600"} fontSize={"20px"} color={"#fff"} + sx={{ + "@media (max-width: 600px)": { + fontSize: "16px", + }, + }} > - {" "} {item.title} @@ -132,18 +168,31 @@ const Solve = () => { paddingLeft={"0px"} paddingRight={"0px"} paddingBottom={"0px"} - color={"#E8E8E8"} + color={"#BCBCBC"} fontFamily={"Poppins"} fontWeight={"500"} fontSize={"17px"} + sx={{ + "@media (max-width: 600px)": { + fontSize: "14px", + }, + }} > - + diff --git a/src/components/Card/MobileHomeCard.jsx b/src/components/Card/MobileHomeCard.jsx index 55e1501..4b60ae5 100644 --- a/src/components/Card/MobileHomeCard.jsx +++ b/src/components/Card/MobileHomeCard.jsx @@ -20,7 +20,7 @@ const MobileHomeCard = ({ key, date, text }) => { borderRadius={"10px"} sx={{ "@media (max-width: 600px)": { - width: "90%", + width: "100%", margin: "0 auto", }, }} @@ -29,7 +29,7 @@ const MobileHomeCard = ({ key, date, text }) => { width={"502px"} background={"#151419"} borderRadius={"10px"} - minHeight={"415px !important"} + minHeight={"415px"} // key={key} sx={{ "@media (max-width: 600px)": { @@ -50,7 +50,13 @@ const MobileHomeCard = ({ key, date, text }) => { INSIGHT - + {date} { marginBottom={"20px"} minHeight={"73px"} maxWidth={"460px"} + sx={{ + "@media (max-width: 600px)": { + minHeight: "50px", + marginBottom: "10px", + }, + }} > {text} diff --git a/src/components/Card/PlaceCard.jsx b/src/components/Card/PlaceCard.jsx index 6334b89..702b8c6 100644 --- a/src/components/Card/PlaceCard.jsx +++ b/src/components/Card/PlaceCard.jsx @@ -7,17 +7,17 @@ import { Link } from "react-router-dom"; const PlaceCard = ({ key, text, cardicon, title, button, link }) => { return ( - + { }} > {BannerContent[0].heading1} - {" "} -
+ +
{BannerContent[0].heading2} { { - return ( + return ( { sx={{ "@media (max-width: 1024px)": { height: "auto", - }, + }, "@media (max-width: 600px)": { fontSize: "28px", }, @@ -67,7 +67,7 @@ const LearnMore = () => { }, }} > - {SectionContent.subContent} + {SectionContent.subContent} diff --git a/src/components/Community/Place.jsx b/src/components/Community/Place.jsx index bddde97..a5e3821 100644 --- a/src/components/Community/Place.jsx +++ b/src/components/Community/Place.jsx @@ -48,7 +48,7 @@ const Place = () => { return ( { paddingLeft={"7rem"} // height={"50vh"} sx={{ - "@media (max-width: 500px)": { + "@media (max-width: 600px)": { paddingLeft: "1rem", }, }} @@ -81,6 +81,7 @@ const Place = () => { "@media (max-width: 500px)": { fontSize: "22px", fontWeight: "400", + paddingBottom:'30px' }, }} > @@ -96,6 +97,9 @@ const Place = () => { "&::-webkit-scrollbar": { width: "0px", }, + "@media (max-width: 600px)": { + padding: "0px", + }, }} > {content.map((item) => ( diff --git a/src/components/Footer/MobileFooter.jsx b/src/components/Footer/MobileFooter.jsx index ae1340d..d2fd524 100644 --- a/src/components/Footer/MobileFooter.jsx +++ b/src/components/Footer/MobileFooter.jsx @@ -95,7 +95,7 @@ const MobileFooter = () => { color={"#B0B0B0"} fontFamily={"Mona Sans"} fontWeight={"500"} - fontSize={"22px"} + fontSize={"16px"} > Social diff --git a/src/components/LearnPage/Faq.jsx b/src/components/LearnPage/Faq.jsx index 74bcd09..742cb72 100644 --- a/src/components/LearnPage/Faq.jsx +++ b/src/components/LearnPage/Faq.jsx @@ -194,8 +194,8 @@ export const Faq = () => { maxW={"container.xl"} padding={"5rem 4rem"} sx={{ - "@media (max-width: 435px)": { - padding: "2rem", + "@media (max-width: 600px)": { + padding: "4rem 1rem", }, }} > @@ -209,11 +209,9 @@ export const Faq = () => { textTransform={"capitalize"} color={"#fff"} sx={{ - "@media (max-width: 435px)": { - fontSize: "35px", - }, - "@media (max-width: 375px)": { - fontSize: "28px", + "@media (max-width: 600px)": { + fontSize: "22px", + fontWeight: "500", }, }} > @@ -232,6 +230,11 @@ export const Faq = () => { padding={"20px"} borderRadius={"10px"} background={"#161616"} + sx={{ + "@media (max-width: 600px)": { + padding: "14px", + }, + }} > {({ isExpanded }) => ( <> @@ -246,18 +249,33 @@ export const Faq = () => { fontSize={"24px"} color={"#fff"} sx={{ - "@media (max-width: 1024px)": {}, - "@media (max-width: 435px)": { - fontSize: "18px", + "@media (max-width: 600px)": { + fontSize: "14px", }, }} > {accord.title} {isExpanded ? ( - + ) : ( - + )} @@ -271,12 +289,8 @@ export const Faq = () => { fontSize={"18px"} paddingLeft={"0px"} sx={{ - "@media (max-width: 1024px)": {}, - "@media (max-width: 435px)": { - fontSize: "18px", - }, - "@media (max-width: 375px)": { - fontSize: "16px", + "@media (max-width: 600px)": { + fontSize: "14px", }, }} > diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx index 27eefd8..59afa62 100644 --- a/src/components/LearnPage/GetStarted.jsx +++ b/src/components/LearnPage/GetStarted.jsx @@ -16,7 +16,9 @@ const GetStarted = () => { "@media (max-width: 1024px)": { padding: "3rem", }, - "@media (max-width: 435px)": {}, + "@media (max-width: 600px)": { + padding: "4rem 1rem", + }, }} > { paddingBottom={"1rem"} fontWeight={700} fontSize={"40px"} - textAlign={"left"} + textAlign={"center"} textTransform={"capitalize"} color={"#fff"} sx={{ - "@media (max-width: 435px)": { - fontSize: "35px", - }, - "@media (max-width: 375px)": { - fontSize: "28px", - textAlign: "center", + "@media (max-width: 600px)": { + fontSize: "22px", + fontWeight:'500', + paddingTop:'0rem' }, }} > @@ -47,19 +47,21 @@ const GetStarted = () => { width={"70%"} color={"#CFCFCF"} sx={{ - "@media (max-width: 435px)": { + "@media (max-width: 600px)": { + fontSize: "14px", width: "100%", }, - "@media (max-width: 375px)": { - fontSize: "16px", - textAlign: "center", - }, }} > 4 easy steps to quickly launch your dAPP - + { justifyContent={"center"} sx={{ "@media (max-width: 435px)": { - minH: "290px", + // minH: "290px", }, "@media (max-width: 375px)": {}, }} @@ -91,36 +93,18 @@ const GetStarted = () => { {/* */} {/* */} {/* */} @@ -128,12 +112,6 @@ const GetStarted = () => { fit="cover" src={getStarted3} width={"300px"} - sx={{ - "@media (max-width: 435px)": { - width: "250px", - }, - "@media (max-width: 375px)": {}, - }} /> */} @@ -146,7 +124,9 @@ const GetStarted = () => { "@media (max-width: 1024px)": { textAlign: "left", }, - "@media (max-width: 375px)": {}, + "@media (max-width: 600px)": { + gap:'2rem' + }, }} > { "@media (max-width: 1024px)": { fontSize: "15px", }, - "@media (max-width: 435px)": { - textAlign: "center", - justifyContent: "center", + "@media (max-width: 600px)": { + display:'block', + fontSize:'14px' }, }} > @@ -189,12 +169,8 @@ const GetStarted = () => { fontFamily={"Poppins"} textAlign={"left"} sx={{ - "@media (max-width: 1024px)": { - fontSize: "15px", - }, - "@media (max-width: 435px)": { - textAlign: "center", - justifyContent: "center", + "@media (max-width: 600px)": { + fontSize:'14px' }, }} > @@ -208,12 +184,9 @@ const GetStarted = () => { textAlign={"left"} whiteSpace={"nowrap"} sx={{ - "@media (max-width: 1024px)": { - fontSize: "15px", - }, - "@media (max-width: 435px)": { - textAlign: "center", - justifyContent: "center", + "@media (max-width: 600px)": { + fontSize:'14px', + whiteSpace:'inherit' }, }} > @@ -226,12 +199,8 @@ const GetStarted = () => { fontFamily={"Poppins"} textAlign={"left"} sx={{ - "@media (max-width: 1024px)": { - fontSize: "15px", - }, - "@media (max-width: 435px)": { - textAlign: "center", - justifyContent: "center", + "@media (max-width: 600px)": { + fontSize:'14px' }, }} > diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx index ada9e6f..abf941b 100644 --- a/src/components/LearnPage/LearnBanner.jsx +++ b/src/components/LearnPage/LearnBanner.jsx @@ -26,7 +26,7 @@ const LearnBanner = () => { backgroundRepeat={"no-repeat"} backgroundSize={"cover"} display={"grid"} - placeContent={"center"} + placeContent={"center"} sx={{ "@media (max-width: 1024px)": { height: "70vh", @@ -47,8 +47,8 @@ const LearnBanner = () => { marginTop={"2rem"} paddingLeft={"3.5rem"} sx={{ - "@media (max-width: 435px)": { - paddingLeft: "2rem", + "@media (max-width: 500px)": { + paddingLeft: "1rem", // Correctly target paddingLeft instead of padding }, }} > @@ -70,15 +70,12 @@ const LearnBanner = () => { letterSpacing={"1px"} sx={{ "@media (max-width: 996px)": { - fontSize: "35px", + fontSize: "46px", }, "@media (max-width: 600px)": { - fontSize: "28px", - marginBottom: "2rem", - }, - "@media (max-width: 412px)": { - fontSize: "24px", - marginTop: "2rem", + fontSize: "40px", + marginBottom: "0rem", + lineHeight: "54px", }, }} > @@ -109,8 +106,9 @@ const LearnBanner = () => { "@media (max-width: 1024px)": { fontSize: "22px", }, - "@media (max-width: 600px)": { - fontSize: "17px", + "@media (max-width: 500px)": { + fontSize: "16px", + lineHeight: "28px", }, }} > @@ -160,6 +158,16 @@ const LearnBanner = () => { borderRadius: "0px", opacity: "1", }, + "@media (max-width: 500px)": { + fontSize: "14px", + width: "230px", + height: "44px", + marginTop: "2rem", + bgGradient: + "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)", + color: "#000", + fontWeight: "600", + }, }} _hover={{ color: "#000", diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx index 29a9e60..1d1d55b 100644 --- a/src/components/LearnPage/LearnDev.jsx +++ b/src/components/LearnPage/LearnDev.jsx @@ -75,15 +75,12 @@ const LearnDev = () => { color={"#fff"} width={"fit-content"} sx={{ - "@media (max-width: 996px)": { - fontSize: "35px", - }, - "@media (max-width: 435px)": { - fontSize: "26px", - paddingLeft: "2rem", - }, - "@media (max-width: 375px)": { - fontSize: "", + "@media (max-width: 500px)": { + fontSize: "22px", + fontWeight: "400", + marginBottom: "30px", + padding:'1rem', + paddingBottom:'0px' }, }} > @@ -96,11 +93,8 @@ const LearnDev = () => { paddingBottom={"2rem"} // height={"50vh"} sx={{ - "@media (max-width: 1024px)": { - paddingLeft: "5rem", - }, - "@media (max-width: 435px)": { - paddingLeft: "3rem", + "@media (max-width: 600px)": { + padding: "1rem", }, }} > diff --git a/src/components/LearnPage/WhyRubix.jsx b/src/components/LearnPage/WhyRubix.jsx index 252efce..fe4f485 100644 --- a/src/components/LearnPage/WhyRubix.jsx +++ b/src/components/LearnPage/WhyRubix.jsx @@ -51,7 +51,9 @@ const WhyRubix = () => { "@media (max-width: 1024px)": { padding: "3rem", }, - "@media (max-width: 435px)": {}, + "@media (max-width:600px)": { + padding: "4rem 1rem", + }, }} > { "@media (max-width: 1024px)": { fontSize: "35px", }, - "@media (max-width: 475px)": { - fontSize: "26px", + "@media (max-width: 600px)": { + fontSize: "22px", textAlign: "center", + marginBottom:'30px' }, }} > @@ -106,6 +109,12 @@ const WhyRubix = () => { marginBottom={"1rem"} padding={"1rem 0"} key={accord.id} + sx={{ + "@media (max-width: 600px)": { + marginBottom: "0px", + padding:'12px 0' + }, + }} >

@@ -118,15 +127,14 @@ const WhyRubix = () => { fontSize={"28px"} color={"#fff"} sx={{ - "@media (max-width: 435px)": { - fontSize: "22px", + "@media (max-width: 600px)": { + fontSize: "16px", }, - "@media (max-width: 375px)": {}, }} > {accord.title} - +

{ width: "100%", }, "@media (max-width: 435px)": { - fontSize: "18px", + fontSize: "14px", }, }} > diff --git a/src/components/MobileComponent/MobileCommunityCard.jsx b/src/components/MobileComponent/MobileCommunityCard.jsx index b95a46c..da0eaf7 100644 --- a/src/components/MobileComponent/MobileCommunityCard.jsx +++ b/src/components/MobileComponent/MobileCommunityCard.jsx @@ -118,9 +118,9 @@ const individuals = [ ]; const MobileCommunityCard = () => { - return ( + return ( <> - + { }, "@media (max-width: 500px)": { padding:'0 1rem', - paddingBottom:'5rem' + paddingBottom:'0rem' }, }} > @@ -141,7 +141,7 @@ const MobileCommunityCard = () => { paddingBottom={"3rem"} fontWeight={700} fontSize={"38px"} - textAlign={"left"} + textAlign={"center"} textTransform={"capitalize"} color={"#fff"} sx={{ @@ -164,8 +164,7 @@ const MobileCommunityCard = () => { autoplay={{ delay: 3000 }} onSlideChange={() => console.log("slide change")} onSwiper={(swiper) => console.log(swiper)} - style={{paddingBottom:'60px',position:'relative'}} - + style={{paddingBottom:'8rem',position:'relative'}} > {individuals.map((item) => ( { + return ( + <> + + + + Tools And Resources To Help You Succeed + + + {content.map((item) => ( + + + + ))} + + + + + ); +}; + +export default MobilePlace; diff --git a/src/components/MobileComponent/MobileSolve.jsx b/src/components/MobileComponent/MobileSolve.jsx new file mode 100644 index 0000000..b947ee6 --- /dev/null +++ b/src/components/MobileComponent/MobileSolve.jsx @@ -0,0 +1,166 @@ +import React from "react"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { + Card, + CardHeader, + CardBody, + CardFooter, + Box, + Container, + SimpleGrid, + Heading, + Button, + Text, + Image, + Divider, + Collapse, +} from "@chakra-ui/react"; +import "swiper/css"; +import "swiper/css/pagination"; +import { Navigation, Pagination, Autoplay } from "swiper/modules"; +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 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 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. + 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: `Build token-gated NFTs to provide a tiered experience to different segments. Mount ROI enhancing cross-brand open loyalty programs. + Brands looking for innovative mechanisms to engage and retain customers can quickly build token-gated NFTs to provide a tiered experience to different segments. + 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 MobileSolve = () => { + 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]; + updatedStates[index] = !updatedStates[index]; + return updatedStates; + }); + }; + + return ( + <> + + + + Tools And Resources To Help You Succeed + + + {items.map((item, index) => ( + + + + + + {item.title} + + + + + {item.content} + + + + ))} + + + + + ); +}; + +export default MobileSolve; diff --git a/src/components/MobileComponent/MobileSubnet.jsx b/src/components/MobileComponent/MobileSubnet.jsx index 0853b81..c760f62 100644 --- a/src/components/MobileComponent/MobileSubnet.jsx +++ b/src/components/MobileComponent/MobileSubnet.jsx @@ -19,11 +19,16 @@ const MobileSubnet = () => { navigation={false} modules={[Navigation, Pagination, Autoplay]} loop={true} - // autoplay={{ - // delay: 2500, - // disableOnInteraction: false, - // }} - style={{ backgroundColor: "#000" }} + slidesPerView={1} + style={{ + backgroundColor: "#000", + paddingBottom: "3rem", + position: "relative", + }} + autoplay={{ + delay: 2500, + disableOnInteraction: false, + }} > { { P2P - Only L1 powering full mobile nodes - + + Only L1 powering full mobile nodes + + Mobile nodes with full state data will settle P2P . Consensus provided by nearby node validators. - + High scalability, Partition tolerance and portability @@ -95,20 +102,22 @@ const MobileSubnet = () => { Self Sovereign - + Permissioned subnets with no oracles and
{" "} intermediaries - INo block space ransom - + + INo block space ransom + + Zero risk of transactions being blocked out of
chain. @@ -119,8 +128,8 @@ const MobileSubnet = () => { @@ -141,19 +150,19 @@ const MobileSubnet = () => { cheaper - No GAS fees - + No GAS fees + Incremental and modular infrastructure ask - + No expensive re training of development
resources diff --git a/src/components/MobileComponent/MobileSubnet2.jsx b/src/components/MobileComponent/MobileSubnet2.jsx index 647f0d5..854fdbf 100644 --- a/src/components/MobileComponent/MobileSubnet2.jsx +++ b/src/components/MobileComponent/MobileSubnet2.jsx @@ -21,7 +21,7 @@ const MobileSubnet2 = () => { { 01. Decentralisation - + Rubix Decentralised Identity( DID) issued at L1 is the foundation for building digital ownership enhancing applications. @@ -67,14 +67,14 @@ const MobileSubnet2 = () => { 02. Ultra Scalability - + 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, @@ -86,15 +86,14 @@ const MobileSubnet2 = () => { 03. Data Security and Privacy - - {" "} + Rubix Decentralised Identity(DID) issued at L1 is the foundation for building digital ownership enhancing applications diff --git a/src/components/MobileComponent/MobileSubnet3.jsx b/src/components/MobileComponent/MobileSubnet3.jsx index 7947126..01126ff 100644 --- a/src/components/MobileComponent/MobileSubnet3.jsx +++ b/src/components/MobileComponent/MobileSubnet3.jsx @@ -23,7 +23,7 @@ const MobileSubnet3 = () => { { Single Comprehensive Stack : - + Full Mobile node SDK, Smart Contracts, DIDs, Secondary tokens ( FTs and NFTs) all in one place. @@ -71,15 +71,15 @@ const MobileSubnet3 = () => { High Partition Tolerance : - + Issues in one shard wont affect other shards performance @@ -88,45 +88,45 @@ const MobileSubnet3 = () => { Fully Deterministic : - Apps can bring Own Block space( BYOB) + Apps can bring Own Block space( BYOB) Unique token/object based architecture : - Build unlimited FTs and NFTs all at L1!! + Build unlimited FTs and NFTs all at L1!! Green by the design : - + 100,000 Rubix transactions consume < 10 kWh
< 100000 Visa transactions @@ -137,8 +137,8 @@ const MobileSubnet3 = () => { diff --git a/src/components/MobileComponent/PartnerMobile.jsx b/src/components/MobileComponent/PartnerMobile.jsx index 080269b..1f526c1 100644 --- a/src/components/MobileComponent/PartnerMobile.jsx +++ b/src/components/MobileComponent/PartnerMobile.jsx @@ -77,10 +77,11 @@ export default function PartnerMobile() { width={"full"} overflow={"hidden"} height={"auto"} - background={"#101015"} + background={"#000"} backgroundSize={"cover"} backgroundRepeat={"no-repeat"} - padding={"1rem"} + padding={"1rem"} + paddingBottom={"4rem"} > { textTransform={"capitalize"} color={"#fff"} sx={{ - "@media (max-width: 435px)": { - fontSize: "26px", + "@media (max-width: 600px)": { + fontSize: "22px", + fontWeight:'500' }, - "@media (max-width: 375px)": {}, }} > {Content.heading} { {content.map((item) => ( <> - + ))} diff --git a/src/components/MobileComponent/ToolMobile.jsx b/src/components/MobileComponent/ToolMobile.jsx new file mode 100644 index 0000000..62ef393 --- /dev/null +++ b/src/components/MobileComponent/ToolMobile.jsx @@ -0,0 +1,146 @@ +import React from "react"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { + Box,Container,Text, Image,Card,CardBody,CardFooter,CardHeader, } from "@chakra-ui/react"; +import "swiper/css"; +import "swiper/css/pagination"; +import { Navigation, Pagination, Autoplay } from "swiper/modules"; +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"; +import { Link } from "react-router-dom"; + +const items = [ + { + id: 1, + img: read, + title: "Read our
Resources", + link: `/`, + }, + { + id: 2, + img: support, + title: "Reach Out To Us
For Support", + link: `/Contact`, + }, + { + id: 3, + img: access, + title: "Access The
Developer Portal", + link: `https://learn.rubix.net/node-setup/`, + }, + { + id: 4, + img: wallet, + title: "Wallet", + link: `https://getfexr.com/`, + }, +]; + +const ToolMobile = () => { + return ( + <> + + + + Tools And Resources To Help You Succeed + + + {items.map((item) => ( + + + + + + + + + + + {item.link && ( + + + + )} + + + + + ))} + + + + + ); +}; + +export default ToolMobile; diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx index 6e8cdcd..409be22 100644 --- a/src/components/MobileMenu/MobileMenu.jsx +++ b/src/components/MobileMenu/MobileMenu.jsx @@ -85,8 +85,8 @@ export const MobileMenu = () => { justifyContent={"space-between"} alignItems={"center"} width={"100%"} - padding={"1rem 1rem"} - paddingTop={"3rem"} + padding={"2rem 1rem"} + // paddingTop={"3rem"} sx={{ "@media (max-width: 1024px)": {}, "@media (max-width: 375px)": { diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx index 429eed8..328e0c6 100644 --- a/src/components/SubnetsComponent/NewSubnetComp.jsx +++ b/src/components/SubnetsComponent/NewSubnetComp.jsx @@ -1,4 +1,5 @@ -/* eslint-disable no-unused-vars */ +// / eslint-disable no-unused-vars / +// / eslint-disable no-unused-vars /; import { Box, Container, Image, Stack, Text } from "@chakra-ui/react"; import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react"; import { useEffect, useRef, useState } from "react"; @@ -15,33 +16,33 @@ import { ScrollTrigger } from "gsap/ScrollTrigger"; // Initialize ScrollTrigger gsap.registerPlugin(ScrollTrigger); -const SubnetContent = { - heading: `decentralised Auto Syncing subnets`, -}; +// const SubnetContent = { +// heading: `decentralised Auto Syncing subnets`, +// }; export const NewSubnetComp = () => { - const firstBoxRef = useRef(null); - const secondBoxRef = useRef(null); - const thirdBoxRef = useRef(null); - const mainBox = useRef(null); + // const firstBoxRef = useRef(null); + // const secondBoxRef = useRef(null); + // const thirdBoxRef = useRef(null); + // const mainBox = useRef(null); useEffect(() => { // gsap.set(firstBoxRef.current, { opacity: 1 }); - let tl = gsap - .timeline({ - scrollTrigger: { - trigger: mainBox.current, - start: "top top", - scrub: 1, - pin: true, - end: "bottom bottom-=500vh", - markers: false, - }, - }) - .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 }) - .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 }) - .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 }) - .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 }); + // let tl = gsap + // .timeline({ + // scrollTrigger: { + // trigger: mainBox.current, + // start: "top top", + // scrub: 1, + // pin: true, + // end: "bottom bottom-=500vh", + // markers: false, + // }, + // }) + // .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 }) + // .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 }) + // .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 }) + // .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 }); // .fromTo( // firstBoxRef.current, @@ -65,7 +66,7 @@ export const NewSubnetComp = () => { // ); return () => { - tl.kill(); + // tl.kill(); }; }, []); @@ -77,18 +78,18 @@ export const NewSubnetComp = () => { }} > { { }, }} > - {SubnetContent.heading} + decentralised Auto Syncing subnets { { width={"100%"} padding={"2rem"} // paddingBottom={"2rem"} - ref={thirdBoxRef} - position={"absolute"} - top={"0"} - left={"0"} + // ref={thirdBoxRef} + // position={"absolute"} + // top={"0"} + // left={"0"} display={"grid"} placeContent={"center"} > { backgroundRepeat={"no-repeat"} backgroundSize={"cover"} position="relative" + sx={{ + "@media (max-width: 600px)": { + height: "400px", + }, + }} > { alignItems={"center"} flexDirection={"column"} > - + {bannerHeading} {bannerSubHeading} @@ -67,33 +97,72 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => { gap={7} pt={5} width={"85vw"} + sx={{ + "@media (max-width: 600px)": { + width: "100%", + }, + }} > {/* ========[ Head-Para ]====== */} - + {useCaseHeading} - + {useCaseSubHeading} {useCaseDetails.map(({ title, description }, index) => ( - + {title} - + {description} diff --git a/src/index.css b/src/index.css index 97bf3a4..f9291bf 100644 --- a/src/index.css +++ b/src/index.css @@ -103,11 +103,11 @@ span.swiper-pagination-bullet { } .swiper-pagination-bullet { - background: #383838 !important; + background: #383838; } .swiper-pagination-bullet-active { - background: #fff !important; + background: #fff ; } @media only screen and (max-width: 600px) { @@ -125,12 +125,18 @@ span.swiper-pagination-bullet { } .swiper-button-next { - right: -8px; + right: -8px; } .swiper-button-prev { left: -8px; } + .team-slider .swiper-button-prev { + left: 28px; + } + .team-slider .swiper-button-next { + right: 28px; + } } /* html { font-family: "Mona Sans"; diff --git a/src/pages/BuildPage.jsx b/src/pages/BuildPage.jsx index 56c5c22..92c061f 100644 --- a/src/pages/BuildPage.jsx +++ b/src/pages/BuildPage.jsx @@ -3,21 +3,40 @@ import WhyBuild from "../components/BuildPage/WhyBuild"; import Solve from "../components/BuildPage/Solve"; import Tools from "../components/BuildPage/Tools"; import Connect from "../components/BuildPage/Connect"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import Footer from "../components/Footer/Footer"; import LearnMore from "../components/BuildPage/LearnMore"; +import ToolMobile from "../components/MobileComponent/ToolMobile"; +import MobileSolve from "../components/MobileComponent/MobileSolve"; const BuildPage = () => { + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + useEffect(() => { // Scroll to the top of the page when the component mounts window.scrollTo(0, 0); }, []); - return ( + + const isMobile = windowWidth <= 996; + + return ( <> - - + {!isMobile ? : } + {!isMobile ? : }