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="M4.16667 20.3335C3.70833 20.3335 3.31597 20.1703 2.98958 19.8439C2.66319 19.5175 2.5 19.1252 2.5 18.6668V7.00016C2.5 6.54183 2.66319 6.14947 2.98958 5.82308C3.31597 5.49669 3.70833 5.33349 4.16667 5.33349H5V3.66683H6.66667V5.33349H13.3333V3.66683H15V5.33349H15.8333C16.2917 5.33349 16.684 5.49669 17.0104 5.82308C17.3368 6.14947 17.5 6.54183 17.5 7.00016V18.6668C17.5 19.1252 17.3368 19.5175 17.0104 19.8439C16.684 20.1703 16.2917 20.3335 15.8333 20.3335H4.16667ZM4.16667 18.6668H15.8333V10.3335H4.16667V18.6668ZM4.16667 8.66683H15.8333V7.00016H4.16667V8.66683ZM10 13.6668C9.76389 13.6668 9.56597 13.587 9.40625 13.4272C9.24653 13.2675 9.16667 13.0696 9.16667 12.8335C9.16667 12.5974 9.24653 12.3995 9.40625 12.2397C9.56597 12.08 9.76389 12.0002 10 12.0002C10.2361 12.0002 10.434 12.08 10.5938 12.2397C10.7535 12.3995 10.8333 12.5974 10.8333 12.8335C10.8333 13.0696 10.7535 13.2675 10.5938 13.4272C10.434 13.587 10.2361 13.6668 10 13.6668ZM6.66667 13.6668C6.43056 13.6668 6.23264 13.587 6.07292 13.4272C5.91319 13.2675 5.83333 13.0696 5.83333 12.8335C5.83333 12.5974 5.91319 12.3995 6.07292 12.2397C6.23264 12.08 6.43056 12.0002 6.66667 12.0002C6.90278 12.0002 7.10069 12.08 7.26042 12.2397C7.42014 12.3995 7.5 12.5974 7.5 12.8335C7.5 13.0696 7.42014 13.2675 7.26042 13.4272C7.10069 13.587 6.90278 13.6668 6.66667 13.6668ZM13.3333 13.6668C13.0972 13.6668 12.8993 13.587 12.7396 13.4272C12.5799 13.2675 12.5 13.0696 12.5 12.8335C12.5 12.5974 12.5799 12.3995 12.7396 12.2397C12.8993 12.08 13.0972 12.0002 13.3333 12.0002C13.5694 12.0002 13.7674 12.08 13.9271 12.2397C14.0868 12.3995 14.1667 12.5974 14.1667 12.8335C14.1667 13.0696 14.0868 13.2675 13.9271 13.4272C13.7674 13.587 13.5694 13.6668 13.3333 13.6668ZM10 17.0002C9.76389 17.0002 9.56597 16.9203 9.40625 16.7606C9.24653 16.6009 9.16667 16.4029 9.16667 16.1668C9.16667 15.9307 9.24653 15.7328 9.40625 15.5731C9.56597 15.4134 9.76389 15.3335 10 15.3335C10.2361 15.3335 10.434 15.4134 10.5938 15.5731C10.7535 15.7328 10.8333 15.9307 10.8333 16.1668C10.8333 16.4029 10.7535 16.6009 10.5938 16.7606C10.434 16.9203 10.2361 17.0002 10 17.0002ZM6.66667 17.0002C6.43056 17.0002 6.23264 16.9203 6.07292 16.7606C5.91319 16.6009 5.83333 16.4029 5.83333 16.1668C5.83333 15.9307 5.91319 15.7328 6.07292 15.5731C6.23264 15.4134 6.43056 15.3335 6.66667 15.3335C6.90278 15.3335 7.10069 15.4134 7.26042 15.5731C7.42014 15.7328 7.5 15.9307 7.5 16.1668C7.5 16.4029 7.42014 16.6009 7.26042 16.7606C7.10069 16.9203 6.90278 17.0002 6.66667 17.0002ZM13.3333 17.0002C13.0972 17.0002 12.8993 16.9203 12.7396 16.7606C12.5799 16.6009 12.5 16.4029 12.5 16.1668C12.5 15.9307 12.5799 15.7328 12.7396 15.5731C12.8993 15.4134 13.0972 15.3335 13.3333 15.3335C13.5694 15.3335 13.7674 15.4134 13.9271 15.5731C14.0868 15.7328 14.1667 15.9307 14.1667 16.1668C14.1667 16.4029 14.0868 16.6009 13.9271 16.7606C13.7674 16.9203 13.5694 17.0002 13.3333 17.0002Z" fill="#9CA1AF"/>
|
||||
</svg>
|
||||
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.16667 20.3335C3.70833 20.3335 3.31597 20.1703 2.98958 19.8439C2.66319 19.5175 2.5 19.1252 2.5 18.6668V7.00016C2.5 6.54183 2.66319 6.14947 2.98958 5.82308C3.31597 5.49669 3.70833 5.33349 4.16667 5.33349H5V3.66683H6.66667V5.33349H13.3333V3.66683H15V5.33349H15.8333C16.2917 5.33349 16.684 5.49669 17.0104 5.82308C17.3368 6.14947 17.5 6.54183 17.5 7.00016V18.6668C17.5 19.1252 17.3368 19.5175 17.0104 19.8439C16.684 20.1703 16.2917 20.3335 15.8333 20.3335H4.16667ZM4.16667 18.6668H15.8333V10.3335H4.16667V18.6668ZM4.16667 8.66683H15.8333V7.00016H4.16667V8.66683ZM10 13.6668C9.76389 13.6668 9.56597 13.587 9.40625 13.4272C9.24653 13.2675 9.16667 13.0696 9.16667 12.8335C9.16667 12.5974 9.24653 12.3995 9.40625 12.2397C9.56597 12.08 9.76389 12.0002 10 12.0002C10.2361 12.0002 10.434 12.08 10.5938 12.2397C10.7535 12.3995 10.8333 12.5974 10.8333 12.8335C10.8333 13.0696 10.7535 13.2675 10.5938 13.4272C10.434 13.587 10.2361 13.6668 10 13.6668ZM6.66667 13.6668C6.43056 13.6668 6.23264 13.587 6.07292 13.4272C5.91319 13.2675 5.83333 13.0696 5.83333 12.8335C5.83333 12.5974 5.91319 12.3995 6.07292 12.2397C6.23264 12.08 6.43056 12.0002 6.66667 12.0002C6.90278 12.0002 7.10069 12.08 7.26042 12.2397C7.42014 12.3995 7.5 12.5974 7.5 12.8335C7.5 13.0696 7.42014 13.2675 7.26042 13.4272C7.10069 13.587 6.90278 13.6668 6.66667 13.6668ZM13.3333 13.6668C13.0972 13.6668 12.8993 13.587 12.7396 13.4272C12.5799 13.2675 12.5 13.0696 12.5 12.8335C12.5 12.5974 12.5799 12.3995 12.7396 12.2397C12.8993 12.08 13.0972 12.0002 13.3333 12.0002C13.5694 12.0002 13.7674 12.08 13.9271 12.2397C14.0868 12.3995 14.1667 12.5974 14.1667 12.8335C14.1667 13.0696 14.0868 13.2675 13.9271 13.4272C13.7674 13.587 13.5694 13.6668 13.3333 13.6668ZM10 17.0002C9.76389 17.0002 9.56597 16.9203 9.40625 16.7606C9.24653 16.6009 9.16667 16.4029 9.16667 16.1668C9.16667 15.9307 9.24653 15.7328 9.40625 15.5731C9.56597 15.4134 9.76389 15.3335 10 15.3335C10.2361 15.3335 10.434 15.4134 10.5938 15.5731C10.7535 15.7328 10.8333 15.9307 10.8333 16.1668C10.8333 16.4029 10.7535 16.6009 10.5938 16.7606C10.434 16.9203 10.2361 17.0002 10 17.0002ZM6.66667 17.0002C6.43056 17.0002 6.23264 16.9203 6.07292 16.7606C5.91319 16.6009 5.83333 16.4029 5.83333 16.1668C5.83333 15.9307 5.91319 15.7328 6.07292 15.5731C6.23264 15.4134 6.43056 15.3335 6.66667 15.3335C6.90278 15.3335 7.10069 15.4134 7.26042 15.5731C7.42014 15.7328 7.5 15.9307 7.5 16.1668C7.5 16.4029 7.42014 16.6009 7.26042 16.7606C7.10069 16.9203 6.90278 17.0002 6.66667 17.0002ZM13.3333 17.0002C13.0972 17.0002 12.8993 16.9203 12.7396 16.7606C12.5799 16.6009 12.5 16.4029 12.5 16.1668C12.5 15.9307 12.5799 15.7328 12.7396 15.5731C12.8993 15.4134 13.0972 15.3335 13.3333 15.3335C13.5694 15.3335 13.7674 15.4134 13.9271 15.5731C14.0868 15.7328 14.1667 15.9307 14.1667 16.1668C14.1667 16.4029 14.0868 16.6009 13.9271 16.7606C13.7674 16.9203 13.5694 17.0002 13.3333 17.0002Z" fill="#9CA1AF"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Reference in New Issue
Block a user