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>

public/vuesax-linear-home-trend-up1.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.32766 6.45316C2.50266 7.09482 1.8335 8.46066 1.8335 9.49649V16.289C1.8335 18.4157 3.566 20.1573 5.69266 20.1573H16.3077C18.4343 20.1573 20.1668 18.4157 20.1668 16.2982V9.62482C20.1668 8.51566 19.4243 7.09482 18.5168 6.46232L12.8518 2.49316C11.5685 1.59482 9.506 1.64066 8.2685 2.60316L3.32766 6.45316Z" stroke="#FCFCFD" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.125 10.5415L11.275 14.3915L9.80833 12.1915L6.875 15.1248" stroke="#FCFCFD" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.2915 10.5415H15.1248V12.3748" stroke="#FCFCFD" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>