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

@@ -1,53 +1,53 @@
-"use client";
-
-import Image from "next/image";
-import { useApp } from "@/contexts/AppContext";
-
-interface ProtocolLinkProps {
-  icon: string;
-  label: string;
-  arrowIcon: string;
-}
-
-function ProtocolLink({ icon, label, arrowIcon }: ProtocolLinkProps) {
-  return (
-    <button className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 px-4 py-3.5 flex items-center justify-between w-full hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
-      <div className="flex items-center gap-1">
-        <Image src={icon} alt="" width={20} height={24} />
-        <span className="text-body-small font-medium text-text-tertiary dark:text-gray-300">
-          {label}
-        </span>
-      </div>
-      <Image src={arrowIcon} alt="" width={20} height={24} />
-    </button>
-  );
-}
-
-export default function ProtocolInformation() {
-  const { t } = useApp();
-
-  return (
-    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 flex flex-col gap-4">
-      <h3 className="text-body-large font-bold text-text-primary dark:text-white">
-        {t("protocol.title")}
-      </h3>
-      <div className="flex flex-col gap-2">
-        <ProtocolLink
-          icon="/component-17.svg"
-          label={t("protocol.whitepaper")}
-          arrowIcon="/component-18.svg"
-        />
-        <ProtocolLink
-          icon="/component-19.svg"
-          label={t("protocol.documentation")}
-          arrowIcon="/component-110.svg"
-        />
-        <ProtocolLink
-          icon="/component-111.svg"
-          label={t("protocol.github")}
-          arrowIcon="/component-112.svg"
-        />
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+interface ProtocolLinkProps {
+  icon: string;
+  label: string;
+  arrowIcon: string;
+}
+
+function ProtocolLink({ icon, label, arrowIcon }: ProtocolLinkProps) {
+  return (
+    <button className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 px-4 py-3.5 flex items-center justify-between w-full hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
+      <div className="flex items-center gap-1">
+        <Image src={icon} alt="" width={20} height={24} />
+        <span className="text-body-small font-medium text-text-tertiary dark:text-gray-300">
+          {label}
+        </span>
+      </div>
+      <Image src={arrowIcon} alt="" width={20} height={24} />
+    </button>
+  );
+}
+
+export default function ProtocolInformation() {
+  const { t } = useApp();
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 flex flex-col gap-4">
+      <h3 className="text-body-large font-bold text-text-primary dark:text-white">
+        {t("protocol.title")}
+      </h3>
+      <div className="flex flex-col gap-2">
+        <ProtocolLink
+          icon="/component-17.svg"
+          label={t("protocol.whitepaper")}
+          arrowIcon="/component-18.svg"
+        />
+        <ProtocolLink
+          icon="/component-19.svg"
+          label={t("protocol.documentation")}
+          arrowIcon="/component-110.svg"
+        />
+        <ProtocolLink
+          icon="/component-111.svg"
+          label={t("protocol.github")}
+          arrowIcon="/component-112.svg"
+        />
+      </div>
+    </div>
+  );
+}