feat: refactor Product page to match prototype design

Redesigned ProductCard and Product page based on original prototype:

ProductCard Component:
- Added gradient background matching prototype style
- Copied all SVG icons from prototype (US flags, HK flag, etc.)
- Implemented proper icon display with white background container
- Added category color variants (blue, green, purple)
- Risk level indicators with accurate colors
- Styled progress bar matching prototype
- Proper spacing and typography from CSS

Visual Elements:
- Radial gradient backgrounds on cards
- Glass-morphism effect with transparency
- Shadow and border effects from prototype
- Icon container with white background and shadow ring
- Category badges with colored backgrounds

Assets Added:
- frame-9230.svg, frame-9231.svg (US flag icons)
- hk0.svg (HK flag icon)
- chart-square1.svg
- All component SVG files from prototype
- View toggle icons

Styling:
- Followed prototype's style.css specifications
- Maintained exact color values and gradients
- Proper border radius and spacing
- Typography matching prototype

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

app/product/page.tsx

@@ -43,12 +43,13 @@ export default function ProductPage() {
       id: 1,
       name: "High-Yield US Equity",
       category: "Quant Strategy",
-      icon: "/product-us-equity.svg",
+      categoryColor: "blue" as const,
+      iconType: "us-flag-1" as const,
       yieldAPY: "22.0%",
       poolCap: "10M",
       maturity: "05 Feb 2026",
       risk: "Medium",
-      riskLevel: 2,
+      riskLevel: 2 as const,
       lockUp: "12 Months",
       circulatingSupply: "$2.5M",
       poolCapacityPercent: 75,
@@ -57,12 +58,13 @@ export default function ProductPage() {
       id: 2,
       name: "HK Commercial RE",
       category: "Real Estate",
-      icon: "/product-hk-re.svg",
+      categoryColor: "green" as const,
+      iconType: "hk-flag" as const,
       yieldAPY: "22.0%",
       poolCap: "10M",
       maturity: "05 Feb 2026",
       risk: "LOW",
-      riskLevel: 1,
+      riskLevel: 1 as const,
       lockUp: "12 Months",
       circulatingSupply: "$2.5M",
       poolCapacityPercent: 75,
@@ -71,12 +73,13 @@ export default function ProductPage() {
       id: 3,
       name: "High-Yield US Equity",
       category: "Quant Strategy",
-      icon: "/product-us-equity-2.svg",
+      categoryColor: "purple" as const,
+      iconType: "us-flag-2" as const,
       yieldAPY: "22.0%",
       poolCap: "10M",
       maturity: "05 Feb 2026",
       risk: "High",
-      riskLevel: 3,
+      riskLevel: 3 as const,
       lockUp: "12 Months",
       circulatingSupply: "$2.5M",
       poolCapacityPercent: 75,
@@ -132,13 +135,14 @@ export default function ProductPage() {
             </div>
 
             {/* Product Cards Grid */}
-            <div className="grid grid-cols-1 gap-6">
+            <div className="flex flex-col gap-6">
               {products.map((product) => (
                 <ProductCard
                   key={product.id}
                   name={product.name}
                   category={product.category}
-                  icon={product.icon}
+                  categoryColor={product.categoryColor}
+                  iconType={product.iconType}
                   yieldAPY={product.yieldAPY}
                   poolCap={product.poolCap}
                   maturity={product.maturity}