import Head from 'next/head'; import { motion } from 'framer-motion'; import Image from 'next/image'; import Link from 'next/link'; import { useCallback, useMemo } from 'react'; import { type LessonId } from '@/lib/lessonProgress'; import { useLessonProgress } from '@/lib/useLessonProgress'; type LessonCard = { lessonId: LessonId; tahap: string; judul: string; deskripsiSingkat: string; imageUrl: string; linkTo: string; accent: string; border: string; surface: string; }; export default function Home() { const videos = [ { id: 'D-Q9NRWGh4M', title: 'Dampak Kecanduan Game pada Otak', }, { id: 'c6mbU6C2src', title: 'Teknik Deep Work & Kontrol Diri', }, ]; const techniques = [ { title: 'Metode 5 Menit', description: 'Saat ingin main game, tunda selama 5 menit. Gunakan waktu ini untuk bernapas atau minum air.', icon: '⏱️', tone: 'from-rose-500 to-orange-500', }, { title: 'Jadwal Terstruktur', description: "Gunakan aturan 'Kerja Dulu, Main Kemudian'. Jadikan bermain game sebagai reward tugas.", icon: '📅', tone: 'from-blue-500 to-cyan-500', }, { title: 'Lingkungan Terkendali', description: 'Jauhkan perangkat game dari tempat tidur agar tidak tergoda secara konstan.', icon: '🚫', tone: 'from-emerald-500 to-teal-500', }, ]; const materiLengkap: LessonCard[] = [ { lessonId: 1, tahap: 'Tahap 01', judul: 'Kenali Gejala Kecanduan', deskripsiSingkat: 'Kenali tanda-tanda awal seperti gelisah saat tidak bermain, tugas terbengkalai, dan pola tidur yang terganggu.', imageUrl: '/images/kecanduan-game.png', linkTo: '/PembelajaranDetail1', accent: 'text-rose-700', border: 'border-rose-200', surface: 'bg-rose-50/80', }, { lessonId: 2, tahap: 'Tahap 02', judul: 'Teknik Cognitive Reframing', deskripsiSingkat: "Ubah pikiran otomatis seperti 'aku harus main sekarang' menjadi keputusan yang lebih sehat dan terukur.", imageUrl: '/images/reframing-otak.png', linkTo: '/PembelajaranDetail2', accent: 'text-sky-700', border: 'border-sky-200', surface: 'bg-sky-50/80', }, { lessonId: 3, tahap: 'Tahap 03', judul: 'Metode Pembatasan Fisik', deskripsiSingkat: 'Buat lingkungan yang mendukung fokus dengan mengurangi akses impulsif ke perangkat game.', imageUrl: '/images/pembatasan-fisik.png', linkTo: '/PembelajaranDetail3', accent: 'text-emerald-700', border: 'border-emerald-200', surface: 'bg-emerald-50/80', }, ]; const completedLessons = useLessonProgress(); const scrollToLearning = () => { const element = document.getElementById('pembelajaran'); element?.scrollIntoView({ behavior: 'smooth' }); }; const completedCount = completedLessons.length; const completionPercent = Math.round((completedCount / 3) * 100); const canStartQuiz = completedCount === 3; const isLessonCompleted = useCallback( (lessonId: LessonId) => { return completedLessons.includes(lessonId); }, [completedLessons] ); const isLessonUnlocked = useCallback( (lessonId: LessonId) => { if (lessonId === 1) { return true; } if (lessonId === 2) { return isLessonCompleted(1) || isLessonCompleted(2); } return isLessonCompleted(2) || isLessonCompleted(3); }, [isLessonCompleted] ); const progressLabel = useMemo(() => { if (canStartQuiz) { return 'Semua pelajaran selesai. Kuiz sudah terbuka.'; } return `Selesaikan ${3 - completedCount} tahap lagi untuk membuka kuiz.`; }, [canStartQuiz, completedCount]); return (
DiaWeb - Edukasi Self-Control & Pencegahan Kecanduan Game {/* Open Graph / Facebook */} {/* Twitter */}
Program Self-Control Kuasai Dirimu,
Bukan Game-mu

Belajar strategi praktis untuk menyeimbangkan dunia digital, fokus akademik, dan kesehatan mental.

Website ini bertujuan membantu siswa meningkatkan pengendalian diri dalam penggunaan game dan media digital, agar mampu mengatur waktu dengan lebih bijak, mengurangi kebiasaan bermain berlebihan, serta membangun kebiasaan yang lebih sehat dan produktif.

{canStartQuiz ? ( Kerjakan Kuiz ) : ( )}

Progress Belajar

{[ { label: 'Tahap Selesai', value: `${completedCount}/3` }, { label: 'Status Kuiz', value: canStartQuiz ? 'Terbuka' : 'Terkunci' }, { label: 'Progres', value: `${completionPercent}%` }, ].map((stat) => (

{stat.label}

{stat.value}

))}

{progressLabel}

🧠

Pengertian Self-Control

"Self-control adalah kemampuan individu untuk mengatur, mengendalikan, dan mengarahkan perilaku, emosi, serta keputusan agar tetap sesuai tujuan jangka panjang."

🎯

Skill, Bukan Bakat

Self-control bisa dilatih secara bertahap lewat kebiasaan kecil yang konsisten.

Mulai dari atur waktu, ubah pola pikir, lalu disiplin dalam membuat keputusan.

{techniques.map((item) => (
{item.icon}

{item.title}

{item.description}

))}

Mengapa Perlu Mengontrol Diri?

    {[ 'Meningkatkan fokus belajar dan kualitas tugas', 'Menjaga pola tidur agar lebih stabil', 'Membangun hubungan sosial yang lebih sehat', ].map((text) => (
  • ✔ {text}
    • ))}

“Kemenangan terbesar adalah kemenangan atas diri sendiri.”

Plato

Kurikulum

Materi Pembelajaran

Selesaikan tahap secara berurutan untuk membuka kuiz final.

Progres keseluruhan: {completedCount}/3 tahap selesai

{canStartQuiz ? 'Kuiz sudah bisa dikerjakan' : 'Kuiz akan terbuka setelah semua tahap selesai'}

{materiLengkap.map((item, index) => { const isCompleted = isLessonCompleted(item.lessonId); const isUnlocked = isLessonUnlocked(item.lessonId); return (
{item.judul}
{item.tahap} {isCompleted && ( Selesai )} {!isCompleted && !isUnlocked && ( Terkunci )} {!isCompleted && isUnlocked && ( Tersedia )}

{item.judul}

{item.deskripsiSingkat}

{isUnlocked ? ( {isCompleted ? 'Pelajari Ulang' : 'Mulai Tahap Ini'} ) : ( )}
); })}

Final Step

Self-Control Quiz

Kuiz akan aktif otomatis setelah Tahap 1, 2, dan 3 selesai.

{canStartQuiz ? ( Mulai Kuiz Sekarang ) : ( )}

Video Edukasi

Pendalaman materi lewat video singkat yang mudah dipahami.

{videos.map((video) => (