New Slice for LearnPage and banner in useCases

src/Redux/slice/bannerSlice.js

@@ -1,14 +1,4 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-
-export const learnPage = createApi({
-    reducerPath: 'LearnPage',
-    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
-    endpoints: (builder) => ({
-        getLearnPage: builder.query({
-            query: () => 'learn/active',
-        }),
-    }),
-});
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
 export const buildPage = createApi({
     reducerPath: 'BuildPage',
@@ -20,5 +10,4 @@ export const buildPage = createApi({
     }),
 });
 
-export const { useGetLearnPageQuery } = learnPage;
 export const { useGetBuildPageQuery } = buildPage;

src/Redux/slice/learPageSlice.js

@@ -0,0 +1,16 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const learnPageApi = createApi({
+    reducerPath: 'LearnPage',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getLearnPage: builder.query({
+            query: () => 'learn/active',
+        }),
+        getLearnFaq: builder.query({
+            query: () => 'faq/active',
+        }),
+    }),
+});
+
+export const { useGetLearnPageQuery, useGetLearnFaqQuery } = learnPageApi;

src/Redux/store/store.js

@@ -6,8 +6,8 @@ import { newsApi } from '../slice/newsSlice';
 import { resourcesApi } from '../slice/resources';
 import { videoTableApi } from '../slice/videoTable';
 import { whitePaper } from '../slice/whitePaperSlice';
-import { buildPage, learnPage } from '../slice/bannerSlice';
-import { faqApi } from '../slice/faqSlice';
+import { buildPage } from '../slice/bannerSlice';
+import { learnPageApi } from '../slice/learPageSlice';
 
 const store = configureStore({
     reducer: {
@@ -18,9 +18,8 @@ const store = configureStore({
         [resourcesApi.reducerPath]: resourcesApi.reducer,
         [videoTableApi.reducerPath]: videoTableApi.reducer,
         [whitePaper.reducerPath]: whitePaper.reducer,
-        [learnPage.reducerPath]: learnPage.reducer,
         [buildPage.reducerPath]: buildPage.reducer,
-        [faqApi.reducerPath]: faqApi.reducer,
+        [learnPageApi.reducerPath]: learnPageApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware().concat(
@@ -31,9 +30,8 @@ const store = configureStore({
             resourcesApi.middleware,
             videoTableApi.middleware,
             whitePaper.middleware,
-            learnPage.middleware,
             buildPage.middleware,
-            faqApi.middleware,
+            learnPageApi.middleware
         ), // Add blogApi.middleware here
 });
 

src/components/LearnPage/Faq.jsx

@@ -14,6 +14,8 @@ import {
 } from "@chakra-ui/react";
 import { AddIcon, MinusIcon } from "@chakra-ui/icons";
 import { useGetFaqQuery } from "../../Redux/slice/faqSlice";
+import Loader from "../Loader/Loader";
+import { useGetLearnFaqQuery } from "../../Redux/slice/learPageSlice";
 
 const accordion = [
   {
@@ -183,10 +185,17 @@ const accordion = [
 ];
 
 export const Faq = () => {
-  const { data, isLoading, error } = useGetFaqQuery();
-  console.log(data?.data?.data?.rows);
+  const { data, isLoading, error } = useGetLearnFaqQuery();
   const faq = data?.data?.data?.rows;
 
+  if (isLoading) {
+    return (
+      <>
+        <Loader />
+      </>
+    );
+  }
+
   return (
     <>
       {faq?.map((item) => (

src/components/LearnPage/LearnBanner.jsx

@@ -3,6 +3,8 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
 import banner from "../../assets/images/learnBanner.webp";
 import { Link } from "react-router-dom";
+import Loader from "../Loader/Loader";
+import { useGetLearnPageQuery } from "../../Redux/slice/learPageSlice";
 
 const BannerContent = [
   {
@@ -20,10 +22,24 @@ const BannerContent = [
   },
 ];
 
-const LearnBanner = ({ data }) => {
+const LearnBanner = () => {
+  const { data, isLoading, error } = useGetLearnPageQuery();
+  const learnData = data?.data?.data;
+
+  if (isLoading) {
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
+  }
+
+  if (error) {
+    console.log(error.message);
+  }
   return (
     <>
-      {data?.map((item) => (
+      {learnData?.map((item) => (
         <Box
           key={item.id}
           height={"100vh"}

src/components/UseCase/UseCase.jsx

@@ -22,6 +22,7 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
         backgroundRepeat={"no-repeat"}
         backgroundSize={"cover"}
         position="relative"
+        backgroundPosition={"center"}
         sx={{
           "@media (max-width: 600px)": {
             height: "400px",

src/pages/LearnPage.jsx

@@ -6,30 +6,17 @@ import GetStarted from "../components/LearnPage/GetStarted";
 import LearnBanner from "../components/LearnPage/LearnBanner";
 import LearnDev from "../components/LearnPage/LearnDev";
 import WhyRubix from "../components/LearnPage/WhyRubix";
-import { useGetLearnPageQuery } from "../Redux/slice/bannerSlice";
 import Loader from "../components/Loader/Loader";
 
 const LearnPage = () => {
-  const { data, isLoading, error } = useGetLearnPageQuery();
-  const learnData = data?.data?.data;
-  console.log(learnData);
-
   useEffect(() => {
     // Scroll to the top of the page when the component mounts
     window.scrollTo(0, 0);
   }, []);
 
-  if (isLoading) {
-    return (
-      <div>
-        <Loader />
-      </div>
-    );
-  }
-
   return (
     <>
-      <LearnBanner data={learnData} />
+      <LearnBanner />
       <LearnDev />
       <WhyRubix />
       <GetStarted />

src/routes/_routes.jsx

@@ -21,6 +21,8 @@ import UseCases from "../pages/UseCases";
 import fintech from "../assets/images/usecase-bg.png";
 import adTech from "../assets/images/addtech.jpg";
 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 Form from "../components/Contact/Form";
 import UseCase from "../components/UseCase/UseCase";
@@ -176,7 +178,7 @@ export const route = [
         bannerSubHeading={
           "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
         }
-        bannerImage={healthTech}
+        bannerImage={security}
         useCase={IdentitySecurityContent}
       />
     ),
@@ -189,7 +191,7 @@ export const route = [
         bannerSubHeading={
           "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
         }
-        bannerImage={healthTech}
+        bannerImage={tele}
         useCase={telecom}
       />
     ),