Swathi - Fix for accessing "What We Do' section in Job Application Listing Page

src/components/Collaboration/Collaboration.jsx

@@ -5,7 +5,6 @@ import styles from './Collaboration.module.css';
 import { toast } from 'react-toastify';
 import { ApiEndpoint } from '~/utils/URL';
 import { useSelector } from 'react-redux';
-import OneCommunityImage from '../../assets/images/logo2.png';
 
 const ADS_PER_PAGE = 18;
 
@@ -205,12 +204,6 @@ function Collaboration() {
   /* ================= MAIN VIEW ================= */
   return (
     <div className={`${styles.jobLanding} ${darkMode ? styles.dark : ''}`}>
-      <div className={styles.jobHeader}>
-        <a href="https://www.onecommunityglobal.org/collaboration/">
-          <img src={OneCommunityImage} alt="One Community Logo" />
-        </a>
-      </div>
-
       <div className={styles.userCollaborationContainer}>
         {/* NAVBAR */}
         <nav className={styles.navbar}>

src/components/Collaboration/Collaboration.module.css

@@ -10,8 +10,7 @@
 }
 
 .userCollaborationContainer {
-  width: 92%;
-  max-width: 1200px;
+  width: 100%;
   margin: 0 auto;
   background-color: #fff;
   border-radius: 12px;
@@ -409,3 +408,27 @@
   color: var(--text-primary);
 }
 
+.navTabs {
+  display: flex;
+  flex-direction: row;
+  gap: 3rem;
+}
+
+.tabButton {
+  font-size: large;
+  font-weight: bold;
+  color: #808080;
+  text-transform: uppercase;
+}
+
+.activeTab {
+  font-size: large;
+  font-weight: bold;
+  color: #fff;
+  text-transform: uppercase;
+}
+
+:global(body.dark-mode) .tabButton,
+:global(body.bm-dashboard-dark) .tabButton {
+  color: #808080 !important;
+}

src/components/Collaboration/Main.jsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import styles from './Collaboration.module.css';
+import WhatWeDoSection from '../WhatWeDo/WhatWeDo';
+import Collaboration from './Collaboration';
+import OneCommunityImage from '../../assets/images/logo2.png';
+
+export default function Main() {
+  const [activeTab, setActiveTab] = useState('jobPostings');
+  return (
+    <>
+      <div className={styles.jobHeader}>
+        <a href="https://www.onecommunityglobal.org/collaboration/">
+          <img src={OneCommunityImage} alt="One Community Logo" />
+        </a>
+      </div>
+      <nav className={styles.navbar}>
+        <div className={styles.navTabs}>
+          <button
+            className={activeTab === 'whatWeDo' ? styles.activeTab : styles.tabButton}
+            onClick={() => setActiveTab('whatWeDo')}
+          >
+            What We Do
+          </button>
+
+          <button
+            className={activeTab === 'jobPostings' ? styles.activeTab : styles.tabButton}
+            onClick={() => setActiveTab('jobPostings')}
+          >
+            Job Postings
+          </button>
+        </div>
+      </nav>
+      <div>
+        {/* render based on active tab */}
+        {activeTab === 'whatWeDo' ? <WhatWeDoSection /> : <Collaboration />}
+      </div>
+    </>
+  );
+}

src/components/Collaboration/index.jsx

@@ -1,2 +1,2 @@
-import Collaboration from './Collaboration';
-export default Collaboration;
+import Main from './Main';
+export default Main;

src/components/WhatWeDo/WhatWeDo.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import styles from './WhatWeDo.module.css';
 
 const sections = [
@@ -62,6 +63,7 @@ const sections = [
 ];
 
 function WhatWeDoSection() {
+  const darkMode = useSelector(state => state.theme.darkMode);
   return (
     <div className={styles.whatWeDoContainer}>
       <h2>What We Do</h2>
@@ -70,7 +72,7 @@ function WhatWeDoSection() {
           <a
             key={idx}
             href={section.link}
-            className={styles.whatWeDoItem}
+            className={`${styles.whatWeDoItem} ${darkMode ? styles.dark : ''}`}
             target="_blank"
             rel="noopener noreferrer"
           >

src/components/WhatWeDo/WhatWeDo.module.css

@@ -4,41 +4,42 @@
   text-align: left;
   max-width: 1200px;
   margin: 0 auto;
-  overflow-x: hidden; /* Prevent horizontal overflow */
+  overflow-x: hidden;
 }
 
 .whatWeDoContainer h2 {
   font-size: 2rem;
   color: #333;
   margin-bottom: 16px;
-  overflow-wrap: break-word;
+  word-wrap: break-word;
 }
 
 .whatWeDoGrid {
   display: grid;
-  grid-template-columns: repeat(
-    auto-fit,
-    minmax(320px, 1fr)
-  ); /* Increased min-width for longer text */
-
-  gap: 20px; /* Increased gap for better spacing */
+  grid-template-columns: repeat(auto-fit,
+      minmax(320px, 1fr));
+  /* Increased min-width for longer text */
+  gap: 20px;
+  /* Increased gap for better spacing */
   margin-top: 16px;
   width: 100%;
 }
 
 .whatWeDoItem {
   display: flex;
   align-items: flex-start;
-  gap: 16px; /* Increased gap between image and text */
+
+  /* Increased gap between image and text */
+  gap: 16px;
   text-decoration: none;
   color: inherit;
-  padding: 16px; /* Increased padding */
+  padding: 16px;
   border-radius: 8px;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
   cursor: pointer;
   min-width: 0;
   overflow: hidden;
-  min-height: fit-content; /* Allow natural height expansion */
+  min-height: fit-content;
 }
 
 .whatWeDoItem:hover {
@@ -62,7 +63,8 @@
 }
 
 .whatWeDoText h3 {
-  margin: 0 0 12px; /* Increased margin */
+  margin: 0 0 12px;
+  /* Increased margin */
   font-size: 1.1rem;
   color: #333;
   line-height: 1.3;
@@ -73,20 +75,25 @@
   margin: 0;
   font-size: 0.85rem;
   color: #666;
-  line-height: 1.5; /* Improved line height for readability */
+  line-height: 1.5;
+  /* Improved line height for readability */
   overflow-wrap: break-word;
   hyphens: auto;
 }
 
+.dark:hover {
+  background-color: #304052;
+}
+
 /* Improved responsive breakpoints */
-@media (width <= 1024px) {
+@media (width <=1024px) {
   .whatWeDoGrid {
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
   }
 }
 
-@media (width <= 768px) {
+@media (width <=768px) {
   .whatWeDoContainer {
     padding: 16px;
   }
@@ -101,7 +108,7 @@
   }
 }
 
-@media (width <= 480px) {
+@media (width <=480px) {
   .whatWeDoContainer {
     padding: 12px;
   }
@@ -115,27 +122,28 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding: 20px; /* More padding for mobile */
+    padding: 20px;
   }
 
   .whatWeDoItem img {
-    width: 100px; /* Larger image on mobile since text is below */
+    width: 100px;
     height: 100px;
     margin-bottom: 16px;
   }
 
   .whatWeDoText h3 {
-    font-size: 1.2rem; /* Larger heading on mobile */
+    font-size: 1.2rem;
+    /* Larger heading on mobile */
     margin-bottom: 12px;
   }
 
   .whatWeDoText p {
-    font-size: 0.9rem; /* Slightly larger text for better readability */
+    font-size: 0.9rem;
     line-height: 1.6;
   }
 }
 
-@media (width <= 320px) {
+@media (width <=320px) {
   .whatWeDoContainer {
     padding: 10px;
   }
@@ -186,4 +194,4 @@
   .whatWeDoItem:active {
     background-color: #f0f0f0;
   }
-}
+}