# Project Guide: Teknik Ketenagalistrikan SMKN 1 Cirebon

## 1. Pendahuluan
Dokumen ini berfungsi sebagai panduan teknis dan operasional untuk pengembangan serta pemeliharaan proyek website Teknik Ketenagalistrikan SMKN 1 Cirebon. Proyek ini dirancang dengan pendekatan modular dan estetik menggunakan teknologi web modern.

## 2. Tech Stack
Website ini dibangun menggunakan teknologi berikut:
* **Framework**: Laravel 11 dengan Laravel Breeze (Starter Kit).
* **Frontend**: Blade Templating Engine.
* **Styling**: Tailwind CSS (JIT Mode).
* **Animasi**: GSAP 3 (ScrollTrigger, Timeline).
* **Interaktivitas**: Alpine.js (State management ringan).
* **Icons**: Lucide Icons.
* **Database**: MySQL.

## 3. Struktur Proyek (Blade Components)
Proyek ini mengedepankan Separation of Concerns melalui komponen. Komponen utama berada di `resources/views/components/`:
* `layout.blade.php`: Wrapper utama (HTML head, Navbar, Footer).
* `hero.blade.php`: Bagian landing page pertama.
* `profil.blade.php`: Sejarah dan identitas jurusan.
* `jurusan-detail.blade.php`: Informasi paket keahlian (TITL & TPTU).
* `guru.blade.php`: Daftar tenaga pendidik dengan layout editorial.
* `berita.blade.php`: Lensa Industri (CMS berita & galeri).
* `kontak.blade.php`: FAQ dan formulir kontak.

## 4. Panduan Desain & UI/UX
### Warna & Tema
* **Dark Mode**: Default theme menggunakan palet "Dark Analytics".
* **Primary Color**: `electrical-accent` (#F0F941 - Neon Yellow).
* **Base Color**: `electrical-base` (Deep Black/Grey).

### Tipografi
* **Display**: Font tebal (Black/ExtraBold) untuk judul besar dengan efek *italic* pada kata kunci.
* **Sans**: Font bersih untuk keterbacaan teks paragraf.

### Animasi GSAP
Semua animasi dikelola di `home.blade.php`. Prinsip utama:
1.  **ScrollTrigger**: Digunakan untuk efek *reveal* saat komponen muncul di layar.
2.  **Sticky Reveal**: Digunakan pada seksi Guru dan Kontak untuk menjaga judul tetap terlihat saat konten digulirkan.
3.  **Parallax**: Digunakan pada gambar di seksi Profil dan Jurusan.

## 5. Database & Model
Sistem menggunakan penamaan tabel tunggal (Singular) untuk konsistensi bahasa Indonesia.
* **Tabel Utama**: `user`, `guru`, `siswa`, `mata_pelajaran`, `kelas`, `jadwal`, `berita`.
* **Penting**: Karena menggunakan nama singular, pastikan di setiap Model Laravel ditambahkan properti `protected $table = 'nama_tabel';`.
* *Detail lengkap mengenai field dan relasi silakan merujuk ke file `database.md`.*

## 6. Pengembangan Menggunakan AI
Proyek ini dikembangkan secara intensif menggunakan bantuan AI (Gemini). Berikut adalah aturan main untuk pihak pengembang selanjutnya:
* **Konteks adalah Kunci**: Saat meminta bantuan AI, sertakan file `layout.blade.php` dan komponen terkait agar AI memahami struktur CSS dan animasi yang sudah ada.
* **Prinsip No-Comment**: Sesuai preferensi tim, kode diproduksi secara bersih tanpa banyak komentar internal, namun dengan struktur penamaan class yang deskriptif (misal: prefix `gsap-` untuk elemen yang dianimasikan).
* **Consistency**: Selalu gunakan utility class Tailwind daripada menulis CSS manual di file eksternal.

## 7. Instruksi Setup (Local)
1.  Clone repository.
2.  Jalankan `composer install` & `npm install`.
3.  Copy `.env.example` ke `.env` dan sesuaikan koneksi DB (`teknik_ketenagalistrikan`).
4.  Jalankan `php artisan key:generate`.
5.  Jalankan `php artisan migrate` untuk membangun tabel.
6.  Jalankan `npm run dev` dan `php artisan serve`.
