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,3 +1,3 @@
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.16667 20.3335C3.70833 20.3335 3.31597 20.1703 2.98958 19.8439C2.66319 19.5175 2.5 19.1252 2.5 18.6668V7.00016C2.5 6.54183 2.66319 6.14947 2.98958 5.82308C3.31597 5.49669 3.70833 5.33349 4.16667 5.33349H5V3.66683H6.66667V5.33349H13.3333V3.66683H15V5.33349H15.8333C16.2917 5.33349 16.684 5.49669 17.0104 5.82308C17.3368 6.14947 17.5 6.54183 17.5 7.00016V18.6668C17.5 19.1252 17.3368 19.5175 17.0104 19.8439C16.684 20.1703 16.2917 20.3335 15.8333 20.3335H4.16667ZM4.16667 18.6668H15.8333V10.3335H4.16667V18.6668ZM4.16667 8.66683H15.8333V7.00016H4.16667V8.66683Z" fill="#94A3B8"/>
</svg>
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.16667 20.3335C3.70833 20.3335 3.31597 20.1703 2.98958 19.8439C2.66319 19.5175 2.5 19.1252 2.5 18.6668V7.00016C2.5 6.54183 2.66319 6.14947 2.98958 5.82308C3.31597 5.49669 3.70833 5.33349 4.16667 5.33349H5V3.66683H6.66667V5.33349H13.3333V3.66683H15V5.33349H15.8333C16.2917 5.33349 16.684 5.49669 17.0104 5.82308C17.3368 6.14947 17.5 6.54183 17.5 7.00016V18.6668C17.5 19.1252 17.3368 19.5175 17.0104 19.8439C16.684 20.1703 16.2917 20.3335 15.8333 20.3335H4.16667ZM4.16667 18.6668H15.8333V10.3335H4.16667V18.6668ZM4.16667 8.66683H15.8333V7.00016H4.16667V8.66683Z" fill="#94A3B8"/>
</svg>

Before

Width:  |  Height:  |  Size: 692 B

After

Width:  |  Height:  |  Size: 695 B