From ce03ea72d919e57d7efef0914826fb56b2524f3c Mon Sep 17 00:00:00 2001
From: adarshm11 <amlearning2023@gmail.com>
Date: Wed, 2 Sep 2026 13:27:44 -0700
Subject: [PATCH 1/2] add eboard section to about sce page

---
 src/Pages/About/About.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/Pages/About/About.js b/src/Pages/About/About.js
index b8f22bc60..3be07ac08 100644
--- a/src/Pages/About/About.js
+++ b/src/Pages/About/About.js
@@ -27,6 +27,13 @@ function useScrollSpy() {
   return activeId;
 }
 
+const eboardDetails = [
+  { role: 'President', name: 'Cindy Tat', discord: '_c1ndytat' },
+  { role: 'Vice President', name: 'Wesley Wong', discord: 'weslayer' },
+  { role: 'Treasurer', name: 'Gerard Consuelo', discord: 'epicgdog' },
+  { role: 'EP/PR Chair', name: 'Rachel Tran', discord: 'ra2y' },
+];
+
 export default function AboutPage() {
   const activeId = useScrollSpy();
 
@@ -66,6 +73,21 @@ export default function AboutPage() {
             </div>
           </section>
 
+          <section id="eboard" data-spy className="space-y-6">
+            <h2 className="text-2xl font-semibold text-gray-900 md:text-3xl dark:text-gray-100">Our Team</h2>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              {eboardDetails.map((entry) => (
+                <div key={entry.role} className="p-6 bg-gray-50 rounded-lg border border-black dark:bg-gray-800 dark:border-white">
+                  <h3 className="mb-3 font-semibold text-gray-900 dark:text-gray-100">{entry.role}</h3>
+                  <div className="space-y-1 text-sm">
+                    <p>{entry.name}</p>
+                    <p>Discord: <span className="font-mono">{entry.discord}</span></p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
           <section id="location" data-spy className="space-y-6">
             <h2 className="text-2xl font-semibold text-gray-900 md:text-3xl dark:text-gray-100">Location & Hours</h2>
             <div className="text-gray-700 prose prose-lg dark:text-gray-300">
@@ -231,6 +253,15 @@ export default function AboutPage() {
                 >
                   Introduction
                 </button>
+                <button
+                  onClick={() => scrollToSection('eboard')}
+                  className={[
+                    'block w-full text-sm text-left transition-colors hover:text-blue-600 dark:hover:text-blue-400'
+                    , activeId === 'eboard' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-400'
+                  ].join(' ')}
+                >
+                  Our Team
+                </button>
                 <button
                   onClick={() => scrollToSection('location')}
                   className={[

From 794070b3ed0f1102a8bea3eaf2516fa97bf7bd6b Mon Sep 17 00:00:00 2001
From: adarshm11 <amlearning2023@gmail.com>
Date: Wed, 2 Sep 2026 13:31:24 -0700
Subject: [PATCH 2/2] modify about page unit tests to check for correct table
 of contents headers

---
 test/frontend/AboutPage.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/frontend/AboutPage.test.js b/test/frontend/AboutPage.test.js
index 28e2f2966..2817212ef 100644
--- a/test/frontend/AboutPage.test.js
+++ b/test/frontend/AboutPage.test.js
@@ -65,8 +65,8 @@ describe('<AboutPage />', () => {
     const tocButtons = tocNav.find('button');
     expect(tocButtons.length).to.be.greaterThan(0);
     expect(tocButtons.at(0).text()).to.equal('Introduction');
-    expect(tocButtons.at(1).text()).to.equal('Location & Hours');
-    expect(tocButtons.at(2).text()).to.equal('Membership');
+    expect(tocButtons.at(1).text()).to.equal('Our Team');
+    expect(tocButtons.at(2).text()).to.equal('Location & Hours');
   });
 
   it('Should have responsive text sizing', () => {