Enhance visual design with modern UI improvements

- Add glass morphism effects with backdrop blur to sidebar, appbar, and cards
- Implement animated gradients on logos, avatars, and interactive elements
- Add gradient backgrounds with decorative blur elements to layout
- Enhance hover states with scale transforms and shadow transitions
- Add gradient text effects to titles and headings
- Implement active navigation indicator with gradient accent bar
- Add pulse animation to notification badge
- Improve visual depth with semi-transparent borders and layering
- Add new CSS animations: gradient-shift, float, and pulse-glow

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: Boshen

apps/dashboard/src/components/Layout.tsx

@@ -4,11 +4,15 @@ import { Sidebar } from "./layout/Sidebar";
 
 function Layout() {
   return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-950">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 relative overflow-hidden">
+      {/* Background decorative elements */}
+      <div className="absolute top-0 right-0 w-96 h-96 bg-blue-500/5 dark:bg-blue-500/10 rounded-full blur-3xl"></div>
+      <div className="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/5 dark:bg-purple-500/10 rounded-full blur-3xl"></div>
+
       <Sidebar />
 
       {/* Main Content Area */}
-      <div className="lg:pl-64 transition-all duration-300">
+      <div className="lg:pl-64 transition-all duration-300 relative z-10">
         <div className="flex flex-col h-screen">
           <AppBar />
 

apps/dashboard/src/components/layout/AppBar.tsx

@@ -8,12 +8,12 @@ interface AppBarProps {
 
 export function AppBar({ title, subtitle }: AppBarProps) {
   return (
-    <header className="h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700 px-6">
+    <header className="h-16 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-slate-200/50 dark:border-slate-700/50 px-6 shadow-sm">
       <div className="h-full flex items-center justify-between">
         {/* Left side - Page title */}
         <div>
-          {title && <h2 className="text-xl font-semibold text-slate-900 dark:text-white">{title}</h2>}
-          {subtitle && <p className="text-sm text-slate-500 dark:text-slate-300">{subtitle}</p>}
+          {title && <h2 className="text-xl font-semibold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">{title}</h2>}
+          {subtitle && <p className="text-sm text-slate-500 dark:text-slate-400">{subtitle}</p>}
         </div>
 
         {/* Right side - Actions */}
@@ -28,7 +28,7 @@ export function AppBar({ title, subtitle }: AppBarProps) {
               <input
                 type="text"
                 placeholder="Search..."
-                className="pl-10 pr-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="pl-10 pr-4 py-2 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200/50 dark:border-slate-700/50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all hover:bg-slate-100 dark:hover:bg-slate-800"
               />
             </div>
           </div>
@@ -37,22 +37,22 @@ export function AppBar({ title, subtitle }: AppBarProps) {
           <Button
             variant="ghost"
             size="sm"
-            className="relative"
+            className="relative hover:scale-110 transition-transform"
             icon={
               <>
                 <Bell size={18} />
-                <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
+                <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full animate-pulse shadow-lg shadow-red-500/50" />
               </>
             }
           />
 
           {/* User Menu */}
-          <div className="flex items-center gap-3 pl-3 border-l border-slate-200 dark:border-slate-700">
+          <div className="flex items-center gap-3 pl-3 border-l border-slate-200/50 dark:border-slate-700/50">
             <div className="hidden sm:block text-right">
               <p className="text-sm font-medium text-slate-900 dark:text-white">Admin User</p>
-              <p className="text-xs text-slate-500 dark:text-slate-300">[email protected]</p>
+              <p className="text-xs text-slate-500 dark:text-slate-400">[email protected]</p>
             </div>
-            <button className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
+            <button className="w-10 h-10 bg-gradient-to-br from-blue-500 via-purple-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-all hover:scale-110 animate-gradient">
               <User size={18} className="text-white" />
             </button>
           </div>

apps/dashboard/src/components/layout/Sidebar.tsx

@@ -71,28 +71,28 @@ export function Sidebar() {
       {/* Sidebar */}
       <aside
         className={`
-          fixed top-0 left-0 h-full bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-700 
+          fixed top-0 left-0 h-full bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-r border-slate-200/50 dark:border-slate-700/50 shadow-xl
           transition-all duration-300 z-40
           ${collapsed ? "w-20" : "w-64"}
           ${mobileOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
         `}
       >
         {/* Logo Header */}
-        <div className="h-16 flex items-center justify-between px-4 border-b border-slate-200 dark:border-slate-700">
+        <div className="h-16 flex items-center justify-between px-4 border-b border-slate-200/50 dark:border-slate-700/50 bg-gradient-to-r from-slate-50/50 to-transparent dark:from-slate-800/50">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 via-purple-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg animate-gradient">
               <BarChart3 size={24} className="text-white" />
             </div>
             {!collapsed && (
               <div>
-                <h1 className="font-bold text-slate-900 dark:text-white">Vibe</h1>
-                <p className="text-xs text-slate-500 dark:text-slate-300">Dashboard</p>
+                <h1 className="font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">Vibe</h1>
+                <p className="text-xs text-slate-500 dark:text-slate-400">Dashboard</p>
               </div>
             )}
           </div>
           <button
             onClick={() => setCollapsed(!collapsed)}
-            className="hidden lg:flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+            className="hidden lg:flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-all hover:scale-110"
           >
             <ChevronLeft
               size={18}
@@ -110,16 +110,19 @@ export function Sidebar() {
                   to={item.path}
                   onClick={() => setMobileOpen(false)}
                   className={`
-                    flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200
+                    flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 relative overflow-hidden group
                     ${
                       isActive(item.path)
-                        ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium"
-                        : "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
+                        ? "bg-gradient-to-r from-blue-500/10 to-purple-500/10 dark:from-blue-500/20 dark:to-purple-500/20 text-blue-600 dark:text-blue-400 font-medium shadow-sm"
+                        : "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:scale-105"
                     }
                     ${collapsed ? "justify-center" : ""}
                   `}
                   title={collapsed ? item.label : undefined}
                 >
+                  {isActive(item.path) && (
+                    <span className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 to-purple-600 rounded-r-full"></span>
+                  )}
                   <span className="flex-shrink-0">{item.icon}</span>
                   {!collapsed && (
                     <>

apps/dashboard/src/index.css

@@ -17,13 +17,23 @@
   /* Chart tooltip variables */
   --tooltip-bg: white;
   --tooltip-border: #e2e8f0;
+
+  /* Glass morphism variables */
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.18);
+  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 }
 
 /* Dark mode variables */
 html.dark {
   --tooltip-bg: #1e293b;
   --tooltip-border: #475569;
   --tooltip-text: #f1f5f9;
+
+  /* Dark mode glass morphism */
+  --glass-bg: rgba(30, 41, 59, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 }
 
 /* Light mode tooltip text */
@@ -135,3 +145,46 @@ html.dark ::-webkit-scrollbar-thumb:hover {
     transform: translateY(0);
   }
 }
+
+/* Gradient animations */
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient-shift 3s ease infinite;
+}
+
+/* Floating animation */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* Pulse glow effect */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
+  }
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}

apps/dashboard/src/pages/HomePage.tsx

@@ -64,10 +64,11 @@ function HomePage() {
 
   return (
     <PageContainer>
-      <div className="text-center mb-12">
+      <div className="text-center mb-16">
         <div className="flex justify-center mb-6">
-          <div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl">
-            <BarChart3 size={40} className="text-white" />
+          <div className="w-24 h-24 bg-gradient-to-br from-blue-500 via-purple-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-2xl animate-gradient relative overflow-hidden group">
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-400/20 to-purple-400/20 blur-xl group-hover:blur-2xl transition-all"></div>
+            <BarChart3 size={48} className="text-white relative z-10" />
           </div>
         </div>
         <PageHeader
@@ -81,10 +82,11 @@ function HomePage() {
           const colors = getColorClasses(feature.color);
           return (
             <Link key={feature.link} to={feature.link}>
-              <Card className={`h-full transition-all hover:shadow-lg ${colors.hover} cursor-pointer group`}>
-                <div className="p-6">
+              <Card className={`h-full transition-all hover:shadow-2xl hover:scale-[1.02] ${colors.hover} cursor-pointer group relative overflow-hidden`}>
+                <div className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-slate-100/50 dark:to-slate-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <div className="p-6 relative z-10">
                   <div className="flex items-start gap-4">
-                    <div className={`p-3 rounded-lg ${colors.bg}`}>
+                    <div className={`p-3 rounded-xl ${colors.bg} shadow-sm group-hover:shadow-md transition-all group-hover:scale-110`}>
                       <div className={colors.icon}>{feature.icon}</div>
                     </div>
                     <div className="flex-1">

packages/ui/src/Card.tsx

@@ -12,13 +12,13 @@ interface CardProps {
 export function Card({ children, className = "", title, subtitle, headerAction, noPadding = false }: CardProps) {
   return (
     <div
-      className={`bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 ${className}`}
+      className={`bg-white dark:bg-slate-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm ${className}`}
     >
       {(title || subtitle || headerAction) && (
-        <div className="px-6 py-4 border-b border-slate-200 dark:border-slate-700">
+        <div className="px-6 py-4 border-b border-slate-200/50 dark:border-slate-700/50 bg-gradient-to-r from-slate-50/50 to-transparent dark:from-slate-800/50">
           <div className="flex items-center justify-between">
             <div>
-              {title && <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h3>}
+              {title && <h3 className="text-lg font-semibold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">{title}</h3>}
               {subtitle && <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{subtitle}</p>}
             </div>
             {headerAction && <div className="ml-4">{headerAction}</div>}