Styled Box - Copy this React, Mui Component to your project
“Tạo giao diện trang chủ với các yêu cầu sau: 1. Background: • Sử dụng ảnh (background) full màn hình, kéo dài tràn viền. Slide ảnh tự động cuộn bên dưới 2. Header: • Header nằm ở phía trên cùng của trang, chứa các mục: Home, Bảng giá, Hướng dẫn. • Các mục này sử dụng font chữ sáng, có hiệu ứng text-shadow nhẹ để nổi bật, và là các liên kết có thể chuyển hướng. 3. Nội dung chính ở giữa trang: • Ở chính giữa trang, hiển thị đoạn text như sau: “Chào mừng đến với [Tên Website]! Hãy khám phá những tính năng tuyệt vời của chúng tôi.” • Đoạn text này sử dụng font chữ lớn (ví dụ: font-size: 32px) và sáng màu (ví dụ: #FFFFFF) để thu hút sự chú ý. • Đặt đoạn text ở trung tâm cả theo chiều ngang và dọc (display: flex; justify-content: center; align-items: center; height: 100vh;). 4. Nút Click để mở hộp đăng nhập: • Bên dưới đoạn text, có một nút với nội dung: “Click để đăng nhập”. • Nút có thiết kế hiện đại: • Màu nền sáng, với hiệu ứng hover đổi sang tông đậm hơn (ví dụ: background-color: #FFFFFF; color: #000000;). • Có viền bo tròn nhẹ (border-radius: 5px). • Khi người dùng click vào nút, một hộp đăng nhập sẽ xuất hiện ở giữa màn hình. 5. Hộp đăng nhập: • Hộp đăng nhập sử dụng hiệu ứng backdrop-filter: blur(10px) để làm mờ background phía sau. • Hộp đăng nhập bao gồm: • Trường nhập Email. • Trường nhập Password. • Nút Đăng nhập. • Thiết kế hộp đăng nhập tương tự như đã mô tả trong phần trước (sử dụng màu trắng mờ và đổ bóng nhẹ). 6. Tổng quan giao diện: • Giao diện cần hiện đại, tối giản và tập trung vào trải nghiệm người dùng. • Các hiệu ứng chuyển động nhẹ nhàng (animation) khi hộp đăng nhập xuất hiện hoặc khi hover vào nút.”
