Default Component - Copy this React, Tailwind Component to your project
"Please generate a responsive e-commerce website layout for a cosmetics store inspired by the Cocolux design. The layout should include the following sections and features: Header: A top bar containing the store’s logo on the left. A navigation menu featuring main product categories (e.g., Skincare, Makeup, Haircare, etc.). A search bar to allow users to quickly find products. Icons or links for user account, orders, and a shopping cart. Below the main header, include a secondary bar or banner to highlight promotions or featured product categories. Homepage Content: A hero banner or slideshow showcasing special deals or new product lines. Several product category sections, each with a few featured products displayed in a grid or carousel format. Each product card should show: Product image Product name Short description Price Optional: An “Add to Cart” button or “View Details” button A “Hot Deals” or “Best Sellers” section with discounted products or popular items. Footer: A creative layout that fits the overall design. Sections for: About Us / Contact Terms & Conditions / Privacy Policy Social media icons Newsletter subscription form Product Detail Page: A main image gallery with the ability to scroll horizontally through product images. Display the product name, price, brand, and a short description. An “Add to Cart” button. A more detailed description or specifications section below. Optionally include a “Related Products” or “You May Also Like” carousel beneath the product details. Shopping Cart Page: A clear list of the products added to the cart. Each item should display a thumbnail image, product name, price, quantity selector, and subtotal. An option to remove individual products or update quantities. A summary of the total cost, including any taxes or shipping fees. A “Proceed to Checkout” button. Additional Notes: The design should be clean, modern, and user-friendly, following best practices for e-commerce websites. Ensure the layout is responsive, adapting well to both desktop and mobile devices. Use a consistent color scheme that aligns with the cosmetics theme (e.g., soft pastels or neutral tones). You may add subtle hover effects, animations, or interactive elements to enhance the user experience. Please provide the complete HTML, CSS, and JavaScript (or the framework of your choice) for the layout, ensuring that all specified sections are included and functional.
