alpha wip

apps/website/components/alpha/AlphaNav.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const navLinks = [
+  { href: '/', label: 'Dashboard' },
+  { href: '/profile', label: 'Profile' },
+  { href: '/leagues', label: 'Leagues' },
+  { href: '/races', label: 'Races' },
+] as const;
+
+export function AlphaNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="sticky top-0 z-40 bg-deep-graphite/95 backdrop-blur-md border-b border-white/5">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="flex items-center justify-between h-14">
+          <div className="flex items-baseline space-x-3">
+            <Link href="/" className="text-xl font-semibold text-white hover:text-primary-blue transition-colors">
+              GridPilot
+            </Link>
+            <span className="text-xs text-gray-500 font-light">ALPHA</span>
+          </div>
+
+          <div className="hidden md:flex items-center space-x-1">
+            {navLinks.map((link) => {
+              const isActive = pathname === link.href;
+              return (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={`
+                    relative px-4 py-2 text-sm font-medium transition-all duration-200
+                    ${isActive 
+                      ? 'text-primary-blue' 
+                      : 'text-gray-400 hover:text-white'
+                    }
+                  `}
+                >
+                  {link.label}
+                  {isActive && (
+                    <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue rounded-full" />
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+
+          <div className="md:hidden w-8" />
+        </div>
+
+      </div>
+    </nav>
+  );
+}