Welcome to my product details section project for a fictional e-commerce platform. This section is designed to be fully functional and responsive, providing users with detailed product information and interactive features.
In this project, I created a responsive product details page that includes options for product selection, review ratings, a gallery of images, and essential information like fabric care and shipping. The page dynamically updates based on the selected product options.
- Price and Discounts: Displays list price vs. sale price, with discount labels for percentage and cash discounts.
- Product Reviews: Shows average rating and rating stars, with a link to view all reviews or a message for no reviews.
- Product Image Gallery: Displays multiple images, allowing users to select thumbnails to view different images. Images update according to the selected color variant.
- Product Options: Includes color swatches and size options, with different states for normal, hover, focus, selected, and out-of-stock. Updates available sizes based on the selected color.
- Quantity Modifier and Add to Cart: Users can adjust the quantity of the product and add it to their cart. Quantity buttons are disabled based on stock availability.
- Information Accordion: Provides expandable sections for features, fabric care, shipping, and other product details.
- Text Size: Adjusts based on screen width.
- Responsive Layout: Stacks content vertically on smaller screens and aligns horizontally on wider screens.
- Ensured compatibility with major browsers including Chrome, Firefox, and Safari.
- Tailwind CSS
- Next.js
- React.js
- Daisy UI for frontend components
Thank you for checking out my project!