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,3 +1,3 @@
|
||||
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.8334 11.1668H16.625C16.4167 9.63905 15.7813 8.34391 14.7188 7.28141C13.6563 6.21891 12.3611 5.58349 10.8334 5.37516V11.1668ZM9.16669 18.6252V5.37516C7.48613 5.58349 6.09377 6.31613 4.9896 7.57308C3.88544 8.83002 3.33335 10.3057 3.33335 12.0002C3.33335 13.6946 3.88544 15.1703 4.9896 16.4272C6.09377 17.6842 7.48613 18.4168 9.16669 18.6252ZM10.8334 18.6252C12.3611 18.4307 13.6597 17.7988 14.7292 16.7293C15.7986 15.6599 16.4306 14.3613 16.625 12.8335H10.8334V18.6252ZM10 20.3335C8.84724 20.3335 7.76391 20.1147 6.75002 19.6772C5.73613 19.2397 4.85419 18.646 4.10419 17.896C3.35419 17.146 2.76044 16.2641 2.32294 15.2502C1.88544 14.2363 1.66669 13.1529 1.66669 12.0002C1.66669 10.8474 1.88544 9.76405 2.32294 8.75016C2.76044 7.73627 3.35419 6.85433 4.10419 6.10433C4.85419 5.35433 5.73613 4.76058 6.75002 4.32308C7.76391 3.88558 8.84724 3.66683 10 3.66683C11.1528 3.66683 12.2327 3.88558 13.2396 4.32308C14.2465 4.76058 15.1285 5.3578 15.8854 6.11474C16.6424 6.87169 17.2396 7.75363 17.6771 8.76058C18.1146 9.76752 18.3334 10.8474 18.3334 12.0002C18.3334 13.1391 18.1146 14.2154 17.6771 15.2293C17.2396 16.2432 16.6459 17.1286 15.8959 17.8856C15.1459 18.6425 14.2639 19.2397 13.25 19.6772C12.2361 20.1147 11.1528 20.3335 10 20.3335Z" fill="#9CA1AF"/>
|
||||
</svg>
|
||||
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.8334 11.1668H16.625C16.4167 9.63905 15.7813 8.34391 14.7188 7.28141C13.6563 6.21891 12.3611 5.58349 10.8334 5.37516V11.1668ZM9.16669 18.6252V5.37516C7.48613 5.58349 6.09377 6.31613 4.9896 7.57308C3.88544 8.83002 3.33335 10.3057 3.33335 12.0002C3.33335 13.6946 3.88544 15.1703 4.9896 16.4272C6.09377 17.6842 7.48613 18.4168 9.16669 18.6252ZM10.8334 18.6252C12.3611 18.4307 13.6597 17.7988 14.7292 16.7293C15.7986 15.6599 16.4306 14.3613 16.625 12.8335H10.8334V18.6252ZM10 20.3335C8.84724 20.3335 7.76391 20.1147 6.75002 19.6772C5.73613 19.2397 4.85419 18.646 4.10419 17.896C3.35419 17.146 2.76044 16.2641 2.32294 15.2502C1.88544 14.2363 1.66669 13.1529 1.66669 12.0002C1.66669 10.8474 1.88544 9.76405 2.32294 8.75016C2.76044 7.73627 3.35419 6.85433 4.10419 6.10433C4.85419 5.35433 5.73613 4.76058 6.75002 4.32308C7.76391 3.88558 8.84724 3.66683 10 3.66683C11.1528 3.66683 12.2327 3.88558 13.2396 4.32308C14.2465 4.76058 15.1285 5.3578 15.8854 6.11474C16.6424 6.87169 17.2396 7.75363 17.6771 8.76058C18.1146 9.76752 18.3334 10.8474 18.3334 12.0002C18.3334 13.1391 18.1146 14.2154 17.6771 15.2293C17.2396 16.2432 16.6459 17.1286 15.8959 17.8856C15.1459 18.6425 14.2639 19.2397 13.25 19.6772C12.2361 20.1147 11.1528 20.3335 10 20.3335Z" fill="#9CA1AF"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Reference in New Issue
Block a user