Merge pull request #83 from SpaceyaTech/about-us-hero-img-change

changed hero images on aboutUs & landing pages

src/APP/components/PodcastCard.jsx

@@ -1,18 +1,16 @@
-import { podImage1 } from "../../assets/images/podcast";
-
 function PodcastCard({ img, category = "Podcast", title, description, link }) {
   return (
     <a href={link} target="_blank" rel="noopener noreferrer">
       <div className="w-[95vw] md:w-[520px] h-[520px] rounded-md overflow-hidden relative">
         <img src={img} alt="podcast" className="w-full h-full object-cover" />
-        <div className="absolute bottom-0 left-0 right-0 bg-black opacity-80 h-1/3" />
+        <div className="absolute bottom-0 left-0 right-0 bg-black opacity-80 h-2/5 md:h-1/3" />
 
         <div className="absolute bottom-0 left-0 right-0 text-white flex flex-col gap-3 p-6">
-          <h5 className="text-[#009975] font-medium text-sm capitalize">
+          <h5 className="text-[#009975] font-medium text-xs md:text-sm capitalize">
             {category}
           </h5>
-          <h3 className="font-semibold text-xl">{title}</h3>
-          <p className="font-normal text-base">{description}</p>
+          <h3 className="font-semibold text-base md:text-xl">{title}</h3>
+          <p className="font-normal text-sm md:text-base">{description}</p>
         </div>
       </div>
     </a>

src/APP/pages/aboutUs/data.js

@@ -6,6 +6,7 @@ import {
   james,
   juma,
   marlyn,
+  murabula,
   sharon,
   waithaka,
 } from "../../../assets/images/aboutPage";
@@ -56,4 +57,9 @@ export const LeadershipData = [
     title: "Head of Communication",
     image: juma,
   },
+  {
+    name: "Racheal Murabula",
+    title: "Lead Android Engineer",
+    image: murabula,
+  },
 ];

src/APP/pages/aboutUs/sections/HeroSection.jsx

@@ -1,5 +1,6 @@
-import AboutImg1 from "../../../../assets/images/aboutPage/about-img-1.png";
-import AboutImg2 from "../../../../assets/images/aboutPage/about-img-2.png";
+import React from "react";
+
+import { aboutImg2, heroImg } from "../../../../assets/images/aboutPage";
 
 function HeroSection() {
   return (
@@ -22,14 +23,14 @@ function HeroSection() {
           evangelists.
         </p>
         <img
-          src={AboutImg1}
+          src={heroImg}
           alt="space ya tech"
           className="absolute -top-8 md:-top-24 lg:-top-8 xl:-top-28 right-0 md:-right-36 lg:-right-48 xl:-right-48 w-2/6 md:w-auto lg:w-[70%]"
         />
       </div>
       <div className="flex flex-col md:flex-row justify-between items-center md:my-20 min-h-96 px-4 md:px-0">
         <div className="my-10">
-          <img src={AboutImg2} alt="space ya tech" />
+          <img src={aboutImg2} alt="space ya tech" />
         </div>
         <div className="leading-6 md:w-1/2 text-base space-y-4 md:pl-10">
           <p>

src/APP/pages/community/sections/chaptersSection/ChaptersSection.jsx

@@ -16,8 +16,6 @@ function ChaptersSection() {
     isSuccess,
   } = useChaptersData();
 
-  console.log("chaptersData ", chaptersData);
-
   return (
     <div className="my-2">
       <div

src/assets/images/aboutPage/index.js

@@ -11,7 +11,10 @@ import juma from "./leadership/juma-lawrence.png";
 import marlyn from "./leadership/marlyn-mayienga.png";
 import sharon from "./leadership/sharon-jebitok.jpeg";
 import waithaka from "./leadership/waithaka-waweru.jpeg";
+import murabula from "./leadership/rachel-murabula.jpeg";
 
+import heroImg from "./heroSec.png";
+import aboutImg2 from "./about-img-2.png";
 import about1 from "./about-img-1.png";
 import about2 from "./about-img-2.png";
 import buildComm from "./building-community.png";
@@ -29,11 +32,14 @@ export {
   james,
   juma,
   marlyn,
+  murabula,
   sharon,
   waithaka,
   about1,
   about2,
   buildComm,
   mission,
   vision,
+  heroImg,
+  aboutImg2,
 };

src/main.jsx

@@ -1,11 +1,28 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import "./index.css";
 import router from "./router";
+import { AuthContextProvider } from "./utils/AuthContext";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 10,
+    },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <AuthContextProvider>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+        <ReactQueryDevtools position="bottom-right" />
+      </QueryClientProvider>
+    </AuthContextProvider>
   </React.StrictMode>
 );