Home Page - Copy this React, Tailwind Component to your project

Hãy thiết kế theo xu hướng hiện đại 1. Trang Landing Page (Home Page) Nội dung: Thanh điều hướng (Navbar): Gợi ý thiết kế: Màu sắc: Sử dụng màu nền tối hoặc trung tính (e.g., trắng, xám nhạt) để dễ dàng tích hợp logo. Font chữ: Font sans serif (e.g., Roboto, Open Sans) cho cảm giác hiện đại. Hiệu ứng hover: Khi di chuột vào các mục, đổi màu chữ hoặc thêm gạch chân (underline). Logo: Đặt bên trái, kích thước vừa phải. Vị trí: Cố định trên cùng màn hình để người dùng dễ truy cập. Nút Đăng nhập/Đăng ký: Sử dụng nút màu nổi bật (e.g., xanh lá cây hoặc đỏ) để thu hút sự chú ý. Banner quảng cáo: Gợi ý thiết kế: Kích thước: Full width, chiều cao chiếm khoảng 30 50% màn hình. Hình ảnh: Chọn ảnh chất lượng cao, sống động về sản phẩm hoặc chương trình khuyến mãi. Text overlay: Dùng tiêu đề lớn (font đậm, khoảng 48px), kèm mô tả ngắn gọn bên dưới (font khoảng 18px). Nút Call to Action (e.g., "Xem Ngay"): Sử dụng màu tương phản với banner (e.g., nền banner xanh, nút màu cam). Danh mục sản phẩm: Gợi ý thiết kế: Bố cục: Grid layout với 3 4 sản phẩm trên mỗi hàng, khoảng cách đều nhau (gutter khoảng 16px). Card sản phẩm: Hình ảnh chiếm 60 70% chiều cao card. Tên sản phẩm, giá, và nút "Xem chi tiết" bên dưới. Hiệu ứng hover: Phóng to hình ảnh sản phẩm nhẹ (scale 1.05) hoặc đổi màu nút. Tiêu đề danh mục: Đặt phía trên (e.g., "Điện thoại bán chạy"), sử dụng font 24px đậm, màu nổi bật. Tìm kiếm: Gợi ý thiết kế: Thanh tìm kiếm: Chiều rộng chiếm 60% màn hình, đặt ở giữa banner hoặc phía trên sản phẩm. Placeholder (chữ trong ô) màu xám nhạt, font chữ nhỏ gọn. Icon tìm kiếm (hình kính lúp) đặt trong nút bên phải ô tìm kiếm. Footer: Gợi ý thiết kế: Màu sắc: Tông tối (đen/xám đậm) với chữ trắng hoặc xám nhạt. Bố cục: Cột thông tin liên hệ (email, số điện thoại, địa chỉ). Cột liên kết nhanh (Chính sách bảo mật, Điều khoản sử dụng, Hỗ trợ khách hàng). Cột liên kết mạng xã hội (Icon Facebook, Instagram, LinkedIn). 2. Trang Đăng nhập/Đăng ký Nội dung: Form Đăng nhập: Gợi ý thiết kế: Bố cục: Hai cột, một bên hiển thị form đăng nhập, một bên là hình ảnh minh họa hoặc slogan (e.g., "Mua sắm dễ dàng, tiện lợi"). Form: Input fields (Email/SĐT, Mật khẩu): Bo góc nhẹ, màu nền trắng, viền mỏng (xám nhạt). Nút Đăng nhập: Màu sắc nổi bật (e.g., xanh dương hoặc cam), kích thước lớn. Hiệu ứng: Khi nhấn nút, đổi màu nhẹ (e.g., xanh đậm hơn). Checkbox "Nhớ tài khoản" và link "Quên mật khẩu" đặt cạnh nhau. Phần đăng nhập qua mạng xã hội: Sử dụng icon Google/Facebook với màu sắc đặc trưng. Đặt nút này ở dưới cùng form, kích thước lớn. Form Đăng ký: Gợi ý thiết kế: Bố cục tương tự form đăng nhập nhưng thêm nhiều trường hơn (e.g., Tên, Xác nhận mật khẩu). Hiển thị thông báo lỗi ngay bên dưới input (e.g., "Email không hợp lệ"). 3. Trang Quản lý Hồ sơ Người dùng Nội dung: Thông tin cá nhân: Gợi ý thiết kế: Sử dụng layout 2 cột: Cột trái là menu (e.g., "Thông tin cá nhân, Địa chỉ, Lịch sử đơn hàng"), cột phải hiển thị nội dung. Các trường thông tin (e.g., Họ tên, Số điện thoại): Bo góc, viền mỏng. Nút "Chỉnh sửa" hoặc "Lưu" màu xanh dương hoặc xanh lá cây. Lịch sử đơn hàng: Gợi ý thiết kế: Hiển thị dưới dạng bảng (table): Cột: Mã đơn hàng, Ngày đặt, Tổng tiền, Trạng thái. Nút "Xem chi tiết" cuối mỗi hàng, khi hover đổi màu nhẹ. 4. Trang Danh mục Sản phẩm (Product Page) Nội dung: Danh sách sản phẩm: Gợi ý thiết kế: Grid layout với card sản phẩm tương tự trên Landing Page. Thanh phân trang đặt ở dưới cùng, sử dụng số hoặc nút "Trang trước/sau". Bộ lọc: Gợi ý thiết kế: Sidebar bên trái với checkbox hoặc thanh trượt (slider) để lọc giá. Icon bộ lọc để mở/tắt sidebar nếu trên giao diện di động. Chi tiết sản phẩm: Gợi ý thiết kế: Sử dụng layout 2 cột: Cột trái: Hình ảnh sản phẩm (zoom được khi hover). Cột phải: Tên sản phẩm, giá, mô tả, nút "Thêm vào giỏ hàng". 5. Trang Giỏ hàng Nội dung: Danh sách sản phẩm: Gợi ý thiết kế: Card sản phẩm với thông tin cơ bản và input chỉnh số lượng. Tổng giá tiền hiển thị to và nổi bật. Nút "Xóa" đặt cạnh mỗi sản phẩm. 6. Trang Thanh toán Nội dung: Thông tin giao hàng: Gợi ý thiết kế: Form nhập địa chỉ: Sử dụng nhiều trường input, kèm tooltip nếu cần giải thích. Nút "Chỉnh sửa" nếu người dùng muốn thay đổi thông tin. Tóm tắt đơn hàng: Gợi ý thiết kế: Card tổng hợp bên phải với màu nền nhạt, viền mỏng. 7. Trang Quản trị (Admin Dashboard) Nội dung: Dashboard tổng quan: Gợi ý thiết kế: Sử dụng biểu đồ cột (Bar chart) và biểu đồ tròn (Pie chart). Các chỉ số chính (e.g., Tổng doanh thu, Tổng số đơn hàng) được hiển thị to, rõ ràng. Quản lý sản phẩm: Gợi ý thiết kế: Bảng hiển thị sản phẩm với nút "Sửa" và "Xóa". Nút "Thêm mới sản phẩm" đặt nổi bật ở góc trên phải. Quản lý đơn hàng: Gợi ý thiết kế: Bảng danh sách đơn hàng với trạng thái được mã hóa màu (e.g., "Đã giao" màu xanh lá, "Đang xử lý" màu cam).