332 lines
16 KiB
TypeScript
332 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import { Award, Book, BookOpen, Compass, GraduationCap, Sparkles, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Beranda", id: "hero"},
|
|
{
|
|
name: "Dashboard", id: "dashboard"},
|
|
{
|
|
name: "Materi", id: "materi"},
|
|
{
|
|
name: "Game & Kuis", id: "game-quiz"},
|
|
{
|
|
name: "Gamifikasi", id: "gamifikasi"},
|
|
{
|
|
name: "Leaderboard", id: "leaderboard"},
|
|
{
|
|
name: "Refleksi", id: "refleksi"},
|
|
]}
|
|
brandName="Q-HERO"
|
|
button={{
|
|
text: "Masuk / Daftar", href: "#"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="Q-HERO"
|
|
description="Belajar Al-Qur'an dan Hadis Melalui Petualangan Digital yang Menyenangkan"
|
|
buttons={[
|
|
{
|
|
text: "Mulai Belajar", 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-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-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/flat-lay-vintage-objects-still-life_23-2150348590.jpg", imageAlt: "Konsep gamifikasi dan lencana prestasi Islami"}
|
|
]}
|
|
autoplayDelay={4000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="dashboard" data-section="dashboard">
|
|
<MetricCardOne
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
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: "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,
|
|
},
|
|
]}
|
|
title="Dashboard Siswa"
|
|
description="Pantau kemajuan belajarmu dan raih prestasi!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="materi" data-section="materi">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
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: [
|
|
{
|
|
text: "Pelajari", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
id: "materi-2", title: "Kejujuran", subtitle: "Pentingnya sifat jujur dalam kehidupan sehari-hari.", category: "Akhlak", value: "Tersedia", buttons: [
|
|
{
|
|
text: "Pelajari", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
id: "materi-3", title: "Amanah", subtitle: "Menjaga kepercayaan dan tanggung jawab.", category: "Akhlak", value: "Tersedia", buttons: [
|
|
{
|
|
text: "Pelajari", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
id: "materi-4", title: "Menuntut Ilmu", subtitle: "Semangat mencari ilmu sebagai kewajiban Muslim.", category: "Fikih", value: "Tersedia", buttons: [
|
|
{
|
|
text: "Pelajari", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
id: "materi-5", title: "Hormat kepada Orang Tua", subtitle: "Adab dan kewajiban berbakti kepada orang tua.", category: "Akhlak", value: "Tersedia", buttons: [
|
|
{
|
|
text: "Pelajari", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
id: "materi-6", title: "Persaudaraan Islam", subtitle: "Menguatkan ukhuwah Islamiyah dan toleransi.", category: "Muamalah", value: "Tersedia", buttons: [
|
|
{
|
|
text: "Pelajari", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
title="Pilihan Materi Interaktif"
|
|
description="Jelajahi berbagai topik Al-Qur'an dan Hadis melalui petualangan belajar yang seru."
|
|
/>
|
|
</div>
|
|
|
|
<div id="materi-interaktif-kejujuran" data-section="materi-interaktif-kejujuran">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Materi Interaktif: Kejujuran"
|
|
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: "Tonton Video", href: "#"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-vector/ramadan-kareem-beautiful-background_1035-16635.jpg"
|
|
imageAlt="Ilustrasi materi interaktif kejujuran Islami"
|
|
/>
|
|
</div>
|
|
|
|
<div id="game-quiz" data-section="game-quiz">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
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: "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"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
title="Petualangan Interaktif: Game & Kuis"
|
|
description="Uji pemahamanmu dengan berbagai game dan kuis menarik yang telah kami sediakan!"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="gamifikasi" data-section="gamifikasi">
|
|
<MetricCardOne
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
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-kuis", value: "+50 XP", title: "Menyelesaikan Kuis", description: "Setiap kuis yang berhasil kamu selesaikan", icon: Award,
|
|
},
|
|
]}
|
|
title="Sistem Gamifikasi: Raih Poin & Level"
|
|
description="Setiap usaha belajarmu akan dihargai dengan Poin XP dan Level progresif."
|
|
tag="LEVEL UP!"
|
|
tagIcon={Zap}
|
|
/>
|
|
</div>
|
|
|
|
<div id="badge-prestasi" data-section="badge-prestasi">
|
|
<ProductCardOne
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
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-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-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-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"
|
|
description="Kumpulkan semua lencana eksklusif ini sebagai bukti perjalanan belajarmu!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="leaderboard" data-section="leaderboard">
|
|
<TeamCardOne
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
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-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-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"},
|
|
]}
|
|
title="Papan Peringkat Siswa"
|
|
description="Lihat peringkatmu di antara teman-teman dan raih posisi teratas!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="refleksi" data-section="refleksi">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "rotated-rays-static"}}
|
|
tag="Jurnal Belajarku"
|
|
title="Refleksi Pembelajaran"
|
|
description="Luangkan waktu sejenak untuk merenungkan apa yang kamu pelajari dan target amalmu."
|
|
inputPlaceholder="Apa yang saya pelajari hari ini?"
|
|
buttonText="Simpan Refleksi"
|
|
termsText="Refleksi Anda akan tersimpan secara lokal di perangkat ini untuk membantu memantau perkembangan pribadi Anda."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Q-HERO"
|
|
columns={[
|
|
{
|
|
title: "Q-HERO", items: [
|
|
{
|
|
label: "Tentang Kami", href: "#"},
|
|
{
|
|
label: "Visi Misi", href: "#"},
|
|
{
|
|
label: "Hubungi Kami", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Materi", items: [
|
|
{
|
|
label: "Al-Qur'an", href: "#materi"},
|
|
{
|
|
label: "Hadis", href: "#materi"},
|
|
{
|
|
label: "Fiqih", href: "#materi"},
|
|
{
|
|
label: "Akhlak", href: "#materi"},
|
|
],
|
|
},
|
|
{
|
|
title: "Bantuan", items: [
|
|
{
|
|
label: "FAQ", href: "#game-quiz"},
|
|
{
|
|
label: "Tutorial", href: "#"},
|
|
{
|
|
label: "Syarat & Ketentuan", href: "#"},
|
|
{
|
|
label: "Kebijakan Privasi", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Q-HERO. Hak Cipta Dilindungi Undang-Undang."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|