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

22
public/lr0.svg
View File

@@ -1,11 +1,11 @@
<svg width="56" height="40" viewBox="0 0 56 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.25" y="0.25" width="55.5" height="39.5" rx="1.46429" fill="white" stroke="#F5F5F5" stroke-width="0.5"/>
<mask id="mask0_4_6009" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="56" height="40">
<rect x="0.25" y="0.25" width="55.5" height="39.5" rx="1.46429" fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_4_6009)">
<path d="M56 37.333H0V32H56V37.333ZM56 26.667H26.667V21.334H56V26.667ZM56 16H26.667V10.667H56V16ZM56 5.33301H26.667V0H56V5.33301Z" fill="#E1244A"/>
<rect width="26.6667" height="26.6667" fill="#0C3F8E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3333 16.4535L8.63097 19.8056L10.366 14.2976L5.7248 10.8614L11.4994 10.8094L13.3333 5.3335L15.1671 10.8094L20.9417 10.8614L16.3005 14.2976L18.0355 19.8056L13.3333 16.4535Z" fill="white"/>
</g>
</svg>
<svg width="56" height="40" viewBox="0 0 56 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.25" y="0.25" width="55.5" height="39.5" rx="1.46429" fill="white" stroke="#F5F5F5" stroke-width="0.5"/>
<mask id="mask0_4_6009" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="56" height="40">
<rect x="0.25" y="0.25" width="55.5" height="39.5" rx="1.46429" fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_4_6009)">
<path d="M56 37.333H0V32H56V37.333ZM56 26.667H26.667V21.334H56V26.667ZM56 16H26.667V10.667H56V16ZM56 5.33301H26.667V0H56V5.33301Z" fill="#E1244A"/>
<rect width="26.6667" height="26.6667" fill="#0C3F8E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3333 16.4535L8.63097 19.8056L10.366 14.2976L5.7248 10.8614L11.4994 10.8094L13.3333 5.3335L15.1671 10.8094L20.9417 10.8614L16.3005 14.2976L18.0355 19.8056L13.3333 16.4535Z" fill="white"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 933 B

After

Width:  |  Height:  |  Size: 944 B