chaulmark/deafmissoula-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ensure headers are in proper order

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/ComingSoon.tsx
View file

@ -11,7 +11,7 @@ const ComingSoon: React.FC = () => {
className="text-center" className="text-center"
> >
<h1 className="text-6xl font-bold text-white mb-4">COMING SOON</h1> <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> </motion.div>
</div> </div>
); );

6
client/src/components/EventCard.tsx
View file

@ -14,9 +14,9 @@ const EventCard: React.FC<EventCardProps> = ({ event }) => {
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
className="bg-white rounded-lg shadow-md p-4 w-full max-w-xs border border-gray-200" 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> <h2 className="font-bold text-lg text-[#6B1631] mb-2">{event.title}</h2>
<p className="text-sm text-gray-900 mb-2 font-medium whitespace-pre-line">{event.formattedDateRange}</p> <div className="text-sm text-gray-900 mb-2 font-medium whitespace-pre-line">{event.formattedDateRange}</div>
<p className="text-sm text-gray-900 mb-2">{event.description}</p> <div className="text-sm text-gray-900 mb-2">{event.description}</div>
<div className="text-sm text-gray-900 mb-2"> <div className="text-sm text-gray-900 mb-2">
<strong className="font-semibold">Address:</strong> {event.address} <strong className="font-semibold">Address:</strong> {event.address}
</div> </div>

38
client/src/components/Meet-Board.tsx
View file

@ -122,20 +122,24 @@ const MeetBoard: React.FC = () => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }} 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"> <section aria-labelledby="board-members-heading">
{shuffledMembers.map((member, index) => ( <h2 id="board-members-heading" className="sr-only">Board Members Directory</h2>
<BoardMemberCard <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8" role="list">
key={index} {shuffledMembers.map((member, index) => (
member={member} <BoardMemberCard
onClick={() => setSelectedMember(member)} key={index}
aria-label={`View details for ${member.name}, ${member.position}`} member={member}
/> onClick={() => setSelectedMember(member)}
))} aria-label={`View details for ${member.name}, ${member.position}`}
</div> />
))}
</div>
</section>
<div className="mt-12"> <section aria-labelledby="video-section-heading" className="mt-12">
<h2 id="video-section-heading">Introduction Video</h2>
<div <div
className="relative rounded-lg overflow-hidden shadow-lg border-4 border-[#6B1631]" className="relative rounded-lg overflow-hidden shadow-lg border-4 border-[#6B1631]"
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
@ -193,7 +197,7 @@ const MeetBoard: React.FC = () => {
)} )}
</AnimatePresence> </AnimatePresence>
</div> </div>
</div> </section>
</motion.div> </motion.div>
<AnimatePresence> <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"> <h2 id="member-modal-title" className="text-2xl md:text-3xl font-bold text-[#6B1631] mb-4">
{selectedMember.name} {selectedMember.name}
</h2> </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} {selectedMember.position}
</p> </h3>
<p className="text-base md:text-lg text-gray-900 mb-4 leading-relaxed"> <p className="text-base md:text-lg text-gray-900 mb-4 leading-relaxed">
{selectedMember.bio} {selectedMember.bio}
</p> </p>
@ -252,9 +256,9 @@ const BoardMemberCard: React.FC<{
role="listitem" role="listitem"
aria-label={ariaLabel} 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} {member.name}
</h2> </h3>
<img <img
src={member.image} src={member.image}
alt={`${member.name}, ${member.position}`} alt={`${member.name}, ${member.position}`}

2
client/src/components/Sponsors.tsx
View file

@ -18,7 +18,7 @@ const SponsorCard: React.FC<SponsorCardProps> = ({ name, logoPath, onClick, webs
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
onClick={onClick} 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"> <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" /> <img src={logoPath} alt={`${name} logo`} className="max-w-full max-h-full object-contain" />
</div> </div>