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

Merge branch 'dev' of https://github.com/WDI-Ideas/rubix into dev

Browse Source
This commit is contained in:
YasinShaikh123
2024-04-19 13:20:38 +05:30
parent 5bb232dce2 3e344385d5
commit 01f01dd896
14 changed files with 670 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/ArticleInternalfive/ArticleInternalfive.jsx
View File

@@ -45,7 +45,7 @@ const ArticleInternalfive = () => {
"@media (max-width: 600px)": {
minHeight: "inherit",
width: "100vw",
marginTop:'6rem'
marginTop: "6rem",
},
}}
>
@@ -66,12 +66,14 @@ const ArticleInternalfive = () => {
Enterprise blockchains on a Public Chain!
</Text>
<Text textAlign={"center"} className="rubix-text-xsmall rubix-fw-500"
sx={{
"@media (max-width: 600px)": {
fontSize: "35px",
},
}}
<Text
textAlign={"center"}
className="rubix-text-xsmall rubix-fw-500"
sx={{
"@media (max-width: 600px)": {
fontSize: "35px",
},
}}
>
Business Growth January 5, 2023
</Text>
@@ -155,13 +157,18 @@ const ArticleInternalfive = () => {
},
}}
>
<Text className="rubix-text-xsmall" sx={{
<Text
className="rubix-text-xsmall"
sx={{
"@media (max-width: 600px)": {
marginBottom: "15px",
},
}}>Share</Text>
}}
>
Share
</Text>
<Text
<Text
sx={{
"@media (max-width: 600px)": {
display: "flex",
@@ -196,11 +203,15 @@ const ArticleInternalfive = () => {
<Chip title="BLOCKSPACE" />
</Box>
<Box pt={5} pb={5} sx={{
"@media (max-width: 600px)": {
marginBottom: "3rem",
},
}}>
<Box
pt={5}
pb={5}
sx={{
"@media (max-width: 600px)": {
marginBottom: "3rem",
},
}}
>
{/* <Text pb={10} pt={5}>
<img
width={"100%"}

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

@@ -20,7 +20,11 @@ const MobileHomeCard = ({ key, date, text, link }) => {
padding={"1px"}
borderRadius={"10px"}
sx={{
"@media (max-width: 600px)": {
"@media (max-width: 820px)": {
width: "100%",
margin: "0 auto",
},
"@media (max-width: 435px)": {
width: "100%",
margin: "0 auto",
},
@@ -33,7 +37,7 @@ const MobileHomeCard = ({ key, date, text, link }) => {
minHeight={"415px"}
// key={key}
sx={{
"@media (max-width: 600px)": {
"@media (max-width: 820px)": {
width: "100%",
minHeight: "0",
},

8
src/components/HomePage/Resources.jsx
View File

@@ -110,8 +110,8 @@ const ResourcesPage = () => {
/>
))}
</Container>
<Box textAlign={"center"} marginTop={"4rem"}>
{/* <Button
{/* <Box textAlign={"center"} marginTop={"4rem"}>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
@@ -156,8 +156,8 @@ const ResourcesPage = () => {
}}
>
View More
</Button> */}
</Box>
</Button>
</Box> */}
</Box>
</Box>
);

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

@@ -24,7 +24,11 @@ const MobileSubnet = () => {
// delay: 2500,
// disableOnInteraction: false,
// }}
style={{ backgroundColor: "#000" ,paddingBottom: "6rem", position: "relative"}}
style={{
backgroundColor: "#000",
paddingBottom: "6rem",
position: "relative",
}}
>
<SwiperSlide>
<Box
@@ -39,6 +43,15 @@ const MobileSubnet = () => {
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 820px)": {
justifyContent: "center",
},
"@media (max-width: 435px)": {
justifyContent: "left",
},
}}
>
<Text
as={"h2"}

36
src/components/ResourcesPage/Content.jsx Normal file
View File

