mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 20:35:50 +00:00
updated navBar from dev branch
This commit is contained in:
rockyeverlast
BIN
src/assets/images/Navicons/security.png
Normal file
BIN
src/assets/images/Navicons/security.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
src/assets/images/Navicons/telecom.png
Normal file
BIN
src/assets/images/Navicons/telecom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
@@ -30,6 +30,8 @@ import fintechIcon from "../../assets/images/Navicons/fintechIcon.png";
|
||||
import adTech from "../../assets/images/Navicons/adTech.png";
|
||||
import marTech from "../../assets/images/Navicons/marTech.png";
|
||||
import healthTech from "../../assets/images/Navicons/healthTech.png";
|
||||
import security from "../../assets/images/Navicons/security.png";
|
||||
import telecom from "../../assets/images/Navicons/telecom.png";
|
||||
|
||||
const NavBar = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
@@ -491,6 +493,8 @@ const NavBar = () => {
|
||||
borderRadius={"10px"}
|
||||
border={"none"}
|
||||
padding={"1rem"}
|
||||
width={"55%"}
|
||||
margin={"0 auto"}
|
||||
_focus={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
@@ -498,76 +502,88 @@ const NavBar = () => {
|
||||
onMouseLeave={() => setIsHoveredCases(false)}
|
||||
>
|
||||
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
|
||||
<PopoverBody>
|
||||
<Link
|
||||
to="/fin-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/fin-tech" ? highlight : normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
flexWrap={"wrap"}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/fin-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/fin-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Image src={fintechIcon} width={`${iconwidth}`} />
|
||||
FinTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={fintechIcon} width={`${iconwidth}`} />
|
||||
FinTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
|
||||
<PopoverBody>
|
||||
<Link
|
||||
to="/ad-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/ad-tech" ? highlight : normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
<PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/ad-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/ad-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Image src={adTech} width={`${iconwidth}`} />
|
||||
AdTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={adTech} width={`${iconwidth}`} />
|
||||
AdTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
|
||||
<PopoverBody>
|
||||
<Link
|
||||
to="/mar-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/mar-tech" ? highlight : normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
<PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/mar-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/mar-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Image src={marTech} width={`${iconwidth}`} />
|
||||
MarTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={marTech} width={`${iconwidth}`} />
|
||||
MarTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
|
||||
<PopoverBody>
|
||||
<Link
|
||||
to="/health-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/health-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/health-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/health-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
@@ -596,7 +612,7 @@ const NavBar = () => {
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={healthTech} width={`${iconwidth}`} />
|
||||
<Image src={security} width={`${iconwidth}`} />
|
||||
Identity and Security
|
||||
</Box>
|
||||
</Link>
|
||||
@@ -618,7 +634,7 @@ const NavBar = () => {
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={healthTech} width={`${iconwidth}`} />
|
||||
<Image src={telecom} width={`${iconwidth}`} />
|
||||
Telecom
|
||||
</Box>
|
||||
</Link>
|
||||
|
||||
@@ -10,9 +10,12 @@ import Footer from "../components/Footer/Footer";
|
||||
import MobileCommunityCard from "../components/MobileComponent/MobileCommunityCard";
|
||||
import { useEffect, useState } from "react";
|
||||
import MobilePlace from "../components/MobileComponent/MobilePlace";
|
||||
import { useGetCommunitiesBannerQuery } from "../Redux/slice/communityBannerSlice";
|
||||
import Loader from "../components/Loader/Loader";
|
||||
|
||||
const Community = () => {
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
const { isLoading } = useGetCommunitiesBannerQuery();
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
@@ -44,17 +47,23 @@ const Community = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommunityBanner onClick={scrollToNextSection} />
|
||||
{!isMobile ? (
|
||||
<CommunityCard id="next-section" />
|
||||
{isLoading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<MobileCommunityCard id="next-section" />
|
||||
)}
|
||||
{!isMobile ? <Place /> : <MobilePlace />}
|
||||
<Connect />
|
||||
{/* <Happen />
|
||||
<>
|
||||
<CommunityBanner onClick={scrollToNextSection} />
|
||||
{!isMobile ? (
|
||||
<CommunityCard id="next-section" />
|
||||
) : (
|
||||
<MobileCommunityCard id="next-section" />
|
||||
)}
|
||||
{!isMobile ? <Place /> : <MobilePlace />}
|
||||
<Connect />
|
||||
{/* <Happen />
|
||||
<Insights /> */}
|
||||
<LearnMore />
|
||||
<LearnMore />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -13,17 +13,14 @@ import Partner from "../components/HomePage/Partner";
|
||||
import PartnerMobile from "../components/MobileComponent/PartnerMobile";
|
||||
import ResourcesMobile from "../components/MobileComponent/ResourcesMobile";
|
||||
import Loader from "../components/Loader/Loader";
|
||||
import { useGetBlogQuery } from "../Redux/slice/blogsSlice";
|
||||
//
|
||||
|
||||
// import { useBreakpointValue } from "@chakra-ui/react";
|
||||
|
||||
const HomePage = () => {
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading(true);
|
||||
}, 2000);
|
||||
const { isLoading } = useGetBlogQuery();
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
@@ -44,7 +41,7 @@ const HomePage = () => {
|
||||
const isMobile = windowWidth <= 996;
|
||||
return (
|
||||
<>
|
||||
{loading ? (
|
||||
{!isLoading ? (
|
||||
<>
|
||||
<HomeBanner />
|
||||
{/* <NewSubnetComp /> */}
|
||||
|
||||
Reference in New Issue
Block a user