2026-03-02T08-53-33_auto_memory/memories.db-wal

chatgpt-to-claude/src/components/Navigation.tsx

@@ -37,41 +37,46 @@ export default function Navigation() {
 
   return (
     <>
+      {/* Gradient accent line */}
+      <div className="fixed top-0 left-0 right-0 z-[51] h-[2px] bg-gradient-to-r from-primary via-accent to-primary" />
+
       <header
-        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        className={`fixed top-[2px] left-0 right-0 z-50 transition-all duration-300 ${
           scrolled
-            ? "bg-surface/90 backdrop-blur-md border-b border-surface-border"
+            ? "bg-surface/80 backdrop-blur-xl border-b border-surface-border/50 shadow-lg shadow-surface/20"
             : "bg-transparent"
         }`}
       >
         <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
           <a
             href="/"
-            className="text-lg font-bold text-text hover:text-primary-light transition-colors"
+            className="text-lg font-bold text-text hover:text-primary-light transition-colors tracking-tight"
           >
-            ChatGPT → Claude
+            <span className="text-text-muted">ChatGPT</span>
+            <span className="text-primary-light mx-1.5">→</span>
+            <span className="text-text">Claude</span>
           </a>
 
-          <nav className="hidden md:flex items-center gap-6">
+          <nav className="hidden md:flex items-center gap-1">
             {navLinks.map((link) => (
               <a
                 key={link.href}
                 href={link.href}
-                className="text-sm text-text-muted hover:text-text transition-colors"
+                className="text-sm text-text-muted hover:text-text px-3 py-2 rounded-lg hover:bg-surface-muted/50 transition-all"
               >
                 {link.label}
               </a>
             ))}
             <a
               href="/wizard/"
-              className="text-sm px-4 py-2 rounded-lg bg-primary hover:bg-primary-dark text-white transition-colors"
+              className="ml-3 text-sm px-5 py-2 rounded-lg bg-primary hover:bg-primary-dark text-white font-medium transition-all shadow-sm shadow-primary/20 hover:shadow-primary/30"
             >
               Start Migration
             </a>
           </nav>
 
           <button
-            className="md:hidden p-2 text-text-muted hover:text-text"
+            className="md:hidden p-2 text-text-muted hover:text-text rounded-lg hover:bg-surface-muted/50 transition-colors"
             onClick={() => setMobileOpen(!mobileOpen)}
             aria-label={mobileOpen ? "Close menu" : "Open menu"}
           >
@@ -94,13 +99,13 @@ export default function Navigation() {
       </header>
 
       {mobileOpen && (
-        <div className="fixed inset-0 z-40 bg-surface/95 backdrop-blur-md md:hidden">
+        <div className="fixed inset-0 z-40 bg-surface/95 backdrop-blur-xl md:hidden">
           <div className="flex flex-col items-center justify-center h-full gap-8">
             {navLinks.map((link) => (
               <a
                 key={link.href}
                 href={link.href}
-                className="text-2xl text-text hover:text-primary-light transition-colors"
+                className="text-2xl font-medium text-text hover:text-primary-light transition-colors"
                 onClick={() => setMobileOpen(false)}
               >
                 {link.label}
@@ -108,7 +113,7 @@ export default function Navigation() {
             ))}
             <a
               href="/wizard/"
-              className="mt-4 text-lg px-6 py-3 rounded-lg bg-primary hover:bg-primary-dark text-white transition-colors"
+              className="mt-4 text-lg px-8 py-3.5 rounded-xl bg-primary hover:bg-primary-dark text-white font-semibold transition-all shadow-lg shadow-primary/25"
               onClick={() => setMobileOpen(false)}
             >
               Start Migration