@@ -0,0 +1,36 @@
/* eslint-disable react/prop-types */
import { TabPanel } from "@chakra-ui/react";
import TabsArticles from "./tabInsideContent/TabsArticles";
import TabsVideo from "./tabInsideContent/TabsVideo";
import WhitepaperDocs from "./tabInsideContent/WhitepaperDocs";
import ArticlesTable from "./tableContent/ArticlesTable";
import VideoTable from "./tableContent/VideoTable";
const Content = ({ tab }) => {
switch (tab) {
case "The Rubix whitepapers":
return (
<TabPanel>
<WhitepaperDocs />
</TabPanel>
);
case "Articles":
return (
<TabPanel>
<TabsArticles />
<ArticlesTable />
</TabPanel>
);
case "Videos":
return (
<TabPanel>
<TabsVideo />
<VideoTable />
</TabPanel>
);
default:
return null;
}
};
export default Content;

2
src/components/ResourcesPage/EventSection.jsx
View File

@@ -3,7 +3,7 @@ import { Badge, Box, Container, Text } from "@chakra-ui/react";
const EventSection = () => {
return (
<Box
height={"100vh"}
height={"80vh"}
backgroundColor={"#000"}
display={"grid"}
alignContent={"center"}

49
src/components/ResourcesPage/NewestEvents.jsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import {
Box,
@@ -10,6 +11,9 @@ import {
Tabs,
Text,
} from "@chakra-ui/react";
import { useState } from "react";
import Content from "./Content";
import ArticlesTable from "./tableContent/ArticlesTable";
const tabsBtn = [
{
@@ -27,10 +31,16 @@ const tabsBtn = [
];
const NewestEvents = () => {
const [selectedTab, setSelectedTab] = useState(tabsBtn[0].btn);
const handleTabChange = (tab) => {
setSelectedTab(tab);
};
return (
<Box
background={"#000"}
height={"100vh"}
height={"auto"}
sx={{
"@media (max-width: 1024px)": {
height: "70vh",
@@ -45,6 +55,7 @@ const NewestEvents = () => {
maxW="container.xl"
textAlign={"left"}
background={"#000"}
padding={"0 3.5rem"}
sx={{
"@media (max-width: 500px)": {
paddingLeft: "1rem",
@@ -52,27 +63,37 @@ const NewestEvents = () => {
}}
>
<Box>
<Tabs variant="solid-rounded" colorScheme="green">
<TabList>
<Tabs
variant="solid-rounded"
colorScheme="gray"
onChange={handleTabChange}
>
<TabList
paddingBottom={"1rem"}
borderBottom={"1px solid #444444"}
gap={"2rem"}
marginBottom={"1rem"}
>
{tabsBtn.map((btn) => (
<>
<Tab id={btn.id} color={"#fff"}>
<Tab
key={btn.id}
color={"#fff"}
fontWeight={"400"}
fontSize={"20px"}
>
{btn.btn}
</Tab>
</>
))}
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
<TabPanel>
<p>three!</p>
</TabPanel>
<TabPanels color={"#fff"}>
{tabsBtn.map((btn) => (
<>
<Content key={btn.id} tab={btn.btn} />
</>
))}
</TabPanels>
</Tabs>
</Box>

40
src/components/ResourcesPage/Pagination.jsx Normal file
View File

@@ -0,0 +1,40 @@
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Box, Button, Flex } from "@chakra-ui/react";
import { useState } from "react";
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
const handlePageChange = (newPage) => {
onPageChange(newPage);
};
const pages = Array.from({ length: totalPages }, (_, index) => index + 1);
return (
<Flex justify="center" mt={4}>
<Box>
{/* <Button
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
mr={4}
>
Previous
</Button> */}
{pages.map((page) => (
<Button
key={page}
onClick={() => handlePageChange(page)}
variant={currentPage === page ? "solid" : "outline"}
colorScheme={currentPage === page ? "gray" : undefined}
mr={2}
color={"gray"}
>
{page}
</Button>
))}
</Box>
</Flex>
);
};
export default Pagination;

53
src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx Normal file
View File

@@ -0,0 +1,53 @@
import { Badge, Box, Image, Text } from "@chakra-ui/react";
import pic from "../../../assets/images/eventsPic.png";
const TabsArticles = () => {
return (
<>
<Box backgroundColor={"#151515"} padding={"2rem"} borderRadius={"5px"}>
<Text paddingBottom={"1rem"}>Newest Post</Text>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"start"}
gap={"2rem"}
>
<Box>
<Image src={pic} />
</Box>
<Box flex={"1"}>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"14px"}
marginBottom={"1rem"}
>
News & Article
</Badge>
<Text
as={"h2"}
className="rubix-text-subheading"
marginBottom={"1rem"}
>
The Proofchain Technical Whitepaper
</Text>
<Text className="rubix-text-small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
vitae,Aliquam in hendrerit urna. Pellentesque sit amet sapien
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
vitae,Aliquam in hendrerit urna. Pellentesque sit amet sapien
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
vitae
</Text>
</Box>
</Box>
</Box>
</>
);
};
export default TabsArticles;

51
src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx Normal file
View File

@@ -0,0 +1,51 @@
import { Badge, Box, Image, Text } from "@chakra-ui/react";
import pic from "../../../assets/images/eventsPic.png";
const TabsVideo = () => {
return (
<Box backgroundColor={"#151515"} padding={"2rem"} borderRadius={"5px"}>
<Text paddingBottom={"1rem"}>Newest Post</Text>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"start"}
gap={"2rem"}
>
<Box>
<Image src={pic} />
</Box>
<Box flex={"1"}>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"14px"}
marginBottom={"1rem"}
>
News & Article
</Badge>
<Text
as={"h2"}
className="rubix-text-subheading"
marginBottom={"1rem"}
>
The Proofchain Technical Whitepaper
</Text>
<Text className="rubix-text-small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa
mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
vitae,Aliquam in hendrerit urna. Pellentesque sit amet sapien
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
vitae,Aliquam in hendrerit urna. Pellentesque sit amet sapien
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
vitae
</Text>
</Box>
</Box>
</Box>
);
};
export default TabsVideo;

77
src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx Normal file
View File

@@ -0,0 +1,77 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text } from "@chakra-ui/react";
import { Link } from "react-router-dom";
import cardimg from "../../../assets/images/CardImg.png";
import pdf from "../../../assets/pdf/Rubix.pdf";
const WhitepaperDocs = () => {
return (
<Box marginBottom={"2rem"}>
<Box
width={"420px"}
background={"#404040"}
borderRadius={"10px"}
minHeight={"340px"}
padding={"15px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
minHeight: "0",
},
}}
>
<Image src={cardimg} />
<Box padding={"1rem"}>
<Text
color={"#fff"}
fontSize={"25px"}
marginBottom={"20px"}
minHeight={"40px"}
maxWidth={"420px"}
>
The Proofchain Technical Whitepaper
</Text>
<Box
display={"flex"}
alignItems={"center"}
_hover={
{
// flexDirection: "column-reverse",
}
}
>
<Box
position={"relative"}
width={"10%"}
_before={{
content: '""',
width: "100%",
position: "absolute",
left: "0",
borderBottom: "2px solid #DE858E",
borderRadius: "5px",
zIndex: "2",
}}
></Box>
<a download="RubiX_WhitePaper.pdf" href={pdf}>
<Button
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
}}
>
View Document
</Button>
</a>
</Box>
</Box>
</Box>
</Box>
);
};
export default WhitepaperDocs;

163
src/components/ResourcesPage/tableContent/ArticlesTable.jsx Normal file
View File

@@ -0,0 +1,163 @@
import { Box, Button, Image, Text } from "@chakra-ui/react";
import cardimg from "../../../assets/images/CardImg.png";
import { Link } from "react-router-dom";
import { useState } from "react";
import Pagination from "../Pagination";
const contents = [
{
id: 1,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 2,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 3,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 4,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 5,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 6,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 7,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 8,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 9,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 10,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 11,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 12,
title: `The Proofchain Technical Whitepaper`,
},
{
id: 13,
title: `The Proofchain Technical Whitepaper`,
},
];
const ArticlesTable = () => {
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 9;
const totalPages = Math.ceil(contents.length / itemsPerPage);
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
window.scrollTo({ top: 0, behavior: "smooth" });
};
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = Math.min(startIndex + itemsPerPage, contents.length);
const currentPageContents = contents.slice(startIndex, endIndex);
return (
<>
<Box
margin={"4rem 0"}
display={"flex"}
flexWrap={"wrap"}
rowGap={"2rem"}
justifyContent={"space-between"}
alignItems={"center"}
>
{currentPageContents.map((content) => (
<>
<Box
width={"340px"}
background={"#404040"}
borderRadius={"10px"}
minHeight={"340px"}
padding={"15px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
minHeight: "0",
},
}}
>
<Image src={cardimg} />
<Box padding={"1rem"}>
<Text
color={"#fff"}
fontSize={"25px"}
marginBottom={"20px"}
minHeight={"40px"}
maxWidth={"420px"}
>
{content.title}
</Text>
<Box
display={"flex"}
alignItems={"center"}
_hover={
{
// flexDirection: "column-reverse",
}
}
>
<Box
position={"relative"}
width={"10%"}
_before={{
content: '""',
width: "100%",
position: "absolute",
left: "0",
borderBottom: "2px solid #DE858E",
borderRadius: "5px",
zIndex: "2",
}}
></Box>
<Link>
<Button
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
}}
>
Read More
</Button>
</Link>
</Box>
</Box>
</Box>
</>
))}
</Box>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handlePageChange}
/>
</>
);
};
export default ArticlesTable;

