Skip to content

t #14

Open
Open
t#14

Description

@k22933183-art
k22933183-art
opened on May 21, 2026

// FULL STACK VERSION // Stack Recommendation: // Frontend: Next.js + TailwindCSS // Backend: Firebase // Authentication: Firebase Auth // Database: Firestore // AI Chatbot: OpenAI / Gemini API // Charts: Recharts // Animation: Framer Motion // Deployment: Vercel

export default function NotIgnoredApp() { const quizQuestions = [ { question: "Kalau ada teman yang sering sendirian saat istirahat, apa yang sebaiknya dilakukan?", options: [ "Membiarkannya", "Mengajak ngobrol atau bergabung", "Menertawakan", "Menghindarinya" ], answer: "Mengajak ngobrol atau bergabung" }, { question: "Apa dampak social ignoring?", options: [ "Meningkatkan percaya diri", "Membuat nyaman", "Membuat merasa kesepian", "Tidak berdampak" ], answer: "Membuat merasa kesepian" }, { question: "Saat kerja kelompok, sebaiknya...", options: [ "Memilih teman populer saja", "Mengabaikan teman pendiam", "Mengajak semua teman ikut aktif", "Membiarkan satu orang sendiri" ], answer: "Mengajak semua teman ikut aktif" }, { question: "Apa arti apresiasi?", options: [ "Menghina", "Menghargai orang lain", "Mengabaikan", "Mengejek" ], answer: "Menghargai orang lain" }, { question: "Kalau melihat teman sedih, kita bisa...", options: [ "Mengejek", "Mendengarkan ceritanya", "Membiarkannya", "Merekam video" ], answer: "Mendengarkan ceritanya" }, { question: "Perilaku social ignoring biasanya membuat korban merasa...", options: [ "Bahagia", "Percaya diri", "Diabaikan dan sedih", "Bersemangat" ], answer: "Diabaikan dan sedih" }, { question: "Apa manfaat lingkungan kelas suportif?", options: [ "Meningkatkan kenyamanan belajar", "Membuat siswa takut", "Membuat siswa malas", "Tidak ada manfaat" ], answer: "Meningkatkan kenyamanan belajar" }, { question: "Saat ada teman baru, kita sebaiknya...", options: [ "Mengabaikan", "Mengajak berkenalan", "Menjauhi", "Mengejek" ], answer: "Mengajak berkenalan" }, { question: "Apa yang harus dilakukan jika merasa diabaikan?", options: [ "Memendam sendiri", "Curhat kepada orang terpercaya", "Membenci semua teman", "Tidak masuk sekolah" ], answer: "Curhat kepada orang terpercaya" }, { question: "Tujuan website NotIgnored adalah...", options: [ "Membuat siswa takut", "Membangun lingkungan kelas suportif", "Menghakimi siswa", "Menyebarkan konflik" ], answer: "Membangun lingkungan kelas suportif" } ];

const characters = [ { name: "Rai", personality: "Friendly Explorer", desc: "Suka mengajak teman ngobrol dan aktif membantu orang lain.", color: "bg-yellow-200" }, { name: "Mika", personality: "Positive Listener", desc: "Pendengar yang baik dan selalu memberi semangat.", color: "bg-pink-200" }, { name: "Arka", personality: "Calm Thinker", desc: "Pendiam tapi perhatian terhadap sekitar.", color: "bg-blue-200" }, { name: "Naya", personality: "Supportive Friend", desc: "Suka memberi apresiasi dan membuat teman nyaman.", color: "bg-purple-200" }, { name: "Zee", personality: "Cheer Booster", desc: "Selalu membawa energi positif di kelas.", color: "bg-green-200" } ];

const challenges = [ "Ngobrol dengan teman baru", "Mengajak teman duduk bersama", "Mengirim apresiasi positif", "Mendengarkan cerita teman", "Menyapa minimal 3 teman hari ini" ];

const statsQuestions = [ "Apakah suasana kelas terasa nyaman hari ini?", "Apakah kamu merasa diajak berbicara oleh teman?", "Apakah ada teman yang terlihat sendirian hari ini?", "Apakah kamu merasa dihargai di kelas?", "Apakah kamu merasa aman untuk bercerita?" ];

return (

{/* Navbar */}

🌲 NotIgnored

Safe Space For Students

Home Choose Character Daily Check-In Stats Journal Achievement Room Settings

{/* Hero */}

Selamat Datang di NotIgnored 

  <p className="mt-6 text-lg max-w-xl leading-relaxed">
    Tempat aman untuk berbagi, memahami perasaan sosial,
    dan membantu menciptakan lingkungan kelas yang lebih suportif.
  </p>

  <div className="flex gap-4 mt-8 flex-wrap">
    <button className="bg-[#FFA62B] px-6 py-3 rounded-2xl font-bold shadow-lg hover:scale-105 transition">
      Mulai Sekarang
    </button>

    <button className="bg-[#2E5AA7] text-white px-6 py-3 rounded-2xl font-bold shadow-lg hover:scale-105 transition">
      Pelajari Lebih Lanjut
    </button>
  </div>

  <div className="mt-10 grid md:grid-cols-3 gap-4">
    <div className="bg-white rounded-2xl p-4 border-2">
      <h3 className="font-black text-xl">87</h3>
      <p>Total Respon</p>
    </div>

    <div className="bg-white rounded-2xl p-4 border-2">
      <h3 className="font-black text-xl">120</h3>
      <p>Apresiasi Terkirim</p>
    </div>

    <div className="bg-white rounded-2xl p-4 border-2">
      <h3 className="font-black text-xl">65%</h3>
      <p>Merasa Lebih Baik</p>
    </div>
  </div>
</div>

{/* Mood Check */}
<div className="space-y-6">
  <div className="bg-[#F8E6A0] rounded-3xl border-4 border-[#2E5AA7] p-6 shadow-xl">
    <h3 className="text-3xl font-black mb-4">😊 Mood Check Harian</h3>

    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <button className="bg-yellow-200 p-5 rounded-2xl hover:scale-105 transition font-bold">
        😄 Senang
      </button>

      <button className="bg-orange-200 p-5 rounded-2xl hover:scale-105 transition font-bold">
        😐 Biasa Aja
      </button>

      <button className="bg-blue-200 p-5 rounded-2xl hover:scale-105 transition font-bold">
        😔 Sedih
      </button>

      <button className="bg-purple-200 p-5 rounded-2xl hover:scale-105 transition font-bold">
        ⛈️ Diabaikan
      </button>
    </div>

    <div className="mt-6 bg-white rounded-2xl p-4 border-2">
      <p className="font-semibold">🌤️ Dynamic Background System</p>
      <ul className="mt-2 text-sm space-y-1">
        <li>• Senang → Background cerah</li>
        <li>• Biasa aja → Sunset</li>
        <li>• Sedih → Hujan</li>
        <li>• Diabaikan → Petir & badai</li>
      </ul>
    </div>
  </div>

  {/* AI Bot */}
  <div className="bg-white rounded-3xl border-4 border-[#2E5AA7] p-6 shadow-xl">
    <h3 className="text-2xl font-black">🤖 Teman AI</h3>
    <p className="mt-2 text-sm leading-relaxed">
      AI Companion untuk mendengarkan cerita siswa,
      mengecek progress challenge,
      dan memberi motivasi positif.
    </p>

    <div className="mt-5 bg-slate-100 rounded-2xl p-4 min-h-[120px]">
      <p className="text-sm">
        “Hai 👋 Cerita yuk, gimana suasana kelas hari ini?”
      </p>
    </div>

    <div className="flex gap-3 mt-4">
      <input
        placeholder="Tulis cerita kamu di sini..."
        className="flex-1 border-2 rounded-2xl px-4 py-3"
      />

      <button className="bg-[#2E5AA7] text-white px-5 rounded-2xl font-bold">
        Kirim
      </button>
    </div>
  </div>
</div>

{/* Characters */}

🎮 Choose Character

  <div className="grid md:grid-cols-5 gap-5">
    {characters.map((char, index) => (
      <div
        key={index}
        className={`${char.color} rounded-3xl p-5 border-2 hover:-translate-y-2 transition shadow-lg`}
      >
        <div className="h-40 rounded-2xl bg-white mb-4 flex items-center justify-center text-6xl">
          🧍
        </div>

        <h4 className="text-2xl font-black">{char.name}</h4>
        <p className="font-semibold text-sm mt-1">{char.personality}</p>
        <p className="text-sm mt-3 leading-relaxed">{char.desc}</p>

        <button className="mt-5 w-full bg-[#2E5AA7] text-white py-2 rounded-xl font-bold">
          Pilih
        </button>
      </div>
    ))}
  </div>
</div>

{/* Features */}

{/* Curhat */}

🫥 Curhat Anonim

  <p className="mt-3 leading-relaxed">
    Siswa dapat menuliskan pengalaman merasa diabaikan,
    dikucilkan, atau tidak diajak berkelompok secara anonim.
  </p>

  <textarea
    placeholder="Tulis cerita kamu di sini..."
    className="w-full h-40 mt-5 border-2 rounded-2xl p-4"
  />

  <button className="mt-4 bg-[#FFA62B] px-6 py-3 rounded-2xl font-bold">
    Kirim Curhat
  </button>
</div>

{/* Apresiasi */}
<div className="bg-white border-4 border-[#2E5AA7] rounded-3xl p-6 shadow-xl">
  <h3 className="text-3xl font-black">💌 Kotak Apresiasi</h3>

  <p className="mt-3 leading-relaxed">
    Kirim pesan positif anonim untuk teman sekelas.
  </p>

  <textarea
    placeholder="Contoh: Makasih udah bantu aku tadi 😊"
    className="w-full h-40 mt-5 border-2 rounded-2xl p-4"
  />

  <button className="mt-4 bg-[#2E5AA7] text-white px-6 py-3 rounded-2xl font-bold">
    Kirim Apresiasi
  </button>
</div>

{/* Challenge */}

🤝 Ajak Teman Challenge

  <div className="grid md:grid-cols-5 gap-4">
    {challenges.map((challenge, index) => (
      <div key={index} className="bg-white rounded-2xl p-5 border-2">
        <div className="text-5xl mb-3">⭐</div>
        <p className="font-semibold min-h-[70px]">{challenge}</p>

        <button className="mt-4 w-full bg-green-500 text-white py-2 rounded-xl font-bold">
          ✔ Selesai
        </button>
      </div>
    ))}
  </div>
</div>

{/* Edukasi */}

📚 Edukasi Social Ignoring

  <div className="space-y-4 mt-5">
    <div className="bg-slate-100 rounded-2xl p-4">
      <h4 className="font-black">Apa itu Social Ignoring?</h4>
      <p className="mt-2 text-sm">
        Perilaku mengabaikan seseorang dalam lingkungan sosial
        hingga membuatnya merasa tidak dianggap.
      </p>
    </div>

    <div className="bg-slate-100 rounded-2xl p-4">
      <h4 className="font-black">Dampak</h4>
      <p className="mt-2 text-sm">
        Menurunkan rasa percaya diri,
        membuat siswa kesepian,
        dan mempengaruhi kesehatan mental.
      </p>
    </div>

    <div className="bg-slate-100 rounded-2xl p-4">
      <h4 className="font-black">Cara Mengatasi</h4>
      <p className="mt-2 text-sm">
        Membangun komunikasi,
        membuat kelompok inklusif,
        dan meningkatkan empati sosial.
      </p>
    </div>
  </div>
</div>

{/* Quiz */}
<div className="bg-[#F8E6A0] border-4 border-[#2E5AA7] rounded-3xl p-6 shadow-xl">
  <h3 className="text-3xl font-black mb-6">🧠 Quiz Interaktif</h3>

  <div className="space-y-5 max-h-[650px] overflow-y-auto pr-2">
    {quizQuestions.map((quiz, index) => (
      <div key={index} className="bg-white rounded-2xl p-5 border-2">
        <h4 className="font-black">
          {index + 1}. {quiz.question}
        </h4>

        <div className="mt-4 space-y-2">
          {quiz.options.map((option, i) => (
            <button
              key={i}
              className="w-full border-2 rounded-xl px-4 py-2 text-left hover:bg-blue-100"
            >
              {option}
            </button>
          ))}
        </div>
      </div>
    ))}
  </div>
</div>

{/* Statistik */}

📊 Statistik Kelas

  <div className="grid lg:grid-cols-2 gap-8 mt-6">
    <div>
      <h4 className="text-xl font-black mb-4">Pertanyaan Suasana Kelas</h4>

      <div className="space-y-4">
        {statsQuestions.map((question, index) => (
          <div key={index} className="bg-slate-100 rounded-2xl p-4">
            <p className="font-semibold">{question}</p>

            <div className="flex gap-2 mt-3 flex-wrap">
              <button className="bg-green-200 px-4 py-2 rounded-xl">
                Sangat Setuju
              </button>

              <button className="bg-yellow-200 px-4 py-2 rounded-xl">
                Netral
              </button>

              <button className="bg-red-200 px-4 py-2 rounded-xl">
                Tidak Setuju
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>

    <div>
      <h4 className="text-xl font-black mb-4">Progress Sosial</h4>

      <div className="space-y-5">
        <div className="bg-green-100 rounded-2xl p-5 border-2 border-green-500">
          <h5 className="text-2xl font-black">🏆 Ahli</h5>
          <p className="mt-2">
            Sudah aktif bersosialisasi dan membantu teman lain.
          </p>
        </div>

        <div className="bg-yellow-100 rounded-2xl p-5 border-2 border-yellow-500">
          <h5 className="text-2xl font-black">🌱 Pemula</h5>
          <p className="mt-2">
            Mulai menemukan teman yang sefrekuensi.
          </p>
        </div>

        <div className="bg-blue-100 rounded-2xl p-5 border-2 border-blue-500">
          <h5 className="text-2xl font-black">☔ Diabaikan</h5>
          <p className="mt-2">
            Masih membutuhkan dukungan dan interaksi sosial.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

{/* Achievement */}

🏅 Achievement Room

  <div className="grid md:grid-cols-4 gap-4 mt-6">
    <div className="bg-white rounded-2xl p-5 border-2 text-center">
      <div className="text-5xl">💌</div>
      <p className="mt-3 font-bold">First Appreciation</p>
    </div>

    <div className="bg-white rounded-2xl p-5 border-2 text-center">
      <div className="text-5xl">🤝</div>
      <p className="mt-3 font-bold">Challenge Complete</p>
    </div>

    <div className="bg-white rounded-2xl p-5 border-2 text-center">
      <div className="text-5xl">📚</div>
      <p className="mt-3 font-bold">Education Reader</p>
    </div>

    <div className="bg-white rounded-2xl p-5 border-2 text-center">
      <div className="text-5xl">🧠</div>
      <p className="mt-3 font-bold">Quiz Master</p>
    </div>
  </div>
</div>

{/* Admin Panel */}

🛠️ Admin Dashboard

  <div className="grid lg:grid-cols-3 gap-5 mt-6">
    <div className="bg-slate-800 rounded-2xl p-5">
      <h4 className="font-black text-xl">📖 Jurnal Harian</h4>
      <p className="mt-2 text-sm">
        Admin dapat melihat data curhat anonim dan jurnal harian siswa.
      </p>
    </div>

    <div className="bg-slate-800 rounded-2xl p-5">
      <h4 className="font-black text-xl">💌 Data Apresiasi</h4>
      <p className="mt-2 text-sm">
        Monitoring apresiasi positif yang dikirim siswa.
      </p>
    </div>

    <div className="bg-slate-800 rounded-2xl p-5">
      <h4 className="font-black text-xl">📊 Statistik Mood</h4>
      <p className="mt-2 text-sm">
        Rekap mood harian dan suasana sosial kelas.
      </p>
    </div>
  </div>
</div>

{/* Footer */}

🌲 NotIgnored

<p className="mt-3 max-w-2xl mx-auto leading-relaxed">
  Website edukasi sosial untuk membantu siswa memahami dampak
  social ignoring dan membangun lingkungan kelas yang lebih sehat.
</p>

<div className="flex justify-center gap-4 mt-5 flex-wrap">
  <button className="bg-white text-[#2E5AA7] px-5 py-2 rounded-xl font-bold">
    Tentang Kami
  </button>

  <button className="bg-white text-[#2E5AA7] px-5 py-2 rounded-xl font-bold">
    Kebijakan Privasi
  </button>

  <button className="bg-white text-[#2E5AA7] px-5 py-2 rounded-xl font-bold">
    Syarat & Ketentuan
  </button>
</div>

); }

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions