feat: enhance card components across the application with consistent hover effects and improved layout; update spacing in categories page for better visual hierarchy

app/transactions/page.tsx

@@ -238,7 +238,7 @@ export default function TransactionsPage() {
       />
 
       {(!isLoadingChart || !isLoadingTransactions) && (
-        <Card className="mb-6">
+        <Card className="mb-6 card-hover">
           <Collapsible open={isStatsExpanded} onOpenChange={setIsStatsExpanded}>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
               <CardTitle className="text-base font-semibold">
@@ -272,7 +272,7 @@ export default function TransactionsPage() {
                 {/* Summary cards */}
                 {!isLoadingTransactions && (
                   <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 mb-6">
-                    <Card>
+                    <Card className="card-hover">
                       <CardContent className="pt-6">
                         <div className="flex items-center justify-between">
                           <div>
@@ -287,7 +287,7 @@ export default function TransactionsPage() {
                         </div>
                       </CardContent>
                     </Card>
-                    <Card>
+                    <Card className="card-hover">
                       <CardContent className="pt-6">
                         <div className="flex items-center justify-between">
                           <div>