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:
3
public/warning-shield-check0.svg
Normal file
3
public/warning-shield-check0.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.7498 8.25L10.0832 11.9167L8.24984 10.0833M18.3332 9.31796C18.3332 15.3389 13.7791 18.0382 11.8485 18.9121L11.846 18.9132C11.643 19.0051 11.5412 19.0512 11.3105 19.0908C11.1643 19.1158 10.8363 19.1158 10.6901 19.0908C10.4585 19.051 10.3556 19.0048 10.151 18.9121C8.22032 18.0382 3.6665 15.3389 3.6665 9.31795V5.68351C3.6665 4.65675 3.6665 4.14299 3.86633 3.75081C4.04209 3.40585 4.32235 3.12559 4.66732 2.94982C5.05949 2.75 5.57325 2.75 6.60002 2.75H15.4C16.4268 2.75 16.9394 2.75 17.3316 2.94982C17.6766 3.12559 17.9578 3.40585 18.1335 3.75081C18.3332 4.1426 18.3332 4.65574 18.3332 5.6805V9.31796Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 805 B |
Reference in New Issue
Block a user