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

14
public/icon1.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4_5317)">
<path d="M19.2498 14.6665H15.5832C15.0769 14.6665 14.6665 15.0769 14.6665 15.5832V19.2498C14.6665 19.7561 15.0769 20.1665 15.5832 20.1665H19.2498C19.7561 20.1665 20.1665 19.7561 20.1665 19.2498V15.5832C20.1665 15.0769 19.7561 14.6665 19.2498 14.6665Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.41683 14.6665H2.75016C2.2439 14.6665 1.8335 15.0769 1.8335 15.5832V19.2498C1.8335 19.7561 2.2439 20.1665 2.75016 20.1665H6.41683C6.92309 20.1665 7.3335 19.7561 7.3335 19.2498V15.5832C7.3335 15.0769 6.92309 14.6665 6.41683 14.6665Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.8333 1.8335H9.16667C8.66041 1.8335 8.25 2.2439 8.25 2.75016V6.41683C8.25 6.92309 8.66041 7.3335 9.16667 7.3335H12.8333C13.3396 7.3335 13.75 6.92309 13.75 6.41683V2.75016C13.75 2.2439 13.3396 1.8335 12.8333 1.8335Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5835 14.6667V11.9167C4.5835 11.6736 4.68007 11.4404 4.85198 11.2685C5.02389 11.0966 5.25705 11 5.50016 11H16.5002C16.7433 11 16.9764 11.0966 17.1483 11.2685C17.3203 11.4404 17.4168 11.6736 17.4168 11.9167V14.6667" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 11.0002V7.3335" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_4_5317">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB