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

10
public/icon-lending.svg
View File

@@ -1,5 +1,5 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.2083 13.7502C14.0525 13.7502 13.8875 13.741 13.7317 13.7318C13.5025 10.826 11.1742 8.49765 8.26832 8.26849C8.25916 8.11265 8.25 7.94766 8.25 7.79183C8.25 4.501 10.9175 1.8335 14.2083 1.8335C17.4992 1.8335 20.1667 4.501 20.1667 7.79183C20.1667 11.0827 17.4992 13.7502 14.2083 13.7502Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.79171 20.1667C4.50087 20.1667 1.83337 17.4992 1.83337 14.2083C1.83337 10.9175 4.50087 8.25 7.79171 8.25C7.94754 8.25 8.11253 8.25916 8.26836 8.26832C11.1742 8.49749 13.5026 10.8258 13.7317 13.7317C13.7409 13.8875 13.75 14.0525 13.75 14.2083C13.75 17.4992 11.0825 20.1667 7.79171 20.1667Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.79167 11.9165L8.59834 13.4015L10.0833 14.2082L8.59834 15.0148L7.79167 16.4998L6.985 15.0148L5.5 14.2082L6.985 13.4015L7.79167 11.9165Z" 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="M14.2083 13.7502C14.0525 13.7502 13.8875 13.741 13.7317 13.7318C13.5025 10.826 11.1742 8.49765 8.26832 8.26849C8.25916 8.11265 8.25 7.94766 8.25 7.79183C8.25 4.501 10.9175 1.8335 14.2083 1.8335C17.4992 1.8335 20.1667 4.501 20.1667 7.79183C20.1667 11.0827 17.4992 13.7502 14.2083 13.7502Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.79171 20.1667C4.50087 20.1667 1.83337 17.4992 1.83337 14.2083C1.83337 10.9175 4.50087 8.25 7.79171 8.25C7.94754 8.25 8.11253 8.25916 8.26836 8.26832C11.1742 8.49749 13.5026 10.8258 13.7317 13.7317C13.7409 13.8875 13.75 14.0525 13.75 14.2083C13.75 17.4992 11.0825 20.1667 7.79171 20.1667Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.79167 11.9165L8.59834 13.4015L10.0833 14.2082L8.59834 15.0148L7.79167 16.4998L6.985 15.0148L5.5 14.2082L6.985 13.4015L7.79167 11.9165Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB