Products & E-commerceGPT Image 2ProfessionalDocumentary RealismDribbble StyleModernUI MockupCleanWeb Design
Giao diện landing page chương trình dinh dưỡng học đường Indonesia
Prompt tạo mockup giao diện landing page hiện đại cho chương trình dinh dưỡng học đường Indonesia với phong cách thiết kế web chuyên nghiệp chuẩn Dribbble. Giao diện tích hợp thanh điều hướng chi tiết, khu vực hero hai cột kết hợp ảnh phóng sự lớp học thực tế và khay cơm dinh dưỡng, cùng dải thống kê số liệu nổi bật.
Bản tiếng Anh
Create a modern government program landing page UI mockup for Indonesia in a clean, professional web design style, desktop widescreen aspect ratio. The page uses a white background with bold red accents, soft rounded corners, subtle gray dividers, and a polished frontend-dribbble presentation look. At the very top, build a horizontal navigation bar with 6 visible elements: the Indonesian Garuda emblem and the text "PEMERINTAH REPUBLIK INDONESIA" on the left, then 4 centered menu items labeled "Program", "Dampak", "Menu", and "Pemantauan", and on the far right a large red rounded button labeled "Program MBG" with a small people icon. Below it, design a hero section split into two columns. On the left, show a small program label line with a red bowl icon, the text "MBG", a vertical divider, and "Makan Bergizi Gratis". Under that, place a large bold headline reading "{argument name="headline text" default="Makan Bergizi, Anak Indonesia Kuat"}" in dark navy, spanning 3 lines. Add a short paragraph in Indonesian below: "Program MBG mendukung gizi harian siswa SD dan SMP melalui menu seimbang, pemantauan sekolah, dan laporan dampak yang transparan." Then place 2 call-to-action buttons side by side: a solid red button labeled "Lihat Dampak" with a right arrow, and an outlined white button with red border labeled "Panduan Sekolah" with a right arrow. On the right side of the hero, place a rounded large photo-style image framed by a sweeping white curved divider and red corner background. The image shows an Indonesian elementary classroom with 5 visible schoolchildren in white uniforms with red ties, seated at desks, warm daylight from windows, shallow depth of field, documentary-photo realism. In the foreground, on a wooden desk, show a stainless steel compartment tray meal with exactly 5 food items: white rice, mixed vegetables, a piece of fried chicken, a banana, and watermelon cubes. Beside the tray, place 1 milk carton labeled "SUSU SEGAR". Under the hero, add a full-width red statistics band with 4 equally spaced metric cards separated by thin vertical dividers. Each card has a white circular icon and bold white text. The 4 metrics are: "245.000+" with label "Sekolah Terlayani", "8,7 Juta+" with label "Siswa Penerima Manfaat", "1,2 Miliar+" with label "Porsi Disalurkan", and "98,6%" with label "Kepuasan Siswa". At the bottom center, add a 3-dot carousel indicator with the left dot active in red and the other 2 dots gray. Include a faint Indonesia map texture in the lower-left background. Use crisp typography, generous whitespace, high-end fintech/government website aesthetics, realistic UI proportions, and a production-ready landing page mockup appearance.Bản tiếng Việt
Tạo một mockup giao diện landing page hiện đại cho chương trình chính phủ Indonesia theo phong cách thiết kế web chuyên nghiệp, gọn gàng, tỷ lệ khung hình desktop widescreen. Trang web sử dụng nền trắng với các điểm nhấn màu đỏ đậm, góc bo tròn mềm mại, đường phân cách màu xám tinh tế và diện mạo trình bày bóng bẩy chuẩn Dribbble. Ở trên cùng, xây dựng thanh điều hướng ngang với 6 phần tử hiển thị: quốc huy Garuda của Indonesia cùng dòng chữ "PEMERINTAH REPUBLIK INDONESIA" ở bên trái, tiếp đến là 4 mục menu căn giữa có nhãn "Program", "Dampak", "Menu" và "Pemantauan", và ở ngoài cùng bên phải là một nút bo tròn lớn màu đỏ có nhãn "Program MBG" kèm biểu tượng nhóm người nhỏ. Phía dưới, thiết kế phần hero chia làm hai cột. Ở bên trái, hiển thị dòng nhãn chương trình nhỏ với biểu tượng chiếc bát màu đỏ, chữ "MBG", đường phân cách dọc và chữ "Makan Bergizi Gratis". Dưới đó, đặt tiêu đề lớn in đậm có nội dung "{argument name="headline text" default="Makan Bergizi, Anak Indonesia Kuat"}" màu xanh navy đậm, trải dài trên 3 dòng. Thêm một đoạn văn ngắn bằng tiếng Indonesia ở bên dưới: "Program MBG mendukung gizi harian siswa SD dan SMP melalui menu seimbang, pemantauan sekolah, dan laporan dampak yang transparan." Sau đó đặt 2 nút kêu gọi hành động cạnh nhau: một nút màu đỏ đặc có nhãn "Lihat Dampak" kèm mũi tên chỉ sang phải, và một nút viền đỏ nền trắng có nhãn "Panduan Sekolah" kèm mũi tên chỉ sang phải. Ở phía bên phải của phần hero, đặt một hình ảnh lớn dạng ảnh chụp bo tròn góc, được đóng khung bởi đường phân cách cong lượn màu trắng và nền góc màu đỏ. Bức ảnh chụp một lớp học tiểu học Indonesia với 5 học sinh nhìn thấy rõ trong bộ đồng phục trắng thắt cà vạt đỏ, ngồi tại bàn học, ánh sáng ban ngày ấm áp từ cửa sổ, độ sâu trường ảnh nông, mang tính chân thực của ảnh phóng sự tài liệu. Ở tiền cảnh, trên mặt bàn gỗ, hiển thị khay ăn chia ngăn bằng thép không gỉ với chính xác 5 món ăn: cơm trắng, rau củ hỗn hợp, một miếng gà rán, một quả chuối và các khối dưa hấu. Cạnh khay ăn, đặt 1 hộp sữa có nhãn "SUSU SEGAR". Dưới phần hero, thêm một dải thống kê màu đỏ toàn chiều rộng với 4 thẻ chỉ số cách đều nhau được phân tách bởi các đường kẻ dọc mảnh. Mỗi thẻ có một biểu tượng hình tròn màu trắng và chữ trắng in đậm. 4 chỉ số gồm: "245.000+" với nhãn "Sekolah Terlayani", "8,7 Juta+" với nhãn "Siswa Penerima Manfaat", "1,2 Miliar+" với nhãn "Porsi Disalurkan", và "98,6%" với nhãn "Kepuasan Siswa". Ở chính giữa dưới cùng, thêm một chỉ báo carousel 3 dấu chấm với chấm bên trái kích hoạt màu đỏ và 2 chấm còn lại màu xám. Đưa vào họa tiết kết cấu bản đồ Indonesia mờ ảo ở phần nền phía dưới bên trái. Sử dụng kiểu chữ sắc nét, khoảng trắng rộng rãi, tính thẩm mỹ của trang web chính phủ/fintech cao cấp, tỷ lệ UI thực tế và diện mạo mockup landing page sẵn sàng cho sản xuất.Mẹo sử dụng
Nên sử dụng tỷ lệ khung hình 16:9 để có bố cục giao diện web chuẩn desktop. Bạn có thể thay thế tiêu đề tại vị trí token giữ chỗ hoặc tinh chỉnh các món ăn trong khay cơm để phù hợp với từng chủ đề dự án cụ thể.
Nguồn và quyền sử dụng
- Nguồn
- https://x.com/F2aldi/status/2047509065040077286#reversed-0
- Tác giả gốc
- λL-D1 | AI for Buzzer 🍉
- License prompt
- CC-BY-4.0
- License ảnh
- CC-BY-4.0