Updated home page carousel and useCases

This commit is contained in:
rockyeverlast
2024-05-07 13:22:27 +05:30
parent 7620525ce9
commit 8766e41c97
25 changed files with 335 additions and 183 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 241 KiB

After

Width:  |  Height:  |  Size: 454 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 230 KiB

After

Width:  |  Height:  |  Size: 403 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 304 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 156 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -40,7 +40,7 @@ import { useState } from "react";
import { Link } from "react-router-dom";
const imgWidth = {
width: "210px",
width: "180px",
height: "140px",
objectFit: "contain",
filter: "grayscale(1)",
@@ -51,10 +51,184 @@ const imgWidth = {
},
};
const ymcalogo = {
width: "120px",
height: "85px",
objectFit: "contain",
filter: "grayscale(1)",
transition: "0.5s",
_hover: {
filter: "grayscale(0)",
},
};
const chainxlogo = {
width: "210px",
height: "auto",
objectFit: "contain",
filter: "grayscale(1)",
transition: "0.5s",
_hover: {
filter: "grayscale(0)",
},
};
const jupiterlogo = {
width: "180px",
height: "auto",
objectFit: "contain",
filter: "grayscale(1)",
transition: "0.5s",
_hover: {
filter: "grayscale(0)",
},
};
const cwdelogo = {
width: "15%",
height: "auto",
objectFit: "contain",
filter: "grayscale(1)",
transition: "0.5s",
_hover: {
filter: "grayscale(0)",
},
};
const tzerologo = {
width: "195px",
height: "auto",
objectFit: "contain",
filter: "grayscale(1)",
transition: "0.5s",
_hover: {
filter: "grayscale(0)",
},
};
const kmpglogo = {
width: "155px",
height: "auto",
objectFit: "contain",
filter: "grayscale(1)",
transition: "0.5s",
_hover: {
filter: "grayscale(0)",
},
};
const Content = {
heading: `Look Who's Building on Rubix`,
};
const slideonetop = [
{
id: 1,
logo: chainx,
links: ``,
},
{
id: 2,
logo: ensurity,
links: `https://www.ensurity.com/`,
},
{
id: 3,
logo: exr,
links: `https://getfexr.com/`,
},
{
id: 4,
logo: finalo,
links: `https://www.finaoeducation.com/`,
},
{
id: 5,
logo: iskon,
links: `https://www.iskcon.org/`,
},
];
const slideonebottom = [
{
id: 1,
logo: jupiter,
links: `https://jupitermeta.io/`,
},
{
id: 2,
logo: ondc,
links: `https://ondc.org/`,
},
{
id: 3,
logo: smartcity,
links: `https://smartcityresearch.iiit.ac.in/`,
},
{
id: 4,
logo: ymca,
links: `https://www.ymca.org/`,
},
{
id: 5,
logo: bescom,
links: `https://bescom.co.in/bescom/main/home`,
},
];
const slidetwotop = [
{
id: 1,
logo: kpmg,
links: ``,
},
{
id: 2,
logo: cwde,
links: ``,
},
{
id: 3,
logo: smartcity,
links: `https://smartcityresearch.iiit.ac.in/`,
},
{
id: 4,
logo: tzero,
links: `https://www.tzero.com/`,
},
];
const slidetwobottom = [
{
id: 1,
logo: irctc,
links: `https://www.irctc.co.in/nget/train-search`,
},
{
id: 2,
logo: hdfc,
links: `https://www.hdfcbank.com/`,
},
{
id: 3,
logo: bharat,
links: `https://bharat6galliance.com/index.php`,
},
{
id: 4,
logo: zing,
links: `https://www.zinghr.com/`,
},
];
export default function Partner() {
return (
<>
@@ -101,139 +275,101 @@ export default function Partner() {
pagination={true}
navigation={false}
modules={[Navigation, Pagination, Autoplay]}
autoplay={{
delay: 10000,
disableOnInteraction: false,
}}
// autoplay={{
// delay: 10000,
// disableOnInteraction: false,
// }}
loop={true}
style={{
paddingBottom: "4rem",
}}
>
<SwiperSlide>
<Box>
<Container maxW="container.lg">
<Box
display={"flex"}
justifyContent={"center"}
justifyContent={"space-between"}
alignItems={"center"}
gap={"2rem"}
// flexWrap={"wrap"}
marginBottom={"8rem"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Link to="https://jupitermeta.io/" target="_blank">
<Image src={jupiter} sx={imgWidth} />
</Link>
<Link to="https://www.finaoeducation.com/" target="_blank">
<Image src={finalo} sx={imgWidth} />
</Link>
<Link to="https://www.ymca.org/" target="_blank">
<Image src={ymca} sx={imgWidth} />
</Link>
<Link to="https://ondc.org/" target="_blank">
<Image src={ondc} sx={imgWidth} />
</Link>
{slideonetop.map((logo) => (
<Link to={logo.links} target="_blank" key={logo.id}>
<Image
src={logo.logo}
sx={logo.id === 1 ? chainxlogo : imgWidth}
/>
</Link>
))}
</Box>
<Box
display={"flex"}
justifyContent={"center"}
justifyContent={"space-between"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Link to="https://www.ensurity.com/" target="_blank">
<Image src={ensurity} sx={imgWidth} />
</Link>
<Link to="https://getfexr.com/" target="_blank">
<Image src={exr} sx={imgWidth} />
</Link>
<Link to="https://www.iskcon.org/" target="_blank">
<Image src={iskon} sx={imgWidth} />
</Link>
<Link
to="https://smartcityresearch.iiit.ac.in/"
target="_blank"
>
<Image src={smartcity} sx={imgWidth} />
</Link>
<Link
to="https://bescom.co.in/bescom/main/home"
target="_blank"
>
<Image src={bescom} sx={imgWidth} />
</Link>
{slideonebottom.map((logo) => (
<Link to={logo.links} target="_blank" key={logo.id}>
<Image
src={logo.logo}
sx={
logo.id === 4
? ymcalogo
: logo.id === 1
? jupiterlogo
: imgWidth
}
/>
</Link>
))}
</Box>
</Box>
</Container>
</SwiperSlide>
{/* Box2 */}
<SwiperSlide>
<Box>
<Container maxW="container.lg">
<Box
display={"flex"}
justifyContent={"center"}
justifyContent={"space-between"}
alignItems={"center"}
gap={"2rem"}
marginBottom={"8rem"}
marginBottom={"5rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={kpmg} sx={imgWidth} />
<Image src={cwde} sx={imgWidth} />
<Link to="https://www.tzero.com/" target="_blank">
<Image src={tzero} sx={imgWidth} />
</Link>
<Link
to="https://www.irctc.co.in/nget/train-search"
target="_blank"
>
<Image src={irctc} sx={imgWidth} />
</Link>
<Link to="https://www.hdfcbank.com/" target="_blank">
<Image src={hdfc} sx={imgWidth} />
</Link>
{slidetwotop.map((logo) => (
<Link to={logo.links} target="_blank" key={logo.id}>
<Image
src={logo.logo}
sx={logo.id === 4 ? tzerologo : imgWidth}
/>
</Link>
))}
</Box>
<Box
display={"flex"}
justifyContent={"center"}
justifyContent={"space-between"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Link
to="https://bharat6galliance.com/index.php"
target="_blank"
>
<Image src={bharat} sx={imgWidth} />
</Link>
<Link to="https://www.zinghr.com/" target="_blank">
<Image src={zing} sx={imgWidth} />
</Link>
<Link to="https://www.iskcon.org/" target="_blank">
<Image src={iskon} sx={imgWidth} />
</Link>
<Link
to="https://smartcityresearch.iiit.ac.in/"
target="_blank"
>
<Image src={smartcity} sx={imgWidth} />
</Link>
<Link
to=" https://bescom.co.in/bescom/main/home"
target="_blank"
>
<Image src={bescom} sx={imgWidth} />
</Link>
{slidetwobottom.map((logo) => (
<Link to={logo.links} target="_blank" key={logo.id}>
<Image src={logo.logo} sx={imgWidth} />
</Link>
))}
</Box>
</Box>
</Container>
</SwiperSlide>
</Swiper>
</Box>

View File

@@ -6,6 +6,7 @@ import React, { useEffect } from "react";
import { Box, Button, Image, Text } from "@chakra-ui/react";
import pdf from "../../assets/pdf/Rubix.pdf";
import cardimg from "../../assets/images/CardImg.png";
import img from "../../assets/images/pdfscreen.png";
// eslint-disable-next-line react/prop-types
const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
@@ -182,24 +183,33 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
)}
<Box width={"85vw"}>
<Text
className="rubix-fw-500"
fontSize="3xl"
textColor={"#ffffff"}
marginBottom={"3rem"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
},
}}
>
Documents
</Text>
{useCase.map((item) => (
<>
{item.documents ? (
<Text
className="rubix-fw-500"
fontSize="3xl"
textColor={"#ffffff"}
marginBottom={"3rem"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
},
}}
>
Documents
</Text>
) : (
""
)}
</>
))}
{useCase.map(({ documents }) => (
<Box
display={"flex"}
flexWrap={"wrap"}
justifyContent={"space-between"}
justifyContent={"left"}
gap={"1.2rem"}
width={"100%"}
sx={{
"@media (max-width: 1024px)": {
@@ -210,10 +220,10 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
{documents?.map((item) => (
<Box marginBottom={"2rem"} key={item.id}>
<Box
width={"350px"}
background={"#404040"}
width={"275px"}
background={"#15181E"}
borderRadius={"10px"}
minHeight={"340px"}
minHeight={"360px"}
padding={"15px"}
sx={{
"@media (max-width: 600px)": {
@@ -222,13 +232,13 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
},
}}
>
<Image src={cardimg} />
<Box padding={"1rem"}>
<Image src={img} />
<Box paddingTop={"2rem"}>
<Text
color={"#fff"}
fontSize={"25px"}
fontSize={"18px"}
marginBottom={"20px"}
minHeight={"40px"}
minHeight={"85px"}
maxWidth={"420px"}
>
{item.title}
@@ -255,20 +265,22 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
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>
{
<a download={item.name} href={item.link}>
<Button
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
}}
>
Download
</Button>
</a>
}
</Box>
</Box>
</Box>

View File

@@ -1,3 +1,15 @@
import finTechPdf from "../assets/pdf/finTech/Rubix_powered_privacy_preserving_retail_CBDC_solution.pdf";
import finTechPdf2 from "../assets/pdf/finTech/Tokenisation_on_Rubix.pdf";
import finTechPdf3 from "../assets/pdf/finTech/TokenizedBanking.pdf";
import finTechPdf4 from "../assets/pdf/finTech/Digital_Assets_Exchange_on_Rubix.pdf";
import marTechPdf1 from "../assets/pdf/marTech/Rubix_enabling_trustless_data_colloboration.pdf";
import adTech1 from "../assets/pdf/adTech/InsightExchange-concept.pdf";
import secuirty1 from "../assets/pdf/security/Cybersecurity.pdf";
import secuirty2 from "../assets/pdf/security/Rubix_DID-Powering_Secure_Enterprise_messaging.pdf";
import secuirty3 from "../assets/pdf/security/Rubix_VC_Framework_Ver1.pdf";
import secuirty4 from "../assets/pdf/security/UNIFID.pdf";
import telecom1 from "../assets/pdf/telecom/Decentralized_Cloud.pdf";
import telecom2 from "../assets/pdf/telecom/Virtual_Networks_on_blockchain_enabled_RAN.pdf";
export const useCase = [
{
useCaseHeading: "Problems in the FinTech Sector",
@@ -67,19 +79,27 @@ export const useCase = [
documents: [
{
id: 1,
title: "How Can I Build on Rubix?",
title: "Rubix powered, privacy preserving retail CBDC solution",
link: finTechPdf,
name: `Rubix_powered_privacy_preserving_retail_CBDC_solution.pdf`,
},
{
id: 2,
title: "How Can I Build on Rubix?",
title: "Tokenisation on Rubix",
link: finTechPdf2,
name: `Tokenisation_on_Rubix.pdf`,
},
{
id: 3,
title: "How Can I Build on Rubix?",
title: "Tokenized Banking",
link: finTechPdf3,
name: `TokenizedBanking.pdf`,
},
{
id: 4,
title: "How Can I Build on Rubix?",
title: "Digital Assets Exchange on Rubix",
link: finTechPdf4,
name: `Digital_Assets_Exchange_on_Rubix.pdf`,
},
],
},
@@ -149,19 +169,9 @@ export const adTechContent = [
documents: [
{
id: 1,
title: "How Can I Build on Rubix?",
},
{
id: 2,
title: "How Can I Build on Rubix?",
},
{
id: 3,
title: "How Can I Build on Rubix?",
},
{
id: 4,
title: "How Can I Build on Rubix?",
title: "Insight Exchange-concept",
link: adTech1,
name: `InsightExchange-concept`,
},
],
},
@@ -246,19 +256,9 @@ export const marTechContent = [
documents: [
{
id: 1,
title: "How Can I Build on Rubix?",
},
{
id: 2,
title: "How Can I Build on Rubix?",
},
{
id: 3,
title: "How Can I Build on Rubix?",
},
{
id: 4,
title: "How Can I Build on Rubix?",
title: "Rubix enabling trustless data colloboration",
link: marTechPdf1,
name: ` ubix_enabling_trustless_data_colloboration`,
},
],
},
@@ -329,26 +329,26 @@ export const healthTechContent = [
// },
],
},
{
documents: [
{
id: 1,
title: "How Can I Build on Rubix?",
},
{
id: 2,
title: "How Can I Build on Rubix?",
},
{
id: 3,
title: "How Can I Build on Rubix?",
},
{
id: 4,
title: "How Can I Build on Rubix?",
},
],
},
// {
// documents: [
// {
// id: 1,
// title: "How Can I Build on Rubix?",
// },
// {
// id: 2,
// title: "How Can I Build on Rubix?",
// },
// {
// id: 3,
// title: "How Can I Build on Rubix?",
// },
// {
// id: 4,
// title: "How Can I Build on Rubix?",
// },
// ],
// },
];
export const IdentitySecurityContent = [
@@ -357,18 +357,26 @@ export const IdentitySecurityContent = [
{
id: 1,
title: "How Can I Build on Rubix?",
link: secuirty1,
name: `Rubix_powered_privacy_preserving_retail_CBDC_solution.pdf`,
},
{
id: 2,
title: "How Can I Build on Rubix?",
link: secuirty2,
name: `Rubix_powered_privacy_preserving_retail_CBDC_solution.pdf`,
},
{
id: 3,
title: "How Can I Build on Rubix?",
link: secuirty3,
name: `Rubix_powered_privacy_preserving_retail_CBDC_solution.pdf`,
},
{
id: 4,
title: "How Can I Build on Rubix?",
link: secuirty4,
name: `Rubix_powered_privacy_preserving_retail_CBDC_solution.pdf`,
},
],
},
@@ -379,19 +387,15 @@ export const telecom = [
documents: [
{
id: 1,
title: "How Can I Build on Rubix?",
title: "Decentralized Cloud",
link: telecom1,
name: `Decentralized_Cloud`,
},
{
id: 2,
title: "How Can I Build on Rubix?",
},
{
id: 3,
title: "How Can I Build on Rubix?",
},
{
id: 4,
title: "How Can I Build on Rubix?",
title: "Virtual Networks on blockchain enabled RAN",
link: telecom2,
name: `Virtual_Networks_on_blockchain_enabled_RAN`,
},
],
},