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

Merge conflict in _routes

Browse Source
This commit is contained in:
rockyeverlast
2024-04-19 20:19:12 +05:30
parent 2acf80b531 05a441abba
commit a9d82cb2b1
14 changed files with 802 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/EcoBanner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 777 KiB

118
src/components/Card/EcoCard.jsx Normal file
View File

@@ -0,0 +1,118 @@
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import { Link } from "react-router-dom";
const EcoCard = ({ id, src, alt, text, href }) => {
return (
<Box padding={"1px"} borderRadius={"10px"}>
{/* {images.map((img) => (
<></>
))} */}
<Box
display="inline-block"
width={"520px"}
height={"300px"}
background={"#161616"}
borderRadius={"10px"}
padding={"20px"}
key={id}
sx={{
"@media (max-width: 500px)": {
width: "320px",
fontWeight: "400",
minHeight: "290px",
},
}}
>
<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"}
sx={{
"@media (max-width: 500px)": {
padding: "1rem 0px",
},
}}
>
<Text
color={"#E8E8E8"}
fontSize={"18px"}
fontFamily={"Poppins"}
marginBottom={"20px"}
// fontWeight={"100"}
minHeight={"100px"}
sx={{
"@media (max-width: 500px)": {
fontSize: "14px",
},
}}
>
{text}
</Text>
<Box
display={"flex"}
alignItems={"center"}
_hover={
{
// flexDirection: "column-reverse",
}
}
>
<Box
position={"relative"}
width={"10%"}
_before={{
content: '""',
width: "100%",
position: "absolute",
left: "0",
borderBottom: "1px solid #DE858E",
zIndex: "2",
}}
></Box>
<Link to={href} target="_blank" rel="noopener noreferrer">
<Button
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
}}
sx={{
"@media (max-width: 500px)": {
fontSize: "14px",
},
}}
>
Visit Website
</Button>
</Link>
</Box>
</Box>
</Box>
</Box>
);
};
export default EcoCard;

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

185
src/components/EcoPage/EcoBanner.jsx Normal file
View File

