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

@@ -1,63 +1,63 @@
-"use client";
-
-import { useState } from "react";
-import TabNavigation from "./TabNavigation";
-import OverviewTab from "./OverviewTab";
-import { useApp } from "@/contexts/AppContext";
-
-export default function ContentSection() {
-  const { t } = useApp();
-
-  const tabs = [
-    { id: "overview", label: t("tabs.overview") },
-    { id: "asset-description", label: t("tabs.assetDescription") },
-    { id: "analytics", label: t("tabs.analytics") },
-    { id: "performance-analysis", label: t("tabs.performanceAnalysis") },
-    { id: "asset-custody", label: t("tabs.assetCustody") },
-  ];
-
-  const [activeTab, setActiveTab] = useState("overview");
-
-  const handleTabChange = (tabId: string) => {
-    // If clicking asset-description, performance-analysis, or asset-custody, scroll to that section
-    if (tabId === "asset-description" || tabId === "performance-analysis" || tabId === "asset-custody") {
-      setTimeout(() => {
-        const element = document.getElementById(tabId);
-        if (element) {
-          element.scrollIntoView({ behavior: "smooth", block: "start" });
-        }
-      }, 100);
-      // Keep active tab as overview
-      setActiveTab("overview");
-    } else {
-      setActiveTab(tabId);
-    }
-  };
-
-  // Show OverviewTab for overview, asset-description, analytics, performance-analysis, and asset-custody
-  const showOverview = ["overview", "asset-description", "analytics", "performance-analysis", "asset-custody"].includes(activeTab);
-
-  return (
-    <div className="flex flex-col gap-6 w-full">
-      {/* Tab Navigation */}
-      <TabNavigation
-        tabs={tabs}
-        defaultActiveId="overview"
-        onTabChange={handleTabChange}
-      />
-
-      {/* Content Area */}
-      <div className="w-full">
-        {showOverview && <OverviewTab />}
-        {!showOverview && (
-          <div className="bg-bg-surface rounded-2xl border border-border-normal p-6">
-            <p className="text-text-tertiary">
-              {tabs.find((t) => t.id === activeTab)?.label} content will be
-              displayed here...
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import TabNavigation from "./TabNavigation";
+import OverviewTab from "./OverviewTab";
+import { useApp } from "@/contexts/AppContext";
+
+export default function ContentSection() {
+  const { t } = useApp();
+
+  const tabs = [
+    { id: "overview", label: t("tabs.overview") },
+    { id: "asset-description", label: t("tabs.assetDescription") },
+    { id: "analytics", label: t("tabs.analytics") },
+    { id: "performance-analysis", label: t("tabs.performanceAnalysis") },
+    { id: "asset-custody", label: t("tabs.assetCustody") },
+  ];
+
+  const [activeTab, setActiveTab] = useState("overview");
+
+  const handleTabChange = (tabId: string) => {
+    // If clicking asset-description, performance-analysis, or asset-custody, scroll to that section
+    if (tabId === "asset-description" || tabId === "performance-analysis" || tabId === "asset-custody") {
+      setTimeout(() => {
+        const element = document.getElementById(tabId);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      }, 100);
+      // Keep active tab as overview
+      setActiveTab("overview");
+    } else {
+      setActiveTab(tabId);
+    }
+  };
+
+  // Show OverviewTab for overview, asset-description, analytics, performance-analysis, and asset-custody
+  const showOverview = ["overview", "asset-description", "analytics", "performance-analysis", "asset-custody"].includes(activeTab);
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      {/* Tab Navigation */}
+      <TabNavigation
+        tabs={tabs}
+        defaultActiveId="overview"
+        onTabChange={handleTabChange}
+      />
+
+      {/* Content Area */}
+      <div className="w-full">
+        {showOverview && <OverviewTab />}
+        {!showOverview && (
+          <div className="bg-bg-surface rounded-2xl border border-border-normal p-6">
+            <p className="text-text-tertiary">
+              {tabs.find((t) => t.id === activeTab)?.label} content will be
+              displayed here...
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}