Blood Donation Modal - Copy this React, Tailwind Component to your project

Thiết kế một nút hành động nổi bật (Call-to-Action button) có giao diện trực quan và dễ nhận biết, đóng vai trò là điểm khởi đầu cho quy trình hiến/nhận máu. Nút này cần được đặt tại vị trí chiến lược trên giao diện (ví dụ: phần hero hoặc trung tâm trang) nhằm thu hút sự chú ý của người dùng ngay từ cái nhìn đầu tiên. Khi người dùng tương tác, nút sẽ kích hoạt một modal động, hiển thị với hiệu ứng chuyển cảnh mượt mà thông qua các chuyển động mềm (animation) nhằm tăng tính hấp dẫn và tạo cảm giác liền mạch trong thao tác. Modal hiển thị dưới dạng một hộp thoại trung tâm (centered dialog) có thiết kế tối giản nhưng hiện đại, sử dụng các thư viện UI tiên tiến như shadcn/ui, Radix UI để đảm bảo khả năng tương thích với nhiều nền tảng và giao diện. Kết hợp với framer-motion để bổ sung hiệu ứng chuyển động mượt và phản hồi tương tác, modal này cần hỗ trợ theme sáng/tối tự động, đảm bảo hiển thị tốt trên cả desktop và thiết bị di động (responsive design). Bên trong modal, người dùng được mời lựa chọn giữa hai loại biểu mẫu: Đăng ký hiến máu: Dành cho người dùng muốn tự nguyện cho máu. Biểu mẫu sẽ yêu cầu thông tin như: họ tên, số điện thoại, ngày sinh, nhóm máu, thành phần máu muốn hiến, ngày dự kiến, thời gian khả dụng, địa điểm hiến máu, chiều cao, cân nặng và tiền sử y tế. Yêu cầu nhận máu: Dành cho người hoặc người thân đang cần máu. Biểu mẫu sẽ bao gồm các trường: tên bệnh nhân, nhóm máu, thành phần máu cần, số lượng, tình trạng khẩn cấp, ngày cần máu, bệnh viện điều trị, số điện thoại liên hệ và ghi chú từ bác sĩ nếu có. Cả hai biểu mẫu cần được thiết kế với bố cục rõ ràng, logic, có hướng dẫn nhập liệu và kiểm tra hợp lệ đầu vào (form validation). Thông tin nhập vào từ người dùng sẽ được tích hợp trực tiếp với cơ sở dữ liệu trung tâm (ví dụ: bảng DonationRequest và BloodRequest) để đảm bảo luồng dữ liệu chính xác, bảo mật và dễ truy xuất. Modal cần hỗ trợ khả năng đóng/mở linh hoạt, có xác nhận gửi thông tin, và xử lý đầy đủ các trường hợp lỗi người dùng (thiếu dữ liệu, sai định dạng). Ngoài ra, modal nên có khả năng mở rộng để tích hợp thêm các chức năng trong tương lai như: đăng nhập xác thực, lưu hồ sơ hiến máu, gợi ý địa điểm hiến máu gần nhất dựa trên vị trí...