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

Slick slider added to Client page

Browse Source
This commit is contained in:
rockyeverlast
2024-04-09 13:29:39 +05:30
parent 4488277baa
commit e8305e7640
27 changed files with 795 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
package-lock.json generated
View File

@@ -21,6 +21,7 @@
"react-hook-form": "^7.51.2",
"react-intersection-observer": "^9.8.1",
"react-router-dom": "^6.22.3",
"react-slick": "^0.30.2",
"swiper": "^11.1.0"
},
"devDependencies": {
@@ -2807,6 +2808,11 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3026,6 +3032,11 @@
"node": ">=6.0.0"
}
},
"node_modules/enquire.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
"integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
},
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -4334,6 +4345,14 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"dev": true
},
"node_modules/json2mq": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
"integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
"dependencies": {
"string-convert": "^0.2.0"
}
},
"node_modules/jsx-ast-utils": {
"version": "3.3.5",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -4391,6 +4410,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4960,6 +4984,22 @@
"react-dom": ">=16.8"
}
},
"node_modules/react-slick": {
"version": "0.30.2",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
"integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
"dependencies": {
"classnames": "^2.2.5",
"enquire.js": "^2.1.6",
"json2mq": "^0.2.0",
"lodash.debounce": "^4.0.8",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-style-singleton": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -5026,6 +5066,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"node_modules/resolve": {
"version": "2.0.0-next.5",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -5271,6 +5316,11 @@
"node": ">=0.10.0"
}
},
"node_modules/string-convert": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
"integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
},
"node_modules/string.prototype.matchall": {
"version": "4.0.11",
"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",

1
package.json
View File

@@ -23,6 +23,7 @@
"react-hook-form": "^7.51.2",
"react-intersection-observer": "^9.8.1",
"react-router-dom": "^6.22.3",
"react-slick": "^0.30.2",
"swiper": "^11.1.0"
},
"devDependencies": {

BIN
src/assets/images/EXR.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
src/assets/images/Finaloeducation.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/images/bescom.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
src/assets/images/chainx.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/images/ensurity.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/assets/images/iskon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
src/assets/images/ondc.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
src/assets/images/smartcity.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/images/ymca.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

25
src/components/BuildPage/Connect.jsx
View File

@@ -108,12 +108,10 @@ const Connect = () => {
background={"#000"}
borderRadius={"10px"}
minH={"270px"}
height={"100%"}
border={"1px solid #454545"}
>
<CardHeader
display={"flex"}
justifyContent={"center"}
textAlign={"center"}
paddingBottom={"0px"}
marginTop={"2rem"}
>
@@ -133,7 +131,7 @@ const Connect = () => {
justifyContent={"center"}
gap={"2.5rem"}
>
<Link display={"grid"} placeContent={"center"}>
<Link placeContent={"center"}>
<Box>
<Image src={item.logo1} margin={"0 auto 20px auto"} />
</Box>
@@ -141,19 +139,22 @@ const Connect = () => {
{item.social1}
</Text>
</Link>
<Link display={"grid"} placeContent={"center"}>
<Link placeContent={"center"}>
<Image src={item.logo2} margin={"0 auto 20px auto"} />
<Text className="rubix-text-small" fontWeight={"400"}>
{item.social2}
</Text>
</Link>
<Link display={"grid"} placeContent={"center"}>
<Image src={item.logo3} margin={"0 auto 20px auto"} />
<Text className="rubix-text-small" fontWeight={"400"}>
{item.social3}
</Text>
</Link>
{/* <>{console.log(item.logo1)}</> */}
{item.social3 ? (
<Link display={"grid"} placeContent={"center"}>
<Image src={item.logo3} margin={"0 auto 20px auto"} />
<Text className="rubix-text-small" fontWeight={"400"}>
{item.social3}
</Text>
</Link>
) : (
""
)}
</CardBody>
</Card>
</Box>

12
src/components/HomePage/Client.jsx
View File

@@ -1,8 +1,8 @@
import { Box, Container, Text, Image } from "@chakra-ui/react";
import chainx from "../../assets/images/chainx.png";
import ensurity from "../../assets/images/ensurity.png";
import exr from "../../assets/images/EXR.png";
import finalo from "../../assets/images/Finaloeducation.png";
import exr from "../../assets/images/exr.png";
import finalo from "../../assets/images/finalo.png";
import iskon from "../../assets/images/iskon.png";
import jupiter from "../../assets/images/jupitermeta.png";
import ondc from "../../assets/images/ondc.png";
@@ -11,7 +11,7 @@ import ymca from "../../assets/images/ymca.png";
import bescom from "../../assets/images/bescom.png";
const imgWidth = {
width: "230px",
width: "150px",
height: "82px",
objectFit: "contain",
filter: "grayscale(1)",
@@ -53,11 +53,9 @@ const Client = () => {
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "35px",
},
"@media (max-width: 412px)": {
fontSize: "29px",
fontSize: "22px",
},
"@media (max-width: 412px)": {},
}}
>
{Content.heading}

37
src/components/HomePage/HomeBanner.jsx
View File

@@ -1,5 +1,6 @@
import { Box, Button, Text } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import { useMediaQuery } from "@chakra-ui/react";
import banner from "../../assets/images/bannerBg.gif";
const BannerContent = [
@@ -9,7 +10,7 @@ const BannerContent = [
},
{
subheading: `Looking for a public L1 blockchain to quickly launch Tokenized,
Scalable Web 3 initiatives with 100% data sovereignty?`,
Scalable Web3 initiatives with 100% data sovereignty?`,
},
{
btn: `Build Now`,
@@ -17,6 +18,7 @@ const BannerContent = [
];
const HomeBanner = () => {
const [isSmallScreen] = useMediaQuery("(max-width: 435px)");
return (
<Box
height={"100vh"}
@@ -27,8 +29,7 @@ const HomeBanner = () => {
placeContent={"center"}
position="relative"
zIndex={"2"}
ScaleFade
initialScale={0.9}
initialscale={0.9}
in={true}
sx={{
"&::after": {
@@ -65,7 +66,7 @@ const HomeBanner = () => {
fontSize: "45px",
},
"@media (max-width: 600px)": {
fontSize: "28px",
fontSize: "38px",
marginBottom: "2rem",
},
"@media (max-width: 412px)": {
@@ -75,14 +76,26 @@ const HomeBanner = () => {
}}
>
{item.heading1}
<span
style={{
color: "#fff",
fontWeight: "600",
}}
>
{item.heading2}
</span>
{!isSmallScreen ? (
<span
style={{
color: "#fff",
fontWeight: "600",
}}
>
{item.heading2}
</span>
) : (
<span
style={{
color: "#fff",
fontWeight: "600",
fontSize: "24px",
}}
>
{item.heading2}
</span>
)}
</Text>
<Container maxW="container.lg">
<Text

261
src/components/HomePage/Partner.jsx Normal file
View File

@@ -0,0 +1,261 @@
// "use client";
import {
Box,
Container,
IconButton,
Image,
Text,
useBreakpointValue,
} from "@chakra-ui/react";
import { ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons";
import chainx from "../../assets/images/chainx.png";
import ensurity from "../../assets/images/ensurity.png";
import exr from "../../assets/images/exr.png";
import finalo from "../../assets/images/finalo.png";
import iskon from "../../assets/images/iskon.png";
import jupiter from "../../assets/images/jupiter.png";
import ondc from "../../assets/images/ondc.png";
import smartcity from "../../assets/images/smartcity.png";
import ymca from "../../assets/images/ymca.png";
import bescom from "../../assets/images/bescom.png";
import Slider from "react-slick";
import { useState } from "react";
// Settings for the slider
const settings = {
dots: true,
arrows: false,
fade: false,
infinite: true,
autoplay: true,
speed: 500,
autoplaySpeed: 5000,
slidesToShow: 1,
slidesToScroll: 1,
};
const imgWidth = {
width: "180px",
height: "82px",
objectFit: "contain",
filter: "grayscale(1)",
transition: "0.5s",
_hover: {
filter: "grayscale(0)",
},
};
const Content = {
heading: `Look Who's Building on Rubix`,
};
export default function Partner() {
const [slider, setSlider] = useState(null);
const top = useBreakpointValue({ base: "90%", md: "50%" });
const side = useBreakpointValue({ base: "30%", md: "10px" });
/* The `const cards` array is storing objects where each object contains an `img` property that holds
the path to an image file. These image paths are then used to display images in the slider
component later in the code. Each object in the array represents a different image that will be
displayed in the slider. */
// const cards = [
// {
// img: chainx,
// },
// {
// img: ensurity,
// },
// {
// img: exr,
// },
// {
// img: finalo,
// },
// {
// img: iskon,
// },
// {
// img: jupiter,
// },
// {
// img: ondc,
// },
// {
// img: smartcity,
// },
// {
// img: ymca,
// },
// {
// img: bescom,
// },
// ];
return (
<Box
position={"relative"}
width={"full"}
overflow={"hidden"}
height={"auto"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"3rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 996px)": {
paddingBottom: "3rem",
},
}}
>
{/* CSS files for react-slick */}
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
{/* Left Icon */}
<IconButton
aria-label="left-arrow"
colorScheme="messenger"
borderRadius="full"
position="absolute"
left={side}
top={top}
transform={"translate(0%, -50%)"}
zIndex={2}
onClick={() => slider?.slickPrev()}
background={"#DE858E"}
_hover={{
background: "#DE858E",
}}
>
<ArrowBackIcon />
</IconButton>
{/* Right Icon */}
<IconButton
aria-label="right-arrow"
colorScheme="messenger"
borderRadius="full"
position="absolute"
right={side}
top={top}
transform={"translate(0%, -50%)"}
zIndex={2}
onClick={() => slider?.slickNext()}
background={"#DE858E"}
_hover={{
background: "#DE858E",
}}
>
<ArrowForwardIcon />
</IconButton>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"4rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 412px)": {},
}}
>
{Content.heading}
</Text>
{/* Slider */}
<Slider
{...settings}
ref={(slider) => setSlider(slider)}
style={{ marginBottom: "4rem" }}
>
{/* Box1 */}
{/* <Container maxW="container.lg"> */}
<Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
// flexWrap={"wrap"}
marginBottom={"8rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
<Image src={ondc} sx={imgWidth} />
</Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={ensurity} sx={imgWidth} />
<Image src={exr} sx={imgWidth} />
<Image src={iskon} sx={imgWidth} />
<Image src={smartcity} sx={imgWidth} />
<Image src={bescom} sx={imgWidth} />
</Box>
</Box>
{/* Box2 */}
<Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
marginBottom={"8rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
<Image src={ondc} sx={imgWidth} />
</Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={ensurity} sx={imgWidth} />
<Image src={exr} sx={imgWidth} />
<Image src={iskon} sx={imgWidth} />
<Image src={smartcity} sx={imgWidth} />
<Image src={bescom} sx={imgWidth} />
</Box>
</Box>
{/* </Container> */}
</Slider>
</Box>
);
}

77
src/components/HomePage/Stats.jsx
View File

@@ -2,19 +2,20 @@ import { Box, Container, Text } from "@chakra-ui/react";
import { useInView } from "react-intersection-observer";
import CountUp from "react-countup";
import banner from "../../assets/images/Statsbanner.png";
import { useMediaQuery } from "@chakra-ui/react";
const StatsContent = {
heading: `Key Statistics`,
};
const Stats = () => {
const [isSmallScreen] = useMediaQuery("(max-width: 435px)");
const { ref, inView } = useInView({
threshold: 0.5,
triggerOnce: false,
triggerOnce: true,
});
return (
<Box
ref={ref}
height={"auto"}
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
@@ -41,7 +42,7 @@ const Stats = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
fontSize: "25px",
},
}}
>
@@ -70,8 +71,8 @@ const Stats = () => {
"@media (max-width: 1024px)": {},
"@media (max-width: 996px)": {
flexDirection: "column",
gap: "4rem",
marginBottom: "4rem",
gap: "2rem",
marginBottom: "2rem",
},
"@media (max-width: 375px)": {
gap: "2rem",
@@ -80,6 +81,7 @@ const Stats = () => {
}}
>
<Box
ref={ref}
color={"#fff"}
textAlign={"center"}
position={"relative"}
@@ -105,7 +107,10 @@ const Stats = () => {
start={50000000}
end={51400000}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
style={{
fontSize: `${isSmallScreen ? "23px" : "40px"}`,
fontWeight: "700",
}}
/>
)}
<Text
@@ -113,11 +118,9 @@ const Stats = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
fontSize: "14px",
},
"@media (max-width: 375px)": {},
}}
>
Total Capped Supply
@@ -125,7 +128,7 @@ const Stats = () => {
</Box>
<Box
color={"#fff"}
ref={ref}
// ref={ref}
textAlign={"center"}
position={"relative"}
_before={{
@@ -150,7 +153,10 @@ const Stats = () => {
start={10000000}
end={10247786}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
style={{
fontSize: `${isSmallScreen ? "23px" : "40px"}`,
fontWeight: "700",
}}
/>
)}
<Text
@@ -158,23 +164,24 @@ const Stats = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
fontSize: "14px",
},
"@media (max-width: 375px)": {},
}}
>
Digital Asset Tools mined
</Text>
</Box>
<Box color={"#fff"} ref={ref} textAlign={"center"}>
<Box color={"#fff"} textAlign={"center"}>
{inView && (
<CountUp
start={100000}
end={174015}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
style={{
fontSize: `${isSmallScreen ? "23px" : "40px"}`,
fontWeight: "700",
}}
/>
)}
<Text
@@ -182,11 +189,9 @@ const Stats = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
fontSize: "14px",
},
"@media (max-width: 375px)": {},
}}
>
Live Nodes
@@ -205,6 +210,9 @@ const Stats = () => {
flexDirection: "column",
gap: "4rem",
},
"@media (max-width: 600px)": {
gap: "2rem",
},
"@media (max-width: 375px)": {
gap: "2rem",
},
@@ -212,7 +220,6 @@ const Stats = () => {
>
<Box
color={"#fff"}
ref={ref}
textAlign={"center"}
position={"relative"}
_before={{
@@ -237,7 +244,10 @@ const Stats = () => {
start={50000000}
end={51400000}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
style={{
fontSize: `${isSmallScreen ? "23px" : "40px"}`,
fontWeight: "700",
}}
/>
)}
<Text
@@ -245,23 +255,24 @@ const Stats = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
fontSize: "14px",
},
"@media (max-width: 375px)": {},
}}
>
Circulating Supply at level 4
</Text>
</Box>
<Box color={"#fff"} ref={ref} textAlign={"center"}>
<Box color={"#fff"} textAlign={"center"}>
{inView && (
<CountUp
start={10000000}
end={10247786}
delay={0}
style={{ fontSize: "40px", fontWeight: "700" }}
style={{
fontSize: `${isSmallScreen ? "23px" : "40px"}`,
fontWeight: "700",
}}
/>
)}
<Text
@@ -269,11 +280,9 @@ const Stats = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 375px)": {
fontSize: "16px",
fontSize: "14px",
},
"@media (max-width: 375px)": {},
}}
>
Transacitons

