Merge pull request #22 from anishkn04/feat/hover

feat: Better hover effect for cards

Author: mukezhz

src/content/profiles/2022/anish-kumar-neupane.md

@@ -0,0 +1,24 @@
+---
+name: Anish Kumar Neupane
+program: BE Software
+batch: '2022'
+image:
+  url: https://avatars.githubusercontent.com/u/113242950?v=4
+  alt: Anish Kumar Neupane
+tags:
+  - Open Source
+  - Backend
+history: 
+  - year: '2024'
+    position: 'Teacher'
+    company: 'Radiant Public Boarding School'
+    description: 'Teaching and learning collaboration, technology, and a lot more!'
+
+social:
+  linkedin: 'https://www.linkedin.com/in/anishkn04'
+  github: 'https://github.com/anishkn04'
+  twitter: 'https://twitter.com/anishkn04'
+slogan: Manage everything except grades!
+---
+
+Suppose something is written in here!

src/content/profiles/2022/rishav-chapagain.md

@@ -13,7 +13,7 @@ history:
   - year: '2022'
     position: 'Student'
     company: 'NCIT'
-    description: 'Learining Everything tech has to offer'
+    description: 'Learning Everything tech has to offer'
 
 social:
   linkedin: 'https://www.linkedin.com/in/rishav-chapagain'

src/layout/AlumniCardLayout.astro

@@ -4,7 +4,10 @@ import { AlumniProfileInfo } from '../utils/types';
 const { name, program, batch, image, slogan, tags, history, slug } = Astro.props as AlumniProfileInfo;
 ---
 
-<div class="bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
+<a 
+  class="bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-2xl border border-transparent hover:border-blue-600 transition-all  duration-300 group"
+  href={`/profiles/${slug}`}
+  >
   {image?.url ? (
     <img
       src={image.url}
@@ -41,12 +44,11 @@ const { name, program, batch, image, slogan, tags, history, slug } = Astro.props
       </ul>
     </div>
     <div class="mt-6 text-center">
-      <a
-        href={`/profiles/${slug}`}
-        class="text-blue-500 hover:underline"
+      <div
+        class="text-blue-500 group-hover:text-blue-600 transition-all duration-300"
       >
-        See More
-      </a>
+        Click to See More
+      </div>
     </div>
   </div>
-</div>
+</a>