mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 19:35:50 +00:00
Fixes for UseCases popover
This commit is contained in:
rockyeverlast
@@ -31,6 +31,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";
|
||||
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
|
||||
|
||||
const NavBar = () => {
|
||||
@@ -496,7 +498,7 @@ const NavBar = () => {
|
||||
borderRadius={"10px"}
|
||||
border={"none"}
|
||||
padding={"1rem"}
|
||||
width={"55%"}
|
||||
width={"fit-content"}
|
||||
margin={"0 auto"}
|
||||
_focus={{
|
||||
boxShadow: "none",
|
||||
@@ -505,76 +507,100 @@ 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"}
|
||||
|
||||
{/* <PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/fin-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/fin-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Image src={fintechIcon} width={`${iconwidth}`} />
|
||||
FinTech
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={fintechIcon} width={`${iconwidth}`} />
|
||||
FinTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody> */}
|
||||
|
||||
<PopoverBody
|
||||
width={"55%"}
|
||||
display={"flex"}
|
||||
flexWrap={"wrap"}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
{useCase?.map((slug) => (
|
||||
<Box
|
||||
key={slug.id}
|
||||
style={{ flexBasis: "calc(50% - 1rem)" }}
|
||||
>
|
||||
<Link
|
||||
to={`/${slug.title_slug}`}
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === `/${slug.title_slug}`
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image
|
||||
src={`https://rubix.betadelivery.com/${slug.icon}`}
|
||||
width={`${iconwidth}`}
|
||||
height={"50px"}
|
||||
borderRadius={"50%"}
|
||||
/>
|
||||
<Text>{slug.title}</Text>
|
||||
</Box>
|
||||
</Link>
|
||||
</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="/mar-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/mar-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Image src={adTech} width={`${iconwidth}`} />
|
||||
AdTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={marTech} width={`${iconwidth}`} />
|
||||
MarTech
|
||||
</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="/health-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/health-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Image src={marTech} width={`${iconwidth}`} />
|
||||
MarTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
|
||||
<PopoverBody>
|
||||
<Link
|
||||
to="/health-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/health-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
@@ -603,7 +629,7 @@ const NavBar = () => {
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={healthTech} width={`${iconwidth}`} />
|
||||
<Image src={security} width={`${iconwidth}`} />
|
||||
Identity and Security
|
||||
</Box>
|
||||
</Link>
|
||||
@@ -625,11 +651,14 @@ const NavBar = () => {
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={healthTech} width={`${iconwidth}`} />
|
||||
<Image src={telecom} width={`${iconwidth}`} />
|
||||
Telecom
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
</PopoverBody> */}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* <Link
|
||||
to="/community"
|
||||
className="link"
|
||||
|
||||
213
src/components/UseCase/NewUseCase.jsx
Normal file
213
src/components/UseCase/NewUseCase.jsx
Normal file
@@ -0,0 +1,213 @@
|
||||
/* eslint-disable react/jsx-key */
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable no-unused-vars */
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React, { useEffect } from "react";
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
|
||||
import Loader from "../Loader/Loader";
|
||||
import NotFound from "../../pages/NotFound";
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const NewUseCase = ({
|
||||
useCase,
|
||||
bannerImage,
|
||||
bannerHeading,
|
||||
bannerSubHeading,
|
||||
}) => {
|
||||
const { title_slug } = useParams();
|
||||
const { data, error, isLoading } = useGetUseCaseQuery();
|
||||
const useCases = data?.data?.rows;
|
||||
console.log(data?.data?.rows);
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const matchingUseCase = useCases
|
||||
? useCases.find((item) => item.title_slug === title_slug)
|
||||
: null;
|
||||
|
||||
console.log(matchingUseCase);
|
||||
return (
|
||||
<>
|
||||
{matchingUseCase ? (
|
||||
<div>
|
||||
<Box
|
||||
height={"75vh"}
|
||||
width={"100%"}
|
||||
backgroundImage={`url(https://rubix.betadelivery.com/${matchingUseCase.bannerImage})`}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundSize={"cover"}
|
||||
position="relative"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
height: "400px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
width="100%"
|
||||
height="100%"
|
||||
backgroundColor="rgba(0, 0, 0, 0.8)"
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
flexDirection={"column"}
|
||||
>
|
||||
<Box
|
||||
w={"50vw"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100vw",
|
||||
padding: "2rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
textAlign={"center"}
|
||||
className="rubix-fw-700"
|
||||
fontSize={"40px"}
|
||||
fontFamily={"Mona Sans"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "30px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{matchingUseCase.title}
|
||||
</Text>
|
||||
<Text
|
||||
textAlign={"center"}
|
||||
className="rubix-fw-500"
|
||||
fontSize={"20px"}
|
||||
fontFamily={"Poppins"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "16px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{matchingUseCase.meta_description}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
p={5}
|
||||
pb={14}
|
||||
backgroundColor={"#000000"}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"center"}
|
||||
gap={16}
|
||||
w={"100%"}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"start"}
|
||||
gap={7}
|
||||
pt={5}
|
||||
width={"85vw"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* ========[ Head-Para ]====== */}
|
||||
<Box
|
||||
width={"65vw"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{ marginBottom: 6 }}
|
||||
className="rubix-fw-500"
|
||||
fontSize="3xl"
|
||||
textColor={"#ffffff"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "22px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{matchingUseCase.problem}
|
||||
</Text>
|
||||
<Text
|
||||
textColor={"#ffffff"}
|
||||
fontSize="xl"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "14px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{matchingUseCase.solution}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
width={"75vw"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* <Text
|
||||
style={{ marginBottom: 6 }}
|
||||
className="rubix-fw-500"
|
||||
fontSize="2xl"
|
||||
textColor={"#ffffff"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "16px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
<Text
|
||||
textColor={"#ffffff"}
|
||||
fontSize="lg"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "14px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Text> */}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
) : (
|
||||
<NotFound />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewUseCase;
|
||||
@@ -6,6 +6,7 @@ import React, { useEffect } from "react";
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
|
||||
import Loader from "../Loader/Loader";
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import { useEffect } from "react";
|
||||
import UseCase from "../components/UseCase/UseCase";
|
||||
import NewUseCase from "../components/UseCase/NewUseCase";
|
||||
|
||||
const UseCases = ({
|
||||
bannerHeading,
|
||||
@@ -14,7 +15,7 @@ const UseCases = ({
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<UseCase />
|
||||
<NewUseCase />
|
||||
{/* <UseCase
|
||||
bannerHeading={bannerHeading}
|
||||
bannerSubHeading={bannerSubHeading}
|
||||
|
||||
@@ -26,8 +26,6 @@ import martech from "../assets/images/martech.png";
|
||||
import security from "../assets/images/i&security-bg.png";
|
||||
import tele from "../assets/images/Telecom-bg.png";
|
||||
import healthTech from "../assets/images/health-tech.png";
|
||||
import security from "../assets/images/i&security-bg.png";
|
||||
import tele from "../assets/images/Telecom-bg.png";
|
||||
import Form from "../components/Contact/Form";
|
||||
import ResourcesPage from "../pages/ResourcesPage";
|
||||
import VideoInternal from "../components/VideoInternal/VideoInternal";
|
||||
@@ -128,7 +126,7 @@ export const route = [
|
||||
element: <NotFound />,
|
||||
},
|
||||
{
|
||||
path: "UseCases/:title_slug",
|
||||
path: "/:title_slug",
|
||||
element: <UseCases />,
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user