From bf2bd09019de77ded90680a8e7d3053dc89302ed Mon Sep 17 00:00:00 2001
From: TheMaddax <chris@sigd.net>
Date: Thu, 7 Nov 2024 15:09:06 -0600
Subject: [PATCH] Ensure headers are in proper order

---
 client/src/components/ComingSoon.tsx |  2 +-
 client/src/components/EventCard.tsx  |  6 ++---
 client/src/components/Meet-Board.tsx | 38 +++++++++++++++-------------
 client/src/components/Sponsors.tsx   |  2 +-
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/client/src/components/ComingSoon.tsx b/client/src/components/ComingSoon.tsx
index 05db250..c80eeb8 100644
--- a/client/src/components/ComingSoon.tsx
+++ b/client/src/components/ComingSoon.tsx
@@ -11,7 +11,7 @@ const ComingSoon: React.FC = () => {
         className="text-center"
       >
         <h1 className="text-6xl font-bold text-white mb-4">COMING SOON</h1>
-        <p className="text-xl text-white">We're working hard to bring you something amazing. Stay tuned!</p>
+        <div className="text-xl text-white">We're working hard to bring you something amazing. Stay tuned!</div>
       </motion.div>
     </div>
   );
diff --git a/client/src/components/EventCard.tsx b/client/src/components/EventCard.tsx
index e16dd8c..f8f1673 100644
--- a/client/src/components/EventCard.tsx
+++ b/client/src/components/EventCard.tsx
@@ -14,9 +14,9 @@ const EventCard: React.FC<EventCardProps> = ({ event }) => {
       whileHover={{ scale: 1.05 }}
       className="bg-white rounded-lg shadow-md p-4 w-full max-w-xs border border-gray-200"
     >
-      <h3 className="font-bold text-lg text-[#6B1631] mb-2">{event.title}</h3>
-      <p className="text-sm text-gray-900 mb-2 font-medium whitespace-pre-line">{event.formattedDateRange}</p>
-      <p className="text-sm text-gray-900 mb-2">{event.description}</p>
+      <h2 className="font-bold text-lg text-[#6B1631] mb-2">{event.title}</h2>
+      <div className="text-sm text-gray-900 mb-2 font-medium whitespace-pre-line">{event.formattedDateRange}</div>
+      <div className="text-sm text-gray-900 mb-2">{event.description}</div>
       <div className="text-sm text-gray-900 mb-2">
         <strong className="font-semibold">Address:</strong> {event.address}
       </div>
diff --git a/client/src/components/Meet-Board.tsx b/client/src/components/Meet-Board.tsx
index 21d2f72..2476b3a 100644
--- a/client/src/components/Meet-Board.tsx
+++ b/client/src/components/Meet-Board.tsx
@@ -122,20 +122,24 @@ const MeetBoard: React.FC = () => {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
       >
-        <h1 className="text-4xl md:text-5xl font-bold text-[#6B1631] mb-8">Meet MCDi Board</h1>
+        <h1 className="text-4xl md:text-5xl font-bold text-[#6B1631] mb-8">Meet Our Board</h1>
         
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8" role="list">
-          {shuffledMembers.map((member, index) => (
-            <BoardMemberCard 
-              key={index} 
-              member={member} 
-              onClick={() => setSelectedMember(member)}
-              aria-label={`View details for ${member.name}, ${member.position}`}
-            />
-          ))}
-        </div>
+        <section aria-labelledby="board-members-heading">
+          <h2 id="board-members-heading" className="sr-only">Board Members Directory</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8" role="list">
+            {shuffledMembers.map((member, index) => (
+              <BoardMemberCard 
+                key={index} 
+                member={member} 
+                onClick={() => setSelectedMember(member)}
+                aria-label={`View details for ${member.name}, ${member.position}`}
+              />
+            ))}
+          </div>
+        </section>
 
-        <div className="mt-12">
+        <section aria-labelledby="video-section-heading" className="mt-12">
+          <h2 id="video-section-heading">Introduction Video</h2>
           <div 
             className="relative rounded-lg overflow-hidden shadow-lg border-4 border-[#6B1631]"
             onMouseMove={handleMouseMove}
@@ -193,7 +197,7 @@ const MeetBoard: React.FC = () => {
               )}
             </AnimatePresence>
           </div>
-        </div>
+        </section>
       </motion.div>
 
       <AnimatePresence>
@@ -218,9 +222,9 @@ const MeetBoard: React.FC = () => {
               <h2 id="member-modal-title" className="text-2xl md:text-3xl font-bold text-[#6B1631] mb-4">
                 {selectedMember.name}
               </h2>
-              <p className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-2">
+              <h3 className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-2">
                 {selectedMember.position}
-              </p>
+              </h3>
               <p className="text-base md:text-lg text-gray-900 mb-4 leading-relaxed">
                 {selectedMember.bio}
               </p>
@@ -252,9 +256,9 @@ const BoardMemberCard: React.FC<{
     role="listitem"
     aria-label={ariaLabel}
   >
-    <h2 className="text-2xl md:text-3xl font-bold text-[#6B1631] mb-2 md:mb-4">
+    <h3 className="text-2xl md:text-3xl font-bold text-[#6B1631] mb-2 md:mb-4">
       {member.name}
-    </h2>
+    </h3>
     <img 
       src={member.image} 
       alt={`${member.name}, ${member.position}`} 
diff --git a/client/src/components/Sponsors.tsx b/client/src/components/Sponsors.tsx
index 2b967af..99624a9 100644
--- a/client/src/components/Sponsors.tsx
+++ b/client/src/components/Sponsors.tsx
@@ -18,7 +18,7 @@ const SponsorCard: React.FC<SponsorCardProps> = ({ name, logoPath, onClick, webs
     transition={{ duration: 0.2 }}
     onClick={onClick}
   >
-    <h2 className="text-xl sm:text-2xl font-semibold text-[#8C1D40] mb-2 sm:mb-4 text-center">{name}</h2>
+    <h3 className="text-xl sm:text-2xl font-semibold text-[#8C1D40] mb-2 sm:mb-4 text-center">{name}</h3>
     <div className="w-full h-32 sm:h-48 flex items-center justify-center mb-4">
       <img src={logoPath} alt={`${name} logo`} className="max-w-full max-h-full object-contain" />
     </div>