Sync from GitHub Actions: e01f9df8b054a5718601dd513fd3516293f9eac8

.gitattributes

@@ -1,35 +1 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
 *.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1 +1,49 @@
-*.pyc
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Python
+__pycache__/
+*.pyc
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# data files
+*.csv
+api/data/*.pkl 

.vercelignore

@@ -0,0 +1,16 @@
+# Ignore backend folder - deploy ke HF Spaces
+api/
+
+# Ignore Python files
+*.py
+*.pkl
+*.pyc
+__pycache__/
+
+# Ignore Docker files
+Dockerfile
+.dockerignore
+
+# Ignore training files
+train_*.py
+test_*.py

README.md

@@ -1,27 +1,36 @@
----
-title: Sentimind API
-emoji: 🧠
-colorFrom: yellow
-colorTo: red
-sdk: docker
-app_port: 7860
-pinned: false
----
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-# Sentimind API Backend
+## Getting Started
 
-Backend API untuk Sentimind - AI Personality Profiler.
+First, run the development server:
 
-## Endpoints
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-- `POST /api/predict` - Prediksi MBTI dari teks
-- `POST /api/chat` - Chat dengan AI assistant
-- `GET /api/quiz` - Get quiz questions
-- `POST /api/quiz` - Submit quiz answers
-- `GET /api/youtube/{video_id}` - Analyze YouTube video
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## Environment Variables
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-Set these in HF Spaces Settings > Repository Secrets:
-- `GOOGLE_API_KEY` - Gemini API key
-- `YOUTUBE_API_KEY` - YouTube Data API key
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

README_BACKUP.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

README_HF.md

@@ -0,0 +1,27 @@
+---
+title: Sentimind API
+emoji: 🧠
+colorFrom: orange
+colorTo: yellow
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Sentimind API Backend
+
+Backend API untuk Sentimind - AI Personality Profiler.
+
+## Endpoints
+
+- `POST /api/predict` - Prediksi MBTI dari teks
+- `POST /api/chat` - Chat dengan AI assistant
+- `GET /api/quiz` - Get quiz questions
+- `POST /api/quiz` - Submit quiz answers
+- `GET /api/youtube/{video_id}` - Analyze YouTube video
+
+## Environment Variables
+
+Set these in HF Spaces Settings > Repository Secrets:
+- `GOOGLE_API_KEY` - Gemini API key
+- `YOUTUBE_API_KEY` - YouTube Data API key

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

dev.bat

@@ -0,0 +1,27 @@
+@echo off
+title Sentimind Launcher
+echo ==================================================
+echo MEMULAI SENTIMIND DEV ENVIRONMENT
+echo ==================================================
+
+:: 1. Cek apakah Conda tersedia & Activate Environment
+echo Mengaktifkan Conda: sentimind...
+call conda activate sentimind
+
+:: Cek jika activate gagal (opsional, tapi bagus buat debugging)
+if %errorlevel% neq 0 (
+    echo Gagal activate conda 'sentimind'. Pastikan env sudah dibuat!
+    pause
+    exit /b
+)
+
+:: 2. Jalankan FastAPI di Window Baru (Port 8000)
+:: Menggunakan 'start' agar window baru terbuka dan script ini lanjut ke bawah
+echo Menyalakan Backend (FastAPI) di window baru...
+start "Sentimind Backend API" cmd /k "conda activate sentimind && uvicorn api.index:app --reload --port 8000"
+
+:: 3. Jalankan Frontend di Window Ini (Port 3000)
+echo Menyalakan Frontend (Next.js)...
+echo Tekan Ctrl+C di sini untuk stop Frontend.
+echo.
+npm run dev

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  rewrites: async () => {
+    return [
+      {
+        source: "/api/:path*",
+        destination:
+          process.env.NODE_ENV === "development"
+            ? "http://127.0.0.1:8000/api/:path*"
+            : "/api/:path*",
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "sentimind",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.25.0",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.0",
+    "next-themes": "^0.4.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.0",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

src/app/analyzer/layout.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Analyzer | Sentimind",
+  description: "Analyze your text to reveal hidden personality patterns.",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

src/app/analyzer/page.tsx

@@ -0,0 +1,525 @@
+"use client";
+import { useState } from "react";
+import { useLanguage } from "@/app/providers";
+import { Search, Tag, Smile, BrainCircuit, Lightbulb, BookOpen, MessageSquare, FileText, Youtube, AlertCircle, ThumbsUp, ThumbsDown } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function AnalysisPage() {
+  const { lang } = useLanguage();
+  const [mode, setMode] = useState<"text" | "youtube">("text");
+
+  const [inputText, setInputText] = useState("");
+  const [youtubeUrl, setYoutubeUrl] = useState("");
+
+  const [result, setResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+
+  const [errorType, setErrorType] = useState<string | null>(null);
+  const [backendErrorMsg, setBackendErrorMsg] = useState("");
+  const [showFullDesc, setShowFullDesc] = useState(false);
+  const [showAllComments, setShowAllComments] = useState(false);
+
+  const t = {
+    en: {
+      title: "Text Analyzer",
+      desc: "Paste your text or YouTube link. Let AI decode the personality.",
+      placeholder: "Type your story here...",
+      btnAnalyze: "Analyze Now",
+      btnLoading: "Processing...",
+      resMBTI: "MBTI Type",
+      resSentiment: "Dominant Emotion",
+      resKeywords: "Top Keywords",
+      // GANTI LABEL BIAR JUJUR
+      resContent: "Analyzed Content",
+
+      errEmptyText: "Please enter some text first!",
+      errEmptyYoutube: "Please paste a YouTube URL!",
+      errInvalidYoutube: "Invalid YouTube URL format.",
+      errConnection: "Failed to connect to AI Server.",
+      errNoTranscript: "This video has no subtitles/transcript to analyze.",
+
+      modeText: "Text Input",
+      modeYoutube: "YouTube Video",
+      ytPlaceholder: "Paste YouTube Link (e.g., https://youtu.be/...)",
+      ytTip: "Tip: Works best on videos with spoken words (podcasts, vlogs).",
+      btnYoutube: "Analyze Video",
+
+      guideTitle: "How to get accurate results?",
+      guides: [
+        { icon: MessageSquare, title: "Be Expressive", text: "Write naturally about your feelings, opinions, or daily life experiences." },
+        { icon: BookOpen, title: "Length Matters", text: "Try to write at least 2-3 sentences. Short texts like 'Hello' won't reveal much." },
+        { icon: Lightbulb, title: "Honesty is Key", text: "Don't overthink it. The AI analyzes your subconscious writing style." }
+      ]
+    },
+    id: {
+      title: "Analisis Teks",
+      desc: "Tempel curhatan atau link YouTube. Biar AI yang bedah kepribadiannya.",
+      placeholder: "Tulis cerita atau unek-unek lo di sini...",
+      btnAnalyze: "Analisis Sekarang",
+      btnLoading: "Lagi Mikir...",
+      resMBTI: "Tipe MBTI",
+      resSentiment: "Mood Dominan",
+      resKeywords: "Kata Kunci",
+      // GANTI LABEL BIAR JUJUR
+      resContent: "Data Video & Komentar",
+
+      errEmptyText: "Eits, isi dulu dong teksnya!",
+      errEmptyYoutube: "Link YouTube-nya mana?",
+      errInvalidYoutube: "Link YouTube-nya gak valid nih.",
+      errConnection: "Yah, gagal connect ke server nih.",
+      errNoTranscript: "Video ini gak ada subtitle-nya, cari yang lain gih.",
+
+      modeText: "Tulis Manual",
+      modeYoutube: "Link YouTube",
+      ytPlaceholder: "Tempel Link YouTube (misal: https://youtu.be/...)",
+      ytTip: "Tips: Paling mantep buat video podcast, vlog, atau opini.",
+      btnYoutube: "Bedah Video",
+
+      guideTitle: "Biar Hasilnya Akurat",
+      guides: [
+        { icon: MessageSquare, title: "Yang Ekspresif Dong", text: "Tulis aja secara natural soal perasaan atau opini lo. Gak usah jaim." },
+        { icon: BookOpen, title: "Jangan Pendek-pendek", text: "Minimal 2-3 kalimat lah. Kalau cuma 'Halo' doang, AI-nya bakal bingung." },
+        { icon: Lightbulb, title: "Jujur Itu Kunci", text: "Gak usah overthink. AI bakal baca pola penulisan bawah sadar lo." }
+      ]
+    }
+  };
+
+  const content = t[lang];
+
+  // --- HELPER BUAT AMBIL ID YOUTUBE DARI LINK ---
+  const extractVideoId = (url: string) => {
+    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    const match = url.match(regExp);
+    return (match && match[2].length === 11) ? match[2] : null;
+  };
+
+  const getErrorMessage = () => {
+    if (!errorType) return "";
+    if (errorType === "EMPTY_TEXT") return content.errEmptyText;
+    if (errorType === "EMPTY_YOUTUBE") return content.errEmptyYoutube;
+    if (errorType === "INVALID_YOUTUBE") return content.errInvalidYoutube;
+    if (errorType === "CONNECTION") return content.errConnection;
+
+    if (errorType === "BACKEND_ERROR") {
+      if (backendErrorMsg === "NO_TRANSCRIPT") return content.errNoTranscript;
+      return backendErrorMsg || content.errConnection;
+    }
+    return "";
+  };
+
+  const currentErrorMsg = getErrorMessage();
+
+  const handleAnalyze = async () => {
+    setErrorType(null);
+    setBackendErrorMsg("");
+    setResult(null);
+
+    // --- VALIDASI YOUTUBE ---
+    if (mode === "youtube") {
+      if (!youtubeUrl.trim()) {
+        setErrorType("EMPTY_YOUTUBE");
+        return;
+      }
+      const videoId = extractVideoId(youtubeUrl);
+      if (!videoId) {
+        setErrorType("INVALID_YOUTUBE");
+        return;
+      }
+
+      // Panggil API dengan Video ID
+      setLoading(true);
+      try {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL || "";
+        const res = await fetch(`${apiUrl}/api/youtube/${videoId}`, { method: "GET" });
+        const data = await res.json();
+        if (data.success) {
+          setResult(data);
+        } else {
+          setBackendErrorMsg(data.error);
+          setErrorType("BACKEND_ERROR");
+        }
+      } catch (err) {
+        setErrorType("CONNECTION");
+      } finally {
+        setLoading(false);
+      }
+      return;
+    }
+
+    // --- VALIDASI TEXT ---
+    if (mode === "text") {
+      if (!inputText.trim()) {
+        setErrorType("EMPTY_TEXT");
+        return;
+      }
+      setLoading(true);
+      try {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL || "";
+        const res = await fetch(`${apiUrl}/api/predict`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ text: inputText }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          setResult(data);
+        } else {
+          setBackendErrorMsg(data.error);
+          setErrorType("BACKEND_ERROR");
+        }
+      } catch (err) {
+        setErrorType("CONNECTION");
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      const isMobile = window.innerWidth < 768;
+      if (mode === "text" && isMobile) {
+        return;
+      }
+      e.preventDefault();
+      handleAnalyze();
+    }
+  };
+
+  const getKeywords = () => {
+    if (!result?.keywords) return [];
+    if (Array.isArray(result.keywords)) return result.keywords;
+    return lang === 'id' ? result.keywords.id : result.keywords.en;
+  };
+
+  const currentKeywords = getKeywords();
+
+  return (
+    <div className="w-full pt-28 pb-12 px-4 sm:px-6 lg:px-8 flex flex-col items-center font-sans">
+
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-4xl mx-auto text-center space-y-4 z-10"
+      >
+
+        <div>
+          <h1 className="text-4xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 pb-2">
+            {content.title}
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 text-sm md:text-lg max-w-2xl mx-auto mt-2">
+            {content.desc}
+          </p>
+        </div>
+
+        {/* --- TOMBOL SWITCH MODE (TEXT vs YOUTUBE) --- */}
+        <div className="grid grid-cols-2 gap-3 mt-8 w-full max-w-[340px] mx-auto">
+          <button
+            onClick={() => { setMode("text"); setResult(null); setErrorType(null); }}
+            className={`flex items-center justify-center gap-2 py-2.5 rounded-full font-bold text-sm transition-all border border-transparent
+                ${mode === "text"
+                ? "bg-orange-600 text-white shadow-lg shadow-orange-500/20"
+                : "bg-gray-100 dark:bg-white/5 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-white/10"}`}
+          >
+            <FileText size={16} /> {content.modeText}
+          </button>
+          <button
+            onClick={() => { setMode("youtube"); setResult(null); setErrorType(null); }}
+            className={`flex items-center justify-center gap-2 py-2.5 rounded-full font-bold text-sm transition-all border border-transparent
+                ${mode === "youtube"
+                ? "bg-[#FF0000] text-white shadow-lg shadow-[#FF0000]/20"
+                : "bg-gray-100 dark:bg-white/5 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-white/10"}`}
+          >
+            <Youtube size={16} /> {content.modeYoutube}
+          </button>
+        </div>
+
+        <div className="liquid-glass p-1.5 shadow-2xl mt-6 max-w-3xl mx-auto w-full">
+          <div className="bg-white/50 dark:bg-black/20 rounded-xl p-4 backdrop-blur-sm">
+
+            {/* AREA INPUT */}
+            <div className="min-h-[140px] flex flex-col justify-center">
+              {mode === "text" ? (
+                <textarea
+                  value={inputText}
+                  onChange={(e) => { setInputText(e.target.value); setErrorType(null); }}
+                  onKeyDown={handleKeyDown}
+                  placeholder={content.placeholder}
+                  className="w-full bg-transparent outline-none text-base md:text-lg h-full resize-none placeholder:text-gray-400 dark:text-white text-gray-900"
+                  style={{ minHeight: '140px' }}
+                />
+              ) : (
+                <div className="py-2 px-2 w-full">
+                  <div className="relative flex items-center">
+                    <div className="absolute left-4 text-gray-400 pointer-events-none">
+                      <Youtube size={20} />
+                    </div>
+                    <input
+                      type="text"
+                      value={youtubeUrl}
+                      onChange={(e) => { setYoutubeUrl(e.target.value); setErrorType(null); }}
+                      onKeyDown={handleKeyDown}
+                      placeholder={content.ytPlaceholder}
+                      className="w-full bg-white/50 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-xl py-4 pl-12 pr-4 text-lg font-medium focus:border-[#FF0000] focus:ring-2 focus:ring-[#FF0000]/20 focus:outline-none transition-all text-gray-800 dark:text-white placeholder:text-gray-400"
+                    />
+                  </div>
+                  <p className="text-xs text-left mt-3 ml-1 text-gray-500 dark:text-gray-400 flex items-center gap-1 pl-1">
+                    <Lightbulb size={12} className="text-yellow-500" /> {content.ytTip}
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* ERROR MSG */}
+            <AnimatePresence>
+                {currentErrorMsg && (
+                <motion.div 
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    className="mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-3 text-red-600 dark:text-red-400 overflow-hidden"
+                >
+                    <AlertCircle size={20} className="shrink-0" />
+                    <span className="text-sm font-bold text-left">{currentErrorMsg}</span>
+                </motion.div>
+                )}
+            </AnimatePresence>
+
+            <div className="flex justify-end mt-4 pt-2 border-t border-gray-500/10">
+              <button
+                onClick={handleAnalyze}
+                disabled={loading}
+                className={`flex items-center gap-2 text-white px-6 py-2 rounded-lg font-bold transition-all disabled:opacity-50 shadow-lg text-sm md:text-base
+                  ${mode === "youtube"
+                    ? "bg-[#FF0000] hover:bg-red-700 hover:shadow-[#FF0000]/30"
+                    : "bg-orange-600 hover:bg-orange-700 hover:shadow-orange-500/30"}`}
+              >
+                {loading ? content.btnLoading : (mode === "youtube" ? content.btnYoutube : content.btnAnalyze)}
+                {!loading && <Search className="w-4 h-4" />}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* HASIL */}
+        <AnimatePresence>
+            {result && (
+            <motion.div 
+                initial={{ opacity: 0, y: 100 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 100 }}
+                transition={{ type: "spring", damping: 20 }}
+                className="w-full max-w-3xl mx-auto mt-6 space-y-4 text-left"
+            >
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {/* MBTI */}
+                <div className="liquid-glass p-4 border-t-4 border-orange-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl flex flex-col h-full">
+                    <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-2">
+                    <BrainCircuit size={12} /> {content.resMBTI}
+                    </h3>
+                    <div className="flex-1 flex items-center justify-center">
+                    <div className="text-3xl font-black text-orange-600">{result.mbti_type}</div>
+                    </div>
+                </div>
+                {/* EMOTION */}
+                <div className="liquid-glass p-4 border-t-4 border-green-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl flex flex-col h-full">
+                    <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-2">
+                    <Smile size={12} /> {content.resSentiment}
+                    </h3>
+                    <div className="flex-1 flex items-center justify-center">
+                    <div className="text-xl font-bold capitalize text-green-600 dark:text-green-400 truncate px-2 text-center">
+                        {result.emotion ? (result.emotion[lang] || result.emotion.id || result.emotion) : result.sentiment}
+                    </div>
+                    </div>
+                </div>
+                {/* KEYWORDS */}
+                <div className="liquid-glass p-4 border-t-4 border-blue-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl h-full flex flex-col">
+                    <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-3">
+                    <Tag size={12} /> {content.resKeywords}
+                    </h3>
+                    <div className="flex flex-wrap gap-2 justify-center items-center w-full">
+                    {currentKeywords.slice(0, 3).map((k: string, i: number) => (
+                        <span key={i} className="bg-orange-100 dark:bg-orange-900/30 px-3 py-1 rounded-full text-xs font-bold text-orange-700 dark:text-orange-200 border border-orange-200 dark:border-orange-800/50 capitalize">
+                        {k}
+                        </span>
+                    ))}
+                    </div>
+                </div>
+                </div>
+
+                {/* PREVIEW CONTENT - YouTube Style */}
+                {(result.video || result.fetched_text) && (
+                <div className="space-y-4">
+
+                    {/* YouTube Video Card with Thumbnail */}
+                    {result.video && (
+                    <div className="liquid-glass overflow-hidden rounded-2xl border border-gray-200 dark:border-white/10">
+                        {/* Thumbnail */}
+                        {result.video.thumbnail && (
+                        <div className="relative aspect-video bg-black">
+                            <img
+                            src={result.video.thumbnail}
+                            alt={result.video.title}
+                            className="w-full h-full object-cover"
+                            />
+                            <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-1 rounded font-medium">
+                            YouTube
+                            </div>
+                        </div>
+                        )}
+
+                        {/* Video Info */}
+                        <div className="p-5 bg-white/60 dark:bg-black/40">
+                        <h4 className="text-lg font-bold text-gray-900 dark:text-white leading-tight mb-2">
+                            {result.video.title}
+                        </h4>
+
+                        <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400 mb-4">
+                            <span className="font-medium text-gray-700 dark:text-gray-300">{result.video.channel}</span>
+                            <span>•</span>
+                            <span>{Number(result.video.viewCount).toLocaleString()} views</span>
+                            <span>•</span>
+                            <span className="flex items-center gap-1">
+                            <ThumbsUp size={14} /> {Number(result.video.likeCount).toLocaleString()}
+                            </span>
+                        </div>
+
+                        {/* Description */}
+                        <div className="bg-gray-100 dark:bg-white/5 p-4 rounded-xl">
+                            <div className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
+                            {showFullDesc ? result.video.description : result.video.description?.slice(0, 250)}
+                            {result.video.description?.length > 250 && !showFullDesc && '...'}
+                            </div>
+                            {result.video.description?.length > 250 && (
+                            <button
+                                onClick={() => setShowFullDesc(!showFullDesc)}
+                                className="mt-2 text-sm font-bold text-blue-600 hover:text-blue-700"
+                            >
+                                {showFullDesc ? 'Show less' : 'Show more'}
+                            </button>
+                            )}
+                        </div>
+                        </div>
+                    </div>
+                    )}
+
+                    {/* Comments Section - YouTube Style */}
+                    {result.comments && result.comments.length > 0 && (
+                    <div className="liquid-glass p-5 bg-white/60 dark:bg-black/40 rounded-2xl border border-gray-200 dark:border-white/10">
+                        <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <MessageSquare size={16} />
+                        {result.comments.length} Comments
+                        </h3>
+
+                        <div className="space-y-4">
+                        {(showAllComments ? result.comments : result.comments.slice(0, 5)).map((comment: any, idx: number) => (
+                            <div key={idx} className="flex gap-3">
+                            {/* Avatar */}
+                            {comment.authorImage ? (
+                                <img
+                                src={comment.authorImage}
+                                alt={comment.author}
+                                className="w-10 h-10 rounded-full shrink-0 object-cover"
+                                />
+                            ) : (
+                                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-sm font-bold shrink-0">
+                                {comment.author?.charAt(0).toUpperCase() || 'A'}
+                                </div>
+                            )}
+
+                            {/* Comment Content */}
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-1">
+                                <span className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                                    {comment.author}
+                                </span>
+                                <span className="text-xs text-gray-400">
+                                    {comment.publishedAt && new Date(comment.publishedAt).toLocaleDateString()}
+                                </span>
+                                </div>
+                                <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+                                {comment.text}
+                                </p>
+                                <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
+                                <span className="flex items-center gap-1 hover:text-gray-700 cursor-pointer">
+                                    <ThumbsUp size={14} /> {comment.likeCount || 0}
+                                </span>
+                                <span className="flex items-center gap-1 hover:text-gray-700 cursor-pointer">
+                                    <ThumbsDown size={14} />
+                                </span>
+                                {comment.replyCount > 0 && (
+                                    <span className="text-blue-600 font-medium">
+                                    {comment.replyCount} replies
+                                    </span>
+                                )}
+                                </div>
+                            </div>
+                            </div>
+                        ))}
+                        </div>
+
+                        {result.comments.length > 5 && (
+                        <button
+                            onClick={() => setShowAllComments(!showAllComments)}
+                            className="mt-4 w-full py-3 text-sm font-bold text-blue-600 hover:text-blue-700 bg-blue-50 dark:bg-blue-500/10 hover:bg-blue-100 dark:hover:bg-blue-500/20 rounded-xl transition-colors"
+                        >
+                            {showAllComments ? '▲ Show Less' : `▼ View all ${result.comments.length} comments`}
+                        </button>
+                        )}
+                    </div>
+                    )}
+
+                    {/* Fallback for transcript-only data */}
+                    {!result.video && result.fetched_text && (
+                    <div className="liquid-glass p-5 bg-white/60 dark:bg-black/40 rounded-2xl border border-gray-200 dark:border-white/10">
+                        <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
+                        <FileText size={16} /> Transcript
+                        </h3>
+                        <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
+                        {result.fetched_text}
+                        </p>
+                    </div>
+                    )}
+                </div>
+                )}
+            </motion.div>
+            )}
+        </AnimatePresence>
+
+        {/* GUIDES */}
+        {!result && (
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.3 }}
+            className="mt-16 w-full max-w-3xl mx-auto"
+          >
+            <h3 className="text-lg font-bold text-center mb-6 text-gray-500 uppercase tracking-widest text-xs">
+              {content.guideTitle}
+            </h3>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
+              {content.guides.map((item, idx) => (
+                <div key={idx} className="group p-6 border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 rounded-xl hover:shadow-lg transition-all duration-300">
+
+                  <div className="p-2.5 bg-orange-100 dark:bg-orange-500/20 w-fit rounded-lg mb-4 text-orange-600 dark:text-orange-400 group-hover:scale-110 transition-transform duration-300">
+                    <item.icon className="w-5 h-5" />
+                  </div>
+
+                  <h4 className="text-sm font-bold mb-2 text-gray-900 dark:text-white tracking-tight">
+                    {item.title}
+                  </h4>
+
+                  <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
+                    {item.text}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+        )}
+
+      </motion.div>
+    </div>
+  );
+}