@@ -0,0 +1,185 @@
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/EcoBanner.png";
import { Link } from "react-router-dom";
const BannerContent = [
{
head: "Meaningful",
heading1: ` partnerships`,
heading2: `that push the envelope`,
},
{
subheading: `Our partners are actively building dApps and other projects to support a variety of use cases, including ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, deFi, gameFi, cybersecurity and more.`,
},
{
btn: `Learn Now`,
},
];
const EcoBanner = () => {
return (
<Box
height={"100vh"}
backgroundImage={`url(${banner})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
display={"grid"}
placeContent={"center"}
sx={{
"@media (max-width: 1024px)": {
height: "70vh",
},
"@media (max-width: 600px)": {
height: "85vh",
},
}}
>
<Container
alignItems={"center"}
display={"flex"}
height={"100vh"}
alignContent={"center"}
paddingTop={"10%"}
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 500px)": {
paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
},
}}
>
<Box
width={"78%"}
sx={{
"@media (max-width: 435px)": {
width: "100%",
},
}}
>
<Text
as={"h2"}
fontWeight={700}
fontSize={"52px"}
textTransform={"Capitalize"}
color={"#DE858E"}
lineHeight={"62px"}
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "46px",
},
"@media (max-width: 600px)": {
fontSize: "40px",
marginBottom: "0rem",
lineHeight: "54px",
},
}}
>
<span
style={{
color: "#fff",
}}
>
{BannerContent[0].head}
</span>
{BannerContent[0].heading1} <br />
<span
style={{
color: "#fff",
}}
>
{BannerContent[0].heading2}
</span>
</Text>
<Box marginTop={"10px"} width={"80%"}>
<Text
color={"#fff"}
fontSize={"20px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 500px)": {
fontSize: "16px",
lineHeight: "28px",
},
}}
>
{BannerContent[1].subheading}
</Text>
</Box>
<Link
to="https://learn.rubix.net/"
target="_blank"
rel="noopener noreferrer"
>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"216px"}
marginTop={"2rem"}
height={"56px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"20px"}
zIndex={"1"}
overflow={"hidden"}
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)": {
fontSize: "14px",
width: "230px",
height: "44px",
marginTop: "2rem",
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
color: "#000",
fontWeight: "600",
},
}}
_hover={{
color: "#000",
border: "1px solid white",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Link>
</Box>
</Container>
</Box>
);
};
export default EcoBanner;

125
src/components/EcoPage/EnterPrises.jsx Normal file
View File

@@ -0,0 +1,125 @@
/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import chainx from "../../assets/images/LearnCard2.png";
import ensurity from "../../assets/images/LearnCard4.png";
import exr from "../../assets/images/LearnCard5.png";
import finalo from "../../assets/images/LearnCard1.png";
import jupiter from "../../assets/images/LearnCard3.png";
import { useMediaQuery } from "@chakra-ui/react";
import EcoCard from "../Card/EcoCard";
// import { Badge } from "@chakra-ui/react";
const content = [
{
id: 1,
src: finalo,
alt: "Finalo Education",
text: `Building a Web3 infrastructure to support nonprofit communities, starting with YMCA`,
href: `https://www.finaoeducation.com/`,
},
{
id: 2,
src: `${chainx}`,
alt: "ChainX",
text: `Building solutions for an easier transition from Web2 to Web3 for global enterprises`,
},
{
id: 3,
src: jupiter,
alt: "Jupiter",
text: `A metaverse,XR, and Web3 entity offering solutions that infuse gamification and tokenomics.`,
href: `https://jupitermeta.io/`,
},
{
id: 4,
src: ensurity,
alt: "Ensurity",
text: `Delivers KYC/DID solutions for banks, and financial institutions, a highly secure algorithm for quantum security`,
href: `https://www.ensurity.com/`,
},
{
id: 5,
src: exr,
alt: "EXR",
text: `Mobile-based wallet that generates and stores private keys on a mobile device`,
href: `https://getfexr.com/`,
},
];
const Content = {
heading: `Enterprises and applications already on Rubix`,
};
const EnterPrises = () => {
const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
return (
<Box
// height={"100vh"}
background={"#000"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"2rem 0 4rem 0"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingLeft={"6rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"left"}
textTransform={"capitalize"}
color={"#fff"}
width={"fit-content"}
sx={{
"@media (max-width: 500px)": {
fontSize: "22px",
fontWeight: "400",
marginBottom: "30px",
padding: "1rem",
paddingBottom: "0px",
},
}}
>
{Content.heading} {isSmallScreen ? null : <br />}
</Text>
<Box
// maxW="container.xl"
paddingLeft={"6rem"}
paddingBottom={"2rem"}
// height={"50vh"}
sx={{
"@media (max-width: 600px)": {
padding: "1rem",
},
}}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"25px"}
overflowX={"auto"}
overflowY={"auto"}
sx={{
"&::-webkit-scrollbar": {
width: "0px",
},
}}
>
{content.map((item) => (
<EcoCard
key={item.id}
src={item.src}
alt={item.alt}
text={item.text}
href={item.href}
/>
))}
</Box>
</Box>
</Box>
);
};
export default EnterPrises;

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;

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

@@ -18,7 +18,7 @@ const BannerContent = [
},
];
const LearnBanner = () => {
const LearnBanner = () => {
return (
<Box
height={"100vh"}

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

@@ -0,0 +1,16 @@
import React from 'react'
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/>
</div>
)
}
export default Ecosystem

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;

2
src/pages/LearnPage.jsx
View File

@@ -15,7 +15,7 @@ const LearnPage = () => {
return (
<>
<LearnBanner />
<LearnDev />
<LearnDev />
<WhyRubix />
<GetStarted />
<Faq />

10
src/routes/_routes.jsx
View File

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