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="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.57747 9.62718L10.0017 6.20295L9.32171 5.52296L6.57747 8.26721L5.1932 6.88294L4.51321 7.56293L6.57747 9.62718ZM7.25746 12.25C6.58556 12.25 5.95414 12.1225 5.3632 11.8675C4.77226 11.6125 4.25822 11.2664 3.82108 10.8293C3.38395 10.3922 3.03788 9.87813 2.78288 9.28719C2.52789 8.69625 2.40039 8.06483 2.40039 7.39293C2.40039 6.72104 2.52789 6.08962 2.78288 5.49868C3.03788 4.90773 3.38395 4.39369 3.82108 3.95656C4.25822 3.51942 4.77226 3.17336 5.3632 2.91836C5.95414 2.66336 6.58556 2.53587 7.25746 2.53587C7.92935 2.53587 8.56077 2.66336 9.15171 2.91836C9.74266 3.17336 10.2567 3.51942 10.6938 3.95656C11.131 4.39369 11.477 4.90773 11.732 5.49868C11.987 6.08962 12.1145 6.72104 12.1145 7.39293C12.1145 8.06483 11.987 8.69625 11.732 9.28719C11.477 9.87813 11.131 10.3922 10.6938 10.8293C10.2567 11.2664 9.74266 11.6125 9.15171 11.8675C8.56077 12.1225 7.92935 12.25 7.25746 12.25ZM7.25746 11.2786C8.3422 11.2786 9.261 10.9022 10.0138 10.1493C10.7667 9.39647 11.1431 8.47768 11.1431 7.39293C11.1431 6.30819 10.7667 5.38939 10.0138 4.63655C9.261 3.8837 8.3422 3.50728 7.25746 3.50728C6.17271 3.50728 5.25392 3.8837 4.50107 4.63655C3.74823 5.38939 3.3718 6.30819 3.3718 7.39293C3.3718 8.47768 3.74823 9.39647 4.50107 10.1493C5.25392 10.9022 6.17271 11.2786 7.25746 11.2786Z" fill="#10B981"/>
|
||||
</svg>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.57747 9.62718L10.0017 6.20295L9.32171 5.52296L6.57747 8.26721L5.1932 6.88294L4.51321 7.56293L6.57747 9.62718ZM7.25746 12.25C6.58556 12.25 5.95414 12.1225 5.3632 11.8675C4.77226 11.6125 4.25822 11.2664 3.82108 10.8293C3.38395 10.3922 3.03788 9.87813 2.78288 9.28719C2.52789 8.69625 2.40039 8.06483 2.40039 7.39293C2.40039 6.72104 2.52789 6.08962 2.78288 5.49868C3.03788 4.90773 3.38395 4.39369 3.82108 3.95656C4.25822 3.51942 4.77226 3.17336 5.3632 2.91836C5.95414 2.66336 6.58556 2.53587 7.25746 2.53587C7.92935 2.53587 8.56077 2.66336 9.15171 2.91836C9.74266 3.17336 10.2567 3.51942 10.6938 3.95656C11.131 4.39369 11.477 4.90773 11.732 5.49868C11.987 6.08962 12.1145 6.72104 12.1145 7.39293C12.1145 8.06483 11.987 8.69625 11.732 9.28719C11.477 9.87813 11.131 10.3922 10.6938 10.8293C10.2567 11.2664 9.74266 11.6125 9.15171 11.8675C8.56077 12.1225 7.92935 12.25 7.25746 12.25ZM7.25746 11.2786C8.3422 11.2786 9.261 10.9022 10.0138 10.1493C10.7667 9.39647 11.1431 8.47768 11.1431 7.39293C11.1431 6.30819 10.7667 5.38939 10.0138 4.63655C9.261 3.8837 8.3422 3.50728 7.25746 3.50728C6.17271 3.50728 5.25392 3.8837 4.50107 4.63655C3.74823 5.38939 3.3718 6.30819 3.3718 7.39293C3.3718 8.47768 3.74823 9.39647 4.50107 10.1493C5.25392 10.9022 6.17271 11.2786 7.25746 11.2786Z" fill="#10B981"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user