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

enent ecostytem page

Browse Source
This commit is contained in:
YasinShaikh123
2024-04-19 19:48:28 +05:30
parent 01f01dd896
commit 05a441abba
7 changed files with 351 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Card/HappenCard.jsx
View File

@@ -48,7 +48,7 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
</Text>
<Text
color={"#fff"}
fontSize={"20px"}
fontSize={"18px"}
marginBottom={"10px"}
sx={{
"@media (max-width: 500px)": {
@@ -61,6 +61,7 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
</Text>
<Text
color={"#E1E1E1"}
fontSize={"14px"}
sx={{
"@media (max-width: 500px)": {
fontSize: "14px",

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

@@ -41,7 +41,7 @@ const Content = {
};
const Happen = () => {
return (
return (
<Box
// height={"100vh"}
background={"#000"}

82
src/components/EventsPage/EventsSec.jsx Normal file
View File

@@ -0,0 +1,82 @@
import { Badge, Box, Container, Text } from "@chakra-ui/react";
const EventsSec = () => {
return (
<Box
height={"80vh"}
backgroundColor={"#000"}
display={"grid"}
alignContent={"center"}
sx={{
"@media (max-width: 1024px)": {
height: "70vh",
},
"@media (max-width: 600px)": {
height: "400px",
},
}}
>
<Container
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 600px)": {
paddingLeft: "1rem",
},
}}
>
<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",
},
}}
>
Events
</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: 600px)": {
fontSize: "14px",
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 EventsSec;

117
src/components/EventsPage/NewestEvents.jsx Normal file
View File

@@ -0,0 +1,117 @@
import { Badge, Box, Container, Image, Text } from "@chakra-ui/react";
import pic from "../../assets/images/eventsPic.png";
const NewestEvent = () => {
return (
<Box backgroundColor={"#000"}>
<Container
maxW="container.xl"
textAlign={"left"}
padding={"0rem 3.5rem"}
sx={{
"@media (max-width: 600px)": {
padding: "1rem",
},
}}
>
<Box
backgroundColor={"#101015"}
padding={"2rem"}
borderRadius={"5px"}
sx={{
"@media (max-width: 600px)": {
padding: "1rem",
},
}}
>
<Text
paddingBottom={"1rem"}
color={"#fff"}
fontSize={"18px"}
fontWeight={"500"}
>
Newest Post
</Text>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"start"}
gap={"2rem"}
position={"relative"}
sx={{
"@media (max-width: 500px)": {
display: "block",
},
}}
>
<Text
color={"#fff"}
backgroundColor={"#DE858E"}
position={"absolute"}
top={"0"}
left={"17"}
padding={"6px 13px"}
textAlign={"center"}
sx={{
"@media (max-width: 500px)": {
fontSize: "14px",
},
}}
>
May <br /> 04
</Text>
<Text>
<Image src={pic} />
</Text>
<Box flex={"1"}>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"14px"}
marginBottom={"1rem"}
sx={{
"@media (max-width: 500px)": {
marginTop: "2rem",
},
}}
>
Events
</Badge>
<Text
as={"h2"}
marginBottom={"1rem"}
color={"#fff"}
fontSize={"25px"}
sx={{
"@media (max-width: 500px)": {
fontSize: "20px",
},
}}
>
The Proofchain Technical Whitepaper
</Text>
<Text className="rubix-text-small" >
How do we align digital asset markets with UN Sustainable
Development Goals? Is the blockchain the missing piece to
bringing the world back on track to a two degree temperature
rise?
</Text>
<Text
color={"#A4A4A4"}
fontWeight={"300"}
fontSize={"14px"}
marginTop={"18px"}
>
Sunday, 10 May 2024
</Text>
</Box>
</Box>
</Box>
</Container>
</Box>
);
};
export default NewestEvent;

128
src/components/EventsPage/UpcomingEvents.jsx Normal file
View File

@@ -0,0 +1,128 @@
/* eslint-disable no-unused-vars */
import {
Box,
Container,
Text,
Image,
Button,
SimpleGrid,
} from "@chakra-ui/react";
import HappenCard from "../Card/HappenCard";
const Latest = [
{
id: 1,
date: `Sunday, 10 May 2024`,
text: `Financial Times Crypto & Digital Assets Summit Panel`,
para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
curentDate: "10",
month: "MAY",
},
{
id: 2,
date: `Sunday, 15 Jan 2024`,
text: `Financial Times Crypto & Digital Assets Summit Panel`,
para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
curentDate: "10",
month: "MAY",
},
{
id: 3,
date: `Sunday, 14 Feb 2024`,
text: `Financial Times Crypto & Digital Assets Summit Panel`,
para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
curentDate: "10",
month: "MAY",
},
];
const Content = {
heading: `Upcoming Events`,
};
const UpcomingEvents = () => {
return (
<Box
// height={"100vh"}
background={"#000"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
paddingTop={"2rem"}
sx={{
"@media (max-width: 500px)": {
paddingTop: "0px",
},
}}
>
<Container
maxW={"container.xl"}
padding={"0 5rem"}
paddingBottom={"2rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width: 500px)": {
padding: "1rem",
},
}}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"26px"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 500px)": {
fontSize: "22px",
fontWeight: "400",
},
}}
>
{Content.heading}
</Text>
<Box
paddingBottom={"2rem"}
// height={"50vh"}
sx={{
"@media (max-width: 500px)": {
paddingLeft: "0rem",
},
}}
>
<Box>
<SimpleGrid
spacing={5}
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
sx={{
"@media (max-width: 500px)": {
display: "flex",
overflowX: "scroll",
"&::-webkit-scrollbar": {
width: "0px",
},
},
}}
>
{Latest.map((item) => (
<HappenCard
key={item.id}
date={item.date}
text={item.text}
para={item.para}
curentDate={item.curentDate}
month={item.month}
/>
))}
</SimpleGrid>
</Box>
</Box>
</Container>
</Box>
);
};
export default UpcomingEvents;

16
src/pages/Events.jsx Normal file
View File

@@ -0,0 +1,16 @@
import React from "react";
import EventsSec from "../components/EventsPage/EventsSec";
import NewestEvent from "../components/EventsPage/NewestEvents";
import UpcomingEvents from "../components/EventsPage/UpcomingEvents";
const Events = () => {
return (
<>
<EventsSec />
<NewestEvent />
<UpcomingEvents />
</>
);
};
export default Events;

5
src/routes/_routes.jsx
View File

@@ -24,6 +24,7 @@ import Form from "../components/Contact/Form";
import UseCase from "../components/UseCase/UseCase";
import ResourcesPage from "../pages/ResourcesPage";
import Ecosystem from "../pages/Ecosystem";
import Events from "../pages/Events";
export const route = [
{
@@ -83,6 +84,10 @@ export const route = [
path: "ecosystem",
element: <Ecosystem />,
},
{
path: "events",
element: <Events />,
},
{
path: "*",
element: <NotFound />,