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

6
public/component-123.svg
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="M10 15.3332L5.83333 11.1665L7 9.95817L9.16667 12.1248V5.33317H10.8333V12.1248L13 9.95817L14.1667 11.1665L10 15.3332ZM5 18.6665C4.54167 18.6665 4.14931 18.5033 3.82292 18.1769C3.49653 17.8505 3.33333 17.4582 3.33333 16.9998V14.4998H5V16.9998H15V14.4998H16.6667V16.9998C16.6667 17.4582 16.5035 17.8505 16.1771 18.1769C15.8507 18.5033 15.4583 18.6665 15 18.6665H5Z" fill="#9CA1AF"/>
</svg>
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 15.3332L5.83333 11.1665L7 9.95817L9.16667 12.1248V5.33317H10.8333V12.1248L13 9.95817L14.1667 11.1665L10 15.3332ZM5 18.6665C4.54167 18.6665 4.14931 18.5033 3.82292 18.1769C3.49653 17.8505 3.33333 17.4582 3.33333 16.9998V14.4998H5V16.9998H15V14.4998H16.6667V16.9998C16.6667 17.4582 16.5035 17.8505 16.1771 18.1769C15.8507 18.5033 15.4583 18.6665 15 18.6665H5Z" fill="#9CA1AF"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 492 B

After

Width:  |  Height:  |  Size: 495 B