[TSM.ID].[11031972] PXE : Platform X Ecosystem I [118 Module -LIVE-]
This commit is contained in:
TSM.ID
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function DokumentasiPage() {
|
||||
const [activeTab, setActiveTab] = useState<'anatomi' | 'roadmap' | 'mindmap'>('anatomi');
|
||||
const [activeNode, setActiveNode] = useState<string | null>(null);
|
||||
|
||||
const roadmapData = [
|
||||
{ id: 'v1', time: 'Masa Lalu (Genesis)', title: 'Monolithic Era', desc: 'Sistem tunggal SSR yang berat dan rentan tumbang. Penuh ketergantungan pada satu database.' },
|
||||
{ id: 'v2', time: 'Q1 2026', title: 'Microservices Split', desc: 'Pemecahan paksa tulang punggung. IAM, XCU Ultra, dan Chat WebSocket berdiri di server masing-masing.' },
|
||||
{ id: 'v3', time: 'Q2 2026', title: 'Breakout Multiverse', desc: 'Kemampuan membelah dimensi kamar VC tanpa jeda loading, ditambah Quantum Record untuk privasi absolut.' },
|
||||
{ id: 'v4', time: 'Q3 2026', title: 'Omniversal & Temporal', desc: 'Ekspansi jaringan. 1 Aliran Video ke VPS dibelah menggunakan TEE-Muxer FFmpeg ke YouTube, TikTok, dan Twitter secara simultan. In-Memory Scheduler untuk chat.' },
|
||||
{ id: 'v5', time: 'Masa Depan (Quantum Leap)', title: 'AI Hologram Host', desc: 'Integrasi avatar 3D kecerdasan buatan sebagai moderator otomatis dalam kamar yang menganalisa sentimen emosi partisipan.' }
|
||||
];
|
||||
|
||||
const anatomyData = [
|
||||
{ id: 'otak', icon: '🧠', name: 'Otak (Brain)', tech: 'PostgreSQL & Redis', detail: 'Matriks logika absolut. Mengingat miliaran token JWT dan mencatat setiap detak nadi transaksi penagihan tanpa kesalahan.' },
|
||||
{ id: 'jantung', icon: '🫀', name: 'Jantung (Heart)', tech: 'XCU eBPF Engine', detail: 'Mesin pemompa video. Menerima tetesan data dari peramban dan memancarkannya ke ribuan layar dengan latensi di bawah 50ms.' },
|
||||
{ id: 'syaraf', icon: '⚡', name: 'Syaraf (Nerves)', tech: 'Node.js WebSockets', detail: 'Jaringan listrik real-time. Membawa sinyal chat, peringatan gempa UI, dan komando Temporal Scheduler dalam kecepatan cahaya.' },
|
||||
{ id: 'nadi', icon: '🩸', name: 'Nadi (Pulse)', tech: 'Next.js API', detail: 'Sirkulasi darah. Meneruskan data autentikasi dari Otak ke Kulit dengan pengamanan SSL dan Enkripsi End-to-End.' },
|
||||
{ id: 'tulang', icon: '🦴', name: 'Tulang (Bones)', tech: 'Microservices', detail: 'Kerangka baja. Memastikan jika aplikasi Chat lumpuh, aplikasi Video Conference tetap hidup tanpa gangguan.' },
|
||||
{ id: 'kulit', icon: '🖐️', name: 'Kulit (Skin)', tech: 'Tailwind CSS', detail: 'Sensasi sentuhan antarmuka kelas dunia. Responsif, dinamis, dan diwarnai dengan gradien neon masa depan.' },
|
||||
{ id: 'ruh', icon: '🌌', name: 'Ruh (Soul)', tech: 'Zero-Downtime Philosophy', detail: 'Kesadaran platform bahwa server harus ringan. Mengorbankan browser klien untuk bekerja keras (Client-Side Rendering) demi stabilitas abadi.' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#050b14] p-6 md:p-12 text-[#e9edef] font-sans">
|
||||
<div className="max-w-6xl mx-auto space-y-8">
|
||||
|
||||
{/* HEADER */}
|
||||
<div className="flex items-center justify-between border-b border-gray-800 pb-4">
|
||||
<h1 className="text-3xl font-black text-brand drop-shadow-[0_0_15px_rgba(0,255,136,0.5)]">KITAB SUCI JUMPA.ID</h1>
|
||||
<Link href="/supreme-admin/about" className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold transition-colors">
|
||||
Kembali ke Version Engine
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* TAB NAVIGATION */}
|
||||
<div className="flex gap-4 border-b border-gray-800 pb-2">
|
||||
<button
|
||||
onClick={() => setActiveTab('anatomi')}
|
||||
className={`px-6 py-3 font-bold rounded-t-xl transition-all ${activeTab === 'anatomi' ? 'bg-brand text-black' : 'text-gray-500 hover:text-white'}`}
|
||||
>
|
||||
Anatomi Biologis
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('mindmap')}
|
||||
className={`px-6 py-3 font-bold rounded-t-xl transition-all ${activeTab === 'mindmap' ? 'bg-blue-500 text-white shadow-[0_-5px_20px_rgba(59,130,246,0.3)]' : 'text-gray-500 hover:text-white'}`}
|
||||
>
|
||||
Interactive Mindmap
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('roadmap')}
|
||||
className={`px-6 py-3 font-bold rounded-t-xl transition-all ${activeTab === 'roadmap' ? 'bg-purple-500 text-white shadow-[0_-5px_20px_rgba(168,85,247,0.3)]' : 'text-gray-500 hover:text-white'}`}
|
||||
>
|
||||
Ultra Roadmap
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* CONTENT AREA */}
|
||||
<div className="bg-[#0b141a] border border-gray-800 rounded-b-2xl rounded-tr-2xl p-8 min-h-[60vh] shadow-2xl relative overflow-hidden">
|
||||
|
||||
{/* TAB 1: ANATOMI */}
|
||||
{activeTab === 'anatomi' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-bold text-brand mb-6">Struktur Kehidupan Platform</h2>
|
||||
{anatomyData.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onMouseEnter={() => setActiveNode(item.id)}
|
||||
className={`p-4 rounded-xl border cursor-pointer transition-all duration-300 ${activeNode === item.id ? 'bg-gray-800 border-brand scale-105 z-10 relative shadow-2xl' : 'bg-transparent border-gray-800 hover:border-gray-600'}`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-4xl">{item.icon}</span>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white">{item.name}</h3>
|
||||
<p className="text-sm font-mono text-brand">{item.tech}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-8">
|
||||
{activeNode ? (
|
||||
<div className="bg-[#111b21] border border-brand p-8 rounded-3xl shadow-[0_0_50px_rgba(0,255,136,0.1)] animate-in zoom-in duration-300">
|
||||
<span className="text-7xl block mb-6 text-center">{anatomyData.find(a => a.id === activeNode)?.icon}</span>
|
||||
<h3 className="text-2xl font-bold text-white mb-2 text-center">{anatomyData.find(a => a.id === activeNode)?.name}</h3>
|
||||
<p className="text-center text-brand font-mono text-sm mb-6">{anatomyData.find(a => a.id === activeNode)?.tech}</p>
|
||||
<p className="text-gray-400 text-lg leading-relaxed text-center">
|
||||
{anatomyData.find(a => a.id === activeNode)?.detail}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-600">
|
||||
<svg className="w-24 h-24 mx-auto mb-4 opacity-20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm0-2h2V7h-2z"/></svg>
|
||||
<p>Arahkan kursor ke salah satu elemen di sebelah kiri untuk melihat detail jiwa.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 2: INTERACTIVE MINDMAP */}
|
||||
{activeTab === 'mindmap' && (
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500 h-[600px] flex items-center justify-center relative bg-gradient-to-br from-[#050B14] via-[#0A192F] to-[#00ff88]/10">
|
||||
<div className="absolute inset-0 bg-blue-900/5 mix-blend-overlay"></div>
|
||||
|
||||
{/* Custom CSS Mindmap Tree */}
|
||||
<div className="relative z-10 flex flex-col items-center">
|
||||
{/* Node Pusat */}
|
||||
<div className="bg-blue-600 text-white px-8 py-4 rounded-2xl font-black text-2xl shadow-[0_0_30px_rgba(37,99,235,0.6)] z-20 hover:scale-110 transition-transform cursor-crosshair">
|
||||
JUMPA.ID OMNIVERSE
|
||||
</div>
|
||||
|
||||
{/* Garis Vertikal */}
|
||||
<div className="w-1 h-12 bg-blue-500/50"></div>
|
||||
|
||||
{/* Cabang Horizontal */}
|
||||
<div className="w-[800px] h-1 bg-blue-500/50 flex justify-between relative">
|
||||
<div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-400 rounded-full"></div>
|
||||
<div className="absolute -top-1 left-1/2 -translate-x-1/2 w-3 h-3 bg-blue-400 rounded-full"></div>
|
||||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-400 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
{/* 3 Pilar */}
|
||||
<div className="flex w-[800px] justify-between">
|
||||
{/* Pilar 1: IAM */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-1 h-8 bg-blue-500/50"></div>
|
||||
<div className="bg-[#111b21] border-2 border-emerald-500 text-emerald-400 px-6 py-3 rounded-xl font-bold shadow-[0_0_15px_rgba(16,185,129,0.3)] hover:-translate-y-2 transition-transform cursor-pointer">
|
||||
IAM (Identity Access)
|
||||
</div>
|
||||
<div className="w-1 h-8 bg-emerald-500/30"></div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Master Owner Dashboard</div>
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Tenant Management</div>
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Ultra Billing Engine</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pilar 2: VC */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-1 h-8 bg-blue-500/50"></div>
|
||||
<div className="bg-[#111b21] border-2 border-red-500 text-red-400 px-6 py-3 rounded-xl font-bold shadow-[0_0_15px_rgba(239,68,68,0.3)] hover:-translate-y-2 transition-transform cursor-pointer">
|
||||
XCU Ultra Engine
|
||||
</div>
|
||||
<div className="w-1 h-8 bg-red-500/30"></div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Webinar / Podcast Mode</div>
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Breakout Multiverse</div>
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Quantum Local Record</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pilar 3: CHAT */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-1 h-8 bg-blue-500/50"></div>
|
||||
<div className="bg-[#111b21] border-2 border-purple-500 text-purple-400 px-6 py-3 rounded-xl font-bold shadow-[0_0_15px_rgba(168,85,247,0.3)] hover:-translate-y-2 transition-transform cursor-pointer">
|
||||
WebSocket Chat
|
||||
</div>
|
||||
<div className="w-1 h-8 bg-purple-500/30"></div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Temporal Scheduler</div>
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">TEE-Muxer Omniversal</div>
|
||||
<div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">End-to-End Encryption</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 3: ULTRA ROADMAP */}
|
||||
{activeTab === 'roadmap' && (
|
||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500 relative py-12">
|
||||
<div className="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-1 bg-linear-to-b from-gray-800 via-purple-500 to-var(--color-brand)"></div>
|
||||
|
||||
<div className="space-y-12">
|
||||
{roadmapData.map((node, index) => (
|
||||
<div key={node.id} className={`flex items-center w-full ${index % 2 === 0 ? 'justify-start' : 'justify-end'} relative`}>
|
||||
|
||||
{/* Lingkaran Garis Waktu */}
|
||||
<div className="absolute left-1/2 -translate-x-1/2 w-6 h-6 rounded-full bg-[#111b21] border-4 border-purple-500 z-10 flex items-center justify-center">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className={`w-5/12 ${index % 2 === 0 ? 'pr-12 text-right' : 'pl-12 text-left'}`}>
|
||||
<div className="bg-[#111b21] p-6 rounded-2xl border border-gray-700 hover:border-purple-500 transition-colors shadow-xl group">
|
||||
<span className="text-purple-400 font-mono text-sm block mb-2">{node.time}</span>
|
||||
<h3 className="text-2xl font-bold text-white mb-2 group-hover:text-purple-300 transition-colors">{node.title}</h3>
|
||||
<p className="text-gray-400 leading-relaxed text-sm">{node.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user