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>
This commit is contained in:
2026-01-30 05:35:08 +00:00
parent 4c86b7cce1
commit b98500e61f
66 changed files with 443 additions and 291 deletions

6
public/chart-square1.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.83844 10.2212C6.26094 10.2212 5.79346 10.6886 5.79346 11.2661V15.9595H9.2676V10.2212V10.2212H6.83844Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.3048 6.05029C9.72725 6.05029 9.25977 6.51781 9.25977 7.09531V15.9503H12.7339V7.09531C12.7339 6.51781 12.2756 6.05029 11.6981 6.05029H10.3048Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.7402 11.7793V15.9502H16.2144V12.8243C16.2052 12.2468 15.7377 11.7793 15.1694 11.7793H12.7402Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.7502 20.1668C18.3335 20.1668 20.1668 18.3335 20.1668 13.7502V8.25016C20.1668 3.66683 18.3335 1.8335 13.7502 1.8335H8.25016C3.66683 1.8335 1.8335 3.66683 1.8335 8.25016V13.7502C1.8335 18.3335 3.66683 20.1668 8.25016 20.1668H13.7502Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB