Ensure headers are in proper order

This commit is contained in:
TheMaddax 2024-11-07 15:09:06 -06:00
parent 90a16fe19d
commit bf2bd09019
4 changed files with 26 additions and 22 deletions

View file

@ -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>
);

View file

@ -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>

View file

@ -122,8 +122,10 @@ 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>
<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
@ -134,8 +136,10 @@ const MeetBoard: React.FC = () => {
/>
))}
</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}`}

View file

@ -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>