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/TopBar.tsx

@@ -1,50 +1,59 @@
-import Image from "next/image";
-import Breadcrumb from "./Breadcrumb";
-import LanguageSwitch from "./LanguageSwitch";
-import ThemeSwitch from "./ThemeSwitch";
-
-export default function TopBar() {
-  const breadcrumbItems = [
-    { label: "ASSETX" },
-    { label: "Product" },
-    { label: "Detail" },
-  ];
-
-  return (
-    <div className="flex items-center justify-between w-full">
-      {/* Left: Breadcrumb */}
-      <div className="flex items-center gap-2">
-        <Breadcrumb items={breadcrumbItems} />
-      </div>
-
-      {/* Right: Actions */}
-      <div className="flex items-center gap-4">
-        {/* Language Switch */}
-        <LanguageSwitch />
-
-        {/* Theme Switch */}
-        <ThemeSwitch />
-
-        {/* Wallet Button */}
-        <button className="bg-bg-surface rounded-lg border border-border-normal px-2 py-2 flex items-center justify-center h-10">
-          <Image src="/icon-wallet.svg" alt="Wallet" width={20} height={20} />
-          <Image
-            src="/icon-notification.svg"
-            alt="Notification"
-            width={14}
-            height={14}
-            className="ml-1"
-          />
-        </button>
-
-        {/* Address Button */}
-        <button className="bg-text-primary rounded-lg px-4 py-2 flex items-center justify-center gap-2 h-10 hover:bg-gray-800 transition-colors">
-          <Image src="/icon-copy.svg" alt="Copy" width={16} height={16} />
-          <span className="text-white text-sm font-bold font-jetbrains">
-            0x12...4F82
-          </span>
-        </button>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import Image from "next/image";
+import { Button } from "@heroui/react";
+import Breadcrumb from "./Breadcrumb";
+import LanguageSwitch from "./LanguageSwitch";
+import ThemeSwitch from "./ThemeSwitch";
+
+export default function TopBar() {
+  const breadcrumbItems = [
+    { label: "ASSETX" },
+    { label: "Product" },
+    { label: "Detail" },
+  ];
+
+  return (
+    <div className="flex items-center justify-between w-full">
+      {/* Left: Breadcrumb */}
+      <div className="flex items-center gap-2">
+        <Breadcrumb items={breadcrumbItems} />
+      </div>
+
+      {/* Right: Actions */}
+      <div className="flex items-center gap-4">
+        {/* Language Switch */}
+        <LanguageSwitch />
+
+        {/* Theme Switch */}
+        <ThemeSwitch />
+
+        {/* Wallet Button */}
+        <Button
+          isIconOnly
+          variant="bordered"
+          className="bg-bg-surface border-border-normal min-w-10 h-10 rounded-lg"
+        >
+          <div className="flex items-center justify-center">
+            <Image src="/icon-wallet.svg" alt="Wallet" width={20} height={20} />
+            <Image
+              src="/icon-notification.svg"
+              alt="Notification"
+              width={14}
+              height={14}
+              className="ml-1"
+            />
+          </div>
+        </Button>
+
+        {/* Address Button */}
+        <Button
+          className="bg-text-primary text-white font-bold font-jetbrains text-sm h-10 px-4 rounded-lg"
+          startContent={<Image src="/icon-copy.svg" alt="Copy" width={16} height={16} />}
+        >
+          0x12...4F82
+        </Button>
+      </div>
+    </div>
+  );
+}