website refactor

apps/website/ui/NavLink.tsx

@@ -27,7 +27,7 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
       justifyContent={collapsed ? 'center' : 'space-between'}
       gap={collapsed ? 0 : 3} 
       paddingX={collapsed ? 2 : 4} 
-      paddingY={3} 
+      paddingY={isTop ? 1.5 : 3} 
       className={`
         relative transition-all duration-300 ease-out rounded-xl border w-full
         ${isActive
@@ -39,18 +39,18 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
       `}
       title={collapsed ? label : undefined}
     >
-      <Box display="flex" alignItems="center" gap={3} justifyContent={collapsed ? 'center' : 'start'} width={collapsed ? 'full' : 'auto'}>
+      <Box display="flex" alignItems="center" gap={isTop ? 2 : 3} justifyContent={collapsed ? 'center' : 'start'} width={collapsed ? 'full' : 'auto'}>
         {icon && (
           <Icon 
             icon={icon} 
-            size={5} // 20px
+            size={isTop ? 4 : 5} // 16px for top, 20px for sidebar
             className={`transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
           />
         )}
         
         {!collapsed && (
           <Text 
-            size="sm" 
+            size={isTop ? "xs" : "sm"} 
             weight="bold"
             variant="inherit"
             className={`tracking-wide transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
@@ -60,8 +60,8 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
         )}
       </Box>
 
-      {/* Chevron on Hover/Active - Only when expanded */}
-      {!collapsed && (
+      {/* Chevron on Hover/Active - Only when expanded and not top nav */}
+      {!collapsed && !isTop && (
         <Icon 
           icon={ChevronRight} 
           size={4}