14
src/components/HomePage/WhitePaper.jsx
View File

@@ -35,7 +35,8 @@ const WhitePaper = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "28px",
fontSize: "25px",
paddingBottom: "1rem",
},
}}
>
@@ -53,6 +54,12 @@ const WhitePaper = () => {
fontSize={"22px"}
marginBottom={"2rem"}
fontFamily={"Poppins"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
fontSize: "17px",
},
}}
>
{SectionContent.subContent}
</Text>
@@ -91,6 +98,11 @@ const WhitePaper = () => {
borderRadius: "0px",
opacity: "1",
},
"@media (max-width: 600px)": {
fontSize: "13px",
minW: "147px",
minH: "39px",
},
}}
_hover={{
color: "#000",

1
src/components/LearnPage/Faq.jsx
View File

@@ -52,6 +52,7 @@ export const Faq = () => {
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
// backgroundAttachment={"fixed"}
>
<Container
maxW={"container.xl"}

190
src/components/MobileComponent/PartnerMobile.jsx Normal file
View File

@@ -0,0 +1,190 @@
/* eslint-disable no-unused-vars */
// "use client";
import {
Box,
Container,
IconButton,
Image,
Text,
useBreakpointValue,
} from "@chakra-ui/react";
import { ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons";
import chainx from "../../assets/images/chainx.png";
import ensurity from "../../assets/images/ensurity.png";
import exr from "../../assets/images/exr.png";
import finalo from "../../assets/images/finalo.png";
import iskon from "../../assets/images/iskon.png";
import jupiter from "../../assets/images/jupiter.png";
import ondc from "../../assets/images/ondc.png";
import smartcity from "../../assets/images/smartcity.png";
import ymca from "../../assets/images/ymca.png";
import bescom from "../../assets/images/bescom.png";
import Slider from "react-slick";
import { useState } from "react";
// Settings for the slider
const settings = {
dots: true,
arrows: false,
fade: false,
infinite: true,
autoplay: true,
speed: 500,
autoplaySpeed: 5000,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 0,
},
},
],
};
const imgWidth = {
width: "165px",
height: "82px",
objectFit: "contain",
};
const Content = {
heading: `Look Who's Building on Rubix`,
};
export default function PartnerMobile() {
const [slider, setSlider] = useState(null);
const top = useBreakpointValue({ base: "90%", md: "50%" });
const side = useBreakpointValue({ base: "30%", md: "10px" });
return (
<Box
position={"relative"}
width={"full"}
overflow={"hidden"}
height={"auto"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"2rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 996px)": {
paddingBottom: "3rem",
},
}}
>
{/* CSS files for react-slick */}
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
{/* Left Icon */}
<IconButton
aria-label="left-arrow"
colorScheme="messenger"
borderRadius="full"
position="absolute"
left={side}
top={top}
transform={"translate(0%, -50%)"}
zIndex={2}
onClick={() => slider?.slickPrev()}
background={"#DE858E"}
_hover={{
background: "#DE858E",
}}
>
<ArrowBackIcon />
</IconButton>
{/* Right Icon */}
<IconButton
aria-label="right-arrow"
colorScheme="messenger"
borderRadius="full"
position="absolute"
right={side}
top={top}
transform={"translate(0%, -50%)"}
zIndex={2}
onClick={() => slider?.slickNext()}
background={"#DE858E"}
_hover={{
background: "#DE858E",
}}
>
<ArrowForwardIcon />
</IconButton>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"4rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 412px)": {},
}}
>
{Content.heading}
</Text>
{/* Slider */}
<Slider
{...settings}
ref={(slider) => setSlider(slider)}
style={{ marginBottom: "4rem" }}
>
{/* Box1 */}
{/* <Container maxW="container.lg"> */}
<Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
</Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
>
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
</Box>
</Box>
{/* Box2 */}
{/* </Container> */}
</Slider>
</Box>
);
}

