diff --git a/package-lock.json b/package-lock.json index 0ebc0a1..1bc0ebe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index b2291a7..ae2203e 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/assets/images/EXR.png b/src/assets/images/EXR.png index b34bd35..5ab091c 100644 Binary files a/src/assets/images/EXR.png and b/src/assets/images/EXR.png differ diff --git a/src/assets/images/Finaloeducation.png b/src/assets/images/Finaloeducation.png deleted file mode 100644 index d691b6b..0000000 Binary files a/src/assets/images/Finaloeducation.png and /dev/null differ diff --git a/src/assets/images/bescom.png b/src/assets/images/bescom.png index 88c330f..cbff0d8 100644 Binary files a/src/assets/images/bescom.png and b/src/assets/images/bescom.png differ diff --git a/src/assets/images/chainx.png b/src/assets/images/chainx.png index 56f1e79..0358ede 100644 Binary files a/src/assets/images/chainx.png and b/src/assets/images/chainx.png differ diff --git a/src/assets/images/ensurity.png b/src/assets/images/ensurity.png index f27fc17..d573a0a 100644 Binary files a/src/assets/images/ensurity.png and b/src/assets/images/ensurity.png differ diff --git a/src/assets/images/finalo.png b/src/assets/images/finalo.png new file mode 100644 index 0000000..78a2a82 Binary files /dev/null and b/src/assets/images/finalo.png differ diff --git a/src/assets/images/iskon.png b/src/assets/images/iskon.png index 9c425d8..357307e 100644 Binary files a/src/assets/images/iskon.png and b/src/assets/images/iskon.png differ diff --git a/src/assets/images/jupiter.png b/src/assets/images/jupiter.png new file mode 100644 index 0000000..7bcbf7e Binary files /dev/null and b/src/assets/images/jupiter.png differ diff --git a/src/assets/images/ondc.png b/src/assets/images/ondc.png index f38ced8..ba0d53c 100644 Binary files a/src/assets/images/ondc.png and b/src/assets/images/ondc.png differ diff --git a/src/assets/images/smartcity.png b/src/assets/images/smartcity.png index 9c257a3..eee760f 100644 Binary files a/src/assets/images/smartcity.png and b/src/assets/images/smartcity.png differ diff --git a/src/assets/images/ymca.png b/src/assets/images/ymca.png index 3723c7d..1c2fdd7 100644 Binary files a/src/assets/images/ymca.png and b/src/assets/images/ymca.png differ diff --git a/src/components/BuildPage/Connect.jsx b/src/components/BuildPage/Connect.jsx index 9b35ec0..6bb87a3 100644 --- a/src/components/BuildPage/Connect.jsx +++ b/src/components/BuildPage/Connect.jsx @@ -108,12 +108,10 @@ const Connect = () => { background={"#000"} borderRadius={"10px"} minH={"270px"} - height={"100%"} border={"1px solid #454545"} > @@ -133,7 +131,7 @@ const Connect = () => { justifyContent={"center"} gap={"2.5rem"} > - + @@ -141,19 +139,22 @@ const Connect = () => { {item.social1} - + {item.social2} - - - - {item.social3} - - - {/* <>{console.log(item.logo1)} */} + {item.social3 ? ( + + + + {item.social3} + + + ) : ( + "" + )} diff --git a/src/components/HomePage/Client.jsx b/src/components/HomePage/Client.jsx index 9822973..8741abe 100644 --- a/src/components/HomePage/Client.jsx +++ b/src/components/HomePage/Client.jsx @@ -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} diff --git a/src/components/HomePage/HomeBanner.jsx b/src/components/HomePage/HomeBanner.jsx index 9306611..ea10512 100644 --- a/src/components/HomePage/HomeBanner.jsx +++ b/src/components/HomePage/HomeBanner.jsx @@ -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 ( { 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} - - {item.heading2} - + {!isSmallScreen ? ( + + {item.heading2} + + ) : ( + + {item.heading2} + + )} + {/* 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 */} + + setSlider(slider)} + style={{ marginBottom: "4rem" }} + > + {/* Box1 */} + {/* */} + + + + + + + + + + + + + + + + + {/* Box2 */} + + + + + + + + + + + + + + + + + {/* */} + + + ); +} diff --git a/src/components/HomePage/Stats.jsx b/src/components/HomePage/Stats.jsx index 7102c70..d756377 100644 --- a/src/components/HomePage/Stats.jsx +++ b/src/components/HomePage/Stats.jsx @@ -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 ( { 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 = () => { }} > { start={50000000} end={51400000} delay={0} - style={{ fontSize: "40px", fontWeight: "700" }} + style={{ + fontSize: `${isSmallScreen ? "23px" : "40px"}`, + fontWeight: "700", + }} /> )} { 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 = () => { { start={10000000} end={10247786} delay={0} - style={{ fontSize: "40px", fontWeight: "700" }} + style={{ + fontSize: `${isSmallScreen ? "23px" : "40px"}`, + fontWeight: "700", + }} /> )} { 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 - + {inView && ( )} { 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 = () => { > { start={50000000} end={51400000} delay={0} - style={{ fontSize: "40px", fontWeight: "700" }} + style={{ + fontSize: `${isSmallScreen ? "23px" : "40px"}`, + fontWeight: "700", + }} /> )} { 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 - + {inView && ( )} { sx={{ "@media (max-width: 1024px)": {}, "@media (max-width: 435px)": { - fontSize: "22px", - }, - "@media (max-width: 375px)": { - fontSize: "16px", + fontSize: "14px", }, + "@media (max-width: 375px)": {}, }} > Transacitons diff --git a/src/components/HomePage/WhitePaper.jsx b/src/components/HomePage/WhitePaper.jsx index 4ca12e4..c27d093 100644 --- a/src/components/HomePage/WhitePaper.jsx +++ b/src/components/HomePage/WhitePaper.jsx @@ -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} @@ -91,6 +98,11 @@ const WhitePaper = () => { borderRadius: "0px", opacity: "1", }, + "@media (max-width: 600px)": { + fontSize: "13px", + minW: "147px", + minH: "39px", + }, }} _hover={{ color: "#000", diff --git a/src/components/LearnPage/Faq.jsx b/src/components/LearnPage/Faq.jsx index 2259fb1..d9b7afe 100644 --- a/src/components/LearnPage/Faq.jsx +++ b/src/components/LearnPage/Faq.jsx @@ -52,6 +52,7 @@ export const Faq = () => { backgroundImage={`url(${banner})`} backgroundSize={"cover"} backgroundRepeat={"no-repeat"} + // backgroundAttachment={"fixed"} > + {/* 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 */} + + setSlider(slider)} + style={{ marginBottom: "4rem" }} + > + {/* Box1 */} + {/* */} + + + + + + + + + + + {/* Box2 */} + + {/* */} + + + ); +} diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx index 35ddb3d..74861f9 100644 --- a/src/components/MobileMenu/MobileMenu.jsx +++ b/src/components/MobileMenu/MobileMenu.jsx @@ -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 ( - - - - + + + - - - + WALLET + + + EXPLORER + + - - } - variant="outline" - backgroundColor={"#fff"} - /> - - {/* */} - + + + + + + + + + } + // variant="outline" + backgroundColor={"transparent"} + color={"#fff"} + fontSize={"34px"} + _hover={{ + backgroundColor: "transparent", + color: "#fff", + fontSize: "34px", }} - > - scrollToSection("about")} - style={location.pathname === "/About" ? active : linkStyle} + /> + + {/* */} + - About us - - - - scrollToSection("offer")} - style={location.pathname === "/Services" ? active : linkStyle} + + LEARN + + + + - What we offer - - - - {" "} - scrollToSection("whyUs")} - style={location.pathname === "/Whyus" ? active : linkStyle} + + BUILD + + + + - Why Us - - - - {" "} - scrollToSection("weDo")} - style={location.pathname === "/whatWeDo" ? active : linkStyle} + {" "} + + USE CASES + {/* */} + + + - What we do - - - - - + {" "} + + COMMUNITY + + + + + {" "} + + FOUNDATION + {/* */} + + + + {" "} + + CONTACT US + + + + + + + ); }; diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index e21c9c8..9120117 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -152,6 +152,11 @@ const NavBar = () => { USE CASES + { style={{ position: "relative" }} > COMMUNITY + FOUNDATION + { diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 5c30bd4..6d0c267 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -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 ? : } - + {/* */} + {!isMobile ? : } + {/* */}