From b1812288755c0780765ba11900b79b9bc55a43f0 Mon Sep 17 00:00:00 2001 From: rockyeverlast Date: Wed, 10 Apr 2024 12:08:14 +0530 Subject: [PATCH 1/3] Mobile responsive home page --- src/components/Card/HomeCard.jsx | 12 + src/components/Card/MobileHomeCard.jsx | 105 ++++++ src/components/HomePage/HomeBanner.jsx | 138 +++---- src/components/HomePage/Partner.jsx | 302 ++++++--------- src/components/HomePage/Resources.jsx | 6 +- .../MobileComponent/MobileSubnet2.jsx | 53 ++- .../MobileComponent/MobileSubnet3.jsx | 8 +- .../MobileComponent/PartnerMobile.jsx | 349 ++++++++++++------ .../MobileComponent/ResourcesMobile.jsx | 51 +++ src/index.css | 26 ++ src/pages/HomePage.jsx | 6 +- 11 files changed, 643 insertions(+), 413 deletions(-) create mode 100644 src/components/Card/MobileHomeCard.jsx create mode 100644 src/components/MobileComponent/ResourcesMobile.jsx diff --git a/src/components/Card/HomeCard.jsx b/src/components/Card/HomeCard.jsx index 57ca2b2..92cc926 100644 --- a/src/components/Card/HomeCard.jsx +++ b/src/components/Card/HomeCard.jsx @@ -12,6 +12,12 @@ const HomeCard = ({ key, date, text }) => { } padding={"1px"} borderRadius={"10px"} + sx={{ + "@media (max-width: 600px)": { + width: "90%", + margin: "0 auto", + }, + }} > { borderRadius={"10px"} minHeight={"502px"} key={key} + sx={{ + "@media (max-width: 600px)": { + width: "100%", + minHeight: "0", + }, + }} > diff --git a/src/components/Card/MobileHomeCard.jsx b/src/components/Card/MobileHomeCard.jsx new file mode 100644 index 0000000..c217828 --- /dev/null +++ b/src/components/Card/MobileHomeCard.jsx @@ -0,0 +1,105 @@ +/* eslint-disable react/prop-types */ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import cardimg from "../../assets/images/CardImg.png"; +import { Badge } from "@chakra-ui/react"; +import "swiper/css"; +import "swiper/css/pagination"; +import "swiper/css/navigation"; + +import { Navigation, Pagination } from "swiper/modules"; +import { Swiper, SwiperSlide } from "swiper/react"; + +const MobileHomeCard = () => { + return ( + + + + + + INSIGHT + + + + {date} + + + {text} + + + + + + + + + ); +}; + +export default MobileHomeCard; diff --git a/src/components/HomePage/HomeBanner.jsx b/src/components/HomePage/HomeBanner.jsx index 69ed6ca..74a6a16 100644 --- a/src/components/HomePage/HomeBanner.jsx +++ b/src/components/HomePage/HomeBanner.jsx @@ -62,74 +62,80 @@ const HomeBanner = () => { textAlign={"center"} paddingTop={"12%"} > - {BannerContent.map((item, index) => { - return ( - - + + {BannerContent[0].heading1} + {!isSmallScreen ? ( + <> +
+ + {BannerContent[0].heading2} + + + ) : ( + <> +
+ - {item.heading1} - {!isSmallScreen ? ( - - {item.heading2} - - ) : ( - - {item.heading2} - - )} - - - {item.subheading} - - - ); - })} + }} + > + {BannerContent[0].heading2} + + + )} + + + {BannerContent[1].subheading} + + + {BannerContent[2] && ( ); diff --git a/src/components/BuildPage/Solve.jsx b/src/components/BuildPage/Solve.jsx index 9f2ad33..9527357 100644 --- a/src/components/BuildPage/Solve.jsx +++ b/src/components/BuildPage/Solve.jsx @@ -154,14 +154,16 @@ const Solve = () => { background={"transparent"} color={"#fff"} fontFamily={"Poppins"} - fontWeight={"100"} + fontWeight={"100"} fontSize={"16px"} padding={"0px"} _hover={{ background: "transparent", }} > - {expandedCardIndex === index ? "Less" : "....More"} + {expandedCardIndex === index + ? "Read Less.." + : "....Read More"} diff --git a/src/components/Chip/Chip.jsx b/src/components/Chip/Chip.jsx new file mode 100644 index 0000000..82bae3c --- /dev/null +++ b/src/components/Chip/Chip.jsx @@ -0,0 +1,19 @@ +/* eslint-disable react/prop-types */ + +const Chip = ({ title }) => { + return ( + + {title} + + ); +}; + +export default Chip; diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 08bb735..5c0c897 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -28,274 +28,303 @@ import reddit from "../../assets/images/reddit.png"; import fb from "../../assets/images/fb.png"; import discord from "../../assets/images/discord.png"; import { Link } from "react-router-dom"; +import { useEffect, useState } from "react"; +import MobileFooter from "./MobileFooter"; const Footer = () => { const [isSmallScreen] = useMediaQuery("(max-width: 996px)"); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + const isMobile = windowWidth <= 996; + return ( <> - - - - - - - - - - Stay up to date with Rubix - - - - Sign up for our newsletter and receive the{" "} - {isSmallScreen ? null :
} latest updates. - - - setEmail(e.target.value)} - /> - - - - + {" "} + + - - - Explore - - - - Learn - - - - Community - - - Wallet - Careers - - - - - Social - - - - - telegram - - - - Twitter - - - - GitHub - - - - Discord - - + + - + + + Stay up to date with Rubix + + + + Sign up for our newsletter and receive the{" "} + {isSmallScreen ? null :
} latest updates. + + + setEmail(e.target.value)} + /> + + + + - - - Reddit - - - - Facebook - - - - LinkedIn - - - - - - - - - - + + + Explore + + + + Learn + - - All rights reserved. - - - Privacy Policy - - - Terms Conditions - - - + + Community + + + Wallet + Careers + + + + + Social + + + + + telegram + + + + Twitter + + + + GitHub + + + + Discord + + + + + + + + Reddit + + + + Facebook + + + + LinkedIn + + + + + + + + + + + + + All rights reserved. + + + Privacy Policy + + + Terms Conditions + + + + + ) : ( + + )} ); }; diff --git a/src/components/Footer/MobileFooter.jsx b/src/components/Footer/MobileFooter.jsx new file mode 100644 index 0000000..ae1340d --- /dev/null +++ b/src/components/Footer/MobileFooter.jsx @@ -0,0 +1,209 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable react/no-unescaped-entities */ +import { + Box, + Button, + Container, + Flex, + Image, + Input, + List, + ListItem, + Text, + UnorderedList, +} from "@chakra-ui/react"; +import { useMediaQuery } from "@chakra-ui/react"; +import { + FormControl, + FormLabel, + FormErrorMessage, + FormHelperText, + Accordion, + AccordionItem, + AccordionButton, + AccordionPanel, + AccordionIcon, +} from "@chakra-ui/react"; +import logo from "../../assets/images/rubix.png"; +import x from "../../assets/images/x.png"; +import linked from "../../assets/images/linked.png"; +import github from "../../assets/images/github.png"; +import tele from "../../assets/images/tele.png"; +import reddit from "../../assets/images/reddit.png"; +import fb from "../../assets/images/fb.png"; +import discord from "../../assets/images/discord.png"; +import { Link } from "react-router-dom"; +import { AddIcon, MinusIcon } from "@chakra-ui/icons"; +import { useEffect, useState } from "react"; + +const MobileFooter = () => { + return ( + + + + {({ isExpanded }) => ( + <> +

+ + + + Explore + + + {isExpanded ? ( + + ) : ( + + )} + +

+ + + + Learn + + + + Community + + + Wallet + Careers + + + + )} + + + {({ isExpanded }) => ( + <> +

+ + + + Social + + + {isExpanded ? ( + + ) : ( + + )} + +

+ + + + + telegram + + + + Twitter + + + + GitHub + + + + Discord + + + + + )} + + + + + + + + All rights reserved. + + + Privacy Policy + + + Terms Conditions + + + + + ); +}; + +export default MobileFooter; diff --git a/src/components/MobileComponent/PartnerMobile.jsx b/src/components/MobileComponent/PartnerMobile.jsx index cbd2c89..080269b 100644 --- a/src/components/MobileComponent/PartnerMobile.jsx +++ b/src/components/MobileComponent/PartnerMobile.jsx @@ -26,7 +26,7 @@ import "swiper/css"; import "swiper/css/pagination"; import "swiper/css/navigation"; -import { Navigation, Pagination } from "swiper/modules"; +import { Navigation, Pagination, Autoplay } from "swiper/modules"; import { useState } from "react"; import { useMediaQuery } from "@chakra-ui/react"; @@ -106,9 +106,12 @@ export default function PartnerMobile() { { const [isScrolled, setIsScrolled] = useState(false); @@ -18,7 +40,7 @@ const NavBar = () => { const active = { content: "''", position: "absolute", - bottom: "-5px", + bottom: "0px", left: "50%", width: "130%", height: "3px", @@ -28,6 +50,16 @@ const NavBar = () => { transition: "all .3s", }; + const highlight = { + color: "rgb(222, 133, 142)", + }; + + const normal = { + color: "#fff", + }; + + const iconwidth = "50px"; + useEffect(() => { const handleScroll = () => { const scrollPosition = window.scrollY; @@ -140,49 +172,469 @@ const NavBar = () => { }, }} > - - LEARN - - + + + + + + + + + + + Learn + + + + + + + + + Proof-of-pledge Protocol + + + + + + + + + Smart contracts + + + + + + + + + Tokenomics in Rubix + + + + + + + + + + + + + + + + + Build + + + + + + + + + Set up Rubix Node + + + + + + + + + Quorum + + + + + + + + + Subnets + + + + + + + + + + + + + + + + + FinTech + + + + + + + + + AdTech + + + + + + + + + MarTech + + + + + + + + + HealthTech + + + + + + + + + + + + + + + + + Community + + + + + + + + + News & Articles + + + + + + + + + MarTech + + + + + + + + + HealthTech + + + + + - - BUILD - - - - USE CASES - - - - COMMUNITY - - FOUNDATION { start: "top top", scrub: 1, pin: true, - end: "bottom bottom-=1000px", + end: "bottom bottom-=100vh", markers: true, }, }) @@ -92,13 +92,10 @@ export const NewSubnetComp = () => { height={"100vh"} width={"100%"} backgroundColor={"#000"} + display={"grid"} + alignContent={"center"} > - + { { { All In One Composable Stack - + { + return ( +
+ + + + + {bannerHeading} + + + {bannerSubHeading} + + + + + + + {useCase.map( + ({ useCaseHeading, useCaseSubHeading, useCaseDetails }) => ( + + {/* ========[ Head-Para ]====== */} + + + {useCaseHeading} + + + {useCaseSubHeading} + + + + {useCaseDetails.map(({ title, description }, index) => ( + + + {title} + + + {description} + + + ))} + + ) + )} + +
+ ); +}; + +export default UseCase; diff --git a/src/data/useCase.jsx b/src/data/useCase.jsx new file mode 100644 index 0000000..4f78ea3 --- /dev/null +++ b/src/data/useCase.jsx @@ -0,0 +1,66 @@ +export const useCase = [ + { + useCaseHeading: "Problems in the FinTech Sector", + useCaseSubHeading: + "The FinTech sector, aiming to revolutionise wealth management and financial services, encounters several challenges hindering its progress. Key issues include:", + useCaseDetails: [ + { + title: "Lack of Personalization", + description: + "Many FinTech platforms struggle to deliver personalized financial advice and services tailored to individual client needs and goals. This limitation inhibits client engagement and satisfaction, as users seek customized solutions aligned with their unique financial situations", + }, + { + title: "Data Fragmentation and Integration", + description: + "FinTech solutions often grapple with fragmented data sources, including bank accounts, investment portfolios, and retirement accounts. Integrating and aggregating these disparate data sets presents technical challenges, hindering the development of holistic financial management tools and insights.", + }, + { + title: "Complexity and Accessibility", + description: + "The complexity of financial products and services can deter individuals from actively managing their wealth and investments. Moreover, some FinTech platforms may lack user-friendly interfaces and educational resources, limiting accessibility for less financially savvy users.", + }, + { + title: "Limited Investment Options", + description: + "While FinTech platforms offer access to a range of investment products and strategies, users may face limitations in diversifying their portfolios or accessing alternative investments. This restriction hampers investors' ability to optimize risk-adjusted returns and achieve their long-term financial goals.", + }, + { + title: "Security and Compliance Concerns", + description: + "FinTech platforms handle sensitive financial information, raising concerns about data security and regulatory compliance. Inadequate security measures and non-compliance with financial regulations can expose users to cybersecurity threats, fraud, and legal risks, eroding trust in FinTech providers.", + }, + ], + }, + { + useCaseHeading: "How Rubix solves them", + useCaseSubHeading: + "Rubix addresses the challenges faced by both investors and financial institutions while providing personalized, secure, and accessible wealth management tools. Here's how Rubix based solutions can revolutionize FinTech:", + useCaseDetails: [ + { + title: "Next Gen personalization services", + description: + "Rubix stack based dAPPs can enable Autonomous Economic Agents ( AEA) offer tokenized services ( leveraging latest  Generative AI  and machine learning advances) that  deliver personalized financial insights and recommendations tailored to each user's financial objectives, risk tolerance, and investment preferences. ", + }, + { + title: "Unified Data Aggregation and Integration", + description: + "Consumer centric insight aggregation and analytics service providers can offer PII protected unified data aggregation that consolidates financial information from various sources, including bank accounts, investment portfolios, and retirement accounts of users. This seamless integration would enable users to access comprehensive view of their financial assets and liabilities, facilitating holistic, fully self sovereign financial planning and analysis", + }, + { + title: "User-Friendly Interface", + description: + "Rubix enables current Web2 apps to migrate to web3 without making any changes in the UI/UX. The Web Assembly compiler helps in easy code migration, with Rust/GoLang/C/c++ based smart contracts making for easy implementation and faster go to market.", + }, + { + title: "Diverse Investment Opportunities", + description: + "Tokenization of assets - financial or physical is made easier and far cheaper  on the object chain based Rubix architecture which can support unlimited auto syncing subnets with DID portability across. This would mean that with a single, self sovereign DID an investor can participate in multiple tokenized investment vehicles which suit her risk/return requirements.", + }, + { + title: "Robust Security and Compliance Framework", + description: + "Rubix block chain and DID in conjunction with identity platform providers can enhance the authentication and access management systems of wealth tech providers. ", + }, + ], + }, +]; diff --git a/src/index.css b/src/index.css index 515db82..ac307e5 100644 --- a/src/index.css +++ b/src/index.css @@ -46,7 +46,6 @@ .swiper-button-prev, .swiper-button-next { color: #de858e; - /* background-color: #de858e; */ } .swiper-pagination { @@ -86,3 +85,51 @@ /* html { font-family: "Mona Sans"; } */ + +.rubix-text-heading-2 { + font-size: 40px !important; + font-family: "Mona Sans"; + color: #fff; +} + +.rubix-text-xsmall { + font-size: 15px !important; + font-family: "Poppins" !important; + color: #fff !important; +} + +.rubix-fw-100 { + font-weight: 100 !important; +} + +.rubix-fw-200 { + font-weight: 200 !important; +} + +.rubix-fw-300 { + font-weight: 300 !important; +} + +.rubix-fw-400 { + font-weight: 400 !important; +} + +.rubix-fw-500 { + font-weight: 500 !important; +} + +.rubix-fw-600 { + font-weight: 600 !important; +} + +.rubix-fw-700 { + font-weight: 700 !important; +} + +.rubix-fw-800 { + font-weight: 800 !important; +} + +.rubix-fw-900 { + font-weight: 900 !important; +} diff --git a/src/pages/Articles.jsx b/src/pages/Articles.jsx new file mode 100644 index 0000000..79f41c8 --- /dev/null +++ b/src/pages/Articles.jsx @@ -0,0 +1,13 @@ +import ArticleInternalPage from "../components/ArticleInternalPage/ArticleInternalPage"; +import Footer from "../components/Footer/Footer"; + +const Articles = () => { + return ( + <> + +