diff --git a/index.html b/index.html index 9dab3bb..aecbe30 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Rubix diff --git a/package-lock.json b/package-lock.json index 1bc0ebe..0ebc0a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index ae2203e..b2291a7 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/components/HomePage/Partner.jsx b/src/components/HomePage/Partner.jsx index 8b93b81..2331170 100644 --- a/src/components/HomePage/Partner.jsx +++ b/src/components/HomePage/Partner.jsx @@ -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 ( - - {/* CSS files for react-slick */} - - - {/* Left Icon */} - slider?.slickPrev()} - background={"#DE858E"} - _hover={{ - background: "#DE858E", - }} - > - - - {/* Right Icon */} - slider?.slickNext()} - background={"#DE858E"} - _hover={{ - background: "#DE858E", - }} - > - - - - {Content.heading} - - {/* Slider */} + <> + {isSmallScreen ? ( + + + {Content.heading} + + {/* Slider */} - setSlider(slider)} - style={{ marginBottom: "4rem" }} - > - {/* Box1 */} - {/* */} - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + {/* Box2 */} + + + + + + + + + + + + + + + + + + + - {/* Box2 */} - - + - - - - - - - - - - - - + {Content.heading} + + {/* Slider */} + + {/* Box1 */} + {/* */} + + + + + + + + + + {/* Box2 */} + + {/* */} - {/* */} - - + )} + ); } diff --git a/src/components/MobileComponent/PartnerMobile.jsx b/src/components/MobileComponent/PartnerMobile.jsx index 4e736c0..2958472 100644 --- a/src/components/MobileComponent/PartnerMobile.jsx +++ b/src/components/MobileComponent/PartnerMobile.jsx @@ -85,17 +85,6 @@ export default function PartnerMobile() { }, }} > - {/* CSS files for react-slick */} - - {/* Left Icon */} { <> {!isMobile ? ( <> - - - - - WALLET - - - EXPLORER - - - - - - - - + + + + > + WALLET + + + EXPLORER + - + - - LEARN - + + + + - - BUILD - - - - USE CASES - - - - COMMUNITY - - - - FOUNDATION - - - { - const arrowRight = document.querySelector(".arrow"); - arrowRight.style.transform = "rotate(45deg)"; - }} - onMouseLeave={(e) => { - const arrowRight = document.querySelector(".arrow"); - arrowRight.style.transform = "none"; + - CONTACT US - - + LEARN + + + + + BUILD + + + + USE CASES + + + + COMMUNITY + + + + FOUNDATION + + + - + 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 + + + + - ) : ( diff --git a/src/index.css b/src/index.css index 786ca53..6a332f1 100644 --- a/src/index.css +++ b/src/index.css @@ -43,6 +43,12 @@ color: #de858e; } +.swiper-button-prev, +.swiper-button-next { + color: #de858e; + /* background-color: #de858e; */ +} + /* html { font-family: "Mona Sans"; } */ diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 46e7f00..46df9f4 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -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 = () => { - {/* {!isMobile ? : } */} {/* */}