PHASE 3 · NATIVE PENPOT COMPONENT LIBRARYGiao diện ChoThueDaNang
Giao diện ChoThueDaNang
bám sát website tham chiếu.
Hệ component thực tế để xây dựng website cho thuê nhà, lấy bố cục và mật độ thông tin của Chothuenha.com.vn làm tham chiếu, sử dụng chính xác màu Azure Bloom V1.0.
Phạm vi: Đây là bản ghép component để review Phase 3, chưa phải website hoàn chỉnh Phase 4. Xem báo cáo màu Phase 2
01 / DESKTOP COMPONENT ASSEMBLY
1440px · DESKTOPBố cục website trên Desktop
Phóng to để xem ảnh Penpot nguyên bản ở cùng viewport 1440px, gồm cả danh sách và chi tiết bất động sản.
Đo theo reference Playwright:Header 1440×154Card ngang 785×252Gallery 785×380Contact Panel 360×301
02 / RESPONSIVE ASSEMBLY
390px · MOBILEGiao diện trên Mobile
Giữ chức năng tìm kiếm và nội dung bất động sản, nhưng chuyển sang các mẫu component gọn hơn.
Đo theo reference Playwright:Header 390×128Card ngang 370×174Gallery 370×250Contact Panel 370×239
03 / REUSABLE COMPONENT LIBRARY
NATIVE PENPOT37 nhóm component · 85 variants
Thư viện sử dụng các native component master và variant có thể thay đổi trong file Penpot, không phải các khung hình tĩnh.
GATE C / UPCOMING PHASE 4
Tiếp theo sẽ là thiết kế từng trang hoàn chỉnh.
Phase 4 sẽ dùng lại toàn bộ thư viện component này, tiếp tục đối chiếu với Chothuenha.com.vn và thay hình placeholder bằng tài sản hình ảnh phù hợp.