From 25241e53518020150aeea8ce87045acd36596242 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Sun, 22 Mar 2026 23:03:12 +0000
Subject: [PATCH] feat: spring bounce hover animation on dashboard cards

card-interactive utility now bounces on hover (translateY(-4px) with
cubic-bezier(0.34, 1.56, 0.64, 1) spring easing). Applies to stat
cards, session items, and onboarding checklist. Knowledge Base and
Team Summary inner items also bounce individually.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/dashboard/KnowledgeBaseCards.tsx | 5 ++++-
 frontend/src/components/dashboard/TeamSummary.tsx        | 5 ++++-
 frontend/src/index.css                                   | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
index 3b128644..b603f77f 100644
--- a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
+++ b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
@@ -38,7 +38,10 @@ export function KnowledgeBaseCards() {
           <button
             key={item.label}
             onClick={() => navigate(item.href)}
-            className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
+            className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
+            style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
+            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
+            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
           >
             <item.icon size={20} style={{ color: item.color }} />
             <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
diff --git a/frontend/src/components/dashboard/TeamSummary.tsx b/frontend/src/components/dashboard/TeamSummary.tsx
index bc3389fc..a7a246a3 100644
--- a/frontend/src/components/dashboard/TeamSummary.tsx
+++ b/frontend/src/components/dashboard/TeamSummary.tsx
@@ -43,7 +43,10 @@ export function TeamSummary() {
           <button
             key={item.label}
             onClick={() => navigate(item.href)}
-            className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
+            className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
+            style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
+            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
+            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
           >
             <item.icon size={20} style={{ color: item.color }} />
             <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ef9ca6d2..e1327ed0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -166,9 +166,13 @@
   background: var(--color-bg-card);
   border: 1px solid var(--color-border-default);
   border-radius: 8px;
-  transition: border-color 200ms ease;
+  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
+              border-color 200ms ease,
+              box-shadow 200ms ease;
   &:hover {
+    transform: translateY(-4px);
     border-color: var(--color-border-hover);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
   }
 }