Setiap mockup memenuhi keperluan halaman utama (Dashboard) dalam dokumen sebut harga, dan menggunakan identiti JAWHAR: biru nila, ungu kaligrafi JAWHAR dan emas, bersama motif Islam (gerbang mihrab, bintang lapan penjuru, jubin mozek dan kaligrafi Arab).
Berwibawa dan khusyuk. Slider banner sekeping skrin penuh, visi & misi rasmi, rajah ekosistem JAWHAR, dan bab teras dengan aliran kerja serta peranan sebenar JAWHAR.
Cerah dan mesra rakyat. Slider banner sekeping tema ungu dengan jubin mozek, pemilih “Apa yang anda perlukan hari ini?” mengikut jenis pengguna, dan garis masa sejarah JAWHAR.
Portal perkhidmatan. Slider banner sekeping di atas grid bento, lengkung laluan matahari untuk waktu solat, alat zakat, Wakaf Online ikut negeri dan semakan umrah.
Rujukan: spesifikasi “Halaman Utama (Dashboard)” dalam dokumen sebut harga, item (a) hingga (e).
| Keperluan | Mockup 1 · Mihrab Malam | Mockup 2 · Mozek Siang | Mockup 3 · Portal Bento |
|---|---|---|---|
| (a) HeaderMedia sosial, pertukaran bahasa, menu utama | ✓Bar utiliti: 6 media sosial, BM/EN, saiz teks & kontras. Menu utama dengan menu lungsur. | ✓Bar utiliti: tarikh Hijrah, media sosial, BM/EN, kebolehcapaian. Menu utama + butang Hubungi Kami. | ✓Header dua tingkat: pautan pantas (FAQ, Hubungi, Aduan, Peta Laman), media sosial, BM/EN. Carian dalam header. |
| (b) SliderImej maklumat dan pengumuman terkini | ✓Banner sekeping 1280×580 dalam lajur kandungan: Visi (pegawai JAWHAR), Wakaf (masjid & aset wakaf), Umrah, Zakat, Jurnal (ahli akademik). Anak panah kiri/kanan, titik penunjuk, butang jeda, versi mudah alih. | ✓Banner sekeping tema ungu: 5 banner baharu + Anugerah Pekerja Contoh (banner asli dipaparkan penuh atas latar kabur). | ✓Banner sekeping di atas grid bento: 4 banner baharu + banner Tun Abdullah. |
| (c) Kandungan utamaSegmen wakaf, zakat, haji dan umrah | ✓“Apa itu JAWHAR” + rajah ekosistem; tiga bab teras dengan aliran 4 langkah dan “Peranan JAWHAR”. | ✓Pemilih keperluan (berwakaf, zakat, Tanah Suci, kajian, agensi) + 3 kad teras + fungsi dan sejarah JAWHAR. | ✓Bento “Apa itu JAWHAR” + kad teras dengan aliran 3 langkah + alat zakat, wakaf dan semakan umrah. |
| (d) Pautan agensi / sistem | ✓14 bendera MAIN, 8 logo agensi JPM (Agama), sistem & portal. | ✓Jalur bendera 14 MAIN bergerak, logo agensi JPM, senarai sistem. | ✓Direktori: grid bendera MAIN, logo agensi, cip sistem. |
| (e) FooterPerhubungan, penafian, polisi, statistik pelawat | ✓Alamat, telefon, e-mel; Penafian, Dasar Privasi/Keselamatan/e-Penyertaan; statistik pelawat. | ✓Sama, dengan waktu operasi dan jalur mozek. | ✓Sama, dengan kad statistik pelawat. |
| Tambahan dari portal sedia ada | Waktu solat Putrajaya, tarikh Hijrah, pembantu maya Embun@Ai, perkhidmatan digital (e-Penerbitan, Jurnal, Khairat, Insight, Harga Emas, Hotel Wakaf, Kalkulator Zakat), aktiviti media sosial, notis sebut harga. | ||
Logo, Jata, bendera negeri, logo agensi dan banner sedia ada dari portal JAWHAR. Watak dalam banner dijana AI (bukan orang sebenar) dengan pakaian Malaysia: baju kurung, tudung, baju Melayu bersamping dan songkok. Boleh diganti dengan foto rasmi JAWHAR. Foto masjid dan Kaabah dari Magnific.
Visi, misi, fungsi, motto dan sejarah ikut halaman Info Korporat JAWHAR. Tajuk dan tarikh pengumuman ikut halaman sebenar (tarikh terbit atau kemas kini). Fakta MKSU ikut halaman Majlis Kawal Selia Umrah. Waktu solat dan statistik pelawat ikut portal semasa (25 Okt 2026).
Portal Awqaf UAE (slider + waktu solat), Lembaga Zakat Selangor (ayat al-Quran, kisah manusia, tab Muzakki/Asnaf), MUIS Singapura (bar waktu solat, foto manusia) dan rujukan Pinterest.
Saiz teks, kontras tinggi, fokus papan kekunci, “langkau ke kandungan” dan gerakan dikurangkan bagi pengguna yang memilihnya.