# Rencana Kolaborasi Redesign UI/UX Ruang Penyuluh 2.0 (Google Stitch & Antigravity)

Dokumen ini dibuat untuk menyinkronkan konteks pekerjaan antara agen Antigravity di rumah, pengguna (User), dan agen Antigravity di kantor.

## 📌 Latar Belakang & Masalah
* **Masalah Utama:** Aplikasi mendapat teguran hak cipta karena menjiplak visual web lain ("Sahabat Penyuluh").
* **Target:** Mengubah total seluruh UI/UX aplikasi agar **100% orisinal** dan **ultra-premium**, tanpa merusak atau mengurangi fungsi asli yang sudah berjalan.
* **Kondisi Terakhir:** Layout & Sidebar melayang (*floating glassmorphism*) versi awal sudah diterapkan di branch lokal. Namun, pengerjaan dihentikan sementara untuk menyelaraskan konsep visual agar kualitasnya tetap premium.

## 🤝 Alur Kerja Kolaborasi (Workflow)
Untuk memastikan UI yang dihasilkan luar biasa dan rapi, kita menggunakan metode kolaborasi berikut:
1. **User & Google Stitch:** User membawa rancangan/konsep kode visual dari Google Stitch berdasarkan prompt terstruktur yang sudah disiapkan.
2. **Antigravity Agent (Kantor/Rumah):** Menerima rancangan visual tersebut, lalu menerjemahkannya ke dalam kode Laravel Blade, Tailwind CSS, dan Alpine.js secara terstruktur dan bertahap.

---

## 📝 Prompt Google Stitch (Untuk Digunakan di Kantor)
Berikut adalah prompt yang harus disalin dan diberikan ke Google Stitch untuk mendapatkan spesifikasi desain UI/UX:

```markdown
Anda adalah UI/UX Designer ahli untuk aplikasi berbasis web modern. Saya sedang merancang ulang (redesign) aplikasi Laravel bernama "Ruang Penyuluh" (platform digital untuk penyuluh pertanian/perikanan). 

Aplikasi ini sebelumnya terkena masalah hak cipta karena menjiplak visual web lain. Tugas Anda adalah membuat desain visual UI/UX baru yang 100% orisinal, bernuansa ultra-premium, bersih, dengan transisi yang sangat smooth (glassmorphism/SaaS modern style).

Berikut adalah detail teknis dan kebutuhan halaman yang perlu Anda rancang:

1. Konsep & Identitas Visual:
- Tema Warna: Paduan warna Emerald Green/Teal lembut (mewakili alam/pertanian) dikombinasikan dengan Slate/Gray netral untuk latar belakang. Berikan opsi Dark Mode yang sleek (seperti Linear atau Vercel) dan Light Mode yang bersih.
- Gaya Desain: Modern Clean & Soft Glassmorphism (penggunaan border tipis semi-transparan, efek backdrop-blur, sudut membulat/rounded-2xl, dan bayangan lembut/soft shadows).
- Tipografi: Minimalis dan terbaca jelas (rekomendasikan font seperti Inter atau Plus Jakarta Sans).
- Animasi: Berikan panduan transisi mikro (hover effects, fade-in-up untuk load halaman, dan slide-smooth untuk sidebar/dropdown).

2. Struktur Halaman yang Dibutuhkan:

A. Layout Utama (Dashboard Shell):
- Sidebar: Model melayang (floating sidebar) di sisi kiri dengan efek glassmorphism, berisi menu navigasi (Dashboard, Data Penyuluh, Kegiatan, Laporan, Pengaturan). Sertakan indikator menu aktif yang elegan dan animasi saat sidebar di-collapse.
- Top Navbar: Berisi tombol toggle sidebar, search bar minimalis, ikon notifikasi (dengan badge merah kecil), dan foto profil user dengan dropdown menu (Profile, Logout).

B. Halaman Welcome/Landing Page & Login:
- Halaman Welcome: Buat minimalis tapi memukau. Header bersih, hero section dengan tagline menarik tentang penyuluhan, dan tombol CTA (Call to Action) yang menonjol untuk Login.
- Halaman Login: Card login di tengah/samping dengan efek glassmorphism, input field dengan border transparan yang menyala (glow) saat fokus, serta tombol submit dengan efek gradasi Emerald-to-Teal dan animasi loading.

C. Halaman Dashboard (Main Content):
- Grid Statistik: Card ringkasan data (Jumlah Kegiatan, Penyuluh Aktif, Laporan Masuk) yang dilengkapi ikon modern dan tren grafik kecil (sparkline).
- Aktivitas Terbaru: Panel/list yang menampilkan aktivitas penyuluh terakhir secara bersih.
- Grafik Utama: Area visualisasi data kegiatan bulanan menggunakan chart minimalis.

Tolong berikan rekomendasi desain visual, skema warna HSL/Hex, struktur komponen HTML/Tailwind CSS yang elegan, serta contoh animasi CSS/Alpine.js untuk mewujudkan UI ini agar terlihat sangat premium dan hidup.
```

---

## 🛠️ Rencana Aksi Pembuatan Kode (Next Steps for Agent)
Setelah menerima detail visual dari Stitch, lakukan modifikasi bertahap pada file-file berikut:
1. **Fase 1: Layout Utama** -> Rapikan `resources/views/layouts/layout.blade.php` dan `resources/views/layouts/sidebar.blade.php`.
2. **Fase 2: Welcome & Login** -> Desain ulang `resources/views/welcome.blade.php` dan `resources/views/auth/login.blade.php`.
3. **Fase 3: Dashboard** -> Terapkan gaya card premium dan grafis di `resources/views/dashboard.blade.php`.
4. **Fase 4: Uji Coba & Build** -> Jalankan `npm run build` untuk mengompilasi Tailwind CSS terbaru.