mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 19:45:49 +00:00
Merge branch 'dev' of https://github.com/WDI-Ideas/rubix into dev
This commit is contained in:
YasinShaikh123
@@ -4,6 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Rubix</title>
|
||||
</head>
|
||||
|
||||
50
package-lock.json
generated
50
package-lock.json
generated
@@ -21,7 +21,6 @@
|
||||
"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": {
|
||||
@@ -2808,11 +2807,6 @@
|
||||
"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",
|
||||
@@ -3032,11 +3026,6 @@
|
||||
"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",
|
||||
@@ -4345,14 +4334,6 @@
|
||||
"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",
|
||||
@@ -4410,11 +4391,6 @@
|
||||
"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",
|
||||
@@ -4984,22 +4960,6 @@
|
||||
"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",
|
||||
@@ -5066,11 +5026,6 @@
|
||||
"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",
|
||||
@@ -5316,11 +5271,6 @@
|
||||
"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",
|
||||
|
||||
@@ -23,7 +23,6 @@
|
||||
"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": {
|
||||
|
||||
@@ -20,21 +20,15 @@ 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,
|
||||
};
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
// Import Swiper styles
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
|
||||
import { Navigation } from "swiper/modules";
|
||||
|
||||
const imgWidth = {
|
||||
width: "180px",
|
||||
@@ -53,213 +47,203 @@ const Content = {
|
||||
};
|
||||
|
||||
export default function Partner() {
|
||||
const isSmallScreen = useMediaQuery('("max-width: 430px")');
|
||||
const isSmallScreen = useMediaQuery("(max-width: 430px)");
|
||||
console.log(isSmallScreen);
|
||||
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 */}
|
||||
<>
|
||||
{isSmallScreen ? (
|
||||
<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",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<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)": {},
|
||||
{/* Box1 */}
|
||||
<Swiper
|
||||
pagination={{
|
||||
type: "fraction",
|
||||
}}
|
||||
navigation={true}
|
||||
modules={[Navigation]}
|
||||
loop={true}
|
||||
style={{
|
||||
marginBottom: "4rem",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<SwiperSlide>
|
||||
<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>
|
||||
</SwiperSlide>
|
||||
{/* Box2 */}
|
||||
<SwiperSlide>
|
||||
<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>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</Box>
|
||||
{/* Box2 */}
|
||||
<Box>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
gap={"2rem"}
|
||||
marginBottom={"8rem"}
|
||||
) : (
|
||||
<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",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
paddingBottom={"4rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textAlign={"center"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 996px)": {},
|
||||
"@media (max-width: 435px)": {
|
||||
fontSize: "22px",
|
||||
},
|
||||
"@media (max-width: 412px)": {},
|
||||
}}
|
||||
>
|
||||
<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} />
|
||||
{Content.heading}
|
||||
</Text>
|
||||
{/* Slider */}
|
||||
|
||||
{/* 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> */}
|
||||
</Box>
|
||||
{/* </Container> */}
|
||||
</Slider>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -85,17 +85,6 @@ export default function PartnerMobile() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* 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"
|
||||
|
||||
@@ -52,170 +52,178 @@ const NavBar = () => {
|
||||
<>
|
||||
{!isMobile ? (
|
||||
<>
|
||||
<Box
|
||||
position={"fixed"}
|
||||
zIndex={"999"}
|
||||
width={"100%"}
|
||||
>
|
||||
<Box
|
||||
backgroundColor={"#141315"}
|
||||
// position={"fixed"}
|
||||
zIndex={"9999"}
|
||||
width={"100%"}
|
||||
textAlign={"right"}
|
||||
padding={"4px 0px"}
|
||||
>
|
||||
<Box marginRight={"6%"}>
|
||||
<Link to="/" style={{ color: "#fff", marginRight: "2.5rem" ,fontSize:'14px'}}>
|
||||
WALLET
|
||||
</Link>
|
||||
<Link to="/" style={{ color: "#fff", marginRight: "2.5rem",fontSize:'14px' }}>
|
||||
EXPLORER
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="flex"
|
||||
color={"#fff"}
|
||||
justifyContent={"space-around"}
|
||||
alignItems={"center"}
|
||||
background={
|
||||
isScrolled ? "#0B0B27" : "transparent"
|
||||
// "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
|
||||
}
|
||||
// boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
|
||||
// position={"fixed"}
|
||||
zIndex={"999"}
|
||||
width={"100%"}
|
||||
top={"0px"}
|
||||
padding={"28px 0"}
|
||||
sx={{
|
||||
"@media (max-width: 996px)": {
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
padding: "1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Link to="/">
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"baseline"}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
width={"160px"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
width: "100px",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
width: "100px",
|
||||
},
|
||||
<Box position={"fixed"} zIndex={"999"} width={"100%"}>
|
||||
<Box
|
||||
backgroundColor={"#141315"}
|
||||
// position={"fixed"}
|
||||
zIndex={"9999"}
|
||||
width={"100%"}
|
||||
textAlign={"right"}
|
||||
padding={"4px 0px"}
|
||||
>
|
||||
<Box marginRight={"6%"}>
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
color: "#fff",
|
||||
marginRight: "2.5rem",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
/>
|
||||
>
|
||||
WALLET
|
||||
</Link>
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
color: "#fff",
|
||||
marginRight: "2.5rem",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
EXPLORER
|
||||
</Link>
|
||||
</Box>
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display={"flex"}
|
||||
gap={"49px"}
|
||||
display="flex"
|
||||
color={"#fff"}
|
||||
justifyContent={"space-around"}
|
||||
alignItems={"center"}
|
||||
background={
|
||||
isScrolled ? "#0B0B27" : "transparent"
|
||||
// "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
|
||||
}
|
||||
// boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
|
||||
// position={"fixed"}
|
||||
zIndex={"999"}
|
||||
width={"100%"}
|
||||
top={"0px"}
|
||||
padding={"28px 0"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
gap: "22px",
|
||||
"@media (max-width: 996px)": {
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
padding: "1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to="/LearnPage"
|
||||
className="link"
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
LEARN
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/LearnPage" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
<Link to="/">
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"baseline"}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
width={"160px"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
width: "100px",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
width: "100px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/BuildPage"
|
||||
className="link"
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
BUILD
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/BuildPage" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
<Link to="/" className="link" style={{ position: "relative" }}>
|
||||
USE CASES
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/community" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
<Link
|
||||
to="/community"
|
||||
className="link"
|
||||
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"
|
||||
className="link"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
position: "relative",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
const arrowRight = document.querySelector(".arrow");
|
||||
arrowRight.style.transform = "rotate(45deg)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const arrowRight = document.querySelector(".arrow");
|
||||
arrowRight.style.transform = "none";
|
||||
<Box
|
||||
display={"flex"}
|
||||
gap={"49px"}
|
||||
alignItems={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
gap: "22px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
CONTACT US
|
||||
<span
|
||||
style={location.pathname === "/Contact" ? active : linkStyle}
|
||||
/>
|
||||
<Image
|
||||
src={arrow}
|
||||
className="arrow"
|
||||
<Link
|
||||
to="/LearnPage"
|
||||
className="link"
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
LEARN
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/LearnPage" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/BuildPage"
|
||||
className="link"
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
BUILD
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/BuildPage" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
<Link to="/" className="link" style={{ position: "relative" }}>
|
||||
USE CASES
|
||||
<span
|
||||
style={location.pathname === "/" ? active : linkStyle}
|
||||
/>
|
||||
</Link>
|
||||
<Link
|
||||
to="/community"
|
||||
className="link"
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
COMMUNITY
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/community" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
<Link to="/" className="link" style={{ position: "relative" }}>
|
||||
FOUNDATION
|
||||
<span
|
||||
style={location.pathname === "/" ? active : linkStyle}
|
||||
/>
|
||||
</Link>
|
||||
<Link
|
||||
to="/Contact"
|
||||
className="link"
|
||||
style={{
|
||||
transition: "transform 0.3s",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
position: "relative",
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
onMouseEnter={(e) => {
|
||||
const arrowRight = document.querySelector(".arrow");
|
||||
arrowRight.style.transform = "rotate(45deg)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const arrowRight = document.querySelector(".arrow");
|
||||
arrowRight.style.transform = "none";
|
||||
}}
|
||||
>
|
||||
CONTACT US
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/Contact" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
<Image
|
||||
src={arrow}
|
||||
className="arrow"
|
||||
style={{
|
||||
transition: "transform 0.3s",
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<MobileMenu />
|
||||
|
||||
@@ -43,6 +43,12 @@
|
||||
color: #de858e;
|
||||
}
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
color: #de858e;
|
||||
/* background-color: #de858e; */
|
||||
}
|
||||
|
||||
/* html {
|
||||
font-family: "Mona Sans";
|
||||
} */
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { useEffect, useState } from "react";
|
||||
import Footer from "../components/Footer/Footer";
|
||||
import Client from "../components/HomePage/Client";
|
||||
@@ -9,7 +10,6 @@ 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 = () => {
|
||||
@@ -41,7 +41,6 @@ const HomePage = () => {
|
||||
<Stats />
|
||||
<WhitePaper />
|
||||
<Partner />
|
||||
{/* {!isMobile ? <Partner /> : <PartnerMobile />} */}
|
||||
{/* <Client /> */}
|
||||
<Resources />
|
||||
<Footer />
|
||||
|
||||
Reference in New Issue
Block a user