feat: Add consistent hover effects to all card components (#461)

src/components/Card.jsx

@@ -16,7 +16,7 @@ function ChevronRightIcon(props) {
 export function Card({ as: Component = 'div', className, children }) {
   return (
     <Component
-      className={clsx(className, 'group relative flex flex-col items-start')}
+      className={clsx(className, 'group relative flex flex-col items-start transform transition duration-200 ease-out hover:-translate-y-1 hover:scale-[1.02] hover:shadow-lg')}
     >
       {children}
     </Component>

src/components/CardEffect.jsx

@@ -2,7 +2,7 @@ import Image from 'next/image'
 
 export function CardEffect({heading, content, logo}) {
     return (
-        <a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">
+        <a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer transform transition duration-200 ease-out hover:-translate-y-1 hover:scale-[1.02] hover:shadow-xl">
             {/* <span className="absolute inset-0 border-2 rounded-lg border-dashed border-black dark:border-zinc-300"></span> */}
 
             {/* <div className="relative flex h-full transform items-end border-4 rounded-lg border-black dark:border-zinc-300 bg-transparent dark:bg-transparent transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"> */}

src/components/CardHome.jsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export function CardHome({heading, content}) {
     return (
-        <Link href="#" className="block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+        <Link href="#" className="block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transform transition duration-200 ease-out hover:-translate-y-1 hover:scale-[1.02] hover:shadow-lg">
             <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{heading}</h5>
             <p className="font-normal text-gray-700 dark:text-gray-400">{content}</p>
         </Link>

src/pages/ideas/index.jsx

@@ -24,8 +24,11 @@ function Article({ article }) {
           backdropFilter: 'blur(4px) brightness(100%)',
           display: 'flex',
           flexDirection: 'column',
-          transition: 'background-color 0.3s ease',
-
+          transition: 'transform 200ms ease-out, box-shadow 200ms ease-out',
+          '&:hover': {
+            transform: 'translateY(-4px) scale(1.02)',
+            boxShadow: '0 12px 24px rgba(0,0,0,0.18)',
+          },
         }}
       >
         <CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>

src/pages/projects.jsx

@@ -43,6 +43,11 @@ const Cards = () => {
               backdropFilter: 'blur(4px) brightness(100%)',
               display: 'flex',
               flexDirection: 'column',
+              transition: 'transform 200ms ease-out, box-shadow 200ms ease-out',
+              '&:hover': {
+                transform: 'translateY(-4px) scale(1.02)',
+                boxShadow: '0 12px 24px rgba(0,0,0,0.18)',
+              },
             }}
           >
             <CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>