From 8ab63dd18e2302ca33e081cfd677ac9e827da64e Mon Sep 17 00:00:00 2001
From: Zeeshan Adil <zeeabutt@outlook.com>
Date: Wed, 28 Oct 2026 19:01:37 +0500
Subject: [PATCH] feat(team): bring photos into colour on hover

Team photos and the hero avatars stayed grey. They now turn to colour
on hover, like the hero image, and team cards also colour when their
LinkedIn link has keyboard focus.
---
 app/team/page.tsx                | 11 +++++++++--
 components/home/sections-top.tsx |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/team/page.tsx b/app/team/page.tsx
index 0e1a2eb..3e5bc1e 100644
--- a/app/team/page.tsx
+++ b/app/team/page.tsx
@@ -88,9 +88,16 @@ const pillars = [
 
 function PersonCard({ person, tone = "white", className = "" }: { person: TeamMember; tone?: "white" | "gray"; className?: string }) {
   return (
-    <Card tone={tone} className={`items-center p-6 text-center ${lift} ${className}`}>
+    <Card tone={tone} className={`group items-center p-6 text-center ${lift} ${className}`}>
       <div className="relative h-20 w-20 overflow-hidden rounded-full bg-[#F7F7F7]">
-        <Image src={person.image} alt={person.name} fill sizes="80px" className="object-cover object-top grayscale" />
+        {/* Grey until the card is hovered or its link has focus, like the home hero */}
+        <Image
+          src={person.image}
+          alt={person.name}
+          fill
+          sizes="80px"
+          className="object-cover object-top grayscale transition-[filter] duration-500 group-hover:grayscale-0 group-focus-within:grayscale-0"
+        />
       </div>
       <h3 className="mt-4 text-[15px] font-semibold">{person.name}</h3>
       <p className="mt-1 flex-1 text-[13px] leading-snug text-[#5C5C5C]">{person.role}</p>
diff --git a/components/home/sections-top.tsx b/components/home/sections-top.tsx
index 41cbcbb..40df0a9 100644
--- a/components/home/sections-top.tsx
+++ b/components/home/sections-top.tsx
@@ -72,7 +72,7 @@ export function Hero() {
                     alt=""
                     width={40}
                     height={40}
-                    className={`h-10 w-10 rounded-full border-2 border-[#0A0A0A] object-cover grayscale ${index > 0 ? "-ml-2.5" : ""}`}
+                    className={`h-10 w-10 rounded-full border-2 border-[#0A0A0A] object-cover grayscale transition-[filter] duration-500 hover:grayscale-0 ${index > 0 ? "-ml-2.5" : ""}`}
                   />
                 ))}
               </div>