From f0f9d3ee31a9e795f1db57aa7c266020212c37e4 Mon Sep 17 00:00:00 2001
From: *Aman <*dhanushag111@gmail.com*>
Date: Sat, 13 Dec 2025 17:15:45 +0530
Subject: [PATCH] Fix protocol card image cropping on hover

---
 components/card.tsx | 61 ++++++++++++++++++++++-----------------------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/components/card.tsx b/components/card.tsx
index bdb3299..fab94f1 100644
--- a/components/card.tsx
+++ b/components/card.tsx
@@ -12,37 +12,36 @@ interface Props {
 const Card: React.FC<Props> = ({ index, image, title, description, link }) => {
   return (
     <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"
-      >
-        <div className="relative h-fit overflow-hidden rounded-md">
-          <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"
-          />
-        </div>
-        <div className="relative mt-4 h-fit">
-          <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>
-              )
-            })}
-          </p>
-        </div>
-      </div>
-    </Link>
+  <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 overflow-visible rounded-md">
+      <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"
+      />
+    </div>
+    <div className="relative mt-4 h-fit">
+      <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) => (
+          <span key={key}>
+            {item}
+            <br />
+          </span>
+        ))}
+      </p>
+    </div>
+  </div>
+</Link>
+
   )
 }