163
src/components/ResourcesPage/tableContent/VideoTable.jsx Normal file
View File

@@ -0,0 +1,163 @@
import { Box, Button, Image, Text } from "@chakra-ui/react";
import cardimg from "../../../assets/images/CardImg.png";
import { Link } from "react-router-dom";
import { useState } from "react";
import Pagination from "../Pagination";
const contents = [
{
id: 1,
title: `What’s Next for Rubix?`,
},
{
id: 2,
title: `What Makes Rubix Different?`,
},
{
id: 3,
title: `How is Rubix Changing the World?`,
},
{
id: 4,
title: `How Rubix is Green?`,
},
{
id: 5,
title: `How Can I Build on Rubix?`,
},
{
id: 6,
title: `What is the Rubix Community`,
},
{
id: 7,
title: `What is the Rubix Community`,
},
{
id: 8,
title: `How Can I Build on Rubix?`,
},
{
id: 9,
title: `What is the Rubix Community`,
},
{
id: 10,
title: `What is the Rubix Community`,
},
{
id: 11,
title: `What’s Next for Rubix?`,
},
{
id: 12,
title: `What Makes Rubix Different?`,
},
{
id: 13,
title: `How is Rubix Changing the World?`,
},
];
const VideoTable = () => {
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 9;
const totalPages = Math.ceil(contents.length / itemsPerPage);
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
window.scrollTo({ top: 0, behavior: "smooth" });
};
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = Math.min(startIndex + itemsPerPage, contents.length);
const currentPageContents = contents.slice(startIndex, endIndex);
return (
<>
<Box
margin={"4rem 0"}
display={"flex"}
flexWrap={"wrap"}
rowGap={"2rem"}
justifyContent={"space-between"}
alignItems={"center"}
>
{currentPageContents.map((content) => (
<>
<Box
width={"340px"}
background={"#404040"}
borderRadius={"10px"}
minHeight={"340px"}
padding={"15px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
minHeight: "0",
},
}}
>
<Image src={cardimg} />
<Box padding={"1rem"}>
<Text
color={"#fff"}
fontSize={"25px"}
marginBottom={"20px"}
minHeight={"40px"}
maxWidth={"420px"}
>
{content.title}
</Text>
<Box
display={"flex"}
alignItems={"center"}
_hover={
{
// flexDirection: "column-reverse",
}
}
>
<Box
position={"relative"}
width={"10%"}
_before={{
content: '""',
width: "100%",
position: "absolute",
left: "0",
borderBottom: "2px solid #DE858E",
borderRadius: "5px",
zIndex: "2",
}}
></Box>
<Link>
<Button
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
}}
>
View Video
</Button>
</Link>
</Box>
</Box>
</Box>
</>
))}
</Box>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handlePageChange}
/>
</>
);
};
export default VideoTable;

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

@@ -309,7 +309,7 @@ export const NewSubnetComp = () => {
<Box
backgroundColor={"#000"}
height={"100vh"}
// height={"100vh"}
width={"100%"}
padding={"2rem"}
// paddingBottom={"2rem"}