src/app/chat/layout.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Chat | Sentimind",
+  description: "Chat with Sentimind AI.",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

src/app/chat/page.tsx

@@ -0,0 +1,478 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Send, Bot, User, Loader2, Sparkles, AlertCircle, Mic, MicOff } from "lucide-react";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from "@/lib/utils";
+import { useLanguage } from "@/app/providers";
+import { motion, AnimatePresence } from "framer-motion";
+
+// Fallback utility
+function classNames(...classes: (string | undefined | null | false)[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+interface Message {
+    id: string;
+    role: "user" | "bot";
+    content: string;
+}
+
+// --- REUSABLE MARKDOWN COMPONENTS ---
+const markdownComponents = {
+    // Style untuk bold
+    strong: ({ children }: any) => <strong className="font-bold text-orange-500">{children}</strong>,
+    // Style untuk table
+    table: ({ children }: any) => <div className="overflow-x-auto my-4"><table className="border-collapse w-full text-sm">{children}</table></div>,
+    thead: ({ children }: any) => <thead className="bg-orange-500/10 dark:bg-orange-500/20">{children}</thead>,
+    th: ({ children }: any) => <th className="border border-gray-300 dark:border-gray-600 px-3 py-2 text-left font-bold">{children}</th>,
+    td: ({ children }: any) => <td className="border border-gray-300 dark:border-gray-600 px-3 py-2">{children}</td>,
+    // Style untuk list
+    ul: ({ children }: any) => <ul className="list-disc list-outside pl-5 my-2 space-y-1">{children}</ul>,
+    ol: ({ children }: any) => <ol className="list-decimal list-outside pl-5 my-2 space-y-1">{children}</ol>,
+    // Code block styling
+    code: ({ node, inline, className, children, ...props }: any) => {
+        const match = /language-(\w+)/.exec(className || "");
+        return !inline ? (
+            <div className="rounded-md overflow-hidden my-2 border border-gray-200 dark:border-gray-700">
+                <div className="bg-gray-100 dark:bg-gray-800 px-3 py-1 text-xs text-gray-500 font-mono border-b border-gray-200 dark:border-gray-700">
+                    {match ? match[1] : 'code'}
+                </div>
+                <div className="bg-gray-50 dark:bg-[#1e1e1e] p-3 overflow-x-auto">
+                    <code className={className} {...props}>
+                        {children}
+                    </code>
+                </div>
+            </div>
+        ) : (
+            <code className="bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm font-mono text-orange-600 dark:text-orange-400" {...props}>
+                {children}
+            </code>
+        );
+    }
+};
+
+// --- TYPEWRITER COMPONENT dengan Markdown Real-time ---
+const Typewriter = ({ text, speed = 10, onTyping, onComplete }: { text: string; speed?: number; onTyping?: () => void; onComplete?: () => void }) => {
+    const [displayedText, setDisplayedText] = useState("");
+    const [isTyping, setIsTyping] = useState(true);
+
+    useEffect(() => {
+        setDisplayedText("");
+        setIsTyping(true);
+        let i = 0;
+        const interval = setInterval(() => {
+            if (i < text.length) {
+                setDisplayedText((prev) => prev + text.charAt(i));
+                i++;
+                // Scroll ke bawah setiap karakter baru
+                onTyping?.();
+            } else {
+                clearInterval(interval);
+                setIsTyping(false);
+                onComplete?.();
+            }
+        }, speed);
+
+        return () => clearInterval(interval);
+    }, [text, speed]);
+
+    return (
+        <div className="markdown-content">
+            <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                components={markdownComponents}
+            >
+                {displayedText}
+            </ReactMarkdown>
+            {isTyping && (
+                <span className="inline-block w-1.5 h-4 ml-1 align-middle bg-orange-500 animate-pulse" />
+            )}
+        </div>
+    );
+};
+
+export default function ChatPage() {
+    const { lang } = useLanguage();
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [inputValue, setInputValue] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [isListening, setIsListening] = useState(false);
+    const [typedMessages, setTypedMessages] = useState<Set<string>>(new Set());
+
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const messagesContainerRef = useRef<HTMLDivElement>(null);
+    const recognitionRef = useRef<any>(null);
+
+    // Only auto-scroll if user is already near the bottom
+    const scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
+        const container = messagesContainerRef.current;
+        if (!container) return;
+
+        // Threshold lebih kecil (50px) biar user gampang scroll ke atas tanpa ditarik balik
+        const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+        if (isNearBottom) {
+            messagesEndRef.current?.scrollIntoView({ behavior, block: "end" });
+        }
+    };
+
+    useEffect(() => {
+        // Force scroll on new messages
+        scrollToBottom("smooth");
+    }, [messages, isLoading]);
+
+    // Initialize Speech Recognition
+    const accumulatedTranscriptRef = useRef<string>('');
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+            if (SpeechRecognition) {
+                const recognition = new SpeechRecognition();
+                recognition.continuous = true;
+                recognition.interimResults = true;
+                recognition.lang = lang === 'id' ? 'id-ID' : 'en-US';
+
+                recognition.onresult = (event: any) => {
+                    let finalTranscript = '';
+                    let interimTranscript = '';
+
+                    for (let i = 0; i < event.results.length; ++i) {
+                        if (event.results[i].isFinal) {
+                            finalTranscript += event.results[i][0].transcript + ' ';
+                        } else {
+                            interimTranscript += event.results[i][0].transcript;
+                        }
+                    }
+
+                    // Gabungkan final + interim untuk display
+                    setInputValue(finalTranscript + interimTranscript);
+                    accumulatedTranscriptRef.current = finalTranscript;
+                };
+
+                recognition.onerror = (event: any) => {
+                    console.error("Voice Error:", event.error);
+                    if (event.error !== 'no-speech') {
+                        setIsListening(false);
+                    }
+                };
+
+                recognitionRef.current = recognition;
+            }
+        }
+    }, [lang]);
+
+    const toggleListening = () => {
+        if (!recognitionRef.current) {
+            alert("Browser kamu gak support voice input bro. Coba Chrome.");
+            return;
+        }
+
+        if (isListening) {
+            recognitionRef.current.stop();
+            setIsListening(false);
+        } else {
+            // Reset input pas mulai ngomong (opsional, tergantung preferensi)
+            // setInputValue(""); 
+            recognitionRef.current.start();
+            setIsListening(true);
+        }
+    };
+
+    const handleSendMessage = async (text: string) => {
+        const messageText = text || inputValue;
+        if (!messageText.trim()) return;
+
+        // Stop listening if sending
+        if (isListening && recognitionRef.current) {
+            recognitionRef.current.stop();
+            setIsListening(false);
+        }
+
+        setError(null);
+        const userMessage: Message = {
+            id: Date.now().toString(),
+            role: "user",
+            content: messageText,
+        };
+
+        setMessages((prev) => [...prev, userMessage]);
+        setInputValue("");
+        setIsLoading(true);
+
+        try {
+            const apiUrl = process.env.NEXT_PUBLIC_CHATBOT_URL || "http://localhost:8000/api/chat";
+
+            const response = await fetch(apiUrl, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    message: messageText,
+                    lang: lang
+                }),
+            });
+
+            if (!response.ok) {
+                throw new Error(`Server returned ${response.status}`);
+            }
+
+            const data = await response.json();
+
+            const botMessage: Message = {
+                id: (Date.now() + 1).toString(),
+                role: "bot",
+                content: data.response || "Maaf, saya tidak mengerti.",
+            };
+
+            setMessages((prev) => [...prev, botMessage]);
+        } catch (err: any) {
+            console.error("Chat Error:", err);
+            setError("Gagal terhubung ke backend. Pastikan server API (port 8000) sudah jalan.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const t = {
+        en: {
+            title: "Sentimind Chat",
+            desc: "Consult about MBTI, psychology, and mental health.",
+            placeholder: "Type or use voice...",
+            thinking: "Thinking...",
+            powerBy: "Powered by Gemini. AI may make mistakes.",
+            suggestions: [
+                "What is INTJ personality?",
+                "How to overcome social anxiety?",
+                "Explain Fe vs Fi cognitive functions",
+                "Why do INFJs feel lonely?"
+            ],
+            emptyState: "Start a conversation..."
+        },
+        id: {
+            title: "Sentimind Chat",
+            desc: "Ngobrol santai soal MBTI, psikologi, dan kesehatan mental.",
+            placeholder: "Ketik atau ngomong langsung...",
+            thinking: "Bentar bre, mikir dulu...",
+            powerBy: "Ditenagai Gemini. AI bisa aja salah, namanya juga bot.",
+            suggestions: [
+                "Apa itu tipe kepribadian INTJ?",
+                "Gimana cara ngilangin cemas?",
+                "Bedanya Fe sama Fi apa sih?",
+                "Kenapa INFJ sering merasa kesepian?"
+            ],
+            emptyState: "Tanya apa gitu..."
+        }
+    };
+
+    const content = t[lang] || t.en;
+
+    return (
+        <div className="w-full flex flex-col pt-28 md:pt-32 font-sans min-h-screen justify-start">
+
+            {/* Main Chat Content */}
+            <div className="flex-1 w-full max-w-3xl mx-auto px-4 md:px-0 flex flex-col">
+
+                {/* Header (Only show if no messages) */}
+                <AnimatePresence>
+                    {messages.length === 0 && (
+                        <motion.div 
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -20 }}
+                            transition={{ duration: 0.5 }}
+                            className="flex flex-col items-center text-center space-y-6 py-10"
+                        >
+                            <motion.div 
+                                initial={{ scale: 0 }}
+                                animate={{ scale: 1 }}
+                                transition={{ type: "spring", stiffness: 260, damping: 20, delay: 0.1 }}
+                                className="p-2 bg-orange-100 dark:bg-orange-500/10 rounded-full mb-2"
+                            >
+                                <Sparkles className="text-orange-600 dark:text-orange-400 w-6 h-6" />
+                            </motion.div>
+                            <div>
+                                <h1 className="text-5xl md:text-7xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 leading-[1.1] pb-2">
+                                    {content.title}
+                                </h1>
+                                <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl leading-relaxed">
+                                    {content.desc}
+                                </p>
+                            </div>
+
+                            <motion.div 
+                                className="grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-2xl mt-12"
+                                initial="hidden"
+                                animate="visible"
+                                variants={{
+                                    hidden: { opacity: 0 },
+                                    visible: {
+                                        opacity: 1,
+                                        transition: {
+                                            staggerChildren: 0.1
+                                        }
+                                    }
+                                }}
+                            >
+                                {content.suggestions.map((s, i) => (
+                                    <motion.button
+                                        key={i}
+                                        variants={{
+                                            hidden: { opacity: 0, y: 20 },
+                                            visible: { opacity: 1, y: 0 }
+                                        }}
+                                        whileHover={{ scale: 1.02 }}
+                                        whileTap={{ scale: 0.98 }}
+                                        onClick={() => handleSendMessage(s)}
+                                        className="p-4 text-left text-sm bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 hover:bg-orange-50 dark:hover:bg-neutral-800 hover:border-orange-300 dark:hover:border-orange-700/50 rounded-2xl transition-colors text-gray-600 dark:text-gray-300 shadow-sm"
+                                    >
+                                        "{s}"
+                                    </motion.button>
+                                ))}
+                            </motion.div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+
+                {/* Chat Messages */}
+                <div ref={messagesContainerRef} className="space-y-6 flex-1 mb-8">
+                    <AnimatePresence mode="popLayout">
+                        {messages.map((msg) => (
+                            <motion.div
+                                key={msg.id}
+                                layout
+                                initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                                animate={{ opacity: 1, scale: 1, y: 0 }}
+                                exit={{ opacity: 0, scale: 0.9 }}
+                                transition={{ duration: 0.3 }}
+                                className={classNames(
+                                    "flex gap-4 md:gap-6",
+                                    msg.role === "user" ? "flex-row-reverse" : "flex-row"
+                                )}
+                            >
+                                {/* Avatar */}
+                                <div className={classNames(
+                                    "w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center shrink-0 shadow-sm mt-1",
+                                    msg.role === "user"
+                                        ? "bg-gray-200 dark:bg-neutral-700 text-gray-600 dark:text-gray-200"
+                                        : "bg-orange-100 dark:bg-orange-500/20 text-orange-600 dark:text-orange-400"
+                                )}>
+                                    {msg.role === "user" ? <User size={18} /> : <Bot size={20} />}
+                                </div>
+
+                                {/* Content */}
+                                <div className={classNames(
+                                    "max-w-[85%] md:max-w-[80%] text-[15px] md:text-base leading-7",
+                                    msg.role === "user"
+                                        ? "bg-orange-600 text-white px-5 py-3 rounded-2xl rounded-tr-sm shadow-md"
+                                        : "text-gray-800 dark:text-gray-200 px-2 py-1 prose dark:prose-invert max-w-none"
+                                )}>
+                                    {msg.role === "bot" ? (
+                                        typedMessages.has(msg.id) ? (
+                                            <div className="markdown-content">
+                                                <ReactMarkdown
+                                                    remarkPlugins={[remarkGfm]}
+                                                    components={markdownComponents}
+                                                >
+                                                    {msg.content}
+                                                </ReactMarkdown>
+                                            </div>
+                                        ) : (
+                                            <Typewriter
+                                                text={msg.content}
+                                                speed={15}
+                                                onTyping={() => scrollToBottom("auto")}
+                                                onComplete={() => setTypedMessages(prev => new Set([...prev, msg.id]))}
+                                            />
+                                        )
+                                    ) : (
+                                        msg.content
+                                    )}
+                                </div>
+                            </motion.div>
+                        ))}
+                    </AnimatePresence>
+
+                    {/* Loading State */}
+                    {isLoading && (
+                        <motion.div 
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="flex gap-4 md:gap-6"
+                        >
+                            <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-orange-100 dark:bg-orange-500/20 text-orange-600 dark:text-orange-400 flex items-center justify-center shrink-0 mt-1">
+                                <Bot size={20} />
+                            </div>
+                            <div className="flex flex-col gap-2 mt-2">
+                                <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm">
+                                    <Loader2 size={16} className="animate-spin" />
+                                    {content.thinking}
+                                </div>
+                            </div>
+                        </motion.div>
+                    )}
+
+                    {error && (
+                        <motion.div 
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            className="p-4 bg-red-50 text-red-600 border border-red-200 rounded-xl text-center"
+                        >
+                            <p>{error}</p>
+                        </motion.div>
+                    )}
+                    <div ref={messagesEndRef} />
+                </div>
+            </div>
+
+            {/* STICKY Input Area */}
+            <div className="sticky bottom-0 left-0 w-full bg-background pb-6 pt-4 px-4 md:px-0 z-30">
+                <div className="max-w-3xl mx-auto relative">
+                    {/* Shadow gradient top for nice effect */}
+                    <div className="absolute -top-10 left-0 w-full h-10 bg-gradient-to-t from-background to-transparent pointer-events-none" />
+
+                    <motion.div 
+                        initial={{ y: 50, opacity: 0 }}
+                        animate={{ y: 0, opacity: 1 }}
+                        transition={{ delay: 0.5, type: "spring" }}
+                        className="relative flex items-center bg-gray-50 dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 shadow-sm rounded-3xl p-2 transition-all focus-within:border-orange-500"
+                    >
+                        {/* Voice Button */}
+                        <button
+                            onClick={toggleListening}
+                            className={classNames(
+                                "p-3 rounded-full transition-all flex items-center justify-center mr-1",
+                                isListening
+                                    ? "bg-red-500 text-white animate-pulse"
+                                    : "bg-transparent text-gray-400 hover:bg-gray-200 dark:hover:bg-neutral-800 hover:text-gray-600"
+                            )}
+                        >
+                            {isListening ? <MicOff size={20} /> : <Mic size={20} />}
+                        </button>
+
+                        <input
+                            type="text"
+                            value={inputValue}
+                            onChange={(e) => setInputValue(e.target.value)}
+                            onKeyDown={(e) => e.key === "Enter" && handleSendMessage(inputValue)}
+                            placeholder={content.placeholder}
+                            disabled={isLoading}
+                            className="w-full bg-transparent border-none outline-none focus:ring-0 focus:outline-none rounded-full px-2 py-3 text-base text-gray-800 dark:text-gray-200 placeholder:text-gray-400"
+                        />
+                        <button
+                            onClick={() => handleSendMessage(inputValue)}
+                            disabled={!inputValue.trim() || isLoading}
+                            className="p-3 bg-orange-600 hover:bg-orange-700 disabled:opacity-50 disabled:hover:bg-orange-600 text-white rounded-full transition-all shadow-sm transform hover:scale-105 active:scale-95 ml-2"
+                        >
+                            <Send size={18} />
+                        </button>
+                    </motion.div>
+                    <p className="text-center text-[10px] md:text-xs text-gray-400 mt-3 -mb-3 opacity-70">
+                        {content.powerBy}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/globals.css

@@ -0,0 +1,159 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+:root {
+  /* LIGHT MODE: Cream Polos */ 
+
+  --glass-bg: rgba(255, 255, 255, 0.9); 
+  --glass-border: rgba(249, 115, 22, 0.2); 
+  --radius: 0.625rem; 
+  --background: oklch(1 0 0); 
+  --foreground: oklch(0.147 0.004 49.25); 
+  --card: oklch(1 0 0); 
+  --card-foreground: oklch(0.147 0.004 49.25); 
+  --popover: oklch(1 0 0); 
+  --popover-foreground: oklch(0.147 0.004 49.25); 
+  --primary: oklch(0.216 0.006 56.043); 
+  --primary-foreground: oklch(0.985 0.001 106.423); 
+  --secondary: oklch(0.97 0.001 106.424); 
+  --secondary-foreground: oklch(0.216 0.006 56.043); 
+  --muted: oklch(0.97 0.001 106.424); 
+  --muted-foreground: oklch(0.553 0.013 58.071); 
+  --accent: oklch(0.97 0.001 106.424); 
+  --accent-foreground: oklch(0.216 0.006 56.043); 
+  --destructive: oklch(0.577 0.245 27.325); 
+  --border: oklch(0.923 0.003 48.717); 
+  --input: oklch(0.923 0.003 48.717); 
+  --ring: oklch(0.709 0.01 56.259); 
+  --chart-1: oklch(0.646 0.222 41.116); 
+  --chart-2: oklch(0.6 0.118 184.704); 
+  --chart-3: oklch(0.398 0.07 227.392); 
+  --chart-4: oklch(0.828 0.189 84.429); 
+  --chart-5: oklch(0.769 0.188 70.08); 
+  --sidebar: oklch(0.985 0.001 106.423); 
+  --sidebar-foreground: oklch(0.147 0.004 49.25); 
+  --sidebar-primary: oklch(0.216 0.006 56.043); 
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423); 
+  --sidebar-accent: oklch(0.97 0.001 106.424); 
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043); 
+  --sidebar-border: oklch(0.923 0.003 48.717); 
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  /* DARK MODE: Hitam Pekat Polos */
+  --background: oklch(0.147 0.004 49.25); 
+  --foreground: oklch(0.985 0.001 106.423);
+
+  --glass-bg: rgba(12, 10, 9, 0.8); 
+  --glass-border: rgba(249, 115, 22, 0.2); 
+  --card: oklch(0.216 0.006 56.043); 
+  --card-foreground: oklch(0.985 0.001 106.423); 
+  --popover: oklch(0.216 0.006 56.043); 
+  --popover-foreground: oklch(0.985 0.001 106.423); 
+  --primary: oklch(0.923 0.003 48.717); 
+  --primary-foreground: oklch(0.216 0.006 56.043); 
+  --secondary: oklch(0.268 0.007 34.298); 
+  --secondary-foreground: oklch(0.985 0.001 106.423); 
+  --muted: oklch(0.268 0.007 34.298); 
+  --muted-foreground: oklch(0.709 0.01 56.259); 
+  --accent: oklch(0.268 0.007 34.298); 
+  --accent-foreground: oklch(0.985 0.001 106.423); 
+  --destructive: oklch(0.704 0.191 22.216); 
+  --border: oklch(1 0 0 / 10%); 
+  --input: oklch(1 0 0 / 15%); 
+  --ring: oklch(0.553 0.013 58.071); 
+  --chart-1: oklch(0.488 0.243 264.376); 
+  --chart-2: oklch(0.696 0.17 162.48); 
+  --chart-3: oklch(0.769 0.188 70.08); 
+  --chart-4: oklch(0.627 0.265 303.9); 
+  --chart-5: oklch(0.645 0.246 16.439); 
+  --sidebar: oklch(0.216 0.006 56.043); 
+  --sidebar-foreground: oklch(0.985 0.001 106.423); 
+  --sidebar-primary: oklch(0.488 0.243 264.376); 
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423); 
+  --sidebar-accent: oklch(0.268 0.007 34.298); 
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423); 
+  --sidebar-border: oklch(1 0 0 / 10%); 
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+body {
+  /* HAPUS background-image/radial-gradient DARI SINI */
+  background-color: var(--background);
+}
+
+/* Utility buat kaca tetep ada, tapi background body udah polos */
+@utility liquid-glass {
+  @apply backdrop-blur-xl border shadow-lg rounded-2xl;
+  background: var(--glass-bg);
+  border-color: var(--glass-border);
+}
+
+@utility navbar-transition {
+  transition-property: all;
+  transition-duration: 700ms; 
+  will-change: width, top, border-radius;
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  body {
+    @apply antialiased;
+  }
+}

