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

Mobile bigs fixing/ resources and news page development

Browse Source
This commit is contained in:
rockyeverlast
2024-04-22 14:50:52 +05:30
parent a9d82cb2b1
commit f524d7132b
12 changed files with 364 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/kiran.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 KiB

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

@@ -1,12 +1,26 @@
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Text, SimpleGrid, Card, Image, Box, Flex } from "@chakra-ui/react";
import {
Text,
SimpleGrid,
Card,
Image,
Box,
Flex,
border,
} from "@chakra-ui/react";
// import map from "../../assets/images/map-pin.png";
import linkedin from "../../assets/images/linkedin.png";
import games from "../../assets/images/discot.png";
import { Link } from "react-router-dom";
const CommCard = ({ id, imageUrl, name, jobTitle, description, link }) => {
const imgHeight = {
minWidth: `214px`,
height: "240px",
borderRadius: "10px",
objectFit: "cover",
};
return (
<Box
// height={"100vh"}
@@ -32,7 +46,7 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, link }) => {
},
}}
>
<Image src={imageUrl} />
<Image src={imageUrl} style={imgHeight} />
</Text>
<Text
position={"relative"}

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

@@ -24,6 +24,7 @@ import imgeight from "../../assets/images/Component122.png";
import imgnine from "../../assets/images/Component123.png";
import imgten from "../../assets/images/Component128.png";
import imgeleven from "../../assets/images/Component127.png";
import imgtweleve from "../../assets/images/kiran.jpg";
const individuals = [
{
@@ -100,7 +101,7 @@ const individuals = [
},
{
location: "india",
name: "ASHITA GUPTA",
name: "Ashita Gupta",
jobTitle: "Blockchain Developer",
description:
"Enthusiastic blockchain developer who pushes herself every day to excel at work.",
@@ -125,14 +126,15 @@ const individuals = [
imageUrl: imgnine,
link: `https://www.linkedin.com/in/maneesha-panda/`,
},
// {
// location: "india",
// name: "Maneesha Panda",
// jobTitle: "Blockchain Engineer",
// description:
// "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
// imageUrl: imgnine,
// },
{
location: "india",
name: "Kiran H",
jobTitle: "Lead Software Engineer",
description:
"Golang developer and co-lead of the core protocol development and enhancement.",
imageUrl: imgtweleve,
link: `https://www.linkedin.com/in/kiranh1998/`,
},
];
const CommunityCard = () => {

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

@@ -91,9 +91,9 @@ const MobileSubnet = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
fontWeight={700}
fontSize={"20px"}
textTransform={"capitalize"}
fontWeight={500}
fontSize={"16px"}
textTransform={"uppercase"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
@@ -105,8 +105,10 @@ const MobileSubnet = () => {
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>
@@ -122,7 +124,7 @@ const MobileSubnet = () => {
paddingTop={"2rem"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
textTransform={"uppercase"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
@@ -134,13 +136,11 @@ const MobileSubnet = () => {
Self Sovereign
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
<ListItem fontSize={"14px"}>
Permissioned subnets with no oracles and <br />{" "}
intermediaries
</ListItem>
<ListItem fontSize={"14px"}>
INo block space ransom
</ListItem>
<ListItem fontSize={"14px"}>No block space ransom</ListItem>
<ListItem fontSize={"14px"}>
Zero risk of transactions being blocked out of <br />
chain.
@@ -154,7 +154,7 @@ const MobileSubnet = () => {
paddingTop={"2rem"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
textTransform={"uppercase"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
@@ -174,13 +174,15 @@ const MobileSubnet = () => {
},
}}
>
<ListItem>
<ListItem fontSize={"14px"}>
Leverage own infrastructure for block space
</ListItem>
<ListItem>
<ListItem fontSize={"14px"}>
Smart contracts in Rust , GoLang and C/C++
</ListItem>
<ListItem>WASM compiler for smooth code migration</ListItem>
<ListItem fontSize={"14px"}>
WASM compiler for smooth code migration
</ListItem>
</UnorderedList>
</Box>
@@ -190,7 +192,7 @@ const MobileSubnet = () => {
paddingTop={"2rem"}
fontWeight={500}
fontSize={"16px"}
textTransform={"capitalize"}
textTransform={"uppercase"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
@@ -202,8 +204,8 @@ const MobileSubnet = () => {
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 fontSize={"14px"}>

189
src/components/NewsPage/NewsContent.jsx Normal file
View File

@@ -0,0 +1,189 @@
/* eslint-disable no-unused-vars */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import cardimg from "../../assets/images/cardimg2.png";
import { Link } from "react-router-dom";
import { useState } from "react";
import Pagination from "../Pagination/Pagination";
const contents = [
{
id: 1,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 2,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 3,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 4,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 5,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 6,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 7,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 8,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 9,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 10,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 11,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 12,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
{
id: 13,
title: `Financial Times Crypto & Digital Assets Summit Panel`,
contetn: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.`,
},
];
const NewsContent = () => {
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 (
<>
<Container maxW="container.xl" padding={"0 5rem"}>
<Box
margin={"4rem 0"}
display={"flex"}
flexWrap={"wrap"}
rowGap={"3rem"}
justifyContent={"space-between"}
alignItems={"center"}
>
{currentPageContents.map((content) => (
<>
<Box
width={"340px"}
background={"#15181E"}
borderRadius={"10px"}
minHeight={"340px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
minHeight: "0",
},
}}
>
<Image src={cardimg} />
<Box padding={"1rem"}>
<Text
color={"#fff"}
fontSize={"17px"}
marginBottom={"20px"}
minHeight={"40px"}
maxWidth={"420px"}
>
{content.title}
</Text>
<Box>
<Text
color={"#fff"}
fontSize={"15px"}
marginBottom={"20px"}
minHeight={"40px"}
maxWidth={"420px"}
>
{content.contetn}
</Text>
</Box>
{/* <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>
</Container>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handlePageChange}
/>
</>
);
};
export default NewsContent;

98
src/components/NewsPage/NewsHeader.jsx Normal file
View File

@@ -0,0 +1,98 @@
import { Badge, Box, Container, Text } from "@chakra-ui/react";
const NewsHeader = () => {
return (
<Box
height={"80vh"}
backgroundColor={"#000"}
display={"grid"}
alignContent={"center"}
sx={{
"@media (max-width: 1024px)": {
height: "70vh",
},
"@media (max-width: 600px)": {
height: "85vh",
},
}}
>
<Container
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 500px)": {
paddingLeft: "1rem",
},
}}
>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Mona Sans"}
fontSize={"20px"}
marginBottom={"1.5rem"}
>
NEWS & ARTICLES
</Badge>
<Text
as={"h2"}
fontWeight={700}
fontSize={"52px"}
color={"#fff"}
lineHeight={"62px"}
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "46px",
},
"@media (max-width: 600px)": {
fontSize: "40px",
marginBottom: "0rem",
lineHeight: "54px",
},
}}
>
News from{" "}
<Text as={"span"} color="#DE858E">
Rubix
</Text>
</Text>
<Box
marginTop={"1.5rem"}
sx={{
"@media (max-width: 500px)": {
width: "100%",
},
}}
>
<Text
color={"#fff"}
fontSize={"20px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
// textTransform={"capitalize"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 500px)": {
fontSize: "16px",
lineHeight: "28px",
},
}}
>
Stay up to date on what’s happening with Rubix,
<br /> learn about upcoming events and access <br /> important
resources.
</Text>
</Box>
</Container>
</Box>
);
};
export default NewsHeader;

2
src/components/ResourcesPage/Pagination.jsx → src/components/Pagination/Pagination.jsx
View File

@@ -11,7 +11,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange }) => {
const pages = Array.from({ length: totalPages }, (_, index) => index + 1);
return (
<Flex justify="center" mt={4}>
<Flex justify="center" mt={4} mb={5}>
<Box>
{/* <Button
onClick={() => handlePageChange(currentPage - 1)}

2
src/components/ResourcesPage/tableContent/ArticlesTable.jsx
View File

@@ -2,7 +2,7 @@ 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";
import Pagination from "../../Pagination/Pagination";
const contents = [
{

8
src/components/ResourcesPage/tableContent/VideoTable.jsx
View File

@@ -1,8 +1,8 @@
import { Box, Button, Image, Text } from "@chakra-ui/react";
import { Box, Button, Container, 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";
import Pagination from "../../Pagination/Pagination";
const contents = [
{
@@ -74,7 +74,7 @@ const VideoTable = () => {
const currentPageContents = contents.slice(startIndex, endIndex);
return (
<>
<Container maxW="container.xl">
<Box
margin={"4rem 0"}
display={"flex"}
@@ -156,7 +156,7 @@ const VideoTable = () => {
totalPages={totalPages}
onPageChange={handlePageChange}
/>
</>
</Container>
);
};

15
src/pages/Ecosystem.jsx
View File

@@ -1,16 +1,15 @@
import React from 'react'
import EcoBanner from '../components/EcoPage/EcoBanner'
import EnterPrises from '../components/EcoPage/EnterPrises'
import LearnMore from '../components/Community/LearnMore'
import EcoBanner from "../components/EcoPage/EcoBanner";
import EnterPrises from "../components/EcoPage/EnterPrises";
import LearnMore from "../components/Community/LearnMore";
const Ecosystem = () => {
return (
<div>
<EcoBanner />
<EnterPrises />
<LearnMore/>
<LearnMore />
</div>
)
}
);
};
export default Ecosystem
export default Ecosystem;

13
src/pages/NewsPage.jsx Normal file
View File

@@ -0,0 +1,13 @@
import NewsContent from "../components/NewsPage/NewsContent";
import NewsHeader from "../components/NewsPage/NewsHeader";
const NewsPage = () => {
return (
<>
<NewsHeader />
<NewsContent />
</>
);
};
export default NewsPage;

5
src/routes/_routes.jsx
View File

@@ -26,6 +26,7 @@ import ResourcesPage from "../pages/ResourcesPage";
import VideoInternal from "../components/VideoInternal/VideoInternal";
import Ecosystem from "../pages/Ecosystem";
import Events from "../pages/Events";
import NewsPage from "../pages/NewsPage";
export const route = [
{
@@ -93,6 +94,10 @@ export const route = [
path: "events",
element: <Events />,
},
{
path: "news",
element: <NewsPage />,
},
{
path: "*",
element: <NotFound />,