first commit

src/components/EventDetails.tsx

@@ -1,28 +1,26 @@
+import Image from "next/image";
 import Reveal from "./Reveal";
 
 const DETAILS = [
-  {
-    label: "Date",
-    value: "3rd July 2026",
-    sub: "Friday",
-    icon: (
-      <path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" strokeLinecap="round" strokeLinejoin="round" />
-    ),
-  },
-  {
-    label: "Time",
-    value: "6:30 PM",
-    sub: "Doors open at 6:00 PM",
-    icon: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 3" strokeLinecap="round" strokeLinejoin="round" /></>,
-  },
   {
     label: "Venue",
-    value: "Hotel Khanna, Laya Hall",
+    value: "Ladies Recreation Club, 19 Anna Salai, Bishop David Nagar, Kosapet, Vellore, Tamil Nadu 632001",
-    sub: "Anna Salai, Vellore",
     icon: (
       <><path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21Z" strokeLinecap="round" strokeLinejoin="round" /><circle cx="12" cy="9.5" r="2.5" /></>
     ),
   },
+  {
+    label: "Landmark",
+    value: "Near Mummy Hospital, easily spotted off Anna Salai",
+    icon: (
+      <path d="M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6M9 12h.01M15 12h.01" strokeLinecap="round" strokeLinejoin="round" />
+    ),
+  },
+  {
+    label: "Meeting Time",
+    value: "Every Friday, 7:30 PM onwards",
+    icon: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 3" strokeLinecap="round" strokeLinejoin="round" /></>,
+  },
 ];
 
 export default function EventDetails() {
@@ -31,35 +29,57 @@ export default function EventDetails() {
       <div className="mx-auto max-w-7xl">
         <Reveal>
           <p className="text-center text-xs font-semibold uppercase tracking-[0.28em] text-rotary-azure">
-            Save the date
+            Where we meet
           </p>
-          <h2 className="mt-2 text-center font-serif text-3xl font-semibold text-rotary-navy sm:text-4xl">
+          <h2 className="mt-2 text-center text-3xl font-semibold text-rotary-navy sm:text-4xl">
-            Join us for the evening
+            Join us every week
           </h2>
         </Reveal>
 
-        <div className="mt-8 grid gap-3 sm:grid-cols-3">
+        {/* Meeting details + location, as simple points below the title */}
-          {DETAILS.map((d, i) => (
+        <Reveal delay={60}>
-            <Reveal key={d.label} delay={i * 100}>
+          <ul className="mx-auto mt-6 max-w-2xl space-y-3">
-              <div className="group flex h-full items-center gap-3 rounded-xl border border-rotary-navy/[0.06] bg-white p-3.5 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md hover:shadow-rotary-blue/10">
+            {DETAILS.map((d) => (
-                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-rotary-blue/[0.08] text-rotary-blue transition-colors duration-300 group-hover:bg-rotary-gold/15 group-hover:text-rotary-gold">
+              <li key={d.label} className="flex items-start gap-3">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4">
+                <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-rotary-blue/[0.08] text-rotary-blue">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-3.5 w-3.5">
                     {d.icon}
                   </svg>
-                </div>
+                </span>
-                <div className="min-w-0">
+                <p className="text-sm leading-relaxed text-rotary-ink/75">
-                  <p className="text-[10px] font-semibold uppercase tracking-wider text-rotary-azure">
+                  <span className="font-semibold text-rotary-navy">{d.label}: </span>
-                    {d.label}
+                  {d.value}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </Reveal>
+
+        {/* Premium portrait photo */}
+        <Reveal delay={120}>
+          <div className="mt-8 flex justify-center">
+            <div className="relative">
+              <div className="absolute -inset-3 rounded-[1.75rem] border border-rotary-gold/30" />
+              <div className="relative h-64 w-64 overflow-hidden rounded-[1.5rem] shadow-[0_20px_50px_-20px_rgba(3,20,58,0.35)] ring-4 ring-white sm:h-80 sm:w-[880px]">
+                <Image
+                  src="/images/meeting.png"
+                  alt="Rotary Club of Vellore weekly meeting"
+                  fill
+                  sizes="288px"
+                  className="object-cover"
+                />
+                <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-rotary-navy/85 to-transparent px-4 pb-4 pt-10">
+                  <p className="text-[10px] uppercase tracking-widest text-rotary-goldlight">
+                    Fellowship, every week
                   </p>
-                  <p className="truncate font-serif text-base font-semibold leading-tight text-rotary-navy">
+                  <p className="font-serif text-base font-semibold leading-tight text-white">
-                    {d.value}
+                    Fridays · 7:30 PM
                   </p>
-                  <p className="truncate text-xs text-rotary-ink/55">{d.sub}</p>
                 </div>
               </div>
-            </Reveal>
+            </div>
-          ))}
+          </div>
-        </div>
+        </Reveal>
       </div>
     </section>
   );

src/components/Guests.tsx

@@ -6,12 +6,12 @@ const GUESTS = [
     name: "Rtn. PDG. M. Rajan Babu",
     role: "Chief Guest",
     subrole: "Past District Governor, 3231",
-    photo: "/images/chief-guest-couple.png",
+    photo: "/images/chief-guest-couple.jpg",
   },
   {
     name: "Rtn. Yelagiri V. Selvam",
     role: "Guest of Honour",
-    subrole: "Chairman, Kodai Vizha 2026 – 27",
+    subrole: "Chairman, Kodai Vizha 2026 - 27",
     photo: "/images/guest-of-honour.jpg",
   },
 ];

src/components/Handover.tsx

@@ -30,43 +30,116 @@ function OfficerCard({
     <div
       className={`relative overflow-hidden rounded-2xl border p-6 sm:p-7 ${
         incoming
-          ? "border-rotary-gold/30 bg-rotary-navy text-white shadow-lg shadow-rotary-navy/20"
+          ? "border-white/15 bg-rotary-navy text-white shadow-[inset_0_0_60px_-8px_rgba(56,146,246,0.45),0_10px_30px_-12px_rgba(3,20,58,0.5)]"
           : "border-rotary-navy/[0.08] bg-white"
       }`}
     >
       {incoming && (
         <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl">
-          <div className="absolute inset-y-0 -left-1/4 w-1/3 -skew-x-12 bg-gradient-to-r from-transparent via-rotary-amber/35 to-transparent blur-2xl animate-shine" />
+          {/* base tint so the waves have water to sit "in" */}
+          <div className="absolute inset-0 bg-gradient-to-b from-rotary-navy via-[#0c2f63] to-[#123a7a]" />
+
+          {/* far layer — slow, soft, deep */}
+          <svg
+            className="wave-layer wave-far absolute -bottom-10 left-0 h-40 w-[200%] opacity-40 blur-2xl"
+            viewBox="0 0 1600 200"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0 100 C 80 60, 160 140, 240 100 C 320 60, 400 140, 480 100 C 560 60, 640 140, 720 100 C 800 60, 880 140, 800 100 L 800 200 L 0 200 Z
+                 M800 100 C 880 60, 960 140, 1040 100 C 1120 60, 1200 140, 1280 100 C 1360 60, 1440 140, 1520 100 C 1600 60, 1680 140, 1600 100 L 1600 200 L 800 200 Z"
+              fill="rgba(125,196,255,0.5)"
+            />
+          </svg>
+
+          {/* mid layer — brighter, medium speed */}
+          <svg
+            className="wave-layer wave-mid absolute -bottom-6 left-0 h-32 w-[200%] opacity-50 blur-lg"
+            viewBox="0 0 1600 200"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0 110 C 100 150, 200 70, 300 110 C 400 150, 500 70, 600 110 C 700 150, 800 70, 800 110 L 800 200 L 0 200 Z
+                 M800 110 C 900 150, 1000 70, 1100 110 C 1200 150, 1300 70, 1400 110 C 1500 150, 1600 70, 1600 110 L 1600 200 L 800 200 Z"
+              fill="rgba(190,224,255,0.45)"
+            />
+          </svg>
+
+          {/* near layer — brightest crest line, thin, fast */}
+          <svg
+            className="wave-layer wave-near absolute -bottom-3 left-0 h-20 w-[200%] opacity-60 blur-md"
+            viewBox="0 0 1600 200"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0 120 C 60 95, 120 145, 180 120 C 240 95, 300 145, 360 120 C 420 95, 480 145, 540 120 C 600 95, 660 145, 720 120 C 780 95, 800 120, 800 120 L 800 200 L 0 200 Z
+                 M800 120 C 860 95, 920 145, 980 120 C 1040 95, 1100 145, 1160 120 C 1220 95, 1280 145, 1340 120 C 1400 95, 1460 145, 1520 120 C 1580 95, 1600 120, 1600 120 L 1600 200 L 800 200 Z"
+              fill="rgba(255,255,255,0.4)"
+            />
+          </svg>
+
+          {/* frosted glass film */}
+          <div className="absolute inset-0 bg-white/[0.04] backdrop-blur-[3px]" />
+
+          {/* diagonal glass sheen */}
+          <div className="sheen absolute inset-y-0 -left-1/3 w-1/3 -skew-x-12 bg-gradient-to-r from-transparent via-white/15 to-transparent" />
+
+          <style>{`
+            .wave-far {
+              animation: waveScroll 16s linear infinite;
+            }
+            .wave-mid {
+              animation: waveScroll 11s linear infinite reverse;
+            }
+            .wave-near {
+              animation: waveScroll 7s linear infinite;
+            }
+            .sheen {
+              animation: sheenSweep 6s ease-in-out infinite;
+            }
+            @keyframes waveScroll {
+              from { transform: translateX(0); }
+              to { transform: translateX(-50%); }
+            }
+            @keyframes sheenSweep {
+              0% { transform: translateX(0) skewX(-12deg); }
+              50% { transform: translateX(340%) skewX(-12deg); }
+              100% { transform: translateX(0) skewX(-12deg); }
+            }
+          `}</style>
         </div>
       )}
-      <p
-        className={`text-xs font-semibold uppercase tracking-[0.2em] ${
-          incoming ? "text-rotary-goldlight" : "text-rotary-azure"
-        }`}
-      >
-        {incoming ? "Incoming Board" : "Outgoing Board"}
-      </p>
-      <p className={`mt-1 font-serif text-2xl font-semibold ${incoming ? "text-white" : "text-rotary-navy"}`}>
-        {group.label}
-      </p>
 
-      <ul className="mt-5 space-y-3.5">
+      <div className="relative">
-        {group.officers.map((o) => (
+        <p
-          <li
+          className={`text-xs font-semibold uppercase tracking-[0.2em] ${
-            key={o.role}
+            incoming ? "text-rotary-skylight" : "text-rotary-azure"
-            className={`flex items-center justify-between gap-4 border-b pb-3.5 last:border-b-0 last:pb-0 ${
+          }`}
-              incoming ? "border-white/10" : "border-rotary-navy/[0.06]"
+        >
-            }`}
+          {incoming ? "Incoming Board" : "Outgoing Board"}
-          >
+        </p>
-            <span className={`text-sm ${incoming ? "text-white/60" : "text-rotary-ink/55"}`}>
+        <p className={`mt-1 font-serif text-2xl font-semibold ${incoming ? "text-white" : "text-rotary-navy"}`}>
-              {o.role}
+          {group.label}
-            </span>
+        </p>
-            <span className={`text-right text-sm font-medium ${incoming ? "text-white" : "text-rotary-navy"}`}>
+
-              {o.name}
+        <ul className="mt-5 space-y-3.5">
-            </span>
+          {group.officers.map((o) => (
-          </li>
+            <li
-        ))}
+              key={o.role}
-      </ul>
+              className={`flex items-center justify-between gap-4 border-b pb-3.5 last:border-b-0 last:pb-0 ${
+                incoming ? "border-white/10" : "border-rotary-navy/[0.06]"
+              }`}
+            >
+              <span className={`text-sm ${incoming ? "text-white/60" : "text-rotary-ink/55"}`}>
+                {o.role}
+              </span>
+              <span className={`text-right text-sm font-medium ${incoming ? "text-white" : "text-rotary-navy"}`}>
+                {o.name}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }

src/components/Hero.tsx

@@ -16,53 +16,56 @@ export default function Hero() {
       />
 
       <div className="relative mx-auto max-w-7xl">
-        {/* Brand row — replaces the old header's logo now that it's gone */}
+        {/* Row 1: thumbnails on the left, brand name + logo on the right */}
-        <div className="mb-12 flex flex-wrap items-center gap-4 sm:mb-16">
+        <div className="mb-10 flex items-center justify-between gap-4 sm:mb-12">
-          <span className="flex flex-col leading-tight">
+          {/* Advisor + President thumbnails */}
-            <span className="font-serif text-base font-semibold tracking-tight text-white sm:text-lg">
+          <div className="flex items-center gap-4">
-              Rotary Club of Vellore
+            <div className="relative h-20 w-20 overflow-hidden rounded-2xl ring-2 ring-white/15 sm:h-34 sm:w-34">
+              <Image
+                src="/images/club-advisor.jpg"
+                alt="Rtn. Dr. T. Jacob John, Club Advisor"
+                fill
+                sizes="96px"
+                className="object-cover"
+              />
+            </div>
+            <div className="relative h-20 w-20 overflow-hidden rounded-2xl ring-2 ring-rotary-gold/60 sm:h-34 sm:w-34">
+              <Image
+                src="/images/TSRavikumar.png"
+                alt="Rtn. Er. G. Muralidharan, President 2026-27"
+                fill
+                sizes="96px"
+                className="object-cover"
+              />
+            </div>
+          </div>
+
+          {/* Brand name + logo */}
+          <div className="flex items-center gap-5">
+            <span className="hidden flex-col leading-tight text-right sm:flex">
+              <span className="font-serif text-lg font-semibold tracking-tight text-white sm:text-xl">
+                Rotary Club of Vellore
+              </span>
+              <span className="text-xs uppercase tracking-[0.18em] text-rotary-goldlight/90">
+                District 3231 · Est. 1948
+              </span>
             </span>
-            <span className="text-[11px] uppercase tracking-[0.18em] text-rotary-goldlight/90">
+            <div className="rounded-xl bg-white px-4 py-2.5 shadow-lg shadow-black/20">
-              District 3231 · Est. 1948
+              <Image
-            </span>
+                src="/images/rotary-logo.png"
-          </span>
+                alt="Rotary International — Create Lasting Impact"
-          <span className="hidden h-8 w-px bg-white/15 sm:block" />
+                width={220}
-          <div className="rounded-xl bg-white px-3 py-1.5 shadow-lg shadow-black/20">
+                height={64}
-            <Image
+                className="h-12 w-auto object-contain sm:h-14"
-              src="/images/rotary-logo.png"
+              />
-              alt="Rotary International — Create Lasting Impact"
+            </div>
-              width={220}
-              height={64}
-              className="h-9 w-auto object-contain sm:h-11"
-            />
           </div>
         </div>
 
+        {/* Row 2: content on the left, president portrait centered on the right */}
         <div className="grid items-center gap-12 lg:grid-cols-[1.15fr_0.85fr]">
           {/* Copy */}
           <div className="animate-fade-up">
-            {/* Advisor + President thumbnails */}
-            <div className="mb-6 flex items-center gap-4">
-              <div className="relative h-20 w-20 overflow-hidden rounded-2xl ring-2 ring-white/15 sm:h-34 sm:w-34">
-                <Image
-                  src="/images/club-advisor.jpg"
-                  alt="Rtn. Dr. T. Jacob John, Club Advisor"
-                  fill
-                  sizes="96px"
-                  className="object-cover"
-                />
-              </div>
-              <div className="relative h-20 w-20 overflow-hidden rounded-2xl ring-2 ring-rotary-gold/60 sm:h-34 sm:w-34">
-                <Image
-                  src="/images/president1.jpg"
-                  alt="Rtn. Er. G. Muralidharan, President 2026-27"
-                  fill
-                  sizes="96px"
-                  className="object-cover"
-                />
-              </div>
-            </div>
-
             <p className="text-xs font-semibold uppercase tracking-[0.28em] text-rotary-goldlight">
               Rotary Club of Vellore · Club No. 15900 · Charter 05.03.1948
             </p>
@@ -114,7 +117,7 @@ export default function Hero() {
             </a>
           </div>
 
-          {/* President portrait */}
+          {/* President portrait — vertically centered against the copy column */}
           <div className="animate-fade-up [animation-delay:150ms] justify-self-center lg:justify-self-end">
             <div className="relative">
               <div className="absolute -inset-3 rounded-[2rem] border border-rotary-gold/30" />