feat: refactor Product page to match prototype design
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:
@@ -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="M3.32754 6.45316C2.50254 7.09482 1.83337 8.46066 1.83337 9.49649V16.289C1.83337 18.4157 3.56587 20.1573 5.69254 20.1573H16.3075C18.4342 20.1573 20.1667 18.4157 20.1667 16.2982V9.62482C20.1667 8.51566 19.4242 7.09482 18.5167 6.46232L12.8517 2.49316C11.5684 1.59482 9.50587 1.64066 8.26837 2.60316L3.32754 6.45316Z" stroke="#111827" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15.125 10.5415L11.275 14.3915L9.80833 12.1915L6.875 15.1248" stroke="#111827" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.2916 10.5415H15.125V12.3748" stroke="#111827" 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="M3.32754 6.45316C2.50254 7.09482 1.83337 8.46066 1.83337 9.49649V16.289C1.83337 18.4157 3.56587 20.1573 5.69254 20.1573H16.3075C18.4342 20.1573 20.1667 18.4157 20.1667 16.2982V9.62482C20.1667 8.51566 19.4242 7.09482 18.5167 6.46232L12.8517 2.49316C11.5684 1.59482 9.50587 1.64066 8.26837 2.60316L3.32754 6.45316Z" stroke="#111827" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15.125 10.5415L11.275 14.3915L9.80833 12.1915L6.875 15.1248" stroke="#111827" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.2916 10.5415H15.125V12.3748" stroke="#111827" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 797 B After Width: | Height: | Size: 802 B |
Reference in New Issue
Block a user