Uploaded Product component UI Kit

[Rishika-S-V]

Fixes #33

Description

The Product Component introduces significant enhancements to the e-commerce UI Kit, specifically focusing on the Product Card, Product Carousel/Slider, Product List and Grid View, and Product Details Page. These updates aim to improve the visual presentation, usability, and overall user experience when browsing and exploring product-related information within the application.

Motivation

The motivation behind these changes is to enhance the overall shopping experience for users by providing a visually appealing, informative, and intuitive presentation of products. The previous components had limitations in terms of visual consistency, information visibility, and interactivity. By improving the Product Card, Carousel/Slider, List and Grid View, and Product Details Page, we aim to elevate the user's browsing experience, increase engagement, and drive conversions.

Changes Made

• Enhanced the Product Card with improved visuals, pricing, and essential details.
• Optimized the Product Carousel/Slider for dynamic and interactive product browsing.
• Introduced toggleable List and Grid View options for flexible display preferences.
• Refined the Product Details Page with an improved layout and comprehensive product information.

Checklist

• [x] Code follows the project's style guidelines.
• [x] Tests have been added or updated to cover the changes.
• [ ] Documentation has been updated, if applicable. Mark ☑️ in the component section of readme.md file.
• [x] All new and existing tests pass.
• [ ] The code has been reviewed by at least one other developer.
• [x] The pull request is linked to the corresponding issue, if applicable.

Screenshots (if applicable)

Product Card

The Product Card has undergone improvements to provide a more visually appealing and informative representation of individual products. The design updates include enhanced product imagery, clearer pricing and discount information, and improved visibility of essential details such as product name, ratings, and availability. These enhancements make it easier for users to evaluate and select products at a glance.

Product Card- Light Mode

Product Card - Dark Mode

Product Carousel/Slider

The Product Carousel/Slider has been optimized to showcase multiple products in a dynamic and interactive manner. Users can now easily swipe or click through a collection of product images and details, providing a more engaging and immersive browsing experience. This updated component allows for better product discovery and comparison.

Product Carousel/Slider - Light Mode

Product carousel/Slider - Dark Mode

Product List & Grid view

The Product List and Grid View is to offer flexible viewing options based on user preferences. Users can now toggle between list and grid layouts, allowing them to choose the most suitable display format for their browsing needs. This customization feature enhances user satisfaction and provides a more personalized shopping experience.

Product List & Grid view - Light Mode

Product List & Grid view - Dark Mode

Product Details Page

The Product Details Page has the presentation and accessibility of comprehensive product information. The layout enhancements include clearer product descriptions, specifications, customer reviews, and related products, enabling users to make well-informed purchasing decisions. These updates enhance usability and provide a more comprehensive view of each product's details.

Product Details Page - Light Mode

Product Details Page - Dark Mode

[Lovelyfin00]

Hey @Rishika-S-V Thanks for putting this PR up We'll review it merge if all is good

[Lovelyfin00]

LGTM