From fddadcf7039cbd7cca1d2473f5e634d109d98662 Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Tue, 14 May 2024 19:49:34 +0530
Subject: [PATCH] Fixes for UseCases popover

---
 src/components/NavBar/NavBar.jsx      | 163 ++++++++++++--------
 src/components/UseCase/NewUseCase.jsx | 213 ++++++++++++++++++++++++++
 src/components/UseCase/UseCase.jsx    |   1 +
 src/pages/UseCases.jsx                |   3 +-
 src/routes/_routes.jsx                |   4 +-
 5 files changed, 313 insertions(+), 71 deletions(-)
 create mode 100644 src/components/UseCase/NewUseCase.jsx

diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index b0b42e6..8ebfe96 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -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"
diff --git a/src/components/UseCase/NewUseCase.jsx b/src/components/UseCase/NewUseCase.jsx
new file mode 100644
index 0000000..1274871
--- /dev/null
+++ b/src/components/UseCase/NewUseCase.jsx
@@ -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;
diff --git a/src/components/UseCase/UseCase.jsx b/src/components/UseCase/UseCase.jsx
index 3bda6ce..fd13f2c 100644
--- a/src/components/UseCase/UseCase.jsx
+++ b/src/components/UseCase/UseCase.jsx
@@ -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 }) => {
diff --git a/src/pages/UseCases.jsx b/src/pages/UseCases.jsx
index 8e8de10..72d4a04 100644
--- a/src/pages/UseCases.jsx
+++ b/src/pages/UseCases.jsx
@@ -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}
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index 29dc2dd..93916f4 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -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 />,
   },