Fixed useCases issues and updated navBar

src/Redux/slice/useCaseSlice.js

@@ -1,7 +1,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 export const useCaseApi = createApi({
-    reducerPath: 'UseCases/:title_slug',
+    reducerPath: 'UseCases',
     baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
     endpoints: (builder) => ({
         getUseCase: builder.query({

src/components/Card/HomeCard.jsx

@@ -52,7 +52,7 @@ const HomeCard = ({ cardkey, date, text, link }) => {
               src={`https://rubix.betadelivery.com/${card.content_image_large}`}
             />
             <Box padding={"1rem"}>
-              {blogCards?.tags?.map((tag, index) => (
+              {card?.tags?.map((tag, index) => (
                 <Chip key={index} title={tag.tag} />
               ))}
 
@@ -66,7 +66,7 @@ const HomeCard = ({ cardkey, date, text, link }) => {
                   })
                   .replace(/\//g, "-");
                 return (
-                  <Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
+                  <Text fontSize={"12px"} color={"#979797"} margin={"10px 0px"}>
                     {formattedDate}
                   </Text>
                 );

src/components/MobileMenu/MobileMenu.jsx

@@ -28,7 +28,7 @@ export const MobileMenu = () => {
   const { data } = useGetUseCaseQuery();
   // console.log(data);
   const useCase = data?.data?.rows;
-  console.log(useCase);
+  // console.log(useCase);
 
   const highlight = {
     color: "rgb(222, 133, 142)",

src/components/NavBar/NavBar.jsx

@@ -33,6 +33,9 @@ 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 news from "../../assets/images/Navicons/news.png";
+import events from "../../assets/images/Navicons/events.png";
+import resources from "../../assets/images/Navicons/resources.png";
 import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
 
 const NavBar = () => {
@@ -516,10 +519,11 @@ const NavBar = () => {
                           style={{ flexBasis: "calc(50% - 1rem)" }}
                         >
                           <Link
-                            to={`/${slug.title_slug}`}
+                            to={`/usecases/${slug.title_slug}`}
                             className="link"
                             style={
-                              location.pathname === `/${slug.title_slug}`
+                              location.pathname ===
+                              `/usecases/${slug.title_slug}`
                                 ? highlight
                                 : normal
                             }
@@ -653,7 +657,7 @@ const NavBar = () => {
                           gap={"1rem"}
                           marginBottom={"1rem"}
                         >
-                          <Image src={nodeIcon} width={`${iconwidth}`} />
+                          <Image src={news} width={`${iconwidth}`} />
                           News
                         </Box>
                       </Link>
@@ -675,7 +679,7 @@ const NavBar = () => {
                           gap={"1rem"}
                           marginBottom={"1rem"}
                         >
-                          <Image src={quorumIcon} width={`${iconwidth}`} />
+                          <Image src={resources} width={`${iconwidth}`} />
                           Resources
                         </Box>
                       </Link>
@@ -695,7 +699,7 @@ const NavBar = () => {
                           gap={"1rem"}
                           marginBottom={"1rem"}
                         >
-                          <Image src={subnetsIcon} width={`${iconwidth}`} />
+                          <Image src={events} width={`${iconwidth}`} />
                           Events
                         </Box>
                       </Link>

src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx

@@ -111,7 +111,7 @@ const TabsVideo = () => {
       >
         {videos?.slice(0, 3).map((item) => (
           <SwiperSlide key={item.id}>
-            <Link to={`/${item.title_slug}`}>
+            <Link to={`/videos/${item.title_slug}`}>
               <Box
                 display={"flex"}
                 alignItems={"start"}

src/components/ResourcesPage/tableContent/VideoTable.jsx

@@ -168,7 +168,7 @@ const VideoTable = () => {
                       zIndex: "2",
                     }}
                   ></Box>
-                  <Link to={`/${content.title_slug}`}>
+                  <Link to={`/videos/${content.title_slug}`}>
                     <Button
                       position={"relative"}
                       backgroundColor={"transparent"}

src/components/UseCase/NewUseCase.jsx

@@ -11,16 +11,12 @@ import NotFound from "../../pages/NotFound";
 import img from "../../assets/images/pdfscreen.png";
 
 // eslint-disable-next-line react/prop-types
-const NewUseCase = ({
-  useCase,
-  bannerImage,
-  bannerHeading,
-  bannerSubHeading,
-}) => {
+const NewUseCase = () => {
   const { title_slug } = useParams();
+  console.log("title", title_slug);
   const { data, error, isLoading } = useGetUseCaseQuery();
   const useCases = data?.data?.rows;
-  console.log(data?.data?.rows);
+  console.log(useCases);
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
@@ -80,7 +76,6 @@ const NewUseCase = ({
                   textAlign={"center"}
                   className="rubix-fw-700"
                   fontSize={"40px"}
-                  fontFamily={"Mona Sans"}
                   color={"#fff"}
                   sx={{
                     "@media (max-width: 600px)": {
@@ -134,47 +129,25 @@ const NewUseCase = ({
               }}
             >
               {/* ========[ Head-Para ]====== */}
-              <Box
-                width={"65vw"}
-                className="usecases"
-                sx={{
-                  "@media (max-width: 600px)": {
-                    width: "100%",
-                  },
-                }}
-              >
-                {/* <Text
-                  style={{ marginBottom: 6 }}
-                  className="rubix-fw-500"
-                  fontSize="3xl"
-                  textColor={"#ffffff"}
+              {matchingUseCase.content != "<p><br></p>" ? (
+                <Box
+                  width={"65vw"}
+                  className="usecases"
                   sx={{
                     "@media (max-width: 600px)": {
-                      fontSize: "22px",
+                      width: "100%",
                     },
                   }}
                 >
-                  {matchingUseCase.problem}
-                </Text>
-                <Text
-                  textColor={"#ffffff"}
-                  fontSize="xl"
-                  sx={{
-                    "@media (max-width: 600px)": {
-                      fontSize: "14px",
-                    },
-                  }}
-                >
-                  {matchingUseCase.solution}
-                </Text> */}
-                <Text
-                  pb={5}
-                  className="rubix-text-small"
-                  dangerouslySetInnerHTML={{
-                    __html: matchingUseCase.content,
-                  }}
-                />
-              </Box>
+                  <Text
+                    pb={5}
+                    className="rubix-text-small"
+                    dangerouslySetInnerHTML={{
+                      __html: matchingUseCase.content,
+                    }}
+                  />
+                </Box>
+              ) : null}
 
               <Box
                 width={"75vw"}
@@ -183,32 +156,7 @@ const NewUseCase = ({
                     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>
             {matchingUseCase.attachments.length >= 1 ? (
               <Text

src/components/VideoInternal/VideoInternal.jsx

@@ -54,7 +54,7 @@ const VideoInternal = () => {
     ? videos.find((item) => item.title_slug === title_slug)
     : null;
 
-  console.log(matchingvideos);
+  // console.log(matchingvideos);
 
   return (
     <>

src/index.css

@@ -6,6 +6,10 @@
   font-stretch: 75% 125%;
 }
 
+.rubix_title_font {
+  font-family: "Mona Sans";
+}
+
 .rubix-text-heading {
   font-size: 60px !important;
   font-family: "Mona Sans";

src/routes/_routes.jsx

@@ -52,10 +52,10 @@ export const route = [
     path: "BuildPage",
     element: <BuildPage />,
   },
-  {
-    path: "UseCases",
-    element: <UseCases />,
-  },
+  // {
+  //   path: "UseCases",
+  //   element: <UseCases />,
+  // },
   {
     path: "community",
     element: <Community />,
@@ -70,7 +70,7 @@ export const route = [
     element: <ResourcesPage />,
   },
   {
-    path: "/:title_slug",
+    path: "/videos/:title_slug",
     element: <VideoInternal />,
   },
   {
@@ -102,7 +102,7 @@ export const route = [
     element: <NotFound />,
   },
   {
-    path: "/:title_slug",
+    path: "/usecases/:title_slug",
     element: <UseCases />,
   },
   {