clean up ai code. looks pretty good

apps/next/src/components/layout/header/index.tsx

@@ -3,54 +3,65 @@
 import type { ComponentProps } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { Kanit } from 'next/font/google';
+import { Coffee, Server, Wrench } from 'lucide-react';
+
+const kanitSans = Kanit({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+});
 
 import { Controls } from './controls';
 
 export default function Header(headerProps: ComponentProps<'header'>) {
   return (
     <header
-      className="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur"
+      className="border-border/40 bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur"
       {...headerProps}
     >
       <div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
         {/* Logo */}
         <Link
           href="/"
-          className="flex items-center gap-2 transition-opacity hover:opacity-80"
+          className="flex items-center gap-2 transition-opacity hover:opacity-80 to-accent-foreground bg-linear-to-r from-[#281A65] via-[#363354] bg-clip-text text-transparent dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]"
         >
           <Image
-            src="/favicon.ico"
+            src="/misc/convex/convex-symbol-white.svg"
             alt="Convex Monorepo"
-            width={32}
-            height={32}
-            className="h-8 w-8"
+            width={50}
+            height={50}
+            className='invert dark:invert-0'
           />
-          <span className="hidden text-lg font-bold sm:inline-block">
-            Convex Monorepo
+          <span className={`hidden lg:text-5xl lg:inline mb-3 font-extrabold ${kanitSans.className}`}>
+            convex monorepo
           </span>
         </Link>
 
         {/* Navigation */}
-        <nav className="hidden items-center gap-6 text-sm font-medium md:flex">
+        <nav className="hidden items-center gap-6 text-base font-medium md:flex">
           <Link
             href="/#features"
-            className="text-foreground/60 hover:text-foreground transition-colors"
+            className="text-foreground/60 hover:text-foreground transition-colors flex gap-2 items-center"
           >
+            <Wrench width={18} height={18} />
             Features
           </Link>
           <Link
             href="/#tech-stack"
-            className="text-foreground/60 hover:text-foreground transition-colors"
+            className="text-foreground/60 hover:text-foreground transition-colors flex gap-2 items-center"
           >
-            Tech Stack
+            <Server width={18} height={18} />
+            Stack
           </Link>
           <Link
             href="https://git.gbrown.org/gib/convex-monorepo"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-foreground/60 hover:text-foreground transition-colors"
+            className="text-foreground/60 hover:text-foreground transition-colors flex gap-2 items-center"
           >
-            GitHub
+
+            <Coffee width={20} height={20} />
+            Repository
           </Link>
         </nav>