feat: implement Product page with fund listing

Created a complete Product page based on prototype design with:

Page Features:
- New /product route with full page layout
- AssetX Fund Market title section
- 4 statistics cards (TVL, Cumulative Yield, Balance, Earnings)
- Assets listing section with view toggle (list/grid)
- Product cards grid layout

ProductCard Component:
- Reusable product card component with HeroUI integration
- Product header with icon and category badge
- Two-column metric display (Yield APY, Pool Cap, Maturity, etc.)
- Risk indicator with color-coded bars (Low/Medium/High)
- Pool capacity progress bar with gradient
- Invest button with HeroUI Button component
- Hover effects and transitions
- Color-coded category badges (Quant Strategy, Real Estate)

Assets:
- Copied view toggle icons from prototype
- edit-list-unordered0.svg (list view)
- menu-more-grid-small0.svg (grid view)

Internationalization:
- Added productPage section to en.json and zh.json
- All labels translated (English and Chinese)
- Consistent with existing i18n pattern

Technical Implementation:
- Full responsive design
- Dark mode support
- Gradient styling for visual appeal
- Smooth animations and transitions
- Proper TypeScript types
- Follows existing design system

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

app/product/page.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useApp } from "@/contexts/AppContext";
+import Sidebar from "@/components/Sidebar";
+import TopBar from "@/components/TopBar";
+import StatsCards from "@/components/StatsCards";
+import ProductCard from "@/components/ProductCard";
+import Image from "next/image";
+import { Button } from "@heroui/react";
+
+export default function ProductPage() {
+  const { t } = useApp();
+
+  const statsData = [
+    {
+      label: "Total Value Locked",
+      value: "$465.0M",
+      change: "+2.4%",
+      isPositive: true,
+    },
+    {
+      label: "Cumulative Yield",
+      value: "$505,232",
+      change: "+2.4%",
+      isPositive: true,
+    },
+    {
+      label: "Your Total Balance",
+      value: "$10,000",
+      change: "+2.4%",
+      isPositive: true,
+    },
+    {
+      label: "Your Total Earning",
+      value: "--",
+      change: "+2.4%",
+      isPositive: true,
+    },
+  ];
+
+  const products = [
+    {
+      id: 1,
+      name: "High-Yield US Equity",
+      category: "Quant Strategy",
+      icon: "/product-us-equity.svg",
+      yieldAPY: "22.0%",
+      poolCap: "10M",
+      maturity: "05 Feb 2026",
+      risk: "Medium",
+      riskLevel: 2,
+      lockUp: "12 Months",
+      circulatingSupply: "$2.5M",
+      poolCapacityPercent: 75,
+    },
+    {
+      id: 2,
+      name: "HK Commercial RE",
+      category: "Real Estate",
+      icon: "/product-hk-re.svg",
+      yieldAPY: "22.0%",
+      poolCap: "10M",
+      maturity: "05 Feb 2026",
+      risk: "LOW",
+      riskLevel: 1,
+      lockUp: "12 Months",
+      circulatingSupply: "$2.5M",
+      poolCapacityPercent: 75,
+    },
+    {
+      id: 3,
+      name: "High-Yield US Equity",
+      category: "Quant Strategy",
+      icon: "/product-us-equity-2.svg",
+      yieldAPY: "22.0%",
+      poolCap: "10M",
+      maturity: "05 Feb 2026",
+      risk: "High",
+      riskLevel: 3,
+      lockUp: "12 Months",
+      circulatingSupply: "$2.5M",
+      poolCapacityPercent: 75,
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-bg-subtle dark:bg-gray-900 flex">
+      <Sidebar />
+      <div className="flex-1 flex flex-col ml-[222px]">
+        <div className="bg-bg-surface dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-6">
+          <TopBar />
+        </div>
+
+        <div className="flex-1 px-8 py-8">
+          {/* Page Title */}
+          <div className="mb-8">
+            <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white">
+              AssetX Fund Market
+            </h1>
+          </div>
+
+          {/* Stats Cards */}
+          <div className="mb-8">
+            <StatsCards stats={statsData} />
+          </div>
+
+          {/* Assets Section */}
+          <div className="flex flex-col gap-6">
+            {/* Section Header */}
+            <div className="flex items-center justify-between">
+              <h2 className="text-heading-h3 font-bold text-text-primary dark:text-white">
+                Assets
+              </h2>
+              <div className="flex items-center gap-2">
+                <button className="p-2 rounded-lg hover:bg-bg-subtle dark:hover:bg-gray-700 transition-colors">
+                  <Image
+                    src="/edit-list-unordered0.svg"
+                    alt="List view"
+                    width={20}
+                    height={20}
+                  />
+                </button>
+                <button className="p-2 rounded-lg hover:bg-bg-subtle dark:hover:bg-gray-700 transition-colors">
+                  <Image
+                    src="/menu-more-grid-small0.svg"
+                    alt="Grid view"
+                    width={20}
+                    height={20}
+                  />
+                </button>
+              </div>
+            </div>
+
+            {/* Product Cards Grid */}
+            <div className="grid grid-cols-1 gap-6">
+              {products.map((product) => (
+                <ProductCard
+                  key={product.id}
+                  name={product.name}
+                  category={product.category}
+                  icon={product.icon}
+                  yieldAPY={product.yieldAPY}
+                  poolCap={product.poolCap}
+                  maturity={product.maturity}
+                  risk={product.risk}
+                  riskLevel={product.riskLevel}
+                  lockUp={product.lockUp}
+                  circulatingSupply={product.circulatingSupply}
+                  poolCapacityPercent={product.poolCapacityPercent}
+                  onInvest={() => console.log("Invest in", product.name)}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}