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-113.svg
View File

@@ -1,3 +1,3 @@
<svg width="161" height="192" viewBox="0 0 161 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.6767 29.3332H113.343V81.6665C113.343 84.2221 112.788 86.4998 111.677 88.4998C110.566 90.4998 109.01 92.1109 107.01 93.3332L83.3433 107.333L88.01 122.667H113.343L92.6767 137.333L100.677 162.667L80.01 147L59.3433 162.667L67.3433 137.333L46.6767 122.667H72.01L76.6767 107.333L53.01 93.3332C51.01 92.1109 49.4544 90.4998 48.3433 88.4998C47.2322 86.4998 46.6767 84.2221 46.6767 81.6665V29.3332ZM60.01 42.6665V81.6665L73.3433 89.6665V42.6665H60.01ZM100.01 42.6665H86.6767V89.6665L100.01 81.6665V42.6665Z" fill="#FFEDD5"/>
</svg>
<svg width="161" height="192" viewBox="0 0 161 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.6767 29.3332H113.343V81.6665C113.343 84.2221 112.788 86.4998 111.677 88.4998C110.566 90.4998 109.01 92.1109 107.01 93.3332L83.3433 107.333L88.01 122.667H113.343L92.6767 137.333L100.677 162.667L80.01 147L59.3433 162.667L67.3433 137.333L46.6767 122.667H72.01L76.6767 107.333L53.01 93.3332C51.01 92.1109 49.4544 90.4998 48.3433 88.4998C47.2322 86.4998 46.6767 84.2221 46.6767 81.6665V29.3332ZM60.01 42.6665V81.6665L73.3433 89.6665V42.6665H60.01ZM100.01 42.6665H86.6767V89.6665L100.01 81.6665V42.6665Z" fill="#FFEDD5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 639 B