Products - Copy this React, Tailwind Component to your project
Develop a responsive e-commerce website for lingerie products, such as colaless, bodysuits, swimsuits, and bikinis, with the following detailed features: Homepage: A visually attractive banner highlighting promotions or featured collections. Featured categories like 'Colaless,' 'Bodysuits,' 'Swimsuits,' and 'Bikinis,' each with a representative image and link to their respective product pages. A 'Trending Now' section displaying the most popular products with an 'Add to Favorites' heart icon for each. Product Pages: Create individual product pages that include: A gallery with multiple product images and a zoom feature. Options for size and color selection. Product price and description. A functional 'Add to Cart' button. A functional 'Add to Favorites' button, saving the product to a user-specific list (use local storage or database for persistence). Include a section showcasing similar or recommended products. Favorites Page: Provide a dedicated page where users can view all their favorited items. Allow users to remove items from their favorites list. Shopping Cart: Include a summary of all items added to the cart with options to update quantities or remove products. Display the total price dynamically updated based on the cart's contents. Include a 'Proceed to Checkout with Mercado Pago' button for payment. Functional Features: Clicking on any product opens a dedicated page displaying its details and options. The 'Add to Favorites' button toggles the product's favorite status and updates the Favorites Page. Favorites and cart items persist even after refreshing the page (via local storage or database). Design Requirements: Use an elegant, modern color scheme (e.g., pastel pinks, whites, and lavender). Ensure the layout is responsive and user-friendly for mobile and desktop devices. Technologies: Frontend: HTML, CSS (preferably Tailwind CSS), and JavaScript for interactivity. React.js or Vue.js to handle dynamic rendering. Backend: Node.js with Express or Python Flask/Django for server-side operations. Database: MongoDB or MySQL for storing product, cart, and favorites data. Payment Integration: Integrate Mercado Pago SDK for secure transactions. Additional Features: Enable sorting and filtering by categories, price, and popularity. Include a search bar in the navigation for easy product discovery. Display a confirmation toast when adding items to the cart or favorites. Send an email confirmation after a successful purchase with order details. Mercado Pago Integration: Use Mercado Pago's API for payments and ensure support for multiple methods (credit card, debit card, installments). Ensure payment security and compliance with HTTPS protocols.