266
src/components/MobileMenu/MobileMenu.jsx
View File

@@ -35,115 +35,187 @@ export const MobileMenu = () => {
}, []);
const active = {
color: "#F46E15",
fontFamily: "Poppins",
fontSize: "14px",
fontStyle: "normal",
fontWeight: "500",
lineHeight: "normal",
marginBottom: "1rem",
content: "''",
position: "absolute",
bottom: "-5px",
left: "50%",
width: "130%",
height: "3px",
backgroundColor: "#DE858E",
borderRadius: "10px",
transform: "translateX(-50%)",
transition: "all .3s",
};
const linkStyle = {
color: "#070707",
fontFamily: "Poppins",
fontSize: "14px",
fontStyle: "normal",
fontWeight: "500",
lineHeight: "normal",
marginBottom: "1rem",
width: "0",
};
return (
<Box
position={"fixed"}
top={"0px"}
zIndex={999}
backgroundColor={isScrolled ? "#4f2878" : "transparent"}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
width={"100%"}
padding={"2rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 375px)": {
padding: "1rem",
alignItems: "baseline",
},
}}
>
<Box display={"flex"} alignItems={"center"}>
<Link to="/" style={linkStyle}>
<Box
display={"flex"}
alignItems={"baseline"}
justifyContent={"center"}
<>
<Box
backgroundColor={"#141315"}
position={"fixed"}
zIndex={"9999"}
width={"100%"}
textAlign={"right"}
padding={"0.8px 0px"}
>
<Box marginRight={""}>
<Link
to="/"
style={{ color: "#fff", marginRight: "1.5rem", fontSize: "14px" }}
>
<Image src={logo} width={"160px"} />
</Box>
</Link>
WALLET
</Link>
<Link
to="/"
style={{ color: "#fff", marginRight: "1.5rem", fontSize: "14px" }}
>
EXPLORER
</Link>
</Box>
</Box>
<Menu backgroundColor={"#fff"}>
<MenuButton
as={IconButton}
aria-label="Options"
icon={<HamburgerIcon />}
variant="outline"
backgroundColor={"#fff"}
/>
<MenuList>
{/* <MenuItem paddingLeft={"0px"}></MenuItem> */}
<MenuItem
justifyContent={"center"}
sx={{
"&:focus": {
backgroundColor: "#fff",
},
<Box
position={"fixed"}
top={"0px"}
zIndex={999}
backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
width={"100%"}
padding={"1rem 1rem"}
paddingTop={"3rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 375px)": {
padding: "1rem",
alignItems: "baseline",
},
}}
>
<Box display={"flex"} alignItems={"center"}>
<Link to="/">
<Box
display={"flex"}
alignItems={"baseline"}
justifyContent={"center"}
>
<Image src={logo} width={"160px"} />
</Box>
</Link>
</Box>
<Menu backgroundColor={"#fff"}>
<MenuButton
as={IconButton}
aria-label="Options"
icon={<HamburgerIcon />}
// variant="outline"
backgroundColor={"transparent"}
color={"#fff"}
fontSize={"34px"}
_hover={{
backgroundColor: "transparent",
color: "#fff",
fontSize: "34px",
}}
>
<Link
to="/About"
// onClick={() => scrollToSection("about")}
style={location.pathname === "/About" ? active : linkStyle}
/>
<MenuList>
{/* <MenuItem paddingLeft={"0px"}></MenuItem> */}
<MenuItem
justifyContent={"center"}
padding={"1rem 0"}
_focus={{ background: "#fff" }}
>
About us
</Link>
</MenuItem>
<MenuItem justifyContent={"center"}>
<Link
to="/Services"
smooth
// onClick={() => scrollToSection("offer")}
style={location.pathname === "/Services" ? active : linkStyle}
<Link
to="/LearnPage"
style={{ position: "relative", fontSize: "14px" }}
>
LEARN
<span
style={
location.pathname === "/LearnPage" ? active : linkStyle
}
/>
</Link>
</MenuItem>
<MenuItem
justifyContent={"center"}
padding={"1rem 0"}
_focus={{ background: "#fff" }}
>
What we offer
</Link>
</MenuItem>
<MenuItem justifyContent={"center"}>
{" "}
<Link
to="/Whyus"
smooth
// onClick={() => scrollToSection("whyUs")}
style={location.pathname === "/Whyus" ? active : linkStyle}
<Link
to="/BuildPage"
style={{ position: "relative", fontSize: "14px" }}
>
BUILD
<span
style={
location.pathname === "/BuildPage" ? active : linkStyle
}
/>
</Link>
</MenuItem>
<MenuItem
justifyContent={"center"}
padding={"1rem 0"}
_focus={{ background: "#fff" }}
>
Why Us
</Link>
</MenuItem>
<MenuItem justifyContent={"center"}>
{" "}
<Link
to="/whatWeDo"
smooth
// onClick={() => scrollToSection("weDo")}
style={location.pathname === "/whatWeDo" ? active : linkStyle}
{" "}
<Link to="/" style={{ position: "relative", fontSize: "14px" }}>
USE CASES
{/* <span style={location.pathname === "/" ? active : linkStyle} /> */}
</Link>
</MenuItem>
<MenuItem
justifyContent={"center"}
padding={"1rem 0"}
_focus={{ background: "#fff" }}
>
What we do
</Link>
</MenuItem>
</MenuList>
</Menu>
</Box>
{" "}
<Link
to="/community"
style={{ position: "relative", fontSize: "14px" }}
>
COMMUNITY
<span
style={
location.pathname === "/community" ? active : linkStyle
}
/>
</Link>
</MenuItem>
<MenuItem
justifyContent={"center"}
padding={"1rem 0"}
_focus={{ background: "#fff" }}
>
{" "}
<Link to="/" style={{ position: "relative", fontSize: "14px" }}>
FOUNDATION
{/* <span style={location.pathname === "/" ? active : linkStyle} /> */}
</Link>
</MenuItem>
<MenuItem
justifyContent={"center"}
padding={"1rem 0"}
_focus={{ background: "#fff" }}
>
{" "}
<Link
to="/Contact"
style={{ position: "relative", fontSize: "14px" }}
>
CONTACT US
<span
style={location.pathname === "/Contact" ? active : linkStyle}
/>
</Link>
</MenuItem>
</MenuList>
</Menu>
</Box>
</>
);
};

