From 18d93e5795abc5c0d842bce08ff0b8dff4130c24 Mon Sep 17 00:00:00 2001
From: Roshan Kumar <theroshansingh89@gmail.com>
Date: Mon, 15 Sep 2025 18:34:20 +0530
Subject: [PATCH 1/3] Fix: allow protocol card images to overflow on hover
 instead of being clipped

---
 components/card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/card.tsx b/components/card.tsx
index d4fdfbf..f8d31eb 100644
--- a/components/card.tsx
+++ b/components/card.tsx
@@ -15,14 +15,14 @@ const Card: React.FC<Props> = ({ index, image, title, description, link }) => {
       key={index}
       className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl"
     >
-      <div className="relative h-fit overflow-hidden rounded-md">
+      <div className="relative h-fit rounded-md flex justify-center items-center">
         <Image
           src={image}
           alt="Protocol Logo"
           loading="lazy"
           width="700"
           height="700"
-          className="h-64 w-full object-contain transition duration-500 group-hover:scale-105"
+          className="h-64 w-full object-contain transition duration-500 group-hover:scale-110"
         />
       </div>
       <div className="relative mt-4 h-fit">

From 670718141240b848d3da746c332e9c8591e9e70e Mon Sep 17 00:00:00 2001
From: Roshan Singh <110438835+Roshan-Singh-07@users.noreply.github.com>
Date: Mon, 13 Oct 2025 09:18:23 +0530
Subject: [PATCH 2/3] Update card.tsx

---
 components/card.tsx | 50 ++++++++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/components/card.tsx b/components/card.tsx
index db47ae3..90b2c42 100644
--- a/components/card.tsx
+++ b/components/card.tsx
@@ -11,49 +11,43 @@ interface Props {
 
 const Card: React.FC<Props> = ({ index, image, title, description, link }) => {
   return (
-    <div
-      key={index}
-      className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl"
-    >
-      <div className="relative h-fit rounded-md flex justify-center items-center">
-        <Image
-          src={image}
-          alt="Protocol Logo"
-          loading="lazy"
-          width="700"
-          height="700"
-          className="h-64 w-full object-contain transition duration-500 group-hover:scale-110"
-        />
     <Link href={link}>
       <div
-        key={index}
-        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl"
+        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl transition hover:shadow-2xl"
       >
-        <div className="relative h-fit overflow-hidden rounded-md">
+        {/* Image container — removed overflow-hidden so zoom can overflow */}
+        <div className="relative h-fit rounded-md flex justify-center items-center">
           <Image
             src={image}
             alt="Protocol Logo"
             loading="lazy"
-            width="700"
-            height="700"
-            className="h-64 w-full object-contain transition duration-500 group-hover:scale-105"
+            width={700}
+            height={700}
+            className="h-64 w-full object-contain transition duration-500 group-hover:scale-110"
           />
         </div>
+
         <div className="relative mt-4 h-fit">
-          <h3 className="text-center  text-2xl font-semibold leading-6 tracking-tight text-gray-800">
+          <h3 className="text-center text-2xl font-semibold leading-6 tracking-tight text-gray-800">
             {title}
           </h3>
           <p className="mb-6 mt-2 text-center text-black">
-            {description.split("\n").map((item, key) => {
-              return (
-                <span key={key}>
-                  {item}
-                  <br />
-                </span>
-              )
-            })}
+            {description.split("\n").map((item, key) => (
+              <span key={key}>
+                {item}
+                <br />
+              </span>
+            ))}
           </p>
         </div>
+
+        <div className="flex items-center justify-center text-center">
+          <span className="relative flex items-center justify-center px-3 py-1 before:absolute before:inset-0 before:rounded-full before:border before:border-transparent before:bg-secondary/30 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
+            <span className="relative text-base font-medium text-black">
+              Learn more
+            </span>
+          </span>
+        </div>
       </div>
     </Link>
   )

From be3cfb493e28f307d84d980284ce09d0b36291d2 Mon Sep 17 00:00:00 2001
From: Roshan Singh <110438835+Roshan-Singh-07@users.noreply.github.com>
Date: Mon, 13 Oct 2025 09:29:37 +0530
Subject: [PATCH 3/3] fix(card): ensure zoomed images render above adjacent
 cards

- Added `hover:z-10 focus-visible:z-10` to card wrapper for proper stacking
- Maintains smooth hover zoom overflow and accessibility
- Fixes image clipping and layering in protocol card grid
---
 components/card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/card.tsx b/components/card.tsx
index 90b2c42..d157be3 100644
--- a/components/card.tsx
+++ b/components/card.tsx
@@ -9,11 +9,11 @@ interface Props {
   link: string
 }
 
-const Card: React.FC<Props> = ({ index, image, title, description, link }) => {
+const Card: React.FC<Props> = ({ image, title, description, link }) => {
   return (
-    <Link href={link}>
+    <Link href={link} aria-label={title}>
       <div
-        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl transition hover:shadow-2xl"
+        className="group relative flex h-auto flex-col justify-evenly rounded-lg border border-zinc-200 p-6 shadow-xl transition hover:shadow-2xl hover:z-10 focus-visible:z-10"
       >
         {/* Image container — removed overflow-hidden so zoom can overflow */}
         <div className="relative h-fit rounded-md flex justify-center items-center">