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

installed swiper js

Browse Source
This commit is contained in:
rockyeverlast
2024-04-09 15:58:12 +05:30
parent cb330b7050
commit a328876fe5
8 changed files with 357 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
src/components/HomePage/Partner.jsx
View File

@@ -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>
)}
</>
);
}

11
src/components/MobileComponent/PartnerMobile.jsx
View File

@@ -86,17 +86,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"

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

@@ -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 />

6
src/index.css
View File

@@ -43,6 +43,12 @@
color: #de858e;
}
.swiper-button-prev,
.swiper-button-next {
color: #de858e;
/* background-color: #de858e; */
}
/* html {
font-family: "Mona Sans";
} */

3
src/pages/HomePage.jsx
View File

@@ -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 />