Buat sebuah WEBSITE PORTAL PERPUSTAKAAN MODERN bertaraf internasional untuk lingkungan Pondok Pesantren Sumatera Thawalib Parabek. Website ini BUKAN aplikasi manajemen perpustakaan dan TIDAK menggantikan SLiMS. Website berfungsi sebagai PUBLIC LIBRARY WEBSITE / DIGITAL LIBRARY PORTAL yang menjadi wajah utama perpustakaan di internet. Sistem manajemen koleksi, transaksi peminjaman, anggota, sirkulasi, inventaris, dan administrasi tetap dijalankan oleh SLiMS yang sudah tersedia. Website hanya menjadi portal depan yang elegan dan modern, kemudian menyediakan integrasi atau tautan menuju SLiMS. ================================================== 1. KONSEP UTAMA ================================================== Bangun website dengan karakter: * Elegan * Modern * Premium * Profesional * Minimalis * Intelektual * Tenang * Islami secara subtil * Memiliki identitas pendidikan pesantren * Tidak terlihat seperti template website sekolah biasa * Tidak terlalu banyak ornamen * Tidak menggunakan desain yang terlalu ramai * Mengutamakan whitespace * Typography kuat * Visual editorial seperti website institusi pendidikan internasional * Pengalaman pengguna sederhana tetapi terasa mahal Inspirasi visual boleh mengambil prinsip desain dari: * website perpustakaan universitas kelas dunia * digital library internasional * museum dan institusi kebudayaan * universitas modern * publishing house * cultural institution Namun JANGAN menyalin desain atau identitas visual website tertentu. Website harus terasa seperti perpustakaan yang menjadi pusat pengetahuan, bukan sekadar tempat mencari buku. ================================================== 2. IDENTITAS ============ Nama institusi: PERPUSTAKAAN PONDOK PESANTREN SUMATERA THAWALIB PARABEK Buat identitas visual yang menggabungkan: * tradisi keilmuan Islam * pendidikan * literasi * pengetahuan * sejarah panjang pesantren * modernitas * teknologi informasi * keterbukaan pengetahuan Gunakan elemen Islami secara subtil. Hindari: * ornamen Arab berlebihan * masjid sebagai elemen utama * pattern islami yang terlalu ramai * desain seperti poster acara keagamaan Nuansa yang diinginkan adalah: "Tradisi keilmuan yang hidup di era digital." ================================================== 3. STRUKTUR WEBSITE =================== Buat struktur navigasi utama: BERANDA KOLEKSI LAYANAN LITERASI TENTANG KAMI BERITA AGENDA KONTAK Tambahkan tombol utama: "Cari Koleksi" dan tombol sekunder: "OPAC / SLiMS" ================================================== 4. HERO SECTION =============== Hero section harus sangat kuat dan elegan. Gunakan headline besar seperti: "Menemukan Pengetahuan. Membangun Peradaban." Subheadline: "Perpustakaan Pondok Pesantren Sumatera Thawalib Parabek hadir sebagai ruang belajar, literasi, dan pertukaran pengetahuan bagi generasi yang terus bergerak." Tambahkan search bar besar sebagai fokus utama. Placeholder: "Cari buku, penulis, subjek, atau koleksi..." Search bar harus terasa seperti fitur utama website. Di bawah search bar tampilkan shortcut: Katalog Buku Terbaru Koleksi Digital Jurnal Rekomendasi Gunakan visual perpustakaan yang artistik, tetapi jangan membuat hero terlalu penuh. ================================================== 5. SEARCH EXPERIENCE ==================== Buat sistem pencarian yang dirancang untuk nantinya dapat diarahkan ke OPAC SLiMS. Search dapat memiliki kategori: * Judul * Pengarang * Subjek * ISBN * Penerbit * Tahun * Kata kunci Tambahkan advanced search. Website tidak perlu menyimpan database buku sendiri. Saat pengguna melakukan pencarian, website dapat: 1. mengarahkan ke halaman pencarian SLiMS, ATAU 2. menggunakan API SLiMS jika nantinya tersedia. Buat struktur kode agar URL SLiMS dapat dikonfigurasi dengan mudah. Contoh konfigurasi: SLIMS_URL = "https://domain-slism-anda" Jangan hard-code URL secara permanen. ================================================== 6. FEATURED COLLECTION ====================== Buat section: "Koleksi Pilihan" Tampilkan buku dalam desain editorial premium. Setiap kartu buku memiliki: * cover * judul * pengarang * tahun * kategori * tombol "Lihat di Katalog" Buat carousel horizontal yang halus. Tambahkan kategori: Koleksi Islam Pendidikan Sejarah Sastra Ilmu Sosial Teknologi Referensi Karya Santri ================================================== 7. KOLEKSI DIGITAL ================== Buat section khusus: "Digital Knowledge" Berisi akses menuju: * E-Book * E-Journal * Repository * Karya Ilmiah * Majalah * Buletin * Arsip Digital * Folisa Novel Jika konten belum tersedia, gunakan placeholder yang tetap terlihat profesional. ================================================== 8. LAYANAN PERPUSTAKAAN ======================= Buat section layanan: Peminjaman Pengembalian Keanggotaan Referensi Literasi Informasi Ruang Baca Komputer & Internet Koleksi Digital Konsultasi Informasi Jangan membuat fitur transaksi sendiri. Setiap layanan dapat memiliki: icon sederhana judul deskripsi singkat tombol informasi ================================================== 9. MULTI-CAMPUS =============== Perpustakaan memiliki beberapa lokasi/campus. Tampilkan: Kampus 1 Jalan Parabek Kampus 2 Jalan Bangkaweh Kampus 3 Jalan Jambu Air Setiap lokasi memiliki: * alamat * jam layanan * jenis koleksi * fasilitas * foto * tombol lokasi/peta Buat section: "Temukan Perpustakaan Anda" dengan desain seperti location selector modern. ================================================== 10. FOLISA ========== Buat section khusus untuk: FOLISA Forum Literasi Santri FOLISA merupakan identitas literasi santri yang berada dalam lingkungan Perpustakaan Pondok Pesantren Sumatera Thawalib Parabek. Tampilkan: * profil FOLISA * kegiatan * program literasi * karya santri * dokumentasi * berita * anggota * FOLISA Novel Desain FOLISA harus tetap menjadi bagian dari ekosistem perpustakaan, bukan terlihat sebagai website yang sepenuhnya terpisah. ================================================== 11. LITERASI & KARYA ==================== Buat section editorial: "Suara dari Ruang Baca" Berisi: * artikel * esai * resensi buku * karya santri * cerpen * opini pendidikan * tulisan pustakawan * rekomendasi bacaan Gunakan desain seperti digital magazine. ================================================== 12. BERITA & AGENDA =================== Buat: "Berita Perpustakaan" dan "Agenda Mendatang" Agenda dapat berupa: * bedah buku * pelatihan literasi * workshop * kunjungan * seminar * kegiatan FOLISA * pameran * lomba literasi Gunakan desain kalender/event modern. ================================================== 13. STATISTIK PERPUSTAKAAN ========================== Buat section statistik yang elegan. Contoh: 10.000+ Koleksi 5.000+ Anggota 100+ Kegiatan Literasi 100+ Tahun Tradisi Keilmuan Angka harus mudah diubah dari konfigurasi atau CMS di kemudian hari. Jangan membuat angka palsu terlihat sebagai data aktual. Gunakan placeholder jika data sebenarnya belum diberikan. ================================================== 14. TENTANG PERPUSTAKAAN ======================== Buat halaman: Tentang Kami Isi: * sejarah * visi * misi * layanan * struktur * pustakawan * fasilitas * lokasi * sejarah perpustakaan Gunakan storytelling visual. Jangan menggunakan layout teks panjang seperti dokumen administratif. ================================================== 15. SEJARAH =========== Buat timeline interaktif. Timeline dapat menampilkan: Sejarah Pondok Pesantren Sejarah Perpustakaan Perkembangan Literasi Perkembangan FOLISA Transformasi Digital Timeline harus terasa seperti museum digital. ================================================== 16. USER EXPERIENCE =================== Website harus: * responsive * mobile-first * cepat * mudah digunakan * accessible * keyboard friendly * memiliki kontras warna yang baik * memiliki loading state * memiliki hover state * memiliki empty state * memiliki error state Jangan membuat animasi berlebihan. Gunakan animasi: fade slide parallax ringan micro interaction hover transition Semua animasi harus halus. Prioritaskan usability daripada efek visual. ================================================== 17. DESIGN SYSTEM ================= Gunakan desain premium. Palet warna utama: Deep Forest Green Navy / Deep Blue Off White Warm Beige Charcoal Gunakan warna emas hanya sebagai aksen kecil jika diperlukan. Jangan menggunakan terlalu banyak warna. Typography: Gunakan kombinasi: Display Serif untuk heading Modern Sans Serif untuk body Contoh karakter: Heading: Cormorant Garamond / Playfair Display / Libre Baskerville Body: Inter / Manrope / Plus Jakarta Sans Pastikan typography memiliki hierarchy yang jelas. ================================================== 18. HEADER ========== Header harus minimalis. Logo kiri. Menu tengah. Tombol kanan: "Cari" dan "OPAC" Header dapat berubah ketika scrolling: initial: transparent scrolled: solid / glass effect Tetap jaga readability. ================================================== 19. FOOTER ========== Footer premium dan informatif. Tampilkan: Logo Nama perpustakaan Alamat Kontak Email Jam layanan Social media Quick links OPAC SLiMS Privacy Accessibility Tambahkan kalimat: "Knowledge grows when it is shared." ================================================== 20. INTEGRASI SLiMS =================== Ini sangat penting. Website TIDAK boleh membuat sistem perpustakaan baru. SLiMS tetap menjadi: System of Record untuk: * katalog * anggota * peminjaman * pengembalian * transaksi * bibliografi * inventaris Website hanya menjadi: Presentation Layer + Discovery Layer Buat file konfigurasi: config.js yang berisi: SLIMS_URL OPAC_URL DIGITAL_LIBRARY_URL REPOSITORY_URL Contoh: const LIBRARY_CONFIG = { slimsUrl: "https://contoh-domain/slims", opacUrl: "https://contoh-domain/slims/index.php?p=opac", digitalLibraryUrl: "", repositoryUrl: "" }; Semua tombol yang berhubungan dengan katalog harus membaca konfigurasi tersebut. ================================================== 21. SEO ======= Website harus SEO-friendly. Gunakan: semantic HTML meta title meta description Open Graph structured data schema.org Library sitemap robots.txt canonical URL Optimalkan untuk pencarian seperti: Perpustakaan Parabek Perpustakaan Sumatera Thawalib Perpustakaan Pondok Pesantren Perpustakaan Agam Perpustakaan Bukittinggi Perpustakaan pesantren Koleksi buku Parabek ================================================== 22. PERFORMANCE =============== Target: Lighthouse Performance tinggi. Optimalkan: image lazy loading WebP / AVIF font loading CSS JavaScript responsive images caching code splitting jika menggunakan framework Hindari library berat yang tidak diperlukan. ================================================== 23. ADMIN / CONTENT =================== Untuk tahap pertama, buat data dummy menggunakan JSON. Contoh: /data/books.json /data/news.json /data/events.json /data/articles.json /data/campuses.json Struktur harus dibuat agar nantinya mudah diganti menjadi: API CMS WordPress database atau backend custom. ================================================== 24. TEKNOLOGI ============= Gunakan teknologi web modern. Prioritas: HTML5 CSS3 JavaScript modern Jika framework diperlukan, gunakan: React / Next.js atau framework modern yang ringan. Pastikan struktur kode bersih dan mudah dipelajari oleh developer lain. Gunakan component-based architecture. ================================================== 25. HALAMAN YANG HARUS DIBUAT ============================= Minimal buat: / Beranda /collections Koleksi /services Layanan /literacy Literasi /news Berita /events Agenda /folisa FOLISA /about Tentang Kami /history Sejarah /campuses Lokasi Perpustakaan /contact Kontak ================================================== 26. DETAIL VISUAL ================= Desain harus memiliki: * grid modern * whitespace luas * typography editorial * gambar berkualitas tinggi * border radius moderat * shadow sangat halus * card tidak berlebihan * icon minimal * garis dekoratif tipis * section transition elegan Hindari: * gradient berlebihan * glassmorphism berlebihan * neon * animasi berlebihan * terlalu banyak card * icon warna-warni * carousel otomatis terlalu cepat * font dekoratif berlebihan * tampilan seperti dashboard admin Website harus terasa seperti: "Perpustakaan modern + institusi pendidikan + cultural institution." ================================================== 27. MICROINTERACTION ==================== Tambahkan detail kecil: Hover buku sedikit naik. Button memiliki transition. Search bar memiliki focus animation. Navigation memiliki active indicator. Scroll reveal sangat halus. Image memiliki subtle zoom ketika hover. Gunakan prefers-reduced-motion untuk pengguna yang mematikan animasi. ================================================== 28. ACCESSIBILITY ================= Gunakan: semantic HTML ARIA jika diperlukan alt text keyboard navigation focus indicator skip-to-content contrast ratio yang baik reduced motion ================================================== 29. RESPONSIVE ============== Pastikan tampilan sangat baik pada: Desktop 1920px Desktop 1440px Laptop 1366px Tablet Mobile 768px Mobile 480px Mobile 360px Jangan hanya mengecilkan tampilan desktop. Buat layout mobile secara khusus. ================================================== 30. OUTPUT YANG SAYA INGINKAN ============================= Jangan hanya memberikan konsep. Bangun prototype WEBSITE yang benar-benar dapat dijalankan. Berikan: 1. Struktur folder 2. Semua source code 3. Komponen 4. CSS 5. Data dummy 6. Konfigurasi SLiMS 7. Responsive design 8. SEO 9. Accessibility 10. README instalasi Pastikan website dapat dijalankan secara lokal. ================================================== 31. PRIORITAS DESAIN ==================== Urutan prioritas: 1. Elegance 2. Usability 3. Typography 4. Search experience 5. Institutional identity 6. Performance 7. Accessibility 8. SLiMS integration readiness 9. Animation Jangan mengorbankan usability hanya demi estetika. ================================================== 32. KESAN AKHIR =============== Ketika seseorang membuka website ini, kesan pertama yang harus muncul: "Ini bukan website perpustakaan sekolah biasa." Kesan berikutnya: "Ini adalah pusat pengetahuan sebuah institusi pendidikan yang memiliki sejarah panjang tetapi berpikir ke masa depan." Website harus terasa tenang, berkelas, intelektual, modern, dan memiliki identitas kuat. Buat desain yang dapat bertahan 5–10 tahun tanpa terlihat cepat ketinggalan zaman. Jangan mengejar tren desain sementara. Buat sesuatu yang timeless.