style: update Logo and Kit title styling in App Shell

components/layout/AppHeader.tsx

@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/Button';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { cn } from '@/lib/utils/cn';
 import { useSidebar } from './SidebarProvider';
+import Logo from '@/components/Logo';
 
 export function AppHeader() {
   const pathname = usePathname();
@@ -28,9 +29,12 @@ export function AppHeader() {
           {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
         </Button>
         
-        <nav className="hidden sm:flex items-center text-sm font-medium text-muted-foreground">
-          <Link href="/" className="hover:text-foreground transition-colors flex items-center gap-2">
-            <span>Kit</span>
+        <nav className="flex items-center text-sm font-medium">
+          <Link href="/" className="flex items-center gap-2 group">
+            <Logo size={20} />
+            <span className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity">
+              Kit
+            </span>
           </Link>
           {pathSegments.map((segment, index) => {
             const href = `/${pathSegments.slice(0, index + 1).join('/')}`;
@@ -43,7 +47,7 @@ export function AppHeader() {
                   href={href}
                   className={cn(
                     "capitalize transition-colors",
-                    isLast ? "text-foreground font-semibold" : "hover:text-foreground"
+                    isLast ? "text-foreground font-semibold" : "text-muted-foreground hover:text-foreground font-medium"
                   )}
                 >
                   {segment.replace(/-/g, ' ')}