From 0d20d602cb5ce260f4c042cfb3dde5a015b74435 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 1 Oct 2025 21:43:18 +0200
Subject: [PATCH] feat: enhance Card and TaskCard components with gradient
 backgrounds and hover effects - Updated `Card` component to include gradient
 backgrounds for different variants, improving visual depth. - Modified
 `TaskCard` hover effects to include scaling and translation for a more
 dynamic user interaction experience.

---
 src/components/ui/Card.tsx     | 6 +++---
 src/components/ui/TaskCard.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index 5f5e634..ae42b8a 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -11,9 +11,9 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 const Card = forwardRef<HTMLDivElement, CardProps>(
   ({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => {
     const backgrounds = {
-      default: 'bg-[var(--card)]',
-      column: 'bg-[var(--card-column)]',
-      muted: 'bg-[var(--muted)]/10'
+      default: 'bg-[var(--card)] bg-gradient-to-b from-[var(--card)] to-[color-mix(in_srgb,var(--card)_80%,var(--background)_20%)]',
+      column: 'bg-[var(--card-column)] bg-gradient-to-b from-[var(--card-column)] to-[color-mix(in_srgb,var(--card-column)_80%,var(--background)_20%)]',
+      muted: 'bg-[var(--muted)]/10 bg-gradient-to-b from-[var(--muted)]/10 to-[color-mix(in_srgb,var(--muted)_4%,var(--background)_6%)]'
     };
 
     const borders = {
diff --git a/src/components/ui/TaskCard.tsx b/src/components/ui/TaskCard.tsx
index e9eb77d..57dd561 100644
--- a/src/components/ui/TaskCard.tsx
+++ b/src/components/ui/TaskCard.tsx
@@ -244,7 +244,7 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
         <Card
           ref={ref}
           className={cn(
-            'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
+            'hover:scale-[1.02] hover:shadow-lg hover:shadow-[var(--primary)]/10 hover:border-[var(--primary)]/20 hover:-translate-y-1 transition-all duration-300 ease-out cursor-pointer group',
             isDragging && 'opacity-50 rotate-3 scale-105',
             (status === 'done' || status === 'archived') && 'opacity-60',
             status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
@@ -335,7 +335,7 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
       <Card
         ref={ref}
         className={cn(
-          'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
+          'hover:scale-[1.02] hover:shadow-lg hover:shadow-[var(--primary)]/10 hover:border-[var(--primary)]/20 hover:-translate-y-1 transition-all duration-300 ease-out cursor-pointer group',
           isDragging && 'opacity-50 rotate-3 scale-105',
           (status === 'done' || status === 'archived') && 'opacity-60',
           status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',