FIX: Adding the Incoming Board

src/components/IncomingBoard.tsx

@@ -3,7 +3,7 @@ import Reveal from "./Reveal";
 
 const INCOMING_OFFICERS = [
   { 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" },
 ];
 
@@ -21,23 +21,26 @@ export default function IncomingBoard() {
         </Reveal>
 
         <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) => (
               <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="overflow-hidden rounded-xl">
+                <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="relative aspect-[3/4] w-full overflow-hidden rounded-xl">
                     <Image
                       src={o.image}
                       alt={`${o.name}, ${o.role} 2026-27`}
-                      width={400}
-                      height={500}
-                      sizes="(min-width: 640px) 176px, 144px"
-                      className="h-auto w-full object-contain"
+                      fill
+                      sizes="(min-width: 640px) 176px, 33vw"
+                      className="object-cover object-top"
                     />
                   </div>
                 </div>
-                <p className="mt-3 text-center text-sm font-semibold text-rotary-navy">{o.name}</p>
-                <p className="text-center text-xs uppercase tracking-wider text-rotary-ink/50">{o.role}</p>
+                <p className="mt-2 text-center text-[11px] font-semibold leading-tight text-rotary-navy sm:mt-3 sm:text-sm">
+                  {o.name}
+                </p>
+                <p className="text-center text-[9px] uppercase tracking-wider text-rotary-ink/50 sm:text-xs">
+                  {o.role}
+                </p>
               </div>
             ))}
           </div>
@@ -45,4 +48,4 @@ export default function IncomingBoard() {
       </div>
     </section>
   );
-}
+}