style: chapter cards

src/APP/components/PodcastCard.jsx

@@ -1,11 +1,14 @@
+import React from "react";
+import PropTypes from "prop-types";
+
 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">
+      <div className="w-[95vw] md:w-[450px] h-[500px] 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-2/5 md:h-1/3" />
+        <div className="absolute bottom-0 left-0 right-0 bg-black opacity-80 h-2/5 md:h-2/5" />
 
-        <div className="absolute bottom-0 left-0 right-0 text-white flex flex-col gap-3 p-6">
+        <div className="absolute bottom-0 inset-x-0 text-white flex flex-col gap-3 px-6 py-4">
           <h5 className="text-[#009975] font-medium text-xs md:text-sm capitalize">
             {category}
           </h5>
@@ -18,3 +21,11 @@ function PodcastCard({ img, category = "Podcast", title, description, link }) {
 }
 
 export default PodcastCard;
+
+PodcastCard.propTypes = {
+  img: PropTypes.string.isRequired,
+  category: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  link: PropTypes.number.isRequired,
+};

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

@@ -4,25 +4,24 @@ import PropTypes from "prop-types";
 
 function ChapterCard({ id, country, city, name, members, banner }) {
   return (
-    <div
-      className="flex flex-col items-center justify-center h-80 bg-auto bg-no-repeat bg-center border-2 rounded-lg border-white"
-      style={{
-        backgroundImage: `url(${banner})`,
-        backgroundSize: "cover",
-      }}
-    >
-      <h2 className="text-base font-medium capitalize my-2">
-        {name} {city}, {country}
-      </h2>
-      <p className="text-base text-center leading-6">{members} members</p>
-      <Link to={`/chapter/${id}`}>
-        <button
-          type="button"
-          className="py-2 px-12 border-2 border-solid my-8 rounded-lg flex items-center justify-center text-xs capitalize transition-all duration-300 ease-in hover:text-white hover:bg-[#009975]"
-        >
-          JOIN
-        </button>
-      </Link>
+    <div className="relative h-80 border-2 rounded-lg border-white overflow-hidden">
+      <img src={banner} alt={name} className="w-full h-full object-cover" />
+      <div className="absolute bottom-0 left-0 right-0 bg-black opacity-60 h-full" />
+
+      <div className="absolute bottom-14 inset-x-0 text-white flex flex-col items-center">
+        <h2 className="text-base font-medium capitalize my-2">
+          {name} {city}, {country}
+        </h2>
+        <p className="text-base text-center  leading-6">{members} members</p>
+        <Link to={`/chapter/${id}`}>
+          <button
+            type="button"
+            className="py-2 px-12 border-2 border-solid my-8 rounded-lg flex items-center justify-center text-xs capitalize transition-all duration-300 ease-in hover:text-white hover:bg-[#009975]"
+          >
+            JOIN
+          </button>
+        </Link>
+      </div>
     </div>
   );
 }

src/APP/pages/events/pages/EventsPage.jsx

@@ -1,17 +1,16 @@
-import React from 'react';
-import SearchSection from '../sections/SearchSection';
-import EventsSection from '../sections/eventsSection/EventsSection';
-import EventCategory from '../sections/eventsSection/EventCategory';
+import React from "react";
+import SearchSection from "../sections/SearchSection";
+import EventsSection from "../sections/eventsSection/EventsSection";
+import EventCategory from "../sections/eventsSection/EventCategory";
 
 function Events() {
   return (
     <div>
       <SearchSection />
       <EventsSection showTabs />
       <EventCategory />
-
     </div>
-  )
+  );
 }
 
-export default Events
+export default Events;

src/APP/pages/landingPage/sections/HeroSection3.jsx

@@ -18,51 +18,55 @@ const partners = [
     id: 1,
     img: ctfroom,
     name: "ctfroom",
+    link: "https://ctfroom.com/",
   },
   {
     id: 2,
     img: DevOps,
     name: "DevOps",
+    link: "https://twitter.com/nairobidevops",
   },
   {
     id: 3,
     img: Propel,
     name: "Propel",
+    link: "https://propel.community/",
   },
   {
     id: 4,
     img: moringa,
     name: "moringa",
+    link: "https://moringaschool.com/",
   },
   {
     id: 5,
     img: chimoney,
     name: "chimoney",
+    link: "https://chimoney.io/",
   },
   {
     id: 6,
     img: Kushite,
     name: "Kushite",
+    link: "https://icpkushite.com/",
   },
   {
     id: 7,
-    img: spheron,
-    name: "spheron",
-  },
-  {
-    id: 8,
     img: osca,
     name: "osca",
+    link: "https://oscafrica.org/",
   },
   {
-    id: 9,
+    id: 8,
     img: cytonn,
     name: "cytonn",
+    link: "#",
   },
   {
-    id: 10,
+    id: 9,
     img: reactke,
     name: "reactke",
+    link: "https://www.reactdevske.org/",
   },
 ];
 
@@ -112,8 +116,10 @@ const HeroSection3 = () => {
         </p>
 
         <div className="overflow-auto flex flex-row gap-14 md:px-3 w-full items-center">
-          {partners.map(({ id, img, name }) => (
-            <img src={img} className="object-cover" alt={name} key={id} />
+          {partners.map(({ id, img, name, link }) => (
+            <a href={link} target="_blank" rel="noopener noreferrer">
+              <img src={img} className="object-cover" alt={name} key={id} />
+            </a>
           ))}
         </div>
       </div>