diff --git a/src/app/page.tsx b/src/app/page.tsx index 72670b4..7879781 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -33,39 +33,23 @@ export default function LandingPage() { @@ -75,39 +59,23 @@ export default function LandingPage() { description="Belajar Al-Qur'an dan Hadis Melalui Petualangan Digital yang Menyenangkan" buttons={[ { - text: "Mulai Belajar", - href: "#materi", - }, + text: "Mulai Belajar", href: "#materi"}, { - text: "Lihat Materi", - href: "#materi", - }, + text: "Lihat Materi", href: "#materi"}, ]} slides={[ { - imageSrc: "http://img.b2bpic.net/free-psd/flat-design-talavera-event-landing-page-template_23-2151060231.jpg", - imageAlt: "Anak-anak muslim belajar Al-Qur'an dan Hadis", - }, + imageSrc: "http://img.b2bpic.net/free-psd/flat-design-talavera-event-landing-page-template_23-2151060231.jpg", imageAlt: "Anak-anak muslim belajar Al-Qur'an dan Hadis"}, { - imageSrc: "http://img.b2bpic.net/free-vector/gradient-ramadan-background_52683-83396.jpg", - imageAlt: "Ilustrasi pembelajaran digital Islami", - }, + imageSrc: "http://img.b2bpic.net/free-vector/gradient-ramadan-background_52683-83396.jpg", imageAlt: "Ilustrasi pembelajaran digital Islami"}, { - imageSrc: "http://img.b2bpic.net/free-vector/preschool-education-banners_1284-72110.jpg", - imageAlt: "Siswa-siswa interaktif dalam kelas Islami", - }, + imageSrc: "http://img.b2bpic.net/free-vector/preschool-education-banners_1284-72110.jpg", imageAlt: "Siswa-siswa interaktif dalam kelas Islami"}, { - imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-lights_181624-34479.jpg", - imageAlt: "Ilustrasi konsep ilmu dan kebijaksanaan Islami", - }, + imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-lights_181624-34479.jpg", imageAlt: "Ilustrasi konsep ilmu dan kebijaksanaan Islami"}, { - imageSrc: "http://img.b2bpic.net/free-photo/preparation-ramadan-tradition_23-2151925231.jpg", - imageAlt: "Guru Muslim menjelaskan pelajaran Al-Qur'an", - }, + imageSrc: "http://img.b2bpic.net/free-photo/preparation-ramadan-tradition_23-2151925231.jpg", imageAlt: "Guru Muslim menjelaskan pelajaran Al-Qur'an"}, { - imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-vintage-objects-still-life_23-2150348590.jpg", - imageAlt: "Konsep gamifikasi dan lencana prestasi Islami", - }, + imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-vintage-objects-still-life_23-2150348590.jpg", imageAlt: "Konsep gamifikasi dan lencana prestasi Islami"} ]} autoplayDelay={4000} showDimOverlay={true} @@ -122,32 +90,16 @@ export default function LandingPage() { useInvertedBackground={false} metrics={[ { - id: "materi-dipelajari", - value: "15", - title: "Materi Dipelajari", - description: "Jumlah materi yang telah kamu selesaikan", - icon: BookOpen, + id: "materi-dipelajari", value: "15", title: "Materi Dipelajari", description: "Jumlah materi yang telah kamu selesaikan", icon: BookOpen, }, { - id: "kuis-selesai", - value: "8", - title: "Kuis Selesai", - description: "Total kuis yang berhasil kamu ikuti", - icon: GraduationCap, + id: "kuis-selesai", value: "8", title: "Kuis Selesai", description: "Total kuis yang berhasil kamu ikuti", icon: GraduationCap, }, { - id: "poin-xp", - value: "750", - title: "Poin XP", - description: "Total poin pengalamanmu", - icon: Sparkles, + id: "poin-xp", value: "750", title: "Poin XP", description: "Total poin pengalamanmu", icon: Sparkles, }, { - id: "badge-diperoleh", - value: "3", - title: "Badge Diperoleh", - description: "Lencana prestasi yang kamu dapatkan", - icon: Award, + id: "badge-diperoleh", value: "3", title: "Badge Diperoleh", description: "Lencana prestasi yang kamu dapatkan", icon: Award, }, ]} title="Dashboard Siswa" @@ -162,81 +114,39 @@ export default function LandingPage() { useInvertedBackground={false} features={[ { - id: "materi-1", - title: "Cinta Al-Qur'an", - subtitle: "Memahami keutamaan dan cara mencintai Al-Qur'an.", - category: "Akidah", - value: "Tersedia", - buttons: [ + id: "materi-1", title: "Cinta Al-Qur'an", subtitle: "Memahami keutamaan dan cara mencintai Al-Qur'an.", category: "Akidah", value: "Tersedia", buttons: [ { - text: "Pelajari", - href: "#", - }, + text: "Pelajari", href: "#"}, ], }, { - id: "materi-2", - title: "Kejujuran", - subtitle: "Pentingnya sifat jujur dalam kehidupan sehari-hari.", - category: "Akhlak", - value: "Tersedia", - buttons: [ + id: "materi-2", title: "Kejujuran", subtitle: "Pentingnya sifat jujur dalam kehidupan sehari-hari.", category: "Akhlak", value: "Tersedia", buttons: [ { - text: "Pelajari", - href: "#", - }, + text: "Pelajari", href: "#"}, ], }, { - id: "materi-3", - title: "Amanah", - subtitle: "Menjaga kepercayaan dan tanggung jawab.", - category: "Akhlak", - value: "Tersedia", - buttons: [ + id: "materi-3", title: "Amanah", subtitle: "Menjaga kepercayaan dan tanggung jawab.", category: "Akhlak", value: "Tersedia", buttons: [ { - text: "Pelajari", - href: "#", - }, + text: "Pelajari", href: "#"}, ], }, { - id: "materi-4", - title: "Menuntut Ilmu", - subtitle: "Semangat mencari ilmu sebagai kewajiban Muslim.", - category: "Fikih", - value: "Tersedia", - buttons: [ + id: "materi-4", title: "Menuntut Ilmu", subtitle: "Semangat mencari ilmu sebagai kewajiban Muslim.", category: "Fikih", value: "Tersedia", buttons: [ { - text: "Pelajari", - href: "#", - }, + text: "Pelajari", href: "#"}, ], }, { - id: "materi-5", - title: "Hormat kepada Orang Tua", - subtitle: "Adab dan kewajiban berbakti kepada orang tua.", - category: "Akhlak", - value: "Tersedia", - buttons: [ + id: "materi-5", title: "Hormat kepada Orang Tua", subtitle: "Adab dan kewajiban berbakti kepada orang tua.", category: "Akhlak", value: "Tersedia", buttons: [ { - text: "Pelajari", - href: "#", - }, + text: "Pelajari", href: "#"}, ], }, { - id: "materi-6", - title: "Persaudaraan Islam", - subtitle: "Menguatkan ukhuwah Islamiyah dan toleransi.", - category: "Muamalah", - value: "Tersedia", - buttons: [ + id: "materi-6", title: "Persaudaraan Islam", subtitle: "Menguatkan ukhuwah Islamiyah dan toleransi.", category: "Muamalah", value: "Tersedia", buttons: [ { - text: "Pelajari", - href: "#", - }, + text: "Pelajari", href: "#"}, ], }, ]} @@ -252,13 +162,9 @@ export default function LandingPage() { description="Pelajari lebih dalam tentang nilai kejujuran yang diajarkan dalam Al-Qur'an dan Hadis.\n\n**QS At-Taubah: 119**\n\"Wahai orang-orang yang beriman, bertakwalah kepada Allah dan hendaklah kamu bersama orang-orang yang benar.\"\n\nAyat ini mendorong kita untuk selalu bertakwa dan bergaul dengan orang-orang yang senantiasa berkata benar dan berpegang teguh pada kebenaran. Kejujuran adalah pondasi utama dalam setiap aspek kehidupan.\n\nSimak penjelasan audio dan video berikut untuk pemahaman yang lebih mendalam." buttons={[ { - text: "Dengarkan Audio", - href: "#", - }, + text: "Dengarkan Audio", href: "#"}, { - text: "Tonton Video", - href: "#", - }, + text: "Tonton Video", href: "#"}, ]} imageSrc="http://img.b2bpic.net/free-vector/ramadan-kareem-beautiful-background_1035-16635.jpg" imageAlt="Ilustrasi materi interaktif kejujuran Islami" @@ -271,15 +177,9 @@ export default function LandingPage() { useInvertedBackground={false} faqs={[ { - id: "game-mencocokkan", - title: "Game Mencocokkan: Pasangkan Kata", - content: "Ayo bermain game seru! Cocokkan konsep dengan definisinya:\n\nJujur → Berkata benar\nAmanah → Menjaga titipan\nMenuntut Ilmu → Belajar sungguh-sungguh\n\nJika benar: \"Masya Allah! Jawaban Benar\"\nJika salah: \"Coba Lagi\"", - }, + id: "game-mencocokkan", title: "Game Mencocokkan: Pasangkan Kata", content: "Ayo bermain game seru! Cocokkan konsep dengan definisinya:\n\nJujur → Berkata benar\nAmanah → Menjaga titipan\nMenuntut Ilmu → Belajar sungguh-sungguh\n\nJika benar: \"Masya Allah! Jawaban Benar\"\nJika salah: \"Coba Lagi\""}, { - id: "kuis-interaktif", - title: "Kuis Interaktif: Uji Pemahamanmu", - content: "Siap menguji pengetahuan Al-Qur'an Hadis kamu? Jawab 10 soal pilihan ganda dengan fitur timer, progress bar, dan skor otomatis. Setelah selesai, lihat nilai akhir, jumlah benar, dan salahmu!", - }, + id: "kuis-interaktif", title: "Kuis Interaktif: Uji Pemahamanmu", content: "Siap menguji pengetahuan Al-Qur'an Hadis kamu? Jawab 10 soal pilihan ganda dengan fitur timer, progress bar, dan skor otomatis. Setelah selesai, lihat nilai akhir, jumlah benar, dan salahmu!"}, ]} imageSrc="http://img.b2bpic.net/free-photo/happy-businesswoman-taking-notes_74855-1947.jpg" imageAlt="Ilustrasi game dan kuis interaktif Islami" @@ -299,25 +199,13 @@ export default function LandingPage() { useInvertedBackground={false} metrics={[ { - id: "xp-materi", - value: "+10 XP", - title: "Membuka Materi", - description: "Setiap materi yang kamu akses", - icon: Book, + id: "xp-materi", value: "+10 XP", title: "Membuka Materi", description: "Setiap materi yang kamu akses", icon: Book, }, { - id: "xp-game", - value: "+20 XP", - title: "Menyelesaikan Game", - description: "Setiap game yang kamu menangkan", - icon: Compass, + id: "xp-game", value: "+20 XP", title: "Menyelesaikan Game", description: "Setiap game yang kamu menangkan", icon: Compass, }, { - id: "xp-kuis", - value: "+50 XP", - title: "Menyelesaikan Kuis", - description: "Setiap kuis yang berhasil kamu selesaikan", - icon: Award, + id: "xp-kuis", value: "+50 XP", title: "Menyelesaikan Kuis", description: "Setiap kuis yang berhasil kamu selesaikan", icon: Award, }, ]} title="Sistem Gamifikasi: Raih Poin & Level" @@ -335,52 +223,22 @@ export default function LandingPage() { useInvertedBackground={false} products={[ { - id: "badge-1", - name: "Pembelajar Aktif", - price: "🥉", - imageSrc: "http://img.b2bpic.net/free-vector/realistic-islamic-new-year-vertical-poster-template_23-2149000434.jpg", - imageAlt: "Badge Pembelajar Aktif", - isFavorited: true, + id: "badge-1", name: "Pembelajar Aktif", price: "🥉", imageSrc: "http://img.b2bpic.net/free-vector/realistic-islamic-new-year-vertical-poster-template_23-2149000434.jpg", imageAlt: "Badge Pembelajar Aktif", isFavorited: true, }, { - id: "badge-2", - name: "Ahli Hadis Muda", - price: "🥈", - imageSrc: "http://img.b2bpic.net/free-photo/group-muslim-women-having-great-time_53876-15352.jpg", - imageAlt: "Badge Ahli Hadis Muda", - isFavorited: true, + id: "badge-2", name: "Ahli Hadis Muda", price: "🥈", imageSrc: "http://img.b2bpic.net/free-photo/group-muslim-women-having-great-time_53876-15352.jpg", imageAlt: "Badge Ahli Hadis Muda", isFavorited: true, }, { - id: "badge-3", - name: "Penjelajah Qur'an", - price: "🥇", - imageSrc: "http://img.b2bpic.net/free-photo/3d-elements-islamic-ramadan-celebration_23-2151188126.jpg", - imageAlt: "Badge Penjelajah Qur'an", - isFavorited: true, + id: "badge-3", name: "Penjelajah Qur'an", price: "🥇", imageSrc: "http://img.b2bpic.net/free-photo/3d-elements-islamic-ramadan-celebration_23-2151188126.jpg", imageAlt: "Badge Penjelajah Qur'an", isFavorited: true, }, { - id: "badge-4", - name: "Ulul Albab Champion", - price: "🏆", - imageSrc: "http://img.b2bpic.net/free-photo/ramadan-alaska-mosque_187299-36266.jpg", - imageAlt: "Badge Ulul Albab Champion", - isFavorited: true, + id: "badge-4", name: "Ulul Albab Champion", price: "🏆", imageSrc: "http://img.b2bpic.net/free-photo/ramadan-alaska-mosque_187299-36266.jpg", imageAlt: "Badge Ulul Albab Champion", isFavorited: true, }, { - id: "badge-5", - name: "Pembelajar Unggul", - price: "🌟", - imageSrc: "http://img.b2bpic.net/free-photo/arabic-man-traditional-wear-holding-his-trophy-looking-it-with-proud-standing-white-wall_141793-47915.jpg", - imageAlt: "Badge Pembelajar Unggul", - isFavorited: false, + id: "badge-5", name: "Pembelajar Unggul", price: "🌟", imageSrc: "http://img.b2bpic.net/free-photo/arabic-man-traditional-wear-holding-his-trophy-looking-it-with-proud-standing-white-wall_141793-47915.jpg", imageAlt: "Badge Pembelajar Unggul", isFavorited: false, }, { - id: "badge-6", - name: "Penjaga Sunnah", - price: "🛡️", - imageSrc: "http://img.b2bpic.net/free-photo/army-scene-from-ancient-baghdad-inspired-by-video-games_23-2151220598.jpg", - imageAlt: "Badge Penjaga Sunnah", - isFavorited: false, + id: "badge-6", name: "Penjaga Sunnah", price: "🛡️", imageSrc: "http://img.b2bpic.net/free-photo/army-scene-from-ancient-baghdad-inspired-by-video-games_23-2151220598.jpg", imageAlt: "Badge Penjaga Sunnah", isFavorited: false, }, ]} title="Galeri Badge Prestasi" @@ -396,40 +254,15 @@ export default function LandingPage() { useInvertedBackground={false} members={[ { - id: "rank-1", - name: "Aisyah Putri", - role: "Level: Ulul Albab Muda (XP: 1250)", - imageSrc: "http://img.b2bpic.net/free-photo/digital-art-young-student-school_23-2151065182.jpg", - imageAlt: "Profil Aisyah Putri", - }, + id: "rank-1", name: "Aisyah Putri", role: "Level: Ulul Albab Muda (XP: 1250)", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-young-student-school_23-2151065182.jpg", imageAlt: "Profil Aisyah Putri"}, { - id: "rank-2", - name: "Fatih Ramadhan", - role: "Level: Penjaga Hadis (XP: 1120)", - imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-healthy-dark-skin-wears-white-hijab-dressed-denim-jacket-looks-directly-isolated-purple-wall-religious-female-has-natural-beauty-ethnicity-concept_273609-26581.jpg", - imageAlt: "Profil Fatih Ramadhan", - }, + id: "rank-2", name: "Fatih Ramadhan", role: "Level: Penjaga Hadis (XP: 1120)", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-healthy-dark-skin-wears-white-hijab-dressed-denim-jacket-looks-directly-isolated-purple-wall-religious-female-has-natural-beauty-ethnicity-concept_273609-26581.jpg", imageAlt: "Profil Fatih Ramadhan"}, { - id: "rank-3", - name: "Siti Aminah", - role: "Level: Sahabat Qur'an (XP: 980)", - imageSrc: "http://img.b2bpic.net/free-photo/arabic-businessman-traditional-wear-holding-open-book-looking-it-with-smile-face-standing-blue-wall_141793-47572.jpg", - imageAlt: "Profil Siti Aminah", - }, + id: "rank-3", name: "Siti Aminah", role: "Level: Sahabat Qur'an (XP: 980)", imageSrc: "http://img.b2bpic.net/free-photo/arabic-businessman-traditional-wear-holding-open-book-looking-it-with-smile-face-standing-blue-wall_141793-47572.jpg", imageAlt: "Profil Siti Aminah"}, { - id: "rank-4", - name: "Budi Santoso", - role: "Level: Penjelajah Ilmu (XP: 780)", - imageSrc: "http://img.b2bpic.net/free-photo/digital-art-8m-women-strike-movement_23-2151356230.jpg", - imageAlt: "Profil Budi Santoso", - }, + id: "rank-4", name: "Budi Santoso", role: "Level: Penjelajah Ilmu (XP: 780)", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-8m-women-strike-movement_23-2151356230.jpg", imageAlt: "Profil Budi Santoso"}, { - id: "rank-5", - name: "Zahra Karimah", - role: "Level: Pemula (XP: 550)", - imageSrc: "http://img.b2bpic.net/free-photo/cartoon-student-math-class_23-2151641232.jpg", - imageAlt: "Profil Zahra Karimah", - }, + id: "rank-5", name: "Zahra Karimah", role: "Level: Pemula (XP: 550)", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-student-math-class_23-2151641232.jpg", imageAlt: "Profil Zahra Karimah"}, ]} title="Papan Peringkat Siswa" description="Lihat peringkatmu di antara teman-teman dan raih posisi teratas!" @@ -440,8 +273,7 @@ export default function LandingPage() {