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-121.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="M9.16666 16.1665H5.83332C4.68055 16.1665 3.69791 15.7603 2.88541 14.9478C2.07291 14.1353 1.66666 13.1526 1.66666 11.9998C1.66666 10.8471 2.07291 9.86442 2.88541 9.05192C3.69791 8.23942 4.68055 7.83317 5.83332 7.83317H9.16666V9.49984H5.83332C5.13888 9.49984 4.5486 9.74289 4.06249 10.229C3.57638 10.7151 3.33332 11.3054 3.33332 11.9998C3.33332 12.6943 3.57638 13.2846 4.06249 13.7707C4.5486 14.2568 5.13888 14.4998 5.83332 14.4998H9.16666V16.1665ZM6.66666 12.8332V11.1665H13.3333V12.8332H6.66666ZM10.8333 16.1665V14.4998H14.1667C14.8611 14.4998 15.4514 14.2568 15.9375 13.7707C16.4236 13.2846 16.6667 12.6943 16.6667 11.9998C16.6667 11.3054 16.4236 10.7151 15.9375 10.229C15.4514 9.74289 14.8611 9.49984 14.1667 9.49984H10.8333V7.83317H14.1667C15.3194 7.83317 16.3021 8.23942 17.1146 9.05192C17.9271 9.86442 18.3333 10.8471 18.3333 11.9998C18.3333 13.1526 17.9271 14.1353 17.1146 14.9478C16.3021 15.7603 15.3194 16.1665 14.1667 16.1665H10.8333Z" fill="#9CA1AF"/>
</svg>
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.16666 16.1665H5.83332C4.68055 16.1665 3.69791 15.7603 2.88541 14.9478C2.07291 14.1353 1.66666 13.1526 1.66666 11.9998C1.66666 10.8471 2.07291 9.86442 2.88541 9.05192C3.69791 8.23942 4.68055 7.83317 5.83332 7.83317H9.16666V9.49984H5.83332C5.13888 9.49984 4.5486 9.74289 4.06249 10.229C3.57638 10.7151 3.33332 11.3054 3.33332 11.9998C3.33332 12.6943 3.57638 13.2846 4.06249 13.7707C4.5486 14.2568 5.13888 14.4998 5.83332 14.4998H9.16666V16.1665ZM6.66666 12.8332V11.1665H13.3333V12.8332H6.66666ZM10.8333 16.1665V14.4998H14.1667C14.8611 14.4998 15.4514 14.2568 15.9375 13.7707C16.4236 13.2846 16.6667 12.6943 16.6667 11.9998C16.6667 11.3054 16.4236 10.7151 15.9375 10.229C15.4514 9.74289 14.8611 9.49984 14.1667 9.49984H10.8333V7.83317H14.1667C15.3194 7.83317 16.3021 8.23942 17.1146 9.05192C17.9271 9.86442 18.3333 10.8471 18.3333 11.9998C18.3333 13.1526 17.9271 14.1353 17.1146 14.9478C16.3021 15.7603 15.3194 16.1665 14.1667 16.1665H10.8333Z" fill="#9CA1AF"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB