FIX: Adding the Incoming Board

This commit is contained in:
2026-07-03 14:45:52 +05:30
parent b1d965b182
commit a91b957579
3 changed files with 14 additions and 11 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 261 KiB

+13 -10
View File
@@ -3,7 +3,7 @@ import Reveal from "./Reveal";
const INCOMING_OFFICERS = [ const INCOMING_OFFICERS = [
{ role: "President", name: "Rtn. Er. G. Muralidharan", image: "/images/incoming-president1.png" }, { role: "President", name: "Rtn. Er. G. Muralidharan", image: "/images/incoming-president1.png" },
{ role: "Secretary", name: "Rtn. M. Bhimarao", image: "/images/incoming-secretary1.png" }, { role: "Secretary", name: "Rtn. M. Bhimarao", image: "/images/incoming-secretary2.png" },
{ role: "Treasurer", name: "Rtn. K. Kumar", image: "/images/incoming-treasurer.jpg" }, { role: "Treasurer", name: "Rtn. K. Kumar", image: "/images/incoming-treasurer.jpg" },
]; ];
@@ -21,23 +21,26 @@ export default function IncomingBoard() {
</Reveal> </Reveal>
<Reveal delay={100}> <Reveal delay={100}>
<div className="mt-8 grid grid-cols-3 gap-3 sm:gap-6"> <div className="mt-8 grid grid-cols-3 gap-2.5 sm:gap-6">
{INCOMING_OFFICERS.map((o) => ( {INCOMING_OFFICERS.map((o) => (
<div key={o.role} className="flex flex-col items-center"> <div key={o.role} className="flex flex-col items-center">
<div className="w-full max-w-[9rem] rounded-2xl border border-rotary-gold/40 bg-white p-2 shadow-[0_6px_20px_-8px_rgba(3,20,58,0.25)] ring-1 ring-rotary-navy/[0.04] sm:max-w-[11rem]"> <div className="w-full max-w-[9rem] rounded-2xl border border-rotary-gold/40 bg-white p-1.5 shadow-[0_6px_20px_-8px_rgba(3,20,58,0.25)] ring-1 ring-rotary-navy/[0.04] sm:max-w-[11rem] sm:p-2">
<div className="overflow-hidden rounded-xl"> <div className="relative aspect-[3/4] w-full overflow-hidden rounded-xl">
<Image <Image
src={o.image} src={o.image}
alt={`${o.name}, ${o.role} 2026-27`} alt={`${o.name}, ${o.role} 2026-27`}
width={400} fill
height={500} sizes="(min-width: 640px) 176px, 33vw"
sizes="(min-width: 640px) 176px, 144px" className="object-cover object-top"
className="h-auto w-full object-contain"
/> />
</div> </div>
</div> </div>
<p className="mt-3 text-center text-sm font-semibold text-rotary-navy">{o.name}</p> <p className="mt-2 text-center text-[11px] font-semibold leading-tight text-rotary-navy sm:mt-3 sm:text-sm">
<p className="text-center text-xs uppercase tracking-wider text-rotary-ink/50">{o.role}</p> {o.name}
</p>
<p className="text-center text-[9px] uppercase tracking-wider text-rotary-ink/50 sm:text-xs">
{o.role}
</p>
</div> </div>
))} ))}
</div> </div>