FIX: Adding the Incoming Board

src/app/page.tsx

@@ -5,11 +5,13 @@ import Guests from "@/components/Guests";
 import OfficeBearers from "@/components/OfficeBearers";
 import CtaBand from "@/components/CtaBand";
 import Footer from "@/components/Footer";
+import IncomingBoard from "@/components/IncomingBoard";
 
 export default function Page() {
   return (
     <main className="bg-rotary-paper">
       <Hero />
+      <IncomingBoard />
       <EventDetails />
       <Handover />
       <Guests />

src/components/IncomingBoard.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+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: "Treasurer", name: "Rtn. K. Kumar", image: "/images/incoming-treasurer.jpg" },
+];
+
+export default function IncomingBoard() {
+  return (
+    <section className="bg-white px-4 py-6 sm:px-6 sm:py-8 lg:px-8">
+      <div className="mx-auto max-w-7xl">
+        <Reveal>
+          <p className="text-center text-xs font-semibold uppercase tracking-[0.28em] text-rotary-azure">
+            2026 – 27
+          </p>
+          <h2 className="mt-2 text-center text-3xl font-semibold text-rotary-navy sm:text-4xl">
+            Meet the Incoming Board
+          </h2>
+        </Reveal>
+
+        <Reveal delay={100}>
+          <div className="mt-8 grid grid-cols-3 gap-3 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">
+                    <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"
+                    />
+                  </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>
+              </div>
+            ))}
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}