Tạo một trang web dựa trên nội dung do người dùng cung cấp. Các yêu cầu về kiểu dáng của trang web như sau:

### I. Định vị Phong cách Hình ảnh - **Phong cách Vẽ tay Nghệ thuật**: Áp dụng phong cách vẽ đường nét, kết hợp thiết kế kỹ thuật số hiện đại với thẩm mỹ vẽ tay truyền thống. - **Bảng màu**: Sử dụng các màu trung tính (trắng nhạt/xám nhạt) làm nền, kết hợp với màu xám đậm cho văn bản chính và sử dụng màu đỏ cam (màu nhấn) làm màu chủ đạo. - **Phong cách Thương hiệu**: Tinh tế, nghệ thuật và ấm áp, hướng đến nhóm người dùng khó tính. ### II. Nguyên tắc cấu trúc bố cục **Phần chính (Thiết kế màn hình đầu tiên)** - Bố cục cột trái-phải (tỷ lệ vàng 60:40) - Bên trái: - Tiêu đề cỡ lớn (Phông chữ hiển thị, 72-96px), phông chữ đậm, tạo ấn tượng thị giác mạnh mẽ - Dữ liệu chính được làm nổi bật bằng màu nhấn (ví dụ: "15 Thành phố, 4749 địa điểm") - Phụ đề ngắn gọn và mạnh mẽ, nêu bật giá trị cốt lõi - Khoảng trắng rộng rãi, tạo cảm giác cao cấp - Bên phải: - Hình minh họa vẽ tay tùy chỉnh, chiếm 50% không gian hình ảnh - Phong cách minh họa nhất quán: Vẽ đường nét + điểm nhấn màu sắc địa phương - Nội dung minh họa được tích hợp sâu sắc với câu chuyện thương hiệu - **Thiết kế thanh điều hướng** - Thanh điều hướng trên cùng tối giản, vị trí cố định - Logo + 2-3 mục menu chính - Nhóm biểu tượng bên phải (tìm kiếm/yêu thích/menu) - Nền trong suốt hoặc trắng tinh với bóng mờ nhẹ - **Khu vực thẻ nội dung** - Bố cục lưới thẻ (3-4 cột, đáp ứng) - Mỗi thẻ bao gồm: - Tiêu đề (Tiêu đề cấp 3, 32-40px) - Mô tả (2-3 dòng, 16-18px, chiều cao dòng 1.6) - Hình minh họa vẽ tay đi kèm (phù hợp với phong cách hình ảnh chính) - Nền sáng (#F5F3F0), góc bo tròn (8-12px) - Trạng thái khi rê chuột: Hơi nhô lên + bóng đổ đậm hơn - ### III. Thông số kỹ thuật hệ thống minh họa **Hướng dẫn tạo hình minh họa** 1. 2. **Xử lý đường nét**: - Sử dụng các đường vẽ tay không đều 1-2px để mô phỏng kết cấu tranh vẽ thực tế - Duy trì các đường nét mượt mà với một chút tính nhân tạo, tránh sự máy móc quá mức. 3. **Cách sử dụng màu sắc:** - 80% đường kẻ màu xám + 20% màu nền thương hiệu - Màu cam đỏ chỉ được sử dụng để nhấn mạnh các yếu tố (người, cửa sổ, các tòa nhà chính) - Nền sử dụng màu be chuyển sắc (#FDFBF7 → #F5F1EB) - 5. **Bố cục cảnh:** - Cảnh đô thị: kết hợp các tòa nhà mang tính biểu tượng + cảnh sinh hoạt thường nhật - Góc nhìn từ trên cao hoặc phối cảnh đẳng cự - Thêm các hình nhỏ để tăng cường câu chuyện và sự gần gũi - 7. **Mật độ chi tiết:** - Chi tiết tiền cảnh phong phú, trung cảnh được đơn giản hóa vừa phải và hậu cảnh được phác thảo - Duy trì thứ bậc thị giác, hướng mắt người xem đến thông tin chính - 9. ### IV. Hệ thống phông chữ - **Phông chữ hiển thị (Tiêu đề):** Phông chữ Serif, đậm và mạnh mẽ (ví dụ: Freight Display, Tiempos) - **Phông chữ nội dung (Văn bản chính):** Phông chữ Sans-serif, dễ đọc (ví dụ: Inter, Manrope) - **Tỷ lệ kích thước phông chữ**: Sử dụng tỷ lệ mô-đun (1.25 hoặc 1.333) - - **Mức độ đậm của phông chữ**: Nhẹ (300) / Thường (400) / Trung bình (500) / Đậm (700) - ### V. Chi tiết tương tác - - **Hoạt ảnh nhỏ**: Thẻ nổi lên 4-8px khi di chuột, thời gian chuyển tiếp 300-400ms - - **Trạng thái tải**: Sử dụng màn hình khung xương để duy trì tông màu thương hiệu - - **Điểm ngắt đáp ứng**: - - Máy tính để bàn: 1440px trở lên - - Máy tính bảng: 768-1439px - - Di động: 375-767px - - ### VI. Yêu cầu về sản phẩm thiết kế Mỗi sản phẩm thiết kế cần bao gồm: 1. 2. Thứ tự ưu tiên hình ảnh rõ ràng (đạt được thông qua kích thước/màu sắc/khoảng trắng) 3. 4. Ít nhất một hình minh họa tùy chỉnh (liên quan mật thiết đến nội dung, được tạo bằng Nano Banana Pro) 5. 6. 2-3 điểm nhấn màu sắc (không vượt quá 7. 8. Khoảng trống thoáng đãng (khoảng cách giữa các phần ≥ 120px) 9. 10. Đường dẫn hành động rõ ràng cho người dùng 11. --- **Triết lý thiết kế**: Sử dụng ngôn ngữ hình ảnh nghệ thuật để truyền tải sự độc đáo và ấm áp của thương hiệu. Mỗi pixel đều kể một câu chuyện, không chỉ đơn thuần là thể hiện chức năng. Thiết kế nên khiến người dùng cảm thấy, "Đây là dành cho những người biết trân trọng cuộc sống," chứ không phải là một sản phẩm thương mại lạnh lùng.

Tất cả hình ảnh trên trang web đều được tạo ra bằng phần mềm Nano Banana Pro.