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

28
public/icon-ecosystem.svg
View File

@@ -1,14 +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_5948)">
<path d="M19.25 14.6665H15.5833C15.077 14.6665 14.6666 15.0769 14.6666 15.5832V19.2498C14.6666 19.7561 15.077 20.1665 15.5833 20.1665H19.25C19.7562 20.1665 20.1666 19.7561 20.1666 19.2498V15.5832C20.1666 15.0769 19.7562 14.6665 19.25 14.6665Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.41671 14.6665H2.75004C2.24378 14.6665 1.83337 15.0769 1.83337 15.5832V19.2498C1.83337 19.7561 2.24378 20.1665 2.75004 20.1665H6.41671C6.92297 20.1665 7.33337 19.7561 7.33337 19.2498V15.5832C7.33337 15.0769 6.92297 14.6665 6.41671 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.58337 14.6667V11.9167C4.58337 11.6736 4.67995 11.4404 4.85186 11.2685C5.02377 11.0966 5.25693 11 5.50004 11H16.5C16.7432 11 16.9763 11.0966 17.1482 11.2685C17.3201 11.4404 17.4167 11.6736 17.4167 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_5948">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
<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_5948)">
<path d="M19.25 14.6665H15.5833C15.077 14.6665 14.6666 15.0769 14.6666 15.5832V19.2498C14.6666 19.7561 15.077 20.1665 15.5833 20.1665H19.25C19.7562 20.1665 20.1666 19.7561 20.1666 19.2498V15.5832C20.1666 15.0769 19.7562 14.6665 19.25 14.6665Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.41671 14.6665H2.75004C2.24378 14.6665 1.83337 15.0769 1.83337 15.5832V19.2498C1.83337 19.7561 2.24378 20.1665 2.75004 20.1665H6.41671C6.92297 20.1665 7.33337 19.7561 7.33337 19.2498V15.5832C7.33337 15.0769 6.92297 14.6665 6.41671 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.58337 14.6667V11.9167C4.58337 11.6736 4.67995 11.4404 4.85186 11.2685C5.02377 11.0966 5.25693 11 5.50004 11H16.5C16.7432 11 16.9763 11.0966 17.1482 11.2685C17.3201 11.4404 17.4167 11.6736 17.4167 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_5948">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB