Product Category Page - Copy this React, Tailwind Component to your project
Một trang Danh mục sản phẩm (Category Page) với giao diện đẹp và bố cục hợp lý, phân loại rõ ràng các sản phẩm như Laptop, Điện thoại,... 1. Tổng quan chức năng Trang danh mục hiển thị toàn bộ sản phẩm được phân loại theo các nhóm (Laptop, Điện thoại, Máy tính bảng, Phụ kiện,...). Cho phép người dùng lọc, sắp xếp, hoặc tìm kiếm sản phẩm trong từng danh mục. Giao diện cần trực quan, dễ điều hướng. 2. Bố cục trang danh mục A. Header (Phần đầu trang) Tiêu đề: Hiển thị tên danh mục lớn (ví dụ: "Danh mục sản phẩm"). Font chữ lớn, bold, nổi bật. Có thể thêm một dòng mô tả nhỏ bên dưới (ví dụ: "Khám phá tất cả sản phẩm công nghệ tại cửa hàng của chúng tôi!"). Breadcrumb (Dẫn đường): Hiển thị đường dẫn như: Trang chủ > Danh mục > Laptop. Giúp người dùng dễ dàng quay lại các trang trước. B. Bộ lọc và sắp xếp (Filters & Sorting) Vị trí: Nằm ngang bên dưới Header hoặc dọc bên trái trang. Chức năng bộ lọc: Theo giá: Thanh kéo (slider) hoặc các mức giá cố định (ví dụ: < 5 triệu, 5 10 triệu, > 10 triệu). Theo thương hiệu: Checkbox liệt kê các thương hiệu (Dell, Apple, Samsung,...). Theo tính năng: Lựa chọn thêm, ví dụ: Dung lượng RAM, Bộ nhớ, Kích thước màn hình,... Chức năng sắp xếp: Dropdown hoặc nút để sắp xếp: Giá tăng dần/giảm dần. Sản phẩm mới nhất. Đánh giá cao nhất. C. Danh mục sản phẩm chính Phân loại sản phẩm: Hiển thị từng danh mục riêng biệt với tiêu đề rõ ràng, ví dụ: Laptop (Dell, HP, Apple,...). Điện thoại (iPhone, Samsung, Xiaomi,...). Máy tính bảng (iPad, Samsung Tab,...). Phụ kiện (Chuột, Bàn phím, Tai nghe,...). Mỗi danh mục có tiêu đề (font lớn) và nút "Xem tất cả" để điều hướng đến trang con của từng danh mục. Hiển thị sản phẩm trong danh mục: Bố cục dạng lưới (Grid): 3 4 cột trên desktop, 2 cột trên tablet, 1 cột trên mobile. Mỗi ô sản phẩm bao gồm: Hình ảnh sản phẩm: Kích thước đồng đều, chất lượng cao. Hiệu ứng hover: Phóng to nhẹ hoặc hiển thị góc nhìn khác. Tên sản phẩm: Hiển thị tối đa 2 dòng, font chữ vừa phải. Giá sản phẩm: Hiển thị giá gốc (gạch ngang) và giá khuyến mãi (màu nổi bật, font to hơn). Nút "Thêm vào giỏ hàng": Button nổi bật, hiển thị trực tiếp dưới sản phẩm. Nhãn khuyến mãi (nếu có): Hiển thị góc trên cùng của ảnh, ví dụ: "Giảm 20%" hoặc "Mới". Pagination (Phân trang): Nút "1, 2, 3,..." hoặc "Xem thêm" để tải thêm sản phẩm. D. Sidebar (Tùy chọn, nếu cần) Nếu bố cục chính không sử dụng toàn bộ chiều ngang, bạn có thể thêm một sidebar bên trái để: Hiển thị danh sách danh mục con: Ví dụ: Laptop > Dell, HP, Apple,... Hiển thị bộ lọc nhanh (nếu bộ lọc không nằm ngang). E. Footer (Phần cuối trang) Phần tổng quan: Hiển thị số lượng sản phẩm hiện tại trong danh mục (ví dụ: "Hiển thị 20/100 sản phẩm"). Liên kết nhanh: Nút dẫn đến các danh mục khác hoặc trang chủ. 3. Hiệu ứng và trải nghiệm người dùng (UX/UI) Hiệu ứng hover Hover vào sản phẩm: Hình ảnh sản phẩm phóng to nhẹ (scale). Nút "Thêm vào giỏ hàng" hoặc "Xem chi tiết" xuất hiện mượt mà. Hover vào tiêu đề danh mục: Đổi màu hoặc thêm gạch chân nhẹ. Responsive Trên desktop: Hiển thị lưới sản phẩm 3 4 cột. Trên tablet: Hiển thị 2 cột, font chữ nhỏ hơn. Trên mobile: Hiển thị 1 cột, dropdown để chọn danh mục. Trạng thái rỗng Nếu danh mục không có sản phẩm, hiển thị: Thông báo: "Hiện tại không có sản phẩm nào trong danh mục này." Gợi ý liên kết đến các danh mục khác. 4. Gợi ý thiết kế tổng thể Màu sắc Nền: Màu trắng hoặc xám nhạt để làm nổi bật sản phẩm. Tiêu đề danh mục: Màu đậm (đen, xanh đậm). Nút "Thêm vào giỏ hàng": Màu sáng (xanh lá, cam, hoặc vàng). Font chữ Tiêu đề danh mục: Lớn và bold. Tên sản phẩm: Font vừa phải, dễ đọc. Giá: Font bold, nổi bật hơn. Khoảng cách Khoảng cách giữa các ô sản phẩm: 10 15px. Khoảng cách giữa các danh mục: 30 40px. Tóm tắt Trang danh mục cần có: Phân loại sản phẩm rõ ràng. Giao diện trực quan, dễ điều hướng. Hiệu ứng mượt mà, thân thiện trên mọi thiết bị.
