xufuhan/assetx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor Product page to match prototype design

Browse Source 
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:
default
2026-01-30 05:35:08 +00:00
parent 4c86b7cce1
commit b98500e61f
66 changed files with 443 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/icon-alp.svg
View File

@@ -1,6 +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.3046 6.05029C9.72713 6.05029 9.25964 6.51781 9.25964 7.09531V15.9503H12.7338V7.09531C12.7338 6.51781 12.2755 6.05029 11.698 6.05029H10.3046Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.7401 11.7793V15.9502H16.2143V12.8243C16.2051 12.2468 15.7376 11.7793 15.1693 11.7793H12.7401Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.75 20.1668C18.3334 20.1668 20.1667 18.3335 20.1667 13.7502V8.25016C20.1667 3.66683 18.3334 1.8335 13.75 1.8335H8.25004C3.66671 1.8335 1.83337 3.66683 1.83337 8.25016V13.7502C1.83337 18.3335 3.66671 20.1668 8.25004 20.1668H13.75Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<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.3046 6.05029C9.72713 6.05029 9.25964 6.51781 9.25964 7.09531V15.9503H12.7338V7.09531C12.7338 6.51781 12.2755 6.05029 11.698 6.05029H10.3046Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.7401 11.7793V15.9502H16.2143V12.8243C16.2051 12.2468 15.7376 11.7793 15.1693 11.7793H12.7401Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.75 20.1668C18.3334 20.1668 20.1667 18.3335 20.1667 13.7502V8.25016C20.1667 3.66683 18.3334 1.8335 13.75 1.8335H8.25004C3.66671 1.8335 1.83337 3.66683 1.83337 8.25016V13.7502C1.83337 18.3335 3.66671 20.1668 8.25004 20.1668H13.75Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB