update

frontend/src/components/layout/AppShell.jsx

@@ -15,32 +15,43 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
     return (
         <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-violet-50">
             <div className="flex min-h-screen">
-                <aside className="hidden md:flex w-72 border-r border-slate-200 bg-white/85 backdrop-blur-sm p-4 flex-col gap-6 sticky top-0 h-screen">
-                    <div className="flex items-center gap-3 px-2 py-1">
-                        <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
+                <aside className="hidden md:flex w-72 border-r border-slate-200 bg-white p-5 flex-col gap-8 sticky top-0 h-screen">
+                    <div className="flex items-center gap-3 px-2 py-1 border-b border-slate-100 pb-5">
+                        <div className="h-11 w-11 rounded-2xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
                             <Zap className="h-5 w-5 text-white" />
                         </div>
                         <div>
                             <h1 className="font-bold text-slate-800 text-lg">SequenceAI</h1>
-                            <p className="text-xs text-slate-500">CRM-ready workspace</p>
+                            <p className="text-xs text-slate-500">CRM Workspace</p>
                         </div>
                     </div>
-                    <nav className="space-y-1">
+                    <nav className="space-y-2">
                         {NAV_ITEMS.map((item) => {
                             const Icon = item.icon;
                             const active = location.pathname === item.href;
                             return (
-                                <Button
-                                    asChild
+                                <Link
+                                    to={item.href}
                                     key={item.href}
-                                    variant={active ? "default" : "ghost"}
-                                    className={`w-full justify-start ${active ? 'bg-violet-600 hover:bg-violet-700' : 'text-slate-700'}`}
+                                    className={`w-full flex items-center gap-3 rounded-2xl px-3 py-3 transition-all ${
+                                        active
+                                            ? 'bg-violet-100 text-violet-700'
+                                            : 'text-slate-700 hover:bg-slate-50'
+                                    }`}
                                 >
-                                    <Link to={item.href}>
-                                        <Icon className="h-4 w-4 mr-2" />
+                                    <div
+                                        className={`h-10 w-10 rounded-xl border flex items-center justify-center ${
+                                            active
+                                                ? 'border-violet-200 bg-white text-violet-600'
+                                                : 'border-slate-200 bg-white text-slate-500'
+                                        }`}
+                                    >
+                                        <Icon className="h-5 w-5" />
+                                    </div>
+                                    <span className={`text-base font-medium ${active ? 'text-violet-700' : 'text-slate-700'}`}>
                                         {item.label}
-                                    </Link>
-                                </Button>
+                                    </span>
+                                </Link>
                             );
                         })}
                     </nav>