Product Display - Copy this React, Tailwind Component to your project

Hình ảnh sản phẩm (Product Images) Hình ảnh chất lượng cao: Hiển thị nhiều góc chụp khác nhau của sản phẩm (từ trên, bên cạnh, đằng trước, đằng sau). Zoom in feature: Khi người dùng di chuột lên ảnh, có thể phóng to để xem chi tiết chất liệu, đường chỉ may, hoặc logo. Carousel: Để người dùng có thể lướt qua nhiều hình ảnh một cách dễ dàng. 2. Tiêu đề và mô tả ngắn (Product Title & Short Description) Tên sản phẩm: Nổi bật với font chữ lớn và dễ đọc, ví dụ như: "Sneaker Classic 2024". Mô tả ngắn: Một đoạn văn ngắn gọn, mô tả các điểm nổi bật của sản phẩm như chất liệu, thiết kế, phong cách (casual, thể thao, lịch lãm), ví dụ: "Sneaker phong cách hiện đại, đế êm ái, thích hợp cho mọi hoạt động hàng ngày." 3. Giá sản phẩm (Price) Giá bán: Hiển thị lớn, rõ ràng, thường ở vị trí dưới tiêu đề sản phẩm. Giảm giá (nếu có): Nếu sản phẩm có giảm giá, hãy hiển thị giá gốc bị gạch ngang và giá mới sau khi giảm với màu nổi bật, ví dụ: 2.500.000đ ~~~3.000.000đ~~~ Các chương trình khuyến mãi (lấy từ"activePromotions": [] : Hiển thị các ưu đãi như “Mua 1 tặng 1” hoặc “Giảm 20% cho đơn hàng đầu tiên”. Cần có một ô để hiển thị các khuyến mãi 4. Chọn kích cỡ và màu sắc (Size & Color Options) Tùy chọn kích cỡ: Hiển thị rõ ràng các kích cỡ có sẵn (ví dụ: 39, 40, 41, 42). Tùy chọn màu sắc: Cho phép chọn màu bằng các nút với hình ảnh mẫu màu thực tế, ví dụ: Đen, Trắng, Đỏ. Chỉ thêm những size mà api có để đưa vào cho khách hàng chọn 5. Nút thêm vào giỏ hàng (Add to Cart Button) CTA nổi bật: Nút "Thêm vào giỏ hàng" hoặc "Mua ngay" phải nổi bật và dễ thấy. Có thể sử dụng màu tương phản như đỏ, xanh lá cây để thu hút sự chú ý. Thông báo khi chọn size/màu: Nếu người dùng chưa chọn size hoặc màu, hệ thống sẽ nhắc nhở để đảm bảo họ đã chọn đầy đủ trước khi thêm vào giỏ. 7. Đánh giá và nhận xét khách hàng (Customer Reviews) Đánh giá tổng thể: Hiển thị điểm trung bình từ 1 5 sao. Phân tích đánh giá: Cho phép lọc đánh giá theo mức sao, để người dùng dễ dàng xem đánh giá tích cực hay tiêu cực. Nhận xét chi tiết: Người dùng có thể để lại bình luận kèm hình ảnh thật của sản phẩm mà họ đã mua, điều này tạo lòng tin cho khách hàng mới. Nút “Viết đánh giá”: Khuyến khích người mua chia sẻ trải nghiệm của họ về sản phẩm. 8 api : https://domstore.azurewebsites.net/#/Products/get_api_v1_products__id_ Api mã sản phẩm https://domstore.azurewebsites.net/api/v1/products/66f6405f15cc467edadcd480 Thông tin get từ api có dạng { "status": "success", "message": "Lấy dữ liệu chi tiết Product thành công", "data": { "_id": "66f6405f15cc467edadcd480", "name": "Giày Ultraboost 6555415", "description": "Phiên bản cải tiến của Ultraboost 5, mang lại trải nghiệm chạy bộ tuyệt vời hơn.", "price": 4500000, "promotionalPrice": null, "imageUrl": [ "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/5bbd6a3af12a4d7d8dc9c063ad1f67cf_9366/Giay_Bong_Ro_D.O.N_ISSUE_6_Like_Water_Mau_xanh_da_troi_IG9087_HM1.jpg", "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/5b751b68084f4dd988ac872c46aa538c_9366/Giay_Bong_Ro_D.O.N_ISSUE_6_Like_Water_Mau_xanh_da_troi_IG9087_HM3_hover.jpg", "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/c5cb2831f9694855a9e2fd67c40c3329_9366/Giay_Bong_Ro_D.O.N_ISSUE_6_Like_Water_Mau_xanh_da_troi_IG9087_HM4.jpg", "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7a4ac0f1bf25484e8407512c9261d348_9366/Giay_Bong_Ro_D.O.N_ISSUE_6_Like_Water_Mau_xanh_da_troi_IG9087_HM5.jpg", "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/8dd1ee0b3ab8407385a7105db2f9f581_9366/Giay_Bong_Ro_D.O.N_ISSUE_6_Like_Water_Mau_xanh_da_troi_IG9087_HM6.jpg" ], "category": { "name": "Giày chạy bộ nữ" }, "totalRate": 4.5, "colorSummary": [ { "color": "White", "sizes": [ { "size": 43, "quantity": 150 } ], "totalQuantity": 150 }, { "color": "Blue", "sizes": [ { "size": 44, "quantity": 120 }, { "size": 45, "quantity": 120 } ], "totalQuantity": 240 } ], "totalQuantity": 390, "totalColors": 2, "totalSizes": 3, "reviews": [], "activePromotions": [] } }