From 828b5a783ccf020c5aa09219c29b8fdb2fccae30 Mon Sep 17 00:00:00 2001
From: nurhasinahammad <nur.hasin.ahammad@gmail.com>
Date: Wed, 13 Aug 2025 17:55:08 +0600
Subject: [PATCH] Add hover effect to My Gears page cards

---
 pages/gears.js | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/pages/gears.js b/pages/gears.js
index 11a40b79..e220e7c6 100644
--- a/pages/gears.js
+++ b/pages/gears.js
@@ -11,21 +11,44 @@ export default function Gears() {
         <title>Piyush Garg - Gears</title>
       </Head>
       <Container className="mt-5">
-        <SectionSubtitle subtitle="Gears" />
+        <div style={{ marginBottom: "20px" }}>
+          <SectionSubtitle subtitle="Gears" />
+        </div>
         <Row>
           {gears.map((item) => (
             <Col
-              style={{ margin: "10px 0px" }}
               key={item.id}
               lg="4"
               md="4"
               sm="6"
-            >
-              <PortfolioItem item={item} />
+              style={{ padding: "10px" }}>
+              <button
+                type="button"
+                aria-label={`View details for ${item.title}`}
+                className="gear-card shadow-md h-full flex flex-col"
+                style={{
+                  position: "relative",
+                  background: "transparent",
+                  borderRadius: "8px",
+                }}
+              >
+                <PortfolioItem item={item} className="flex-1" />
+              </button>
             </Col>
           ))}
         </Row>
       </Container>
+
+      <style>{`
+        .gear-card {
+          transition: transform 0.3s ease;
+              text-align: left;
+        }
+        .gear-card:hover {
+          transform: scale(1.03);
+          z-index: 2;
+        }
+      `}</style>
     </div>
   );
-}
+}
\ No newline at end of file