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

responsive

Browse Source
This commit is contained in:
YasinShaikh123
2024-04-16 17:08:05 +05:30
parent a032a7c314
commit 416018def5
37 changed files with 1077 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ArticleInternalOne/ArticleInternalOne.jsx
View File

@@ -40,10 +40,26 @@ const ArticleInternalOne = () => {
alignItems={"center"}
flexDirection={"column"}
color="white"
sx={{
"@media (max-width: 600px)": {
minHeight: "28px",
minHeight: "40vh",
width:'100vw'
},
}}
>
<Text
textAlign={"center"}
className="rubix-text-heading-2 rubix-fw-600"
className="rubix-fw-600"
fontSize={"40px"}
fontFamily={"Mona Sans"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "28px",
lineHeight: "45px",
},
}}
>
Bring your own BlockSpace
</Text>

40
src/components/BuildPage/BuildBanner.jsx
View File

@@ -16,7 +16,7 @@ const BannerContent = [
},
];
const BuildBanner = () => {
const BuildBanner = () => {
return (
<Box
height={"100vh"}
@@ -46,8 +46,8 @@ const BuildBanner = () => {
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}
</span>
</Text>
<Box marginTop={"1.5rem"} width={"80%"}>
<Box marginTop={"1.5rem"} width={"80%"}
sx={{
"@media (max-width: 500px)": {
width: "100%",
},
}}>
<Text
color={"#fff"}
fontSize={"20px"}
@@ -102,9 +104,9 @@ const BuildBanner = () => {
"@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",

37
src/components/BuildPage/Connect.jsx
View File

@@ -60,13 +60,13 @@ const items = [
];
const Connect = () => {
return (
return (
<Box
// height={"80vh"}
// backgroundImage={`url(${banner})`}
// backgroundSize={"cover"}
// backgroundRepeat={"no-repeat"}
backgroundColor={"#000"}
backgroundColor={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
@@ -79,17 +79,25 @@ const Connect = () => {
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width: 435px)": {},
"@media (max-width: 500px)": {
padding: "4rem 1rem",
},
}}
>
<Text
className="rubix-text-title"
fontFamily={"Mona Sans"}
fontWeight={"700"}
// fontSize={"40px"}
fontSize={"38px"}
color={"#fff"}
marginBottom={"3rem"}
textAlign={"center"}
sx={{
"@media (max-width: 500px)": {
fontSize: "22px",
fontWeight: "400",
marginBottom: "30px",
},
}}
>
Connect with Rubix community
</Text>
@@ -113,17 +121,34 @@ const Connect = () => {
borderRadius={"10px"}
minH={"270px"}
border={"1px solid #454545"}
sx={{
"@media (max-width: 500px)": {
minHeight: "200px",
},
}}
>
<CardHeader
textAlign={"center"}
paddingBottom={"0px"}
marginTop={"2rem"}
sx={{
"@media (max-width: 500px)": {
marginTop: "0px",
},
}}
>
{/* <Image src={item.img} /> */}
<Heading
size="md"
className="rubix-text-large"
fontSize={"22px"}
fontWeight={"500"}
color={"#fff"}
sx={{
"@media (max-width: 500px)": {
fontSize: "17px",
fontWeight: "400",
},
}}
>
{item.head}
</Heading>

109
src/components/BuildPage/LearnMore.jsx
View File

@@ -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 = () => {
<Text
color={"#E4E4E4"}
// fontSize={"22px"}
className="rubix-text-large"
marginBottom={"2rem"}
fontFamily={"Poppins"}
sx={{
"@media (max-width: 500px)": {
fontSize: "14px",
fontWeight: "100",
// marginBottom:'5px',
marginBottom: "30px",
},
}}
>
{SectionContent.subContent}
</Text>
<Link to="/Contact">
<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: "1px solid white",
zIndex: 1,
}}
fontSize={"20px"}
// minW={"284px"}
height={"54px"}
fontFamily={"Poppins"}
backgroundColor={"transparent"}
border={"1px solid #fff"}
color={"#fff"}
fontWeight={"400"}
margin={"0 10px"}
// 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",
},
"@media (max-width: 500px)": {
padding: "5px 15px",
height: "40px",
fontSize: "14px",
margin: "0 7px",
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
color: "#000",
fontWeight: "600",
},
}}
_hover={{
color: "#000",
border: "1px solid white",
zIndex: 1,
}}
>
{SectionContent.btnContent}
</Button>

61
src/components/BuildPage/Solve.jsx
View File

@@ -88,13 +88,34 @@ const Solve = () => {
};
return (
<Box backgroundColor={"#00020E"} padding={"5rem"}>
<Container maxW="container.xl">
<Box
backgroundColor={"#00020E"}
padding={"5rem"}
sx={{
"@media (max-width: 600px)": {
padding: "4rem 1rem",
},
}}
>
<Container
maxW="container.xl"
sx={{
"@media (max-width: 600px)": {
padding: "0rem",
},
}}
>
<Text
fontFamily={"Mona Sans"}
fontWeight={"700"}
fontSize={"40px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
fontWeight: "500",
},
}}
>
Solving Real-World Issues And Business Problems
</Text>
@@ -103,10 +124,21 @@ const Solve = () => {
maxW="container.xl"
justifyContent={"center"}
marginTop={"4rem"}
sx={{
"@media (max-width: 600px)": {
marginTop: "2rem ",
padding: "0px",
},
}}
>
<SimpleGrid
spacing={20}
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
sx={{
"@media (max-width: 600px)": {
gridGap:'10px'
},
}}
>
{items.map((item, index) => (
<Card
@@ -122,8 +154,12 @@ const Solve = () => {
fontWeight={"600"}
fontSize={"20px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{" "}
{item.title}
</Heading>
</CardHeader>
@@ -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",
},
}}
>
<Collapse startingHeight={55} in={expandedCardIndex === index}>
<Collapse
startingHeight={55}
in={expandedCardIndex === index}
sx={{
"@media (max-width: 500px)": {
height: '30px' // Adjusted property to set the height
}
}}
>
<Text dangerouslySetInnerHTML={{ __html: item.content }} />
</Collapse>
<Button
onClick={() => handleToggle(index)}
background={"transparent"}
color={"#fff"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"100"}
fontSize={"16px"}

24
src/components/BuildPage/Tools.jsx
View File

@@ -56,20 +56,29 @@ const Tools = () => {
backgroundRepeat={"no-repeat"}
padding={"5rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 600px)": {
fontSize: "28px",
padding: "4rem 1rem",
},
}}
>
<Container maxW="container.xl">
<Container maxW="container.xl"
sx={{
"@media (max-width: 600px)": {
padding: "0rem",
},
}}
>
<Text
fontFamily={"Mona Sans"}
fontWeight={"600"}
fontSize={"38px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
fontWeight:'500'
},
}}
>
Tools And Resources To Help You Succeed
</Text>
@@ -119,6 +128,11 @@ const Tools = () => {
textAlign={"center"}
fontWeight={"400"}
dangerouslySetInnerHTML={{ __html: item.title }}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
/>
</CardBody>
<CardFooter

40
src/components/BuildPage/WhyBuild.jsx
View File

@@ -53,10 +53,9 @@ const WhyBuild = () => {
maxW={"container.xl"}
padding={"4rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
"@media (max-width: 600px)": {
padding:'4rem 1rem'
},
"@media (max-width: 435px)": {},
}}
>
<Text
@@ -69,12 +68,10 @@ const WhyBuild = () => {
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "35px",
},
"@media (max-width: 475px)": {
fontSize: "26px",
"@media (max-width: 600px)": {
fontSize: "22px",
textAlign: "center",
fontWeight:'500'
},
}}
>
@@ -86,11 +83,10 @@ const WhyBuild = () => {
justifyContent={"space-between"}
gap={"2rem"}
sx={{
"@media (max-width: 435px)": {
"@media (max-width: 600px)": {
flexDirection: "column-reverse",
alignItems: "center",
},
"@media (max-width: 375px)": {},
}}
>
<Box
@@ -99,7 +95,6 @@ const WhyBuild = () => {
"@media (max-width: 435px)": {
width: "100%",
},
"@media (max-width: 375px)": {},
}}
>
<Accordion allowToggle defaultIndex={[0]}>
@@ -111,6 +106,11 @@ const WhyBuild = () => {
marginBottom={"1rem"}
padding={"1rem 0"}
key={accord.id}
sx={{
"@media (max-width: 600px)": {
marginBottom: "0px",
},
}}
>
<h2>
<AccordionButton outline={"none"} paddingLeft={"0px"}>
@@ -123,15 +123,19 @@ const WhyBuild = () => {
fontSize={"28px"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "22px",
"@media (max-width: 600px)": {
fontSize: "16px",
},
"@media (max-width: 375px)": {},
}}
>
{accord.title}
</Box>
<AccordionIcon color={"#fff"} fontSize={"40px"} />
<AccordionIcon color={"#fff"} fontSize={"40px"}
sx={{
"@media (max-width: 600px)": {
fontSize: "30px",
},
}} />
</AccordionButton>
</h2>
<AccordionPanel
@@ -143,12 +147,10 @@ const WhyBuild = () => {
fontSize={"20px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {
"@media (max-width: 600px)": {
fontSize: "14px",
width: "100%",
},
"@media (max-width: 435px)": {
fontSize: "18px",
},
}}
>
<span style={{ paddingBottom: "2rem" }}>

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

@@ -19,16 +19,40 @@ const LearnCard = ({ id, src, alt, text, href }) => {
padding={"20px"}
key={id}
sx={{
"@media (max-width: 435px)": {
width: "390px",
"@media (max-width: 500px)": {
width: "320px",
fontWeight: "400",
minHeight: "290px",
},
}}
>
<Box padding={"1rem"}>
<Image height={"60px"} src={src} alt={alt} />
<Box
padding={"1rem"}
sx={{
"@media (max-width: 600px)": {
padding: "0rem",
},
}}
>
<Image
height={"60px"}
src={src}
alt={alt}
sx={{
"@media (max-width: 600px)": {
height: "40px",
},
}}
/>
</Box>
<Box padding={"1rem"}>
<Box padding={"1rem"}
sx={{
"@media (max-width: 500px)": {
padding: "1rem 0px",
},
}}
>
<Text
color={"#E8E8E8"}
fontSize={"18px"}
@@ -36,6 +60,11 @@ const LearnCard = ({ id, src, alt, text, href }) => {
marginBottom={"20px"}
// fontWeight={"100"}
minHeight={"100px"}
sx={{
"@media (max-width: 500px)": {
fontSize: "14px",
},
}}
>
{text}
</Text>
@@ -70,6 +99,11 @@ const LearnCard = ({ id, src, alt, text, href }) => {
_hover={{
backgroundColor: "transparent",
}}
sx={{
"@media (max-width: 500px)": {
fontSize: "14px",
},
}}
>
Visit Website
</Button>

18
src/components/Card/MobileHomeCard.jsx
View File

@@ -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
</Badge>
<Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
<Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}
sx={{
"@media (max-width: 600px)": {
margin: "15px 0px",
},
}}
>
{date}
</Text>
<Text
@@ -59,6 +65,12 @@ const MobileHomeCard = ({ key, date, text }) => {
marginBottom={"20px"}
minHeight={"73px"}
maxWidth={"460px"}
sx={{
"@media (max-width: 600px)": {
minHeight: "50px",
marginBottom: "10px",
},
}}
>
{text}
</Text>

10
src/components/Card/PlaceCard.jsx
View File

@@ -7,17 +7,17 @@ import { Link } from "react-router-dom";
const PlaceCard = ({ key, text, cardicon, title, button, link }) => {
return (
<Box padding={"1px"} borderRadius={"10px"}>
<Box borderRadius={"10px"}>
<Box
width={"502px"}
background={"#46464647"}
borderRadius={"10px"}
minHeight={"350px"}
borderRadius={"10px"}
minHeight={"350px"}
key={key}
padding={"15px 20px"}
sx={{
"@media (max-width: 500px)": {
width: "320px",
"@media (max-width: 600px)": {
width: "100%",
fontWeight: "400",
minHeight: "290px",
},

11
src/components/Community/CommunityBanner.jsx
View File

@@ -83,8 +83,15 @@ const CommunityBanner = () => {
}}
>
{BannerContent[0].heading1}
</span>{" "}
<br />
</span>
<br
sx={{
display: ["block", "none"], // Show by default, hide on screens less than 600px wide
"@media (max-width: 600px)": {
display: "none", // Hide on screens less than 600px wide
},
}}
/>
{BannerContent[0].heading2}
</Text>
<Box

4
src/components/Community/CommunityCard.jsx
View File

@@ -152,10 +152,10 @@ const CommunityCard = () => {
<Text
as={"h2"}
paddingTop={"4rem"}
paddingBottom={"5rem"}
paddingBottom={"4rem"}
fontWeight={700}
fontSize={"38px"}
textAlign={"left"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{

2
src/components/Community/Connect.jsx
View File

@@ -60,7 +60,7 @@ const items = [
];
const Connect = () => {
return (
return (
<Box
// height={"80vh"}
// backgroundImage={`url(${banner})`}

4
src/components/Community/LearnMore.jsx
View File

@@ -19,7 +19,7 @@ const LearnMore = () => {
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
},
"@media (max-width: 600px)": {
fontSize: "28px",
},
@@ -67,7 +67,7 @@ const LearnMore = () => {
},
}}
>
{SectionContent.subContent}
{SectionContent.subContent}
</Text>
<Text>
<Link to="/BuildPage">

8
src/components/Community/Place.jsx
View File

@@ -48,7 +48,7 @@ const Place = () => {
return (
<Box
// height={"100vh"}
background={"#000"}
background={"#000"}
paddingTop={"4rem"}
paddingBottom={"4rem"}
backgroundSize={"cover"}
@@ -64,7 +64,7 @@ const Place = () => {
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) => (

2
src/components/Footer/MobileFooter.jsx
View File

@@ -95,7 +95,7 @@ const MobileFooter = () => {
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"22px"}
fontSize={"16px"}
>
Social
</Text>

50
src/components/LearnPage/Faq.jsx
View File

@@ -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}
</Box>
{isExpanded ? (
<MinusIcon color={"#fff"} fontSize={"20px"} />
<MinusIcon
color={"#fff"}
fontSize={"20px"}
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
/>
) : (
<AddIcon color={"#fff"} fontSize={"20px"} />
<AddIcon
color={"#fff"}
fontSize={"20px"}
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
/>
)}
</AccordionButton>
</h2>
@@ -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",
},
}}
>

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

@@ -16,7 +16,9 @@ const GetStarted = () => {
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width: 435px)": {},
"@media (max-width: 600px)": {
padding: "4rem 1rem",
},
}}
>
<Text
@@ -25,16 +27,14 @@ const GetStarted = () => {
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
</Text>
<Box padding={"4rem 0"}>
<Box padding={"4rem 0"}
sx={{
"@media (max-width: 600px)": {
padding:'0rem 0'
},
}}>
<Tabs
defaultIndex={0}
orientation="vertical"
@@ -82,7 +84,7 @@ const GetStarted = () => {
justifyContent={"center"}
sx={{
"@media (max-width: 435px)": {
minH: "290px",
// minH: "290px",
},
"@media (max-width: 375px)": {},
}}
@@ -91,36 +93,18 @@ const GetStarted = () => {
{/* <Image
fit="cover"
src={getStarted}
sx={{
"@media (max-width: 435px)": {
width: "250px",
},
"@media (max-width: 375px)": {},
}}
/> */}
</TabPanel>
<TabPanel padding={"0px"}>
{/* <Image
fit="cover"
src={getStarted2}
sx={{
"@media (max-width: 435px)": {
width: "250px",
},
"@media (max-width: 375px)": {},
}}
/> */}
</TabPanel>
<TabPanel padding={"0px"}>
{/* <Image
fit="cover"
src={getStarted}
sx={{
"@media (max-width: 435px)": {
width: "250px",
},
"@media (max-width: 375px)": {},
}}
/> */}
</TabPanel>
<TabPanel padding={"0px"}>
@@ -128,12 +112,6 @@ const GetStarted = () => {
fit="cover"
src={getStarted3}
width={"300px"}
sx={{
"@media (max-width: 435px)": {
width: "250px",
},
"@media (max-width: 375px)": {},
}}
/> */}
</TabPanel>
</TabPanels>
@@ -146,7 +124,9 @@ const GetStarted = () => {
"@media (max-width: 1024px)": {
textAlign: "left",
},
"@media (max-width: 375px)": {},
"@media (max-width: 600px)": {
gap:'2rem'
},
}}
>
<Tab
@@ -160,9 +140,9 @@ const GetStarted = () => {
"@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'
},
}}
>

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

@@ -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",

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

@@ -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",
},
}}
>

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

@@ -51,7 +51,9 @@ const WhyRubix = () => {
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width: 435px)": {},
"@media (max-width:600px)": {
padding: "4rem 1rem",
},
}}
>
<Text
@@ -67,9 +69,10 @@ const WhyRubix = () => {
"@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'
},
}}
>
<h2>
<AccordionButton outline={"none"} paddingLeft={"0px"}>
@@ -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}
</Box>
<AccordionIcon color={"#fff"} fontSize={"40px"} />
<AccordionIcon color={"#fff"} fontSize={"30px"} />
</AccordionButton>
</h2>
<AccordionPanel
@@ -142,7 +150,7 @@ const WhyRubix = () => {
width: "100%",
},
"@media (max-width: 435px)": {
fontSize: "18px",
fontSize: "14px",
},
}}
>

11
src/components/MobileComponent/MobileCommunityCard.jsx
View File

@@ -118,9 +118,9 @@ const individuals = [
];
const MobileCommunityCard = () => {
return (
return (
<>
<Box backgroundColor={"#101015"}>
<Box backgroundColor={"#101015"}>
<Container
maxW={"container.xl"}
padding={"0 5rem"}
@@ -131,7 +131,7 @@ const MobileCommunityCard = () => {
},
"@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) => (
<SwiperSlide

108
src/components/MobileComponent/MobilePlace.jsx Normal file
View File

@@ -0,0 +1,108 @@
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import {
Box,
Container,
Text,
} from "@chakra-ui/react";
import "swiper/css";
import "swiper/css/pagination";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import Partner from "../../assets/images/partner.png";
import PlaceCard from "../Card/PlaceCard";
import Enterprise from "../../assets/images/enterprise.png";
import Banner from "../../assets/images/place-banner.png";
const content = [
{
id: 1,
title: "Partners",
cardicon: Partner,
text: `Our partners strengthen our foundation and the utility offered by the revolutionary L1 Rubix platform through the development and scaling of groundbreaking apps for ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, DeFi, GameFi, cybersecurity, cloud, and more.`,
button: "Explore our ecosystem",
link: `/`,
},
{
id: 2,
title: "Enterprises",
cardicon: Enterprise,
text: `Rubix’s unique, lightweight subnet architecture and revolutionary Proof-of-Pledge protocol enables our partner DEVS to build secure, reliable, and efficient dApps that enable enterprises to realize their transformation goals.`,
button: "See how it works",
link: `/LearnPage`,
},
{
id: 3,
title: "Developers",
cardicon: Enterprise,
text: `Our developers bring the passion, knowledge, and technical resources needed to deliver next-generation Web3 and Web5 platforms and through innovative, scalable solutions.`,
button: "Start Building",
link: `/BuildPage`,
},
{
id: 4,
title: "Advisors",
cardicon: Enterprise,
text: `Our Advisors Share Our Passion For Making This Word A Better Place Through Web3. They Inspire Our Core Team To Change The Status Quo And Make The Impossible Possible.`,
button: "Contact Us",
link: `/Contact`,
},
];
const Content = {
heading: `Find your place at the table`,
};
const MobilePlace = () => {
return (
<>
<Box backgroundColor={"#000"}>
<Container maxW={"container.xl"} padding={"4rem 1rem"}>
<Text
as={"h2"}
paddingBottom={"35px"}
fontWeight={400}
fontSize={"22px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
>
Tools And Resources To Help You Succeed
</Text>
<Swiper
spaceBetween={20}
slidesPerView={1}
style={{ paddingBottom: "3rem", position: "relative" }}
pagination={true}
modules={[Navigation, Pagination, Autoplay]}
loop={true}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
>
{content.map((item) => (
<SwiperSlide
// height={"100vh"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<PlaceCard
key={item.id}
cardicon={item.cardicon}
title={item.title}
date={item.date}
text={item.text}
button={item.button}
link={item.link}
/>
</SwiperSlide>
))}
</Swiper>
</Container>
</Box>
</>
);
};
export default MobilePlace;

166
src/components/MobileComponent/MobileSolve.jsx Normal file
View File

@@ -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 (
<>
<Box backgroundColor={"#00020E"}>
<Container
maxW={"container.xl"}
padding={"4rem 1rem"}
>
<Text
as={"h2"}
paddingBottom={"30px"}
marginBottom={"0px"}
fontWeight={400}
fontSize={"22px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
>
Tools And Resources To Help You Succeed
</Text>
<Swiper
spaceBetween={20}
slidesPerView={1}
style={{ paddingBottom: "3rem", position: "relative" }}
pagination={true}
modules={[Navigation, Pagination, Autoplay]}
loop={true}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
>
{items.map((item, index) => (
<SwiperSlide
// height={"100vh"}
background={"#00020E"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Card
backgroundColor={"#00020E"}
key={item.id}
>
<CardHeader paddingLeft={"0px"} paddingRight={"0px"}>
<Image src={item.img} marginBottom={"20px"} />
<Heading
size="md"
fontFamily={"Mona Sans"}
fontWeight={"400"}
fontSize={"16px"}
color={"#fff"}
>
{item.title}
</Heading>
</CardHeader>
<Divider color={"#fff"} />
<CardBody
paddingLeft={"0px"}
paddingRight={"0px"}
paddingBottom={"0px"}
color={"#BCBCBC"}
fontFamily={"Poppins"}
fontWeight={"500"}
fontSize={"14px"}
>
{item.content}
</CardBody>
</Card>
</SwiperSlide>
))}
</Swiper>
</Container>
</Box>
</>
);
};
export default MobileSolve;

55
src/components/MobileComponent/MobileSubnet.jsx
View File

@@ -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,
}}
>
<SwiperSlide>
<Box
@@ -43,7 +48,7 @@ const MobileSubnet = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontWeight={500}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
@@ -72,20 +77,22 @@ const MobileSubnet = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
P2P
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Only L1 powering full mobile nodes</ListItem>
<ListItem>
<ListItem fontSize={"14px"}>
Only L1 powering full mobile nodes
</ListItem>
<ListItem fontSize={"14px"}>
Mobile nodes with full state data will settle P2P .
Consensus provided by nearby node validators.
</ListItem>
<ListItem>
<ListItem fontSize={"14px"}>
High scalability, Partition tolerance and portability
</ListItem>
</UnorderedList>
@@ -95,20 +102,22 @@ const MobileSubnet = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
Self Sovereign
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
<ListItem fontSize={"14px"}>
Permissioned subnets with no oracles and <br />{" "}
intermediaries
</ListItem>
<ListItem>INo block space ransom</ListItem>
<ListItem>
<ListItem fontSize={"14px"}>
INo block space ransom
</ListItem>
<ListItem fontSize={"14px"}>
Zero risk of transactions being blocked out of <br />
chain.
</ListItem>
@@ -119,8 +128,8 @@ const MobileSubnet = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
@@ -141,19 +150,19 @@ const MobileSubnet = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
cheaper
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>No GAS fees</ListItem>
<ListItem>
<ListItem fontSize={"14px"}>No GAS fees</ListItem>
<ListItem fontSize={"14px"}>
Incremental and modular infrastructure ask
</ListItem>
<ListItem>
<ListItem fontSize={"14px"}>
No expensive re training of development <br />
resources
</ListItem>

21
src/components/MobileComponent/MobileSubnet2.jsx
View File

@@ -21,7 +21,7 @@ const MobileSubnet2 = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontWeight={500}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
@@ -50,14 +50,14 @@ const MobileSubnet2 = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
01. Decentralisation
</Text>
<Text color={"#E1E1E1"}>
<Text fontSize={"14px"} color={"#E1E1E1"}>
Rubix Decentralised Identity( DID) issued at L1 is the foundation
for building digital ownership enhancing applications.
</Text>
@@ -67,14 +67,14 @@ const MobileSubnet2 = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
02. Ultra Scalability
</Text>
<Text color={"#E1E1E1"}>
<Text fontSize={"14px"} color={"#E1E1E1"}>
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 = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
03. Data Security and Privacy
</Text>
<Text color={"#E1E1E1"}>
{" "}
<Text fontSize={"14px"} color={"#E1E1E1"}>
Rubix Decentralised Identity(DID) issued at L1 is the foundation
for building digital ownership enhancing applications
</Text>

36
src/components/MobileComponent/MobileSubnet3.jsx
View File

@@ -23,7 +23,7 @@ const MobileSubnet3 = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontWeight={500}
fontSize={"20px"}
textTransform={"capitalize"}
color={"#fff"}
@@ -53,15 +53,15 @@ const MobileSubnet3 = () => {
<Text
as={"h2"}
paddingTop={"1rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
Single Comprehensive Stack :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
<ListItem fontSize={"14px"}>
Full Mobile node SDK, Smart Contracts, DIDs, Secondary tokens (
FTs and NFTs) all in one place.
</ListItem>
@@ -71,15 +71,15 @@ const MobileSubnet3 = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
High Partition Tolerance :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
<ListItem fontSize={"14px"}>
Issues in one shard wont affect other shards performance
</ListItem>
</UnorderedList>
@@ -88,45 +88,45 @@ const MobileSubnet3 = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
Fully Deterministic :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Apps can bring Own Block space( BYOB)</ListItem>
<ListItem fontSize={"14px"}>Apps can bring Own Block space( BYOB)</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
Unique token/object based architecture :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Build unlimited FTs and NFTs all at L1!!</ListItem>
<ListItem fontSize={"14px"}>Build unlimited FTs and NFTs all at L1!!</ListItem>
</UnorderedList>
</Box>
<Box>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>
Green by the design :
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
<ListItem fontSize={"14px"}>
100,000 Rubix transactions consume &lt; 10 kWh <br /> &lt;
100000 Visa transactions
</ListItem>
@@ -137,8 +137,8 @@ const MobileSubnet3 = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
color={"#fff"}
>

5
src/components/MobileComponent/PartnerMobile.jsx
View File

@@ -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"}
>
<Text
as={"h2"}

11
src/components/MobileComponent/ResourcesMobile.jsx
View File

@@ -44,18 +44,19 @@ const ResourcesMobile = () => {
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}
</Text>
<Swiper
pagination={true}
navigation={true}
// navigation={true}
modules={[Navigation, Pagination, Autoplay]}
style={{ paddingBottom: "4rem", position: "relative" }}
loop={true}
autoplay={{
delay: 2500,
@@ -65,7 +66,7 @@ const ResourcesMobile = () => {
{content.map((item) => (
<>
<SwiperSlide>
<MobileHomeCard key={item.id} date={item.date} text={item.text} />
<MobileHomeCard key={item.id} date={item.date} text={item.text} />
</SwiperSlide>
</>
))}

146
src/components/MobileComponent/ToolMobile.jsx Normal file
View File

@@ -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 </br> Resources",
link: `/`,
},
{
id: 2,
img: support,
title: "Reach Out To Us </br> For Support",
link: `/Contact`,
},
{
id: 3,
img: access,
title: "Access The </br> Developer Portal",
link: `https://learn.rubix.net/node-setup/`,
},
{
id: 4,
img: wallet,
title: "Wallet",
link: `https://getfexr.com/`,
},
];
const ToolMobile = () => {
return (
<>
<Box backgroundColor={"#000"}>
<Container
maxW={"container.xl"}
padding={"4rem 1rem"}
>
<Text
as={"h2"}
paddingBottom={"35px"}
fontWeight={400}
fontSize={"22px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
>
Tools And Resources To Help You Succeed
</Text>
<Swiper
spaceBetween={20}
slidesPerView={2}
style={{ paddingBottom: "3rem", position: "relative" }}
pagination={true}
modules={[Navigation, Pagination, Autoplay]}
loop={true}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
>
{items.map((item) => (
<SwiperSlide
// height={"100vh"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Box
backgroundImage={
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f866), color-stop(0.67, #f8697a9e));"
}
padding={"1px"}
borderRadius={"10px"}
key={item.id}
>
<Card
background={"#131313"}
borderRadius={"10px"}
height={"100%"}
>
<CardHeader
display={"flex"}
justifyContent={"center"}
paddingBottom={"15px"}
>
<Image height={"50px"} src={item.img} />
</CardHeader>
<CardBody
padding={"0px"}
display={"grid"}
placeContent={"center"}
>
<Text
color={"#fff"}
fontFamily={"Poppins"}
fontSize={"14px"}
height={"45px"}
textAlign={"center"}
fontWeight={"400"}
dangerouslySetInnerHTML={{ __html: item.title }}
/>
</CardBody>
<CardFooter
justifyContent={"center"}
cursor={"pointer"}
paddingTop={"15px"}
>
{item.link && (
<Link
to={item.link}
target={item.link.startsWith("http") ? "_blank" : ""}
>
<Image width={"30px"}
src={arrow}
transition="all .5s"
_hover={{
transform: "rotate(45deg)",
}}
/>
</Link>
)}
</CardFooter>
</Card>
</Box>
</SwiperSlide>
))}
</Swiper>
</Container>
</Box>
</>
);
};
export default ToolMobile;

4
src/components/MobileMenu/MobileMenu.jsx
View File

@@ -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)": {

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

@@ -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 = () => {
}}
>
<Box
ref={mainBox}
height={"100vh"}
position={"relative"}
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
// ref={mainBox}
height={"auto"}
// position={"relative"}
// display={"flex"}
// justifyContent={"center"}
// alignItems={"center"}
>
<Box
ref={firstBoxRef}
position={"absolute"}
top={"0"}
left={"0"}
// ref={firstBoxRef}
// position={"absolute"}
// top={"0"}
// left={"0"}
height={"100vh"}
width={"100%"}
backgroundColor={"#000"}
@@ -98,13 +99,14 @@ export const NewSubnetComp = () => {
<Container
maxW="container.xl"
textAlign={"center"}
height={"100vh"}
// height={"100vh"}
display={"grid"}
// p={10}
paddingTop={"4rem"}
alignContent={"center"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"40px"}
textTransform={"capitalize"}
@@ -116,7 +118,7 @@ export const NewSubnetComp = () => {
},
}}
>
{SubnetContent.heading}
decentralised Auto Syncing subnets
</Text>
<Box
display={"grid"}
@@ -194,21 +196,21 @@ export const NewSubnetComp = () => {
</Box>
<Box
backgroundColor={"#000"}
height={"100vh"}
backgroundColor={"#101015"}
// height={"100vh"}
width={"100%"}
padding={"0 5rem"}
paddingBottom={"2rem"}
ref={secondBoxRef}
position={"absolute"}
top={"0"}
left={"0"}
// ref={secondBoxRef}
// position={"absolute"}
// top={"0"}
// left={"0"}
display={"grid"}
placeContent={"center"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingTop={"4rem"}
fontWeight={700}
fontSize={"40px"}
textTransform={"capitalize"}
@@ -310,16 +312,16 @@ export const NewSubnetComp = () => {
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"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingTop={"5rem"}
fontWeight={700}
fontSize={"40px"}
textTransform={"capitalize"}

83
src/components/UseCase/UseCase.jsx
View File

@@ -16,6 +16,11 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
position="relative"
sx={{
"@media (max-width: 600px)": {
height: "400px",
},
}}
>
<Box
position="absolute"
@@ -29,16 +34,41 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
alignItems={"center"}
flexDirection={"column"}
>
<Box w={"50vw"}>
<Box
w={"50vw"}
sx={{
"@media (max-width: 600px)": {
width: "100vw",
padding: "2rem",
},
}}
>
<Text
textAlign={"center"}
className="rubix-text-heading-2 rubix-fw-700"
className="rubix-fw-700"
fontSize={"40px"}
fontFamily={"Mona Sans"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "30px",
},
}}
>
{bannerHeading}
</Text>
<Text
textAlign={"center"}
className="rubix-text-medium rubix-fw-500"
className="rubix-fw-500"
fontSize={"20px"}
fontFamily={"Poppins"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{bannerSubHeading}
</Text>
@@ -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 ]====== */}
<Box width={"65vw"}>
<Box width={"65vw"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
<Text
style={{ marginBottom: 6 }}
className="rubix-fw-500"
fontSize="3xl"
textColor={"#ffffff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
},
}}
>
{useCaseHeading}
</Text>
<Text textColor={"#ffffff"} fontSize="xl">
<Text textColor={"#ffffff"} fontSize="xl"
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
>
{useCaseSubHeading}
</Text>
</Box>
{useCaseDetails.map(({ title, description }, index) => (
<Box width={"75vw"}>
<Box width={"75vw"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
<Text
style={{ marginBottom: 6 }}
className="rubix-fw-500"
fontSize="2xl"
textColor={"#ffffff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{title}
</Text>
<Text textColor={"#ffffff"} fontSize="lg">
<Text textColor={"#ffffff"} fontSize="lg"
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
>
{description}
</Text>
</Box>

12
src/index.css
View File

@@ -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";

27
src/pages/BuildPage.jsx
View File

@@ -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 (
<>
<BuildBanner />
<WhyBuild />
<Solve />
<Tools />
{!isMobile ? <Solve /> : <MobileSolve />}
{!isMobile ? <Tools /> : <ToolMobile />}
<Connect />
<LearnMore />
<Footer />

5
src/pages/Community.jsx
View File

@@ -9,6 +9,7 @@ import LearnMore from "../components/Community/LearnMore";
import Footer from "../components/Footer/Footer";
import MobileCommunityCard from "../components/MobileComponent/MobileCommunityCard";
import { useEffect, useState } from "react";
import MobilePlace from "../components/MobileComponent/MobilePlace";
const Community = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -36,11 +37,11 @@ const Community = () => {
<>
<CommunityBanner />
{!isMobile ? <CommunityCard /> : <MobileCommunityCard />}
<Place />
{!isMobile ? <Place /> : <MobilePlace />}
<Connect />
{/* <Happen />
<Insights /> */}
<LearnMore />
<LearnMore />
<Footer />
</>
);

2
src/pages/HomePage.jsx
View File

@@ -40,7 +40,7 @@ const HomePage = () => {
<>
<HomeBanner />
{/* <NewSubnetComp /> */}
{!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
{!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
<Stats />
<WhitePaper />
{!isMobile ? <Partner /> : <PartnerMobile />}