Smart City Frontend #2: Implementasi Halaman Beranda sebagai Pusat Informasi Daerah

1. Latar Belakang

Halaman beranda (homepage) merupakan halaman utama yang pertama kali diakses oleh pengguna saat membuka portal informasi. Halaman ini memiliki peran penting sebagai pusat informasi awal yang memberikan gambaran umum mengenai isi dan tujuan dari portal. Dalam portal smart city yang dikembangkan, halaman beranda dirancang untuk menyajikan informasi mengenai Kabupaten Purbalingga secara ringkas namun tetap informatif.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau yang lainnya)

- Visual Studio Code (atau text editor lainnya)

- Laravel 12.0

- React

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Perancangan Struktur Beranda

Struktur halaman beranda dirancang dengan membagi konten ke dalam beberapa bagian utama agar lebih terorganisir dimana setiap bagian disusun secara berurutan dari informasi umum ke informasi yang lebih spesifik.

Struktur home page yang digunakan meliputi:

Section Hero

Tab yang berisi : Pengenalan Kota, Informasi sejarah, Visi dan Misi, serta Profil Pejabat Daerah

Preview peta digital Purbalingga

Informasi Wisata

Informasi Berita

Pelayanan Publik

Event

Pengumuman

Data Statistik Kota dari BPS

3.2 Implementasi Tampilan Beranda

Pada tahap ini dilakukan implementasi desain ke dalam bentuk tampilan nyata menggunakan framework Laravel dan library React.

a. Section Hero

Section hero merupakan bagian pertama yang dilihat oleh pengguna. Background dari section ini menggunakan video yang di looping.

b. Tab Pengenalan Kota

Bagian ini menampilkan 4 informasi singkat yang dibungkus dengan tab interaktif, yaitu pengenalan singkat, sejarah, visi dan misi, serta profil pejabat saat ini.