mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 20:45:49 +00:00
ecopage
This commit is contained in:
YasinShaikh123
BIN
src/assets/images/EcoBanner.png
Normal file
BIN
src/assets/images/EcoBanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 777 KiB |
118
src/components/Card/EcoCard.jsx
Normal file
118
src/components/Card/EcoCard.jsx
Normal 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;
|
||||
185
src/components/EcoPage/EcoBanner.jsx
Normal file
185
src/components/EcoPage/EcoBanner.jsx
Normal 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
125
src/components/EcoPage/EnterPrises.jsx
Normal 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;
|
||||
@@ -18,7 +18,7 @@ const BannerContent = [
|
||||
},
|
||||
];
|
||||
|
||||
const LearnBanner = () => {
|
||||
const LearnBanner = () => {
|
||||
return (
|
||||
<Box
|
||||
height={"100vh"}
|
||||
|
||||
16
src/pages/Ecosystem.jsx
Normal file
16
src/pages/Ecosystem.jsx
Normal 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
|
||||
@@ -15,7 +15,7 @@ const LearnPage = () => {
|
||||
return (
|
||||
<>
|
||||
<LearnBanner />
|
||||
<LearnDev />
|
||||
<LearnDev />
|
||||
<WhyRubix />
|
||||
<GetStarted />
|
||||
<Faq />
|
||||
|
||||
@@ -23,6 +23,7 @@ import healthTech from "../assets/images/health-tech.png";
|
||||
import Form from "../components/Contact/Form";
|
||||
import UseCase from "../components/UseCase/UseCase";
|
||||
import ResourcesPage from "../pages/ResourcesPage";
|
||||
import Ecosystem from "../pages/Ecosystem";
|
||||
|
||||
export const route = [
|
||||
{
|
||||
@@ -78,6 +79,10 @@ export const route = [
|
||||
path: "resources-page",
|
||||
element: <ResourcesPage />,
|
||||
},
|
||||
{
|
||||
path: "ecosystem",
|
||||
element: <Ecosystem />,
|
||||
},
|
||||
{
|
||||
path: "*",
|
||||
element: <NotFound />,
|
||||
|
||||
Reference in New Issue
Block a user