website refactor

apps/website/ui/NavLink.tsx

@@ -12,25 +12,56 @@ interface NavLinkProps {
   variant?: 'sidebar' | 'top';
 }
 
-/**
- * NavLink provides a consistent link component for navigation.
- * Supports both sidebar and top navigation variants.
- */
 export function NavLink({ href, label, icon, isActive, variant = 'sidebar' }: NavLinkProps) {
+  const isTop = variant === 'top';
+
+  // Dieter Rams style: Unobtrusive, Honest, Thorough.
+  // No glows. No shadows. Just clear contrast and alignment.
+
   const content = (
-    <Box display="flex" alignItems="center" gap={variant === 'top' ? 2 : 3} paddingX={3} paddingY={2} rounded={variant === 'sidebar' ? 'md' : undefined} style={{ transition: 'all 0.2s' }}>
-      {icon && <Icon icon={icon} size={variant === 'top' ? 4 : 5} intent={isActive ? 'primary' : 'low'} />}
-      <Text size="sm" weight={isActive ? 'bold' : 'medium'} variant={isActive ? 'primary' : 'med'}>
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      gap={3} 
+      paddingX={isTop ? 4 : 4} 
+      paddingY={isTop ? 2 : 3} 
+      className={`
+        relative group transition-all duration-200 ease-out
+        ${isActive
+          ? 'text-text-high bg-white/5'
+          : 'text-text-med hover:text-text-high hover:bg-white/5'
+        }
+        ${!isTop && 'rounded-md mx-2'} 
+      `}
+    >
+      {icon && (
+        <Icon 
+          icon={icon} 
+          size={4} 
+          className={`transition-colors duration-200 ${isActive ? 'text-primary-accent' : 'text-text-low group-hover:text-text-med'}`}
+        />
+      )}
+      
+      <Text 
+        size="sm" 
+        weight={isActive ? 'medium' : 'normal'}
+        variant="inherit"
+        className="tracking-wide"
+      >
         {label}
       </Text>
-      {variant === 'sidebar' && isActive && (
-        <Box marginLeft="auto" width="4px" height="1rem" bg="var(--ui-color-intent-primary)" rounded="full" />
+
+      {/* Minimal Active Indicator */}
+      {!isTop && isActive && (
+        <Box
+          className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-primary-accent rounded-r-full"
+        />
       )}
     </Box>
   );
 
   return (
-    <Link href={href} variant="inherit" underline="none" block={variant === 'sidebar'}>
+    <Link href={href} variant="inherit" underline="none" block={!isTop}>
       {content}
     </Link>
   );