15
src/components/NavBar/NavBar.jsx
View File

@@ -152,6 +152,11 @@ const NavBar = () => {
</Link>
<Link to="/" className="link" style={{ position: "relative" }}>
USE CASES
<span
style={
location.pathname === "/community" ? active : linkStyle
}
/>
</Link>
<Link
to="/community"
@@ -159,9 +164,19 @@ const NavBar = () => {
style={{ position: "relative" }}
>
COMMUNITY
<span
style={
location.pathname === "/community" ? active : linkStyle
}
/>
</Link>
<Link to="/" className="link" style={{ position: "relative" }}>
FOUNDATION
<span
style={
location.pathname === "/community" ? active : linkStyle
}
/>
</Link>
<Link
to="/Contact"

3
src/components/SubnetsComponent/NewSubnetComp.jsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable no-unused-vars */
import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { useEffect, useRef, useState } from "react";
import { Component1 } from "./Component1";
import { Component2 } from "./Component2";

2
src/components/SubnetsComponent/SubnetPage2.jsx
View File

@@ -2,7 +2,7 @@
/* eslint-disable react/prop-types */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { SubnetPage3 } from "./SubnetPage3";

2
src/components/SubnetsComponent/SubnetPage3.jsx
View File

@@ -3,7 +3,7 @@
/* eslint-disable react/prop-types */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import stack from "../../assets/images/stackNew.webp";
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { useEffect, useState } from "react";
export const SubnetPage3 = () => {

6
src/pages/HomePage.jsx
View File

@@ -8,6 +8,8 @@ import Stats from "../components/HomePage/Stats";
import WhitePaper from "../components/HomePage/WhitePaper";
import MobileSubnet from "../components/MobileComponent/MobileSubnet";
import { NewSubnetComp } from "../components/SubnetsComponent";
import Partner from "../components/HomePage/Partner";
import PartnerMobile from "../components/MobileComponent/PartnerMobile";
// import { useBreakpointValue } from "@chakra-ui/react";
const HomePage = () => {
@@ -38,7 +40,9 @@ const HomePage = () => {
{!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
<Stats />
<WhitePaper />
<Client />
{/* <Partner /> */}
{!isMobile ? <Partner /> : <PartnerMobile />}
{/* <Client /> */}
<Resources />
<Footer />
</>