feat: integrate HeroUI component library

Implemented HeroUI migration plan with the following changes:

Stage 0: Environment Setup
- Installed @heroui/react@2.8.7, @heroui/theme@2.4.26, framer-motion@12.29.2
- Configured Tailwind with HeroUI plugin
- Added HeroUI content paths to Tailwind config

Stage 1: Provider Architecture
- Created Providers.tsx wrapper combining HeroUIProvider and AppProvider
- Updated app/layout.tsx to use new Providers component
- Preserved all AppContext functionality (theme, language, translations)

Stage 2: Component Migrations
- TabNavigation: Migrated to HeroUI Tabs with keyboard navigation support
- TopBar: Migrated buttons to HeroUI Button components
- LanguageSwitch: Migrated to HeroUI Dropdown for better UX
- ThemeSwitch: Migrated to HeroUI Button (isIconOnly variant)
- MintSwapPanel: Migrated to HeroUI Tabs and Button components

Benefits:
- Enhanced accessibility with ARIA attributes and keyboard navigation
- Smooth animations and transitions via Framer Motion
- Consistent component API across the application
- Maintained all existing design tokens and color system
- Preserved dark mode functionality

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

components/NavItem.tsx

@@ -1,53 +1,53 @@
-import Image from "next/image";
-
-interface NavItemProps {
-  icon: string;
-  label: string;
-  isActive: boolean;
-  onClick: () => void;
-}
-
-export default function NavItem({ icon, label, isActive, onClick }: NavItemProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={`
-        rounded-xl
-        pl-4
-        flex
-        items-center
-        gap-2
-        h-[42px]
-        w-full
-        overflow-hidden
-        transition-colors
-        ${isActive
-          ? 'bg-fill-secondary-click'
-          : 'hover:bg-gray-50'
-        }
-      `}
-    >
-      <div className="w-[22px] h-[22px] flex-shrink-0 relative">
-        <Image
-          src={icon}
-          alt={label}
-          width={22}
-          height={22}
-          className="w-full h-full"
-        />
-      </div>
-      <span
-        className={`
-          text-sm
-          leading-[150%]
-          ${isActive
-            ? 'text-text-primary font-bold'
-            : 'text-text-tertiary font-medium'
-          }
-        `}
-      >
-        {label}
-      </span>
-    </button>
-  );
-}
+import Image from "next/image";
+
+interface NavItemProps {
+  icon: string;
+  label: string;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export default function NavItem({ icon, label, isActive, onClick }: NavItemProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        rounded-xl
+        pl-4
+        flex
+        items-center
+        gap-2
+        h-[42px]
+        w-full
+        overflow-hidden
+        transition-colors
+        ${isActive
+          ? 'bg-fill-secondary-click'
+          : 'hover:bg-gray-50'
+        }
+      `}
+    >
+      <div className="w-[22px] h-[22px] flex-shrink-0 relative">
+        <Image
+          src={icon}
+          alt={label}
+          width={22}
+          height={22}
+          className="w-full h-full"
+        />
+      </div>
+      <span
+        className={`
+          text-sm
+          leading-[150%]
+          ${isActive
+            ? 'text-text-primary font-bold'
+            : 'text-text-tertiary font-medium'
+          }
+        `}
+      >
+        {label}
+      </span>
+    </button>
+  );
+}