src/app/icon.tsx

@@ -0,0 +1,68 @@
+// src/app/icon.tsx
+import { ImageResponse } from 'next/og';
+
+// Route segment config
+export const runtime = 'edge';
+
+// Image metadata
+export const size = {
+  width: 32,
+  height: 32,
+};
+export const contentType = 'image/png';
+
+// Image generation
+export default function Icon() {
+  return new ImageResponse(
+    (
+      // Container Background
+      <div
+        style={{
+          fontSize: 24,
+          background: '#ea580c', // Warna orange-600 (Sesuai Navbar)
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+          borderRadius: '8px', // Rounded biar tidak kaku
+        }}
+      >
+        {/* SVG BrainCircuit (Official Lucide Paths) */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          {/* Path 1: Bagian Kiri Otak */}
+          <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+          
+          {/* Path 2: Bagian Kanan Otak */}
+          <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
+          
+          {/* Path 3: Koneksi Tengah */}
+          <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
+          
+          {/* Path 4-9: Sirkuit / Nodes Kecil */}
+          <path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
+          <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+          <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+          <path d="M19.938 10.5a4 4 0 0 1 .585.396" />
+          <path d="M6 18a4 4 0 0 1-1.97-1.364" />
+          <path d="M17.97 16.636A4 4 0 0 1 16 18" />
+        </svg>
+      </div>
+    ),
+    // Options
+    {
+      ...size,
+    }
+  );
+}

src/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Providers } from "./providers";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Sentimind - AI Personality Profiler",
+  description: "Analyze your personality using AI",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.className} min-h-screen bg-background text-foreground flex flex-col`}>
+        <Providers>
+          <Navbar />
+
+          {/* Main content fills available space */}
+          <main className="container mx-auto px-4 md:px-8 flex-grow">
+            {children}
+          </main>
+
+          <Footer />
+
+        </Providers>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import Link from "next/link";
+import { Sparkles, BrainCircuit, Search, BookOpen } from "lucide-react"; 
+import { useLanguage } from "@/app/providers";
+import { Button } from "@/components/ui/button";
+import { motion, Variants } from "framer-motion";
+
+export default function Home() {
+  const { lang } = useLanguage();
+
+  const t = {
+    en: {
+      badge: "AI Personality Profiler",
+      titleLine1: "Understand",
+      titleLine2: "Your Personality.",
+      desc: "Sentimind analyzes your writing style to reveal your MBTI type, emotional tone, and communication patterns from simple text.",
+      btnStart: "Start Analysis",
+      btnLibrary: "Explore Types",
+      features: [
+        { title: "MBTI Prediction", desc: "Predicts one of 16 personality types based on your writing style." },
+        { title: "Sentiment Analysis", desc: "Detects the dominant emotional tone and mood in your text." },
+        { title: "Keyword Extraction", desc: "Highlights key topics and patterns from your daily conversations." }
+      ]
+    },
+    id: {
+      badge: "Profil Kepribadian AI",
+      titleLine1: "Pahami",
+      titleLine2: "Kepribadian Lo.",
+      desc: "Gak perlu tes berjam-jam. Sentimind baca gaya nulis lo buat nebak MBTI, mood, dan pola pikir yang mungkin lo sendiri gak sadar.",
+      btnStart: "Mulai Analisis",
+      btnLibrary: "Kamus MBTI",
+      features: [
+        { title: "Prediksi MBTI", desc: "Tebak satu dari 16 tipe kepribadian based on gaya tulisan lo." },
+        { title: "Analisis Sentimen", desc: "Cek vibes tulisan lo, apakah lagi positif banget atau malah gloomy." },
+        { title: "Ekstraksi Kata Kunci", desc: "Highlight topik-topik yang sering lo bahas tanpa sadar." }
+      ]
+    }
+  };
+
+  const content = t[lang];
+  const icons = [BrainCircuit, Sparkles, Search];
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: { 
+      opacity: 1,
+      transition: { 
+        staggerChildren: 0.15,
+        delayChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants: Variants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: { 
+      y: 0, 
+      opacity: 1,
+      transition: { type: "spring", stiffness: 100 }
+    }
+  };
+
+  return (
+    <motion.div 
+      initial="hidden"
+      animate="visible"
+      variants={containerVariants}
+      className="flex flex-col items-center justify-start pt-28 md:pt-32 font-sans gap-8 w-full min-h-screen"
+    >
+      
+      <div className="flex flex-col items-center justify-center text-center gap-4 relative w-full px-4 max-w-4xl mx-auto">
+        
+        {/* Badge */}
+        <motion.div variants={itemVariants} className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50/50 dark:bg-orange-950/30 text-orange-600 dark:text-orange-400 text-xs font-medium border border-orange-200 dark:border-orange-800">
+          <Sparkles className="w-3 h-3" />
+          <span>{content.badge}</span>
+        </motion.div>
+
+        {/* Title */}
+        <motion.h1 variants={itemVariants} className="text-5xl md:text-7xl font-black tracking-tighter text-gray-900 dark:text-white leading-[1.1] pb-2">
+          {content.titleLine1} <span className="text-transparent bg-clip-text bg-gradient-to-br from-orange-500 to-amber-600">{content.titleLine2}</span>
+        </motion.h1>
+
+        <motion.p variants={itemVariants} className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl leading-relaxed">
+          {content.desc}
+        </motion.p>
+
+        {/* Action Buttons */}
+        <motion.div variants={itemVariants} className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-8 w-full">
+          
+          <Button asChild size="lg" className="w-full sm:w-auto h-12 px-8 text-base font-semibold rounded-lg shadow-sm cursor-pointer bg-orange-600 hover:bg-orange-700 text-white border-transparent">
+             <Link href="/analyzer">
+                <Search className="w-4 h-4 mr-2" />
+                {content.btnStart}
+             </Link>
+          </Button>
+          
+          <Button asChild variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base font-semibold rounded-lg border-gray-200 dark:border-white/10 hover:bg-gray-100 dark:hover:bg-white/5 bg-transparent cursor-pointer">
+             <Link href="/types">
+                <BookOpen className="w-4 h-4 mr-2" />
+                {content.btnLibrary}
+             </Link>
+          </Button>
+
+        </motion.div>
+
+        {/* Features Grid */}
+        <motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-20 pb-20 w-full text-left">
+          {content.features.map((item, i) => {
+            const Icon = icons[i];
+            return (
+              <motion.div 
+                key={i} 
+                whileHover={{ y: -5 }}
+                className="group p-6 border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 rounded-xl hover:shadow-lg transition-all duration-300"
+              >
+                <div className="p-2.5 bg-orange-100 dark:bg-orange-500/20 w-fit rounded-lg mb-4 text-orange-600 dark:text-orange-400 group-hover:scale-110 transition-transform duration-300">
+                  <Icon className="w-5 h-5" />
+                </div>
+                <h3 className="text-sm font-bold mb-2 text-gray-900 dark:text-white tracking-tight">{item.title}</h3>
+                <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">{item.desc}</p>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+
+      </div>
+    </motion.div>
+  );
+}

src/app/providers.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { useState, useEffect, createContext, useContext } from "react";
+
+type LangContextType = {
+  lang: "en" | "id";
+  toggleLang: () => void;
+};
+
+const LanguageContext = createContext<LangContextType | undefined>(undefined);
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  const [lang, setLang] = useState<"en" | "id">("en");
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const toggleLang = () => {
+    setLang((prev) => (prev === "en" ? "id" : "en"));
+  };
+
+  
+  return (
+    <LanguageContext.Provider value={{ lang, toggleLang }}>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        {children}
+      </ThemeProvider>
+    </LanguageContext.Provider>
+  );
+}
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) throw new Error("useLanguage must be used within Providers");
+  return context;
+};

src/app/quiz/layout.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Mini Test | Sentimind",
+  description: "Take a quick personality test to know your MBTI.",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

src/app/quiz/page.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useLanguage } from "@/app/providers";
+import Link from "next/link";
+import { mbtiDatabase } from "@/data/mbti";
+import { CheckCircle2, Clock, ShieldCheck } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+type Question = {
+  id: number;
+  text_id: string;
+  text_en: string;
+};
+
+export default function QuizPage() {
+  const { lang } = useLanguage();
+  const [questions, setQuestions] = useState<Question[]>([]);
+  const [step, setStep] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, number>>({});
+  const [result, setResult] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const t = {
+    en: {
+      loading: "Loading questions...",
+      title: "Personality Quiz",
+      subtitle: "Answer honestly to reveal your true type.",
+      questionLabel: "Question",
+      agree: "Agree",
+      disagree: "Disagree",
+      result: "Your Result:",
+      retry: "Retake Quiz",
+      submitError: "Failed to calculate result.",
+      infoTitle: "Things to know",
+      infos: [
+        { icon: Clock, text: "Takes less than 2 minutes to complete." },
+        { icon: CheckCircle2, text: "Answer instinctively, don't overthink." },
+        { icon: ShieldCheck, text: "No right or wrong answers." }
+      ]
+    },
+    id: {
+      loading: "Lagi nyiapin soal...",
+      title: "Kuis Kepribadian",
+      subtitle: "Jawab jujur ya, biar tipe aslinya ketahuan.",
+      questionLabel: "Pertanyaan",
+      agree: "Setuju",
+      disagree: "Gak Setuju",
+      result: "Hasil Kamu:",
+      retry: "Ulangi Tes",
+      submitError: "Gagal ngitung hasil nih.",
+      infoTitle: "Info Penting",
+      infos: [
+        { icon: Clock, text: "Gak sampe 2 menit kok, santai." },
+        { icon: CheckCircle2, text: "Jawab spontan aja, gak usah mikir keras." },
+        { icon: ShieldCheck, text: "Gak ada jawaban bener atau salah." }
+      ]
+    }
+  };
+
+  const content = t[lang];
+
+  useEffect(() => {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL || "";
+    fetch(`${apiUrl}/api/quiz`)
+      .then((res) => res.json())
+      .then((data) => {
+        setQuestions(data.questions || []);
+        setLoading(false);
+      });
+  }, []);
+
+  const handleAnswer = (val: number) => {
+    const currentQ = questions[step];
+    setAnswers((prev) => ({ ...prev, [currentQ.id]: val }));
+
+    if (step < questions.length - 1) {
+      setStep(step + 1);
+    } else {
+      submitAnswers({ ...answers, [currentQ.id]: val });
+    }
+  };
+
+  const submitAnswers = async (finalAnswers: Record<string, number>) => {
+    setLoading(true);
+    try {
+      const apiUrl = process.env.NEXT_PUBLIC_API_URL || "";
+      const res = await fetch(`${apiUrl}/api/quiz`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ answers: finalAnswers }),
+      });
+      const data = await res.json();
+      setResult(data.mbti);
+    } catch (e) {
+      alert(content.submitError);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return (
+    <div className="pt-40 flex items-center justify-center font-bold text-orange-600 animate-pulse">
+      {content.loading}
+    </div>
+  );
+
+  if (result) {
+    const data = mbtiDatabase[result];
+    const contentData = lang === 'en' ? data?.en : data?.id;
+
+    return (
+      <div className="w-full pt-28 pb-12 flex flex-col justify-center items-center font-sans relative px-4">
+        <motion.div 
+          initial={{ scale: 0.9, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ type: "spring", duration: 0.6 }}
+          className="liquid-glass p-8 md:p-12 text-center bg-white/40 dark:bg-black/20 border border-white/20 max-w-2xl w-full rounded-3xl shadow-2xl"
+        >
+
+          <h2 className="text-sm font-bold opacity-60 uppercase tracking-widest text-gray-800 dark:text-gray-200 mb-4">
+            {content.result}
+          </h2>
+
+          <div className={`p-6 rounded-2xl border-2 bg-white/50 dark:bg-black/40 backdrop-blur-md mb-8 ${data?.color || 'border-gray-500'}`}>
+            <motion.div 
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ delay: 0.3, type: "spring" }}
+              className="text-6xl md:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-red-600 mb-2"
+            >
+              {result}
+            </motion.div>
+            <h3 className={`text-2xl font-bold mb-2 ${data?.textColor}`}>
+              {contentData?.name}
+            </h3>
+            <p className="text-gray-600 dark:text-gray-300 text-sm md:text-base line-clamp-3">
+              {contentData?.desc}
+            </p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              href={`/types/${result}`}
+              className="px-8 py-3 bg-orange-600 text-white rounded-xl font-bold hover:bg-orange-700 transition-all shadow-lg hover:shadow-orange-500/30"
+            >
+              {lang === 'en' ? "Read Full Profile" : "Baca Profil Lengkap"}
+            </Link>
+
+            <button
+              onClick={() => window.location.reload()}
+              className="px-8 py-3 bg-white dark:bg-white/10 border border-gray-200 dark:border-white/20 rounded-xl font-bold hover:bg-gray-100 dark:hover:bg-white/20 transition-all text-gray-900 dark:text-white"
+            >
+              {content.retry}
+            </button>
+          </div>
+
+        </motion.div>
+      </div>
+    );
+  }
+
+  if (questions.length === 0) return null;
+
+  const currentQuestionText = lang === 'en' ? questions[step].text_en : questions[step].text_id;
+
+  return (
+    <div className="w-full pt-28 pb-12 px-4 sm:px-6 lg:px-8 font-sans flex flex-col items-center">
+      <div className="max-w-3xl w-full z-10">
+
+        {/* HEADER */}
+        <motion.div 
+          initial={{ y: -20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          className="text-center mb-12"
+        >
+          <h1 className="text-4xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 pb-2 mb-2">
+            {content.title}
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 text-sm md:text-lg max-w-2xl mx-auto">
+            {content.subtitle}
+          </p>
+        </motion.div>
+
+        {/* CARD SOAL */}
+        <AnimatePresence mode="wait">
+          <motion.div 
+            key={step}
+            initial={{ x: 50, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: -50, opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="liquid-glass p-6 md:p-10 bg-white/50 dark:bg-black/30 backdrop-blur-md shadow-2xl border border-white/20 rounded-3xl"
+          >
+            <div className="flex justify-between items-end mb-6 border-b border-gray-500/10 pb-4">
+              <span className="text-xs font-bold uppercase tracking-widest opacity-50 text-gray-700 dark:text-gray-300">
+                {content.questionLabel}
+              </span>
+              <span className="text-2xl font-black text-orange-600">
+                {step + 1} <span className="text-sm font-medium text-gray-400">/ {questions.length}</span>
+              </span>
+            </div>
+
+            <h2 className="text-xl md:text-3xl font-bold mb-12 text-center leading-snug min-h-[100px] flex items-center justify-center text-gray-900 dark:text-white">
+              {currentQuestionText}
+            </h2>
+
+            <div className="relative">
+              <div className="hidden md:flex justify-between absolute -top-8 w-full text-xs font-bold opacity-60 px-2">
+                <span className="text-red-500">{content.disagree}</span>
+                <span className="text-green-500">{content.agree}</span>
+              </div>
+
+              <div className="flex justify-between items-center gap-2 md:gap-4">
+                {[-3, -2, -1, 0, 1, 2, 3].map((val) => (
+                  <motion.button
+                    key={val}
+                    whileHover={{ scale: 1.2 }}
+                    whileTap={{ scale: 0.9 }}
+                    onClick={() => handleAnswer(val)}
+                    className={`
+                      group relative rounded-full border-2 transition-all duration-300 flex items-center justify-center shadow-sm
+                      ${val === 0
+                        ? 'w-10 h-10 md:w-12 md:h-12 border-gray-300 text-gray-400 hover:bg-gray-200 dark:hover:bg-white/10'
+                        : 'w-12 h-12 md:w-16 md:h-16'
+                      }
+                      ${val < 0
+                        ? 'border-red-400/50 text-red-500 hover:bg-red-500 hover:border-red-500 hover:text-white'
+                        : val > 0
+                          ? 'border-green-400/50 text-green-500 hover:bg-green-500 hover:border-green-500 hover:text-white'
+                          : ''
+                      }
+                    `}
+                    title={`${val}`}
+                  >
+                    <span className={`
+                      absolute rounded-full transition-all duration-300
+                      ${Math.abs(val) === 3 ? 'w-3 h-3 md:w-4 md:h-4' : ''}
+                      ${Math.abs(val) === 2 ? 'w-2.5 h-2.5 md:w-3 md:h-3' : ''}
+                      ${Math.abs(val) === 1 ? 'w-2 h-2 md:w-2 md:h-2' : ''}
+                      ${val === 0 ? 'w-1.5 h-1.5 bg-gray-400' : 'bg-current'}
+                      group-hover:bg-white
+                    `}></span>
+                    <span className="md:hidden absolute -bottom-6 text-[10px] font-bold opacity-0 group-hover:opacity-100 transition-opacity text-gray-500">
+                      {val === -3 ? 'Sgt Tdk' : val === 3 ? 'Sgt Iya' : val}
+                    </span>
+                  </motion.button>
+                ))}
+              </div>
+
+              <div className="flex justify-between mt-6 text-[10px] font-bold opacity-60 uppercase md:hidden tracking-wider">
+                <span className="text-red-500">{content.disagree}</span>
+                <span className="text-green-500">{content.agree}</span>
+              </div>
+            </div>
+          </motion.div>
+        </AnimatePresence>
+
+        {/* INFO SECTION */}
+        {!result && (
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.6 }}
+            transition={{ delay: 0.5 }}
+            className="mt-12 flex flex-col md:flex-row justify-center gap-6 md:gap-12 text-sm text-gray-600 dark:text-gray-400"
+          >
+            {content.infos.map((info, idx) => (
+              <div key={idx} className="flex items-center gap-2 justify-center">
+                <info.icon size={16} />
+                <span>{info.text}</span>
+              </div>
+            ))}
+          </motion.div>
+        )}
+
+      </div>
+    </div>
+  );
+}

src/app/types/[codes]/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { mbtiDatabase } from "@/data/mbti";
+import { useLanguage } from "@/app/providers";
+import { ArrowLeft, Quote } from "lucide-react";
+
+export default function DetailPage() {
+  const params = useParams(); 
+  const router = useRouter();
+  const { lang } = useLanguage();
+  
+  const rawCode = params?.codes; 
+  
+  const [code, setCode] = useState<string>("");
+
+  useEffect(() => {
+    if (rawCode) {
+      const c = (Array.isArray(rawCode) ? rawCode[0] : rawCode).toUpperCase();
+      setCode(c);
+      document.title = `${c} - Detail | Sentimind`;
+    }
+  }, [rawCode]);
+
+  if (!code) return <div className="min-h-screen bg-white dark:bg-black" />;
+
+  const data = mbtiDatabase[code];
+
+  if (!data) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-white dark:bg-black text-gray-900 dark:text-white p-4 text-center">
+        <h2 className="text-3xl font-black mb-4">Type Not Found 😕</h2>
+        <p className="text-gray-500 mb-8">
+          Tipe kepribadian <span className="font-mono bg-gray-100 px-2 py-1 rounded">{code}</span> gak ketemu nih.
+        </p>
+        <button 
+          onClick={() => router.push("/types")}
+          className="px-6 py-3 bg-orange-600 text-white rounded-full font-bold hover:bg-orange-700 transition-all"
+        >
+          Kembali ke Daftar
+        </button>
+      </div>
+    );
+  }
+
+  const content = lang === 'en' ? data.en : data.id;
+
+  return (
+    <div className="min-h-screen pt-28 pb-12 px-4">
+      <div className="max-w-4xl mx-auto">
+        
+        {/* Tombol Back */}
+        <button 
+          onClick={() => router.push("/types")}
+          className="flex items-center gap-2 text-gray-500 hover:text-orange-500 mb-8 transition-colors group"
+        >
+          <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+          {lang === 'en' ? "Back to Types" : "Balik ke Daftar"}
+        </button>
+
+        {/* Header */}
+        <div className={`rounded-3xl p-8 md:p-12 mb-12 border ${data.color} bg-gray-50 dark:bg-gray-900`}>
+          <div className="flex flex-col md:flex-row gap-8 items-start md:items-center">
+            <div>
+              <span className={`inline-block px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-4 bg-white dark:bg-black ${data.textColor}`}>
+                {data.group}
+              </span>
+              <h1 className="text-5xl md:text-7xl font-black text-gray-900 dark:text-white mb-2">
+                {code}
+              </h1>
+              <h2 className={`text-2xl md:text-3xl font-bold ${data.textColor}`}>
+                {content.name}
+              </h2>
+            </div>
+          </div>
+          
+          <p className="mt-8 text-lg md:text-xl text-gray-700 dark:text-gray-300 leading-relaxed max-w-2xl">
+            {content.desc}
+          </p>
+        </div>
+
+        {/* Content Body */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            
+            {/* Quote Section */}
+            <div className="col-span-1 md:col-span-2 bg-gradient-to-br from-gray-900 to-black text-white p-8 rounded-2xl relative overflow-hidden shadow-2xl">
+                <Quote className="absolute top-4 right-4 text-white/10" size={100} />
+                <blockquote className="relative z-10 text-xl md:text-2xl font-serif italic text-center leading-relaxed">
+                  "{content.quote}"
+                </blockquote>
+            </div>
+
+            {/* Relationships */}
+            <div className="p-6 rounded-2xl bg-pink-50 dark:bg-pink-900/10 border border-pink-100 dark:border-pink-900/30">
+               <h3 className="text-xl font-bold mb-4 flex items-center gap-2 text-pink-600 dark:text-pink-400">
+                  {lang === 'en' ? "Relationships" : "Soal Hubungan"}
+               </h3>
+               <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+                  {content.relationships}
+               </p>
+            </div>
+
+            {/* Career */}
+            <div className="p-6 rounded-2xl bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/30">
+               <h3 className="text-xl font-bold mb-4 flex items-center gap-2 text-blue-600 dark:text-blue-400">
+                 {lang === 'en' ? "Career Paths" : "Karir yang Cocok"}
+               </h3>
+               <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+                  {content.career}
+               </p>
+            </div>
+
+            {/* Strengths */}
+            <div>
+                <h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-green-600">
+                    {lang === 'en' ? "Strengths" : "Kelebihan"}
+                </h3>
+                <ul className="space-y-3">
+                    {content.strengths.map((s, idx) => (
+                        <li key={idx} className="flex items-start gap-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-900/30">
+                            <div className="w-1.5 h-1.5 rounded-full bg-green-500 mt-2 shrink-0"></div>
+                            <span className="text-gray-700 dark:text-gray-200 font-medium">{s}</span>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+
+            {/* Weaknesses */}
+            <div>
+                <h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-red-500">
+                    {lang === 'en' ? "Weaknesses" : "Kekurangan"}
+                </h3>
+                <ul className="space-y-3">
+                    {content.weaknesses.map((w, idx) => (
+                        <li key={idx} className="flex items-start gap-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/30">
+                            <div className="w-1.5 h-1.5 rounded-full bg-red-500 mt-2 shrink-0"></div>
+                            <span className="text-gray-700 dark:text-gray-200 font-medium">{w}</span>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/types/layout.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "MBTI Types | Sentimind",
+  description: "Explore all 16 personality types.",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

src/app/types/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { mbtiDatabase } from "@/data/mbti";
+import { useLanguage } from "@/app/providers";
+import { motion, Variants } from "framer-motion";
+
+export default function TypesPage() {
+  const { lang } = useLanguage();
+  const codes = Object.keys(mbtiDatabase);
+
+  const grouped = codes.reduce((acc, code) => {
+    const data = mbtiDatabase[code];
+    if (!acc[data.group]) acc[data.group] = [];
+    acc[data.group].push({ code, ...data });
+    return acc;
+  }, {} as Record<string, any[]>);
+
+  const groups = ["Analysts", "Diplomats", "Sentinels", "Explorers"];
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: { 
+      opacity: 1,
+      transition: { 
+        staggerChildren: 0.1,
+        delayChildren: 0.1 
+      }
+    }
+  };
+
+  const itemVariants: Variants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: { 
+      y: 0, 
+      opacity: 1,
+      transition: { type: "spring", stiffness: 100 }
+    }
+  };
+
+  return (
+    <div className="min-h-screen pt-28 pb-12 px-4 sm:px-6 lg:px-8 font-sans">
+      <div className="max-w-7xl mx-auto">
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-16"
+        >
+          
+          <h1 className="text-4xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 pb-2 mb-2">
+            {lang === 'en' ? "Personality Types" : "Tipe Kepribadian"}
+          </h1>
+          
+          <p className="text-gray-600 dark:text-gray-400 text-sm md:text-lg max-w-2xl mx-auto">
+            {lang === 'en' 
+              ? "Explore the 16 personality types. Click specifically on any card to learn more."
+              : "Jelajahi 16 tipe kepribadian. Klik secara spesifik pada kartu untuk mempelajari lebih lanjut."}
+          </p>
+        </motion.div>
+
+        <motion.div 
+          className="space-y-20"
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={containerVariants}
+        >
+          {groups.map((groupName) => (
+            <motion.div key={groupName} variants={itemVariants}>
+              <div className="flex items-center gap-4 mb-8">
+                <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
+                   {groupName}
+                </h2>
+                <div className="h-1 flex-1 bg-gray-200 dark:bg-gray-800 rounded-full"></div>
+              </div>
+              
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                {grouped[groupName]?.map((item) => {
+                  const content = lang === 'en' ? item.en : item.id;
+                  
+                  return (
+                    <Link href={`/types/${item.code}`} key={item.code} className="block h-full">
+                      <motion.div 
+                        whileHover={{ y: -5 }}
+                        className={`
+                          h-full relative group rounded-3xl p-6 border-2 transition-all duration-300 
+                          hover:shadow-2xl 
+                          bg-white/80 dark:bg-gray-900/50 backdrop-blur-sm cursor-pointer
+                          ${item.color}
+                        `}
+                      >
+                        <div className="flex items-center justify-between mb-4">
+                           <div className={`text-4xl font-black ${item.textColor} opacity-80 group-hover:opacity-100 transition-opacity`}>
+                              {item.code}
+                           </div>
+                        </div>
+                        
+                        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
+                          {content.name}
+                        </h3>
+                        
+                        <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed line-clamp-3">
+                          {content.desc}
+                        </p>
+
+                        <div className={`mt-4 text-xs font-bold uppercase tracking-wider ${item.textColor} flex items-center gap-1`}>
+                          {lang === 'en' ? "Read More" : "Baca Selengkapnya"} &rarr;
+                        </div>
+                      </motion.div>
+                    </Link>
+                  );
+                })}
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+}

src/components/Footer.tsx

@@ -0,0 +1,28 @@
+"use client";
+import Link from "next/link";
+import { useLanguage } from "@/app/providers";
+
+export default function Footer() {
+  const { lang } = useLanguage();
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="w-full py-8 mt-auto border-t border-gray-200 dark:border-white/10 bg-white/50 dark:bg-black/50 backdrop-blur-sm text-center">
+      <div className="container mx-auto px-4">
+        <div className="mb-4">
+          <span className="text-2xl font-black tracking-tighter text-orange-600">Sentimind.</span>
+        </div>
+        <div className="flex justify-center gap-6 mb-6 text-sm font-medium text-gray-600 dark:text-gray-300">
+          <Link href="/" className="hover:text-orange-600 transition-colors">Home</Link>
+          <Link href="/analyzer" className="hover:text-orange-600 transition-colors">Analyzer</Link>
+          <Link href="/quiz" className="hover:text-orange-600 transition-colors">Mini Test</Link>
+          <Link href="/types" className="hover:text-orange-600 transition-colors">{lang === 'en' ? "Types" : "Tipe"}</Link>
+          <Link href="/chat" className="hover:text-orange-600 transition-colors">Chat</Link>
+        </div>
+        <p className="text-gray-500 dark:text-gray-400 text-xs">
+          © {year} Sentimind Project. {"All rights reserved."}
+        </p>
+      </div>
+    </footer>
+  );
+}

src/components/Navbar.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import { useState, useEffect } from "react";
+import { Sun, Moon, BrainCircuit, Menu, X } from "lucide-react";
+import { useLanguage } from "@/app/providers";
+import { Button } from "@/components/ui/button";
+
+export default function Navbar() {
+  const { theme, setTheme } = useTheme();
+  const { lang, toggleLang } = useLanguage();
+  const pathname = usePathname();
+
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const handleScroll = () => setIsScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const getLinkVariant = (path: string) => pathname === path ? "secondary" : "ghost";
+
+  const navLinks = [
+    { href: "/", label: lang === 'en' ? "Home" : "Beranda" },
+    { href: "/analyzer", label: lang === 'en' ? "Analyzer" : "Analisis" },
+    { href: "/quiz", label: lang === 'en' ? "Mini Test" : "Tes Mini" },
+    { href: "/types", label: lang === 'en' ? "Types" : "Tipe" },
+    { href: "/chat", label: lang === 'en' ? "Chat" : "Chat" },
+  ];
+
+  return (
+    <>
+      <nav
+        className={`
+          fixed left-1/2 -translate-x-1/2 z-50 
+          flex justify-between items-center px-4 py-3
+          /* GANTI BAGIAN TRANSISI DI SINI: */
+          transition-all duration-700 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] will-change-[width,top,background]
+          ${isScrolled
+            /* SCROLLED STATE: 
+               - top-4: Turun dikit
+               - w-[92%]: Lebar di layar kecil
+               - md:w-[64rem]: KUNCI ANIMASI! Kita set lebar fix (setara max-w-5xl) biar width-nya yang animasi, bukan max-width.
+               - rounded-[12px]: Jadi kotak tumpul (sebelumnya rounded-full)
+            */
+            ? "top-4 w-[92%] md:w-[64rem] rounded-[12px] bg-white/80 dark:bg-black/80 backdrop-blur-md border border-gray-200 dark:border-white/10 shadow-sm"
+            /* DEFAULT STATE:
+               - top-0: Nempel atas
+               - w-full: Lebar penuh
+               - rounded-none: Kotak
+            */
+            : "top-0 w-full bg-transparent border-b border-transparent"
+          }
+        `}
+      >
+        {/* LOGO */}
+        <Link href="/" className="flex items-center gap-2 pl-2">
+          <div className="bg-orange-600 p-1.5 rounded-[8px]">
+            <BrainCircuit className="text-white w-5 h-5" />
+          </div>
+          <span className="font-bold text-lg tracking-tight text-gray-900 dark:text-white">
+            Sentimind<span className="text-orange-600">.</span>
+          </span>
+        </Link>
+
+        {/* DESKTOP MENU */}
+        <div className="hidden md:flex items-center gap-1">
+          {navLinks.map((link) => (
+            <Button
+              key={link.href}
+              asChild
+              variant={getLinkVariant(link.href)}
+              size="sm"
+              className={`cursor-pointer text-sm font-medium ${pathname === link.href ? "text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-950/30" : "text-gray-600 dark:text-gray-400"}`}
+            >
+              <Link href={link.href}>
+                {link.label}
+              </Link>
+            </Button>
+          ))}
+        </div>
+
+        {/* KANAN: Lang + Theme */}
+        <div className="flex items-center gap-2 pr-2">
+          <Button
+            onClick={toggleLang}
+            variant="ghost"
+            size="sm"
+            className="w-9 h-9 p-0 text-xs font-bold text-gray-500"
+          >
+            {lang.toUpperCase()}
+          </Button>
+
+          <Button
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            variant="ghost"
+            size="icon"
+            className="w-9 h-9 rounded-full text-gray-500"
+          >
+            {!mounted ? <div className="w-4 h-4" /> : theme === "dark" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          </Button>
+
+          {/* Mobile Menu Button */}
+          <div className="md:hidden">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            >
+              {isMobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </Button>
+          </div>
+        </div>
+      </nav>
+
+      {/* MOBILE MENU */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 z-40 bg-white dark:bg-black pt-24 px-6 animate-in slide-in-from-top-10 fade-in duration-200">
+          <div className="flex flex-col gap-2">
+            {navLinks.map((link) => (
+              <Link key={link.href} href={link.href} onClick={() => setIsMobileMenuOpen(false)}>
+                <Button variant="ghost" size="lg" className="w-full justify-start text-lg font-medium">
+                  {link.label}
+                </Button>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/data/mbti.ts

@@ -0,0 +1,401 @@
+export type MBTIData = {
+  group: "Analysts" | "Diplomats" | "Sentinels" | "Explorers";
+  color: string;
+  textColor: string;
+  en: {
+    name: string;
+    desc: string;
+    quote: string;
+    strengths: string[];
+    weaknesses: string[];
+    relationships: string;
+    career: string;
+  };
+  id: {
+    name: string;
+    desc: string;
+    quote: string;
+    strengths: string[];
+    weaknesses: string[];
+    relationships: string;
+    career: string;
+  };
+};
+
+export const mbtiDatabase: Record<string, MBTIData> = {
+  // --- ANALYSTS ---
+  INTJ: {
+    group: "Analysts",
+    color: "border-purple-500 shadow-purple-500/20",
+    textColor: "text-purple-600 dark:text-purple-400",
+    en: {
+      name: "Architect",
+      desc: "Imaginative and strategic thinkers, with a plan for everything. They are one of the rarest and most capable personality types.",
+      quote: "Thought constitutes the greatness of man. Man is a reed, the feeblest thing in nature, but he is a thinking reed.",
+      strengths: ["Rational", "Informed", "Independent", "Determined"],
+      weaknesses: ["Arrogant", "Dismissive of Emotions", "Overly Critical"],
+      relationships: "In relationships, Architects are looking for an intellectual equal. They prize honesty and open communication but may struggle with emotional expression.",
+      career: "They thrive in careers that require complex problem-solving and strategic planning, such as Systems Engineering, Strategy, or Science."
+    },
+    id: {
+      name: "Arsitek",
+      desc: "Pemikir yang super imajinatif dan strategis. Selalu punya plan A sampai Z. Tipe yang langka banget tapi capable parah.",
+      quote: "Pikiran itu bikin manusia hebat. Manusia emang lemah, tapi dia adalah 'buluh yang berpikir'.",
+      strengths: ["Rasional Abis", "Berwawasan Luas", "Independen", "Tekun"],
+      weaknesses: ["Agak Arogan", "Cuek sama Perasaan", "Terlalu Kritis"],
+      relationships: "Nyari pasangan yang selevel otaknya. Mereka suka kejujuran dan komunikasi yang to the point, tapi kadang kikuk kalau soal perasaan.",
+      career: "Cocok banget di kerjaan yang butuh mikir keras dan strategi, kayak System Engineer, Strategist, atau Scientist."
+    },
+  },
+  INTP: {
+    group: "Analysts",
+    color: "border-purple-500 shadow-purple-500/20",
+    textColor: "text-purple-600 dark:text-purple-400",
+    en: {
+      name: "Logician",
+      desc: "Innovative inventors with an unquenchable thirst for knowledge. They love patterns and spotting discrepancies in statements.",
+      quote: "Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.",
+      strengths: ["Analytical", "Original", "Open-minded", "Curious"],
+      weaknesses: ["Disconnected", "Insensitive", "Dissatisfied"],
+      relationships: "Logicians are often laid-back partners but can be oblivious to their partner's emotional needs, preferring to fix problems logically.",
+      career: "Ideal careers involve abstract theory and analysis, such as Programming, Mathematics, or Academic Research."
+    },
+    id: {
+      name: "Ahli Logika",
+      desc: "Penemu yang inovatif dan haus ilmu. Hobi banget nyari pola dan bakal nge-notice kalau ada yang gak logis dari omongan lo.",
+      quote: "Belajar dari kemarin, hidup buat hari ini, berharap buat besok. Intinya jangan berhenti nanya 'kenapa'.",
+      strengths: ["Analitis", "Orisinal", "Open Minded", "Kepo Banget"],
+      weaknesses: ["Suka Bengong Sendiri", "Gak Peka", "Gampang Bosen"],
+      relationships: "Pasangan yang santuy sebenernya, tapi sering gak peka sama kode-kodean. Lebih suka nyelesain masalah pake logika daripada perasaan.",
+      career: "Kerjaan yang butuh teori abstrak kayak Coding, Matematika, atau Riset Akademis itu makanan sehari-hari mereka."
+    },
+  },
+  ENTJ: {
+    group: "Analysts",
+    color: "border-purple-500 shadow-purple-500/20",
+    textColor: "text-purple-600 dark:text-purple-400",
+    en: {
+      name: "Commander",
+      desc: "Bold, imaginative and strong-willed leaders, always finding a way - or making one.",
+      quote: "Time is limited, so don't waste it living someone else's life.",
+      strengths: ["Efficient", "Energetic", "Self-Confident", "Strong-willed"],
+      weaknesses: ["Stubborn", "Intolerant", "Impatient", "Arrogant"],
+      relationships: "Commanders approach dating like a project. They look for growth-oriented partners and can be very dominant.",
+      career: "Natural leaders who excel in Executive roles, Entrepreneurship, and Management Consulting."
+    },
+    id: {
+      name: "Komandan",
+      desc: "Pemimpin yang bold dan imajinatif. Kalau gak nemu jalan, ya mereka bikin jalan sendiri. Boss energy banget.",
+      quote: "Waktu itu terbatas, bestie. Jangan buang waktu jalanin hidup orang lain.",
+      strengths: ["Efisien", "Energik Parah", "PD Abis", "Kemauan Keras"],
+      weaknesses: ["Keras Kepala", "Gak Sabaran", "Kurang Toleran", "Suka Ngeboss"],
+      relationships: "Ngedate itu kayak project bisnis buat mereka. Nyari pasangan yang visioner, tapi hati-hati, mereka dominan banget.",
+      career: "Terlahir jadi pemimpin. Cocok jadi CEO, Entrepreneur, atau Konsultan Manajemen."
+    },
+  },
+  ENTP: {
+    group: "Analysts",
+    color: "border-purple-500 shadow-purple-500/20",
+    textColor: "text-purple-600 dark:text-purple-400",
+    en: {
+      name: "Debater",
+      desc: "Smart and curious thinkers who cannot resist an intellectual challenge. They tend to play the devil's advocate.",
+      quote: "Follow the path of the unsafe, independent thinker. Expose your ideas to the dangers of controversy.",
+      strengths: ["Knowledgeable", "Quick-thinking", "Original", "Charismatic"],
+      weaknesses: ["Very Argumentative", "Insensitive", "Intolerant", "Can find it hard to focus"],
+      relationships: "Spontaneous and exciting partners who love to explore new ideas together, though they may struggle with stability.",
+      career: "They need freedom and creativity, excelling in Entrepreneurship, Marketing, or Law."
+    },
+    id: {
+      name: "Pendebat",
+      desc: "Pinter, iseng, dan gak bisa nolak debat. Suka banget jadi 'devil's advocate' cuma buat ngetes argumen orang.",
+      quote: "Jadilah pemikir independen yang berani ambil risiko. Biarin ide lo diuji sama kontroversi.",
+      strengths: ["Wawasan Luas", "Gercep Mikirnya", "Orisinal", "Karismatik"],
+      weaknesses: ["Hobi Debat", "Gak Peka", "Gak Sabaran", "Susah Fokus"],
+      relationships: "Pasangan yang seru dan spontan. Suka diajak diskusi ide gila, tapi mungkin agak susah kalau diajak serius soal kestabilan.",
+      career: "Butuh kebebasan berkreasi. Jago banget kalau jadi Entrepreneur, Marketer, atau Pengacara."
+    },
+  },
+
+  // --- DIPLOMATS ---
+  INFJ: {
+    group: "Diplomats",
+    color: "border-green-500 shadow-green-500/20",
+    textColor: "text-green-600 dark:text-green-400",
+    en: {
+      name: "Advocate",
+      desc: "Quiet and mystical, yet very inspiring and tireless idealists. They approach life with deep thoughtfulness and imagination.",
+      quote: "Treat people as if they were what they ought to be and you help them to become what they are capable of being.",
+      strengths: ["Creative", "Insightful", "Principled", "Passionate"],
+      weaknesses: ["Sensitive to Criticism", "Reluctant to Open Up", "Perfectionistic"],
+      relationships: "They seek deep, meaningful connections and honesty, often taking time to find the 'perfect' partner.",
+      career: "Drawn to meaningful work like Counseling, Psychology, Writing, or Non-profit work."
+    },
+    id: {
+      name: "Advokat",
+      desc: "Pendiam dan misterius, tapi idealis banget. Hidupnya penuh pemikiran mendalam dan imajinasi. Inspiratif parah.",
+      quote: "Perlakukan orang sebagaimana mestinya, dan lo bantu mereka jadi versi terbaik diri mereka.",
+      strengths: ["Kreatif", "Punya Insight Dalem", "Punya Prinsip", "Passionate"],
+      weaknesses: ["Baperan kalau Dikritik", "Susah Terbuka", "Perfeksionis"],
+      relationships: "Nyari hubungan yang deep dan meaningful. Sering kelamaan jomblo karena nunggu 'the perfect one'.",
+      career: "Suka kerjaan yang punya makna kayak Konseling, Psikologi, Penulis, atau di NGO."
+    },
+  },
+  INFP: {
+    group: "Diplomats",
+    color: "border-green-500 shadow-green-500/20",
+    textColor: "text-green-600 dark:text-green-400",
+    en: {
+      name: "Mediator",
+      desc: "Poetic, kind and altruistic people, always eager to help a good cause. They are true idealists.",
+      quote: "Not all those who wander are lost.",
+      strengths: ["Empathetic", "Generous", "Open-minded", "Creative"],
+      weaknesses: ["Unrealistic", "Self-Isolating", "Unfocused"],
+      relationships: "Hopeless romantics who dream of a perfect soulmate connection and are deeply supportive partners.",
+      career: "They prefer work that aligns with their values, such as Writing, Arts, or Social Work."
+    },
+    id: {
+      name: "Mediator",
+      desc: "Puitis, baik hati, dan tulus banget. Selalu mau bantu orang lain. Bener-bener idealis sejati.",
+      quote: "Gak semua orang yang mengembara itu tersesat kok.",
+      strengths: ["Empati Tinggi", "Dermawan", "Open Minded", "Kreatif"],
+      weaknesses: ["Terlalu Khayal", "Suka Mengurung Diri", "Gak Fokus"],
+      relationships: "Hopeless romantic yang ngehayal punya soulmate sempurna. Pasangan yang super supportive.",
+      career: "Kerja harus sesuai hati nurani, kayak Penulis, Seniman, atau Pekerja Sosial."
+    },
+  },
+  ENFJ: {
+    group: "Diplomats",
+    color: "border-green-500 shadow-green-500/20",
+    textColor: "text-green-600 dark:text-green-400",
+    en: {
+      name: "Protagonist",
+      desc: "Charismatic and inspiring leaders, able to mesmerize their listeners. They love helping others grow.",
+      quote: "Everything you do right now ripples outward and affects everyone. Your posture can shine your heart or transmit anxiety.",
+      strengths: ["Receptive", "Reliable", "Passionate", "Altruistic"],
+      weaknesses: ["Unrealistic", "Overly Idealistic", "Condescending"],
+      relationships: "Dedicated partners who put a lot of effort into the relationship and their partner's happiness.",
+      career: "They excel in people-oriented roles like Teaching, Public Relations, or Human Resources."
+    },
+    id: {
+      name: "Protagonis",
+      desc: "Pemimpin karismatik yang jago banget ngomong. Hobi banget bantuin orang lain buat berkembang. Main character energy.",
+      quote: "Apapun yang lo lakuin sekarang bakal ngaruh ke orang lain. Lo bisa nyebarin semangat atau kecemasan.",
+      strengths: ["Enak Diajak Ngobrol", "Bisa Diandalkan", "Semangat", "Suka Nolong"],
+      weaknesses: ["Kurang Realistis", "Terlalu Idealis", "Kadang Merendahkan"],
+      relationships: "Pasangan yang totalitas banget. Rela lakuin apa aja demi kebahagiaan ayang.",
+      career: "Jago di bidang yang ngurusin orang kayak Guru, PR, atau HRD."
+    },
+  },
+  ENFP: {
+    group: "Diplomats",
+    color: "border-green-500 shadow-green-500/20",
+    textColor: "text-green-600 dark:text-green-400",
+    en: {
+      name: "Campaigner",
+      desc: "Enthusiastic, creative and sociable free spirits, who can always find a reason to smile.",
+      quote: "It doesn't interest me what you do for a living. I want to know what you ache for.",
+      strengths: ["Curious", "Observant", "Energetic", "Excellent Communicator"],
+      weaknesses: ["Poor Practical Skills", "Find it Difficult to Focus", "Overthink Things"],
+      relationships: "Warm and adventurous lovers who are always looking for new ways to connect emotionally.",
+      career: "They need variety and creativity, fitting well in Journalism, Entertainment, or Event Planning."
+    },
+    id: {
+      name: "Juru Kampanye",
+      desc: "Antusias, kreatif, dan jiwa bebas banget. Selalu nemu alasan buat senyum di situasi apapun.",
+      quote: "Gue gak peduli kerjaan lo apa. Gue mau tau apa yang bikin hati lo bergetar.",
+      strengths: ["Kepo Positif", "Jago Mengamati", "Energik", "Jago Ngomong"],
+      weaknesses: ["Kurang Praktis", "Susah Fokus", "Overthinking"],
+      relationships: "Pasangan yang hangat dan petualang. Selalu cari cara baru buat bonding emosional.",
+      career: "Butuh variasi dan kreativitas. Cocok di Jurnalisme, Entertainment, atau Event Organizer."
+    },
+  },
+
+  // --- SENTINELS ---
+  ISTJ: {
+    group: "Sentinels",
+    color: "border-blue-500 shadow-blue-500/20",
+    textColor: "text-blue-600 dark:text-blue-400",
+    en: {
+      name: "Logistician",
+      desc: "Practical and fact-minded individuals, whose reliability cannot be doubted. They value tradition and order.",
+      quote: "My observation is that whenever one person is found adequate to the discharge of a duty... it is worse executed by two persons.",
+      strengths: ["Honest", "Direct", "Strong-willed", "Responsible"],
+      weaknesses: ["Stubborn", "Insensitive", "Always by the Book", "Judgmental"],
+      relationships: "Dependable and loyal partners who show love through actions and stability rather than grand gestures.",
+      career: "They prefer structured environments like Accounting, Military, Law, or Data Analysis."
+    },
+    id: {
+      name: "Ahli Logistik",
+      desc: "Praktis dan fakta banget. Keandalannya gak usah diragukan lagi. Menghargai tradisi dan ketertiban.",
+      quote: "Satu orang yang kompeten itu lebih baik daripada dua orang yang ngerjain hal yang sama tapi berantakan.",
+      strengths: ["Jujur", "To The Point", "Teguh Pendirian", "Tanggung Jawab"],
+      weaknesses: ["Keras Kepala", "Gak Peka", "Kaku Banget", "Suka Menghakimi"],
+      relationships: "Pasangan setia yang bisa diandelin. Cara mereka nunjukin cinta itu lewat kestabilan, bukan gombalan.",
+      career: "Suka lingkungan terstruktur kayak Akuntansi, Militer, Hukum, atau Analisis Data."
+    },
+  },
+  ISFJ: {
+    group: "Sentinels",
+    color: "border-blue-500 shadow-blue-500/20",
+    textColor: "text-blue-600 dark:text-blue-400",
+    en: {
+      name: "Defender",
+      desc: "Very dedicated and warm protectors, always ready to defend their loved ones.",
+      quote: "Love only grows by sharing. You can only have more for yourself by giving it away to others.",
+      strengths: ["Supportive", "Reliable", "Patient", "Imaginative"],
+      weaknesses: ["Humble", "Take Things Personally", "Repress Their Feelings"],
+      relationships: "Committed and caring partners who prioritize their family and home harmony above all else.",
+      career: "They thrive in service roles like Nursing, Teaching, Customer Service, or Administration."
+    },
+    id: {
+      name: "Pembela",
+      desc: "Pelindung yang hangat dan dedikasi tinggi. Selalu siap pasang badan buat orang tersayang.",
+      quote: "Cinta itu tumbuh karena berbagi. Semakin banyak lo ngasih, semakin banyak yang lo dapet.",
+      strengths: ["Supportive", "Bisa Diandalkan", "Sabar", "Imajinatif"],
+      weaknesses: ["Terlalu Merendah", "Baperan", "Suka Mendam Perasaan"],
+      relationships: "Pasangan yang peduli banget. Keluarga dan keharmonisan rumah itu prioritas nomor satu.",
+      career: "Cocok di bidang pelayanan kayak Perawat, Guru, CS, atau Admin."
+    },
+  },
+  ESTJ: {
+    group: "Sentinels",
+    color: "border-blue-500 shadow-blue-500/20",
+    textColor: "text-blue-600 dark:text-blue-400",
+    en: {
+      name: "Executive",
+      desc: "Excellent administrators, unsurpassed at managing things - or people.",
+      quote: "Good order is the foundation of all things.",
+      strengths: ["Dedicated", "Strong-willed", "Direct", "Honest"],
+      weaknesses: ["Inflexible", "Uncomfortable with Unconventional Situations", "Judgmental"],
+      relationships: "Stable and responsible partners who take their commitments very seriously, though they may struggle with emotions.",
+      career: "Natural managers who excel in Business Administration, Law Enforcement, or Finance."
+    },
+    id: {
+      name: "Eksekutif",
+      desc: "Administrator handal. Jago banget ngatur barang atau orang. Gak ada yang bisa ngalahin skill manajemennya.",
+      quote: "Ketertiban itu pondasi dari segalanya, bro.",
+      strengths: ["Dedikasi Tinggi", "Kemauan Kuat", "Langsung", "Jujur"],
+      weaknesses: ["Gak Fleksibel", "Gak Suka Hal Aneh", "Suka Ngejudge"],
+      relationships: "Pasangan stabil dan bertanggung jawab. Komitmen itu harga mati, tapi mungkin agak kaku soal emosi.",
+      career: "Manajer alami. Jago di Admin Bisnis, Kepolisian, atau Keuangan."
+    },
+  },
+  ESFJ: {
+    group: "Sentinels",
+    color: "border-blue-500 shadow-blue-500/20",
+    textColor: "text-blue-600 dark:text-blue-400",
+    en: {
+      name: "Consul",
+      desc: "Extraordinarily caring, social and popular people, always eager to help.",
+      quote: "Encourage, lift and strengthen one another. For the positive energy spread to one will be felt by us all.",
+      strengths: ["Strong Practical Skills", "Strong Sense of Duty", "Very Loyal", "Sensitive"],
+      weaknesses: ["Worried about their Social Status", "Inflexible", "Vulnerable to Criticism"],
+      relationships: "Very supportive and traditional partners who want to feel appreciated and build a strong family unit.",
+      career: "Great at connecting with others in roles like Sales, Healthcare, or Social Work."
+    },
+    id: {
+      name: "Konsul",
+      desc: "Orang yang super peduli, sosial, dan populer. Selalu gercep kalau ada yang butuh bantuan.",
+      quote: "Saling dukung dan kuatin satu sama lain. Energi positif lo bakal kerasa buat kita semua.",
+      strengths: ["Skill Praktis Oke", "Tanggung Jawab", "Setia Banget", "Peka"],
+      weaknesses: ["Gila Hormat", "Kaku", "Gak Tahan Kritik"],
+      relationships: "Pasangan yang suportif dan tradisional. Pengen banget dihargai dan bangun keluarga harmonis.",
+      career: "Jago konek sama orang, kayak di Sales, Kesehatan, atau Pekerjaan Sosial."
+    },
+  },
+
+  // --- EXPLORERS ---
+  ISTP: {
+    group: "Explorers",
+    color: "border-yellow-500 shadow-yellow-500/20",
+    textColor: "text-yellow-600 dark:text-yellow-400",
+    en: {
+      name: "Virtuoso",
+      desc: "Bold and practical experimenters, masters of all kinds of tools.",
+      quote: "I wanted to live deep and suck out all the marrow of life.",
+      strengths: ["Optimistic", "Creative", "Spontaneous", "Rational"],
+      weaknesses: ["Stubborn", "Insensitive", "Private and Reserved", "Easily Bored"],
+      relationships: "Independent partners who need their own space but enjoy shared activities and adventures.",
+      career: "Hands-on work suits them best, like Engineering, Mechanics, Forensics, or Construction."
+    },
+    id: {
+      name: "Pengrajin",
+      desc: "Eksperimentator yang berani dan praktis. Jago banget pake segala macem alat.",
+      quote: "Gue pengen hidup seutuhnya dan nikmatin setiap detiknya.",
+      strengths: ["Optimis", "Kreatif", "Spontan", "Rasional"],
+      weaknesses: ["Keras Kepala", "Gak Peka", "Tertutup", "Gampang Bosan"],
+      relationships: "Pasangan mandiri yang butuh 'me time', tapi seneng kalau diajak petualangan bareng.",
+      career: "Kerja lapangan paling cocok, kayak Teknik, Mekanik, Forensik, atau Konstruksi."
+    },
+  },
+  ISFP: {
+    group: "Explorers",
+    color: "border-yellow-500 shadow-yellow-500/20",
+    textColor: "text-yellow-600 dark:text-yellow-400",
+    en: {
+      name: "Adventurer",
+      desc: "Flexible and charming artists, always ready to explore and experience something new.",
+      quote: "I change during the course of a day. I wake and I'm one person, and when I go to sleep I know for certain I'm somebody else.",
+      strengths: ["Charming", "Sensitive to Others", "Imaginative", "Passionate"],
+      weaknesses: ["Fiercely Independent", "Unpredictable", "Easily Stressed"],
+      relationships: "Gentle and caring partners who express love through actions and shared experiences rather than words.",
+      career: "They need creative freedom, often choosing Fashion, Photography, or Interior Design."
+    },
+    id: {
+      name: "Petualang",
+      desc: "Seniman yang fleksibel dan menawan. Selalu siap buat eksplor hal-hal baru.",
+      quote: "Gue berubah tiap saat. Pagi gue siapa, malem gue bisa jadi orang yang beda lagi.",
+      strengths: ["Mempesona", "Peka sama Orang", "Imajinatif", "Passionate"],
+      weaknesses: ["Terlalu Mandiri", "Susah Ditebak", "Gampang Stres"],
+      relationships: "Pasangan lembut yang nunjukin cinta lewat tindakan, bukan cuma omong doang.",
+      career: "Butuh kebebasan kreatif, sering milih Fashion, Fotografi, atau Desain Interior."
+    },
+  },
+  ESTP: {
+    group: "Explorers",
+    color: "border-yellow-500 shadow-yellow-500/20",
+    textColor: "text-yellow-600 dark:text-yellow-400",
+    en: {
+      name: "Entrepreneur",
+      desc: "Smart, energetic and very perceptive people, who truly enjoy living on the edge.",
+      quote: "Life is either a daring adventure or nothing at all.",
+      strengths: ["Bold", "Rational", "Practical", "Perceptive"],
+      weaknesses: ["Insensitive", "Impatient", "Risk-prone", "Unstructured"],
+      relationships: "Fun-loving and spontaneous partners who keep things exciting but may struggle with long-term planning.",
+      career: "Action-oriented careers like Sales, Business, Emergency Services, or Sports."
+    },
+    id: {
+      name: "Pengusaha",
+      desc: "Pinter, energik, dan peka banget. Suka hidup yang menantang dan berisiko.",
+      quote: "Hidup itu antara petualangan yang berani atau gak sama sekali.",
+      strengths: ["Berani", "Rasional", "Praktis", "Peka Situasi"],
+      weaknesses: ["Gak Peka Perasaan", "Gak Sabaran", "Hobi Ambil Risiko", "Berantakan"],
+      relationships: "Pasangan seru yang spontan. Hubungan gak bakal bosenin, tapi mungkin susah diajak mikir jangka panjang.",
+      career: "Karir penuh aksi kayak Sales, Bisnis, Tim SAR, atau Atlet."
+    },
+  },
+  ESFP: {
+    group: "Explorers",
+    color: "border-yellow-500 shadow-yellow-500/20",
+    textColor: "text-yellow-600 dark:text-yellow-400",
+    en: {
+      name: "Entertainer",
+      desc: "Spontaneous, energetic and enthusiastic people - life is never boring around them.",
+      quote: "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle.",
+      strengths: ["Bold", "Original", "Aesthetics", "Observant"],
+      weaknesses: ["Sensitive", "Conflict-Averse", "Easily Bored", "Poor Long-term Planners"],
+      relationships: "Warm and affectionate partners who love to lavish attention on their loved ones and have fun.",
+      career: "They love social interaction and attention, excelling in Event Planning, Sales, or Performing Arts."
+    },
+    id: {
+      name: "Penghibur",
+      desc: "Spontan, energik, dan antusias. Hidup gak bakal ngebosenin kalau ada mereka.",
+      quote: "Gue egois, gak sabaran, dan agak insecure. Gue bikin salah, dan kadang susah diatur.",
+      strengths: ["Berani Tampil", "Orisinal", "Estetik", "Jago Mengamati"],
+      weaknesses: ["Sensitif", "Anti Konflik", "Gampang Bosan", "Gak Bisa Planning"],
+      relationships: "Pasangan yang hangat dan manja. Suka banget ngasih perhatian ke ayang dan have fun bareng.",
+      career: "Suka jadi pusat perhatian, cocok di Event Organizer, Sales, atau Seni Pertunjukan."
+    },
+  },
+};

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

test_models.py

@@ -0,0 +1,19 @@
+
+import google.generativeai as genai
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+api_key = os.getenv("GEMINI_API_KEY")
+if not api_key:
+    print("No API Key found")
+else:
+    genai.configure(api_key=api_key)
+    print("Listing available models...")
+    try:
+        for m in genai.list_models():
+            if 'generateContent' in m.supported_generation_methods:
+                print(m.name)
+    except Exception as e:
+        print(f"Error: {e}")

train_emotion.py

@@ -0,0 +1,92 @@
+# train_emotion.py
+import pandas as pd
+import re
+import joblib
+import os
+from datasets import load_dataset
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.linear_model import LogisticRegression
+from sklearn.pipeline import Pipeline
+from sklearn.model_selection import train_test_split
+from sklearn.metrics import accuracy_score, precision_recall_fscore_support
+
+# ==========================================
+# 🔧 KONFIGURASI
+# ==========================================
+MODEL_OUTPUT = 'api/data/model_emotion.pkl' 
+# ==========================================
+
+print("🔍 Mengunduh dataset GoEmotions...")
+
+try:
+    dataset = load_dataset("google-research-datasets/go_emotions", "simplified", split="train")
+    df = pd.DataFrame(dataset)
+    labels_list = dataset.features['labels'].feature.names
+    
+    def get_first_label(label_ids):
+        if len(label_ids) > 0:
+            return labels_list[label_ids[0]]
+        return "neutral"
+
+    df['emotion_label'] = df['labels'].apply(get_first_label)
+    X = df['text']
+    y = df['emotion_label']
+    print(f"✅ Data siap: {len(df)} baris.")
+
+except Exception as e:
+    print(f"❌ Error: {e}")
+    exit()
+
+# --- CLEANING DATA ---
+def clean_text(text):
+    text = str(text).lower()
+    text = re.sub(r'http\S+', '', text)        
+    text = re.sub(r'[^a-zA-Z\s]', '', text)    
+    text = re.sub(r'\s+', ' ', text).strip()   
+    return text
+
+print("🧹 Membersihkan data emosi...")
+X = X.apply(clean_text)
+
+# --- TRAINING ---
+print("🚀 Melatih Model Emosi (Logistic Regression Fixed)...")
+
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
+
+pipeline = Pipeline([
+    ('tfidf', TfidfVectorizer(
+        max_features=12000,      # Fitur banyak biar detail
+        stop_words='english',
+        ngram_range=(1, 2),      # Baca kata per kata & frasa
+        sublinear_tf=True        # [TRICK] Scaling logaritmik (Penting!)
+    )),
+    ('clf', LogisticRegression(
+        max_iter=1000,           
+        solver='lbfgs',          # Ganti ke lbfgs biar aman dari error multiclass
+        C=1.2                    # Agak agresif dikit (di atas 1.0) biar akurasi naik
+    ))
+])
+
+pipeline.fit(X_train, y_train)
+
+# --- EVALUASI ---
+print("📊 Menghitung Metrik Evaluasi...")
+predictions = pipeline.predict(X_test)
+
+accuracy = accuracy_score(y_test, predictions)
+precision, recall, f1, _ = precision_recall_fscore_support(y_test, predictions, average='weighted', zero_division=0)
+
+print("\n" + "="*40)
+print("   HASIL EVALUASI MODEL EMOSI (FINAL)")
+print("="*40)
+print(f"{'Metrik':<15} | {'Skor':<10}")
+print("-" * 30)
+print(f"{'Akurasi':<15} | {accuracy:.3f} ({accuracy*100:.1f}%)")
+print(f"{'Precision':<15} | {precision:.3f}")
+print(f"{'Recall':<15} | {recall:.3f}")
+print(f"{'F1-Score':<15} | {f1:.3f}")
+print("="*40 + "\n")
+
+os.makedirs(os.path.dirname(MODEL_OUTPUT), exist_ok=True)
+joblib.dump(pipeline, MODEL_OUTPUT)
+print(f"💾 SUKSES! Model Emosi disimpan di: {MODEL_OUTPUT}")

train_mbti.py

@@ -0,0 +1,90 @@
+# train_mbti.py
+import pandas as pd
+import re
+import joblib
+import os
+from datasets import load_dataset
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.svm import LinearSVC
+from sklearn.pipeline import Pipeline
+from sklearn.model_selection import train_test_split
+from sklearn.metrics import accuracy_score, precision_recall_fscore_support
+
+# ==========================================
+# 🔧 KONFIGURASI
+# ==========================================
+MODEL_OUTPUT = 'api/data/model_mbti.pkl' 
+# ==========================================
+
+print("🔍 Mengunduh dataset MBTI (7000 Data)...")
+
+try:
+    # Kita pake dataset yang pasti jalan aja
+    dataset = load_dataset("gmnsong/MBTI.csv", split="train")
+    df = pd.DataFrame(dataset)
+    
+    # Pastikan nama kolom benar
+    if 'type' not in df.columns:
+        df.rename(columns={'label': 'type', 'text': 'posts'}, inplace=True)
+    
+    X = df['posts']
+    y = df['type']
+    print(f"✅ Data siap: {len(df)} baris.")
+
+except Exception as e:
+    print(f"❌ Error: {e}")
+    exit()
+
+# --- CLEANING DATA ---
+def clean_text(text):
+    text = str(text).lower()
+    text = re.sub(r'http\S+', '', text) 
+    text = re.sub(r'[^a-zA-Z\s]', '', text)
+    text = re.sub(r'\s+', ' ', text).strip()
+    return text
+
+print("🧹 Membersihkan data...")
+X = X.apply(clean_text)
+
+# --- TRAINING ---
+print("🚀 Melatih Model MBTI (SVM Optimized)...")
+
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
+
+pipeline = Pipeline([
+    ('tfidf', TfidfVectorizer(
+        max_features=15000,      # Fitur diperbanyak dikit
+        stop_words='english',
+        ngram_range=(1, 2),      # Unigram + Bigram
+        sublinear_tf=True        # [TRICK] Scaling logaritmik biar kata umum gak dominan
+    )),
+    ('clf', LinearSVC(
+        dual=False,              # Wajib False buat dataset teks > 1000
+        C=0.6,                   # Sedikit melonggarkan regularisasi
+        class_weight='balanced'  # Tetap balanced biar F1-Score bagus
+    ))
+])
+
+pipeline.fit(X_train, y_train)
+
+# --- EVALUASI ---
+print("📊 Menghitung Metrik Evaluasi...")
+predictions = pipeline.predict(X_test)
+
+accuracy = accuracy_score(y_test, predictions)
+precision, recall, f1, _ = precision_recall_fscore_support(y_test, predictions, average='weighted', zero_division=0)
+
+print("\n" + "="*40)
+print("   HASIL EVALUASI MODEL MBTI (FINAL)")
+print("="*40)
+print(f"{'Metrik':<15} | {'Skor':<10}")
+print("-" * 30)
+print(f"{'Akurasi':<15} | {accuracy:.3f} ({accuracy*100:.1f}%)")
+print(f"{'Precision':<15} | {precision:.3f}")
+print(f"{'Recall':<15} | {recall:.3f}")
+print(f"{'F1-Score':<15} | {f1:.3f}")
+print("="*40 + "\n")
+
+os.makedirs(os.path.dirname(MODEL_OUTPUT), exist_ok=True)
+joblib.dump(pipeline, MODEL_OUTPUT)
+print(f"💾 SUKSES! Model MBTI disimpan di: {MODEL_OUTPUT}")

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

vercel.json

@@ -0,0 +1,3 @@
+{
+  "framework": "nextjs"
+}