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

View File

@@ -1,4 +0,0 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3.5V2C9.5 1.86739 9.44732 1.74021 9.35355 1.64645C9.25979 1.55268 9.13261 1.5 9 1.5H2.5C2.23478 1.5 1.98043 1.60536 1.79289 1.79289C1.60536 1.98043 1.5 2.23478 1.5 2.5C1.5 2.76522 1.60536 3.01957 1.79289 3.20711C1.98043 3.39464 2.23478 3.5 2.5 3.5H10C10.1326 3.5 10.2598 3.55268 10.3536 3.64645C10.4473 3.74021 10.5 3.86739 10.5 4V6M10.5 6H9C8.73478 6 8.48043 6.10536 8.29289 6.29289C8.10536 6.48043 8 6.73478 8 7C8 7.26522 8.10536 7.51957 8.29289 7.70711C8.48043 7.89464 8.73478 8 9 8H10.5C10.6326 8 10.7598 7.94732 10.8536 7.85355C10.9473 7.75979 11 7.63261 11 7.5V6.5C11 6.36739 10.9473 6.24021 10.8536 6.14645C10.7598 6.05268 10.6326 6 10.5 6Z" stroke="#4B5563" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.5 2.5V9.5C1.5 9.76522 1.60536 10.0196 1.79289 10.2071C1.98043 10.3946 2.23478 10.5 2.5 10.5H10C10.1326 10.5 10.2598 10.4473 10.3536 10.3536C10.4473 10.2598 10.5 10.1326 10.5 10V8" stroke="#4B5563" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 0 B