323 lines
26 KiB
TypeScript
323 lines
26 KiB
TypeScript
import { FormEvent } from 'react';
|
|
import { Terminal, Crosshair, Code, ShieldAlert, Wifi, Cpu, Eye, LockKeyhole, FolderLock, Database, MapPin, ChevronRight, Share, TriangleAlert, Globe, Share2, Instagram } from 'lucide-react';
|
|
|
|
const DICT: Record<string, any> = {
|
|
pt: {
|
|
back: '/cd root_dir',
|
|
heroTitle: 'O ZERO-DAY.LOG',
|
|
heroDesc: 'Registros restritos distribuídos sobre infosec, darknets e vulnerabilidades catastróficas L0.',
|
|
btnDecrypt: 'DECRYPT_FILE()',
|
|
btnTerminal: 'ACCESS_TERM()',
|
|
feedTitle: 'SYS.LOGS_STREAM',
|
|
subscribeText: 'Canal de transmissão de exploits prioridade vermelha.',
|
|
subscribeBtn: 'INIT_HANDSHAKE',
|
|
sidebarAd: 'S.P.O.N.S.O.R',
|
|
adDesc: 'VPN DESCENTRALIZADA OFUSCADA',
|
|
statusMonitor: 'SYS_NODE_MONITOR',
|
|
articles: [
|
|
{ id: '1', tag: 'ZERO-DAY', title: 'Exploit encontrado na rede principal Ethereum de custódia', excerpt: 'Nossa equipe documentou um exploit RCE crítico na infraestrutura nativa.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
|
{ id: '2', tag: 'CRYPTO', title: 'Criptografia Quântica: A quebra absoluta', excerpt: 'Algoritmos de Shor não são mais teóricos. Atualize seus bancos com urgência antes do Q4.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
|
|
{ id: '3', tag: 'HARDWARE', title: 'Engenharia Reversa no SDK de Drones de Entrega Aérea', excerpt: 'Anatomia do firmware que controla a nova frota autônoma. O bypass é letalmente simples.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
|
|
{ id: '4', tag: 'WEB3', title: 'Como carteiras frias vazam seeds vitais via voltagem', excerpt: 'Chips tidos como seguros falham sob injeção de pólos extremos térmicos na placa principal.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
|
|
{ id: '5', tag: 'A.I.', title: 'Envenenamento de LLMs por injeção estocástica reversa', excerpt: 'Hackeando os bancos de treinamento massivos através de padrões de grid em dados de satélite.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
|
|
{ id: '6', tag: 'MALWARE', title: 'Ransomware trava totalmente malhas ferroviárias do leste', excerpt: 'Eles pediram Monero limpo, mas a chave de desencriptação queimou.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
|
|
{ id: '7', tag: 'PRIVACY', title: 'O Fim da rede Tor como conhecemos', excerpt: 'Entidades interceptaram tráfego no source e adquiriram 60% dos nodes finais globais.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
|
{ id: '8', tag: 'NETWORK', title: 'DNS over HTTPS está vazando metadata de proxy', excerpt: 'Você não está invisível. A estrutura central reporta dados indiretos se mal configurada.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' },
|
|
]
|
|
},
|
|
en: {
|
|
back: '/cd root_dir',
|
|
heroTitle: 'THE ZERO-DAY.LOG',
|
|
heroDesc: 'Restricted distributed logs on infosec, darknets, and catastrophic L0 vulnerabilities.',
|
|
btnDecrypt: 'DECRYPT_FILE()',
|
|
btnTerminal: 'ACCESS_TERM()',
|
|
feedTitle: 'SYS.LOGS_STREAM',
|
|
subscribeText: 'Red priority exploit transmission channel.',
|
|
subscribeBtn: 'INIT_HANDSHAKE',
|
|
sidebarAd: 'S.P.O.N.S.O.R',
|
|
adDesc: 'OBFUSCATED DECENTRALIZED VPN',
|
|
statusMonitor: 'SYS_NODE_MONITOR',
|
|
articles: [
|
|
{ id: '1', tag: 'ZERO-DAY', title: 'Zero-Day Exploit found on core custodial network', excerpt: 'Our analytical team documented a critical RCE exploit within standard core architecture.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
|
{ id: '2', tag: 'CRYPTO', title: 'Quantum Cryptography: The absolute breakage event', excerpt: 'Shor algorithms dropped theoretical constraints. Patch databases rapidly before Q4 starts.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
|
|
{ id: '3', tag: 'HARDWARE', title: 'Reverse Engineering autonomous Aerial Drone SDKs', excerpt: 'Firmware anatomy bypass for commercial delivery fleets. The code breach is lethally basic.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
|
|
{ id: '4', tag: 'WEB3', title: 'How premium cold wallets leak seeds via voltage pinging', excerpt: 'Secure chips fail hard when injected with extreme thermal polls straight onto the mainboard.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
|
|
{ id: '5', tag: 'A.I.', title: 'Poisoning core LLMs via reverse stochastic injections', excerpt: 'Hacking massive training banks by tricking satellite grid rendering artifacts constantly.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
|
|
{ id: '6', title: 'Industrial Ransomware entirely halts eastern rail grids', tag: 'MALWARE', excerpt: 'Ransom requested in clean Monero, but the global decryption array burned to ash.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
|
|
{ id: '7', tag: 'PRIVACY', title: 'The total collapse of the Tor network as known', excerpt: 'Black entities intercepted core traffic routing and purchased 60% of all exit nodes.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
|
{ id: '8', tag: 'NETWORK', title: 'Your DNS over HTTPS setup is leaking proxy data logs', excerpt: 'Invisibility is broken. Central scaffolding inherently leaks telemetry if left out of bounds.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' }
|
|
]
|
|
},
|
|
es: {
|
|
back: '/cd root_dir',
|
|
heroTitle: 'EL ZERO-DAY.LOG',
|
|
heroDesc: 'Registros distribuidos restringidos sobre infosec y vulnerabilidades catastróficas.',
|
|
btnDecrypt: 'DESCIFRAR_ARCHIVO()',
|
|
btnTerminal: 'ACCESO_TERM()',
|
|
feedTitle: 'FLUJO.SYS_LOGS',
|
|
subscribeText: 'Canal de distribución de exploits, prioridad roja.',
|
|
subscribeBtn: 'INICIAR_HANDSHAKE',
|
|
sidebarAd: 'P.A.T.R.O.C.I.N.A.D.O.R',
|
|
adDesc: 'VPN DESCENTRALIZADA OFUSCADA',
|
|
statusMonitor: 'MONITOR_DE_NODOS_SYS',
|
|
articles: [
|
|
{ id: '1', tag: 'ZERO-DAY', title: 'Exploit crítico en la red principal de custodia', excerpt: 'El equipo documentó un exploit RCE mortal en la infraestructura estándar nativa.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
|
{ id: '2', tag: 'CRYPTO', title: 'Criptografía Cuántica: La ruptura absoluta inminente', excerpt: 'Los algoritmos de Shor ya no son una simple teoría. Se requiere un parcheo inmediato global.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
|
|
{ id: '3', tag: 'HARDWARE', title: 'Ingeniería Inversa letal a Drones comerciales', excerpt: 'El bypass de la anatomía del firmware muestra fallas operativas extremas en el SDK.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
|
|
{ id: '4', tag: 'WEB3', title: 'Wallets físicas filtrando frases semilla en tensión alta', excerpt: 'Los micro chips hiper seguros fallaron ante ataques eléctricos violentos a placa madre.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
|
|
{ id: '5', tag: 'A.I.', title: 'Corrompiendo LLMs mediante ataques estocásticos', excerpt: 'Dañando bases de datos de entrenamiento vía inyecciones matemáticas satelitales.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
|
|
{ id: '6', tag: 'MALWARE', title: 'Ransomware severo paraliza vías férreas de logística', excerpt: 'Miles de millones pedidos en Monero. La llave maestra de descifrado simplemente se borró.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
|
|
{ id: '7', tag: 'PRIVACY', title: 'El fin inevitable de anonimato total en red Tor', excerpt: 'Entes han adquirido el control total subyacente interceptando todos los nodos finales.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
|
{ id: '8', tag: 'NETWORK', title: 'Ajuste de DNS over HTTPS filtra meta datos severos', excerpt: 'No eres invisible en internet. La estructura troncal reporta huellas de IP y tracking.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' },
|
|
]
|
|
}
|
|
};
|
|
|
|
export default function CyberTheme({ posts = [], activeView = 'home', currentArticle, children }: { posts?: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
|
|
const lang = 'pt';
|
|
const ui = DICT[lang] || DICT['pt'];
|
|
|
|
// Mapeia posts reais do Supabase (gerados pela IA) ou usa o Fallback padrão
|
|
const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => ({
|
|
id: p.slug || p.id,
|
|
tag: 'SYSTEM',
|
|
title: p.data?.title || p.title,
|
|
excerpt: p.data?.excerpt || p.excerpt,
|
|
date: p.data?.date ? new Date(p.data.date).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '00:00:00',
|
|
author: p.data?.author || 'AI_NODE',
|
|
sev: i % 2 === 0 ? 'CRITICAL' : 'HIGH',
|
|
content: p.body || p.content
|
|
})) : ui.articles;
|
|
|
|
// Se houver um artigo atual passado por rota dinâmica
|
|
const article = currentArticle ? {
|
|
id: currentArticle.slug,
|
|
tag: 'SYSTEM',
|
|
title: currentArticle.data?.title,
|
|
excerpt: currentArticle.data?.excerpt,
|
|
date: currentArticle.data?.date ? new Date(currentArticle.data.date).toLocaleTimeString('pt-BR') : '00:00:00',
|
|
author: currentArticle.data?.author || 'AI_NODE',
|
|
sev: 'CRITICAL'
|
|
} : null;
|
|
|
|
const handleSimulatedAction = (e: React.MouseEvent | FormEvent, msg: string) => {
|
|
e.preventDefault();
|
|
window.alert(`[SYS_PROMPT] ${msg}`);
|
|
};
|
|
|
|
const severityColor = (sev: string) => {
|
|
switch (sev) {
|
|
case 'CRITICAL': return 'text-red-500 border-red-500/50 bg-red-500/10';
|
|
case 'HIGH': return 'text-orange-500 border-orange-500/50 bg-orange-500/10';
|
|
case 'MED': return 'text-yellow-500 border-yellow-500/50 bg-yellow-500/10';
|
|
default: return 'text-[#00ff9d] border-[#00ff9d]/50 bg-[#00ff9d]/10';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="cyber-scroll-container bg-[#020202] text-[#00ff9d] min-h-screen font-['Space_Mono'] overflow-hidden flex flex-col selection:bg-[#00ff9d] selection:text-black shadow-[inset_0_0_150px_rgba(0,255,157,0.03)]">
|
|
|
|
{/* Triple-Column Application Dashboard Shell */}
|
|
|
|
{/* Global Application Header */}
|
|
<header className="h-14 border-b border-[#00ff9d]/20 bg-[#020202] flex items-center justify-between px-4 z-40 relative">
|
|
<div className="absolute top-0 right-0 left-0 h-[1px] bg-gradient-to-r from-transparent via-[#00ff9d]/50 to-transparent opacity-50"></div>
|
|
<a href="/" className="flex items-center gap-4 cursor-pointer">
|
|
<div className="bg-[#00ff9d] text-black w-8 h-8 flex items-center justify-center font-black">
|
|
<Terminal className="w-5 h-5" />
|
|
</div>
|
|
<span className="font-bold tracking-[0.2em] uppercase hidden sm:block">CYBER_SYS_CORE v9.4</span>
|
|
</a>
|
|
<div className="flex items-center gap-6 text-xs text-[#00ff9d]/50 font-bold uppercase tracking-widest">
|
|
<span className="hidden md:flex items-center gap-2 animate-pulse"><Wifi className="w-3 h-3 text-red-500"/> IP MASKED</span>
|
|
<span className="hidden md:inline">UPTIME: 99.42%</span>
|
|
<a href="/login" className="border border-[#00ff9d]/30 hover:bg-[#00ff9d] hover:text-black transition-colors px-4 py-1.5 flex items-center gap-2"><LockKeyhole className="w-3 h-3"/> AUTH</a>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main 3 Column Flex Layer */}
|
|
<div className="flex flex-1 overflow-hidden">
|
|
|
|
{/* LEFT COLUMN: NAVIGATION TREE (15-20%) hidden on mobile */}
|
|
<aside className="w-64 border-r border-[#00ff9d]/20 hidden lg:flex flex-col bg-[#050505] overflow-y-auto">
|
|
<div className="p-4 border-b border-[#00ff9d]/20 font-bold text-[10px] tracking-widest uppercase text-[#00ff9d]/50">
|
|
SYSTEM_DIRECTORIES
|
|
</div>
|
|
<nav className="p-4 flex flex-col gap-1 text-xs">
|
|
<a href="/" className="flex items-center gap-2 text-white font-bold p-2 bg-[#00ff9d]/10 border border-[#00ff9d]/30 cursor-pointer"><FolderLock className="w-4 h-4 text-[#00ff9d]"/> /root</a>
|
|
<div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> exploits/</div>
|
|
<div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> payloads/</div>
|
|
<div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> hardware_schematics/</div>
|
|
<div className="flex items-center gap-2 text-white font-bold p-2 hover:bg-white/5 cursor-pointer mt-4" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><Database className="w-4 h-4 text-[#00ff9d]"/> /archives_locked</div>
|
|
<div className="flex items-center gap-2 text-white font-bold p-2 hover:bg-white/5 cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><Code className="w-4 h-4 text-[#00ff9d]"/> /tools_bin</div>
|
|
</nav>
|
|
{/* Ad Widget in Tree */}
|
|
<div className="mt-auto p-4 m-4 border border-red-500/30 bg-red-500/5 cursor-pointer group" onClick={(e) => handleSimulatedAction(e, 'Banner Sponsor Click')}>
|
|
<span className="text-[10px] text-red-500 font-bold tracking-widest uppercase block mb-2 opacity-50">{ui.sidebarAd} // TXT</span>
|
|
<h4 className="text-sm font-bold text-red-400 group-hover:text-white transition-colors">{ui.adDesc}</h4>
|
|
<span className="text-[9px] uppercase tracking-widest text-[#00ff9d]/50 block mt-2">> Run secure.sh</span>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* CENTER COLUMN: MAIN FEED (60%) scrollable */}
|
|
<main className="flex-1 bg-[#020202] relative overflow-y-auto w-full custom-cyber-scrollbar">
|
|
<div className="max-w-[1000px] mx-auto p-4 sm:p-8">
|
|
|
|
{activeView === 'home' ? (
|
|
<>
|
|
{/* Terminal Header Banner */}
|
|
<div className="border border-[#00ff9d]/40 bg-[#00ff9d]/5 p-6 sm:p-10 relative overflow-hidden mb-10">
|
|
<div className="absolute -right-20 -bottom-20 opacity-10"><Terminal className="w-96 h-96"/></div>
|
|
<span className="bg-[#00ff9d] text-black px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest block w-fit mb-6">GLOBAL_BROADCAST</span>
|
|
<h1 className="text-3xl sm:text-5xl font-black mb-4 uppercase tracking-tighter text-white drop-shadow-[0_0_10px_rgba(0,255,157,0.5)]">{ui.heroTitle}</h1>
|
|
<p className="text-[#00ff9d]/70 text-sm max-w-lg mb-8 leading-relaxed relative z-10">{ui.heroDesc}</p>
|
|
<div className="flex gap-4 relative z-10">
|
|
<a href={`/${articlesToRender[0]?.id}`} className="bg-[#00ff9d] text-black px-6 py-2.5 font-bold text-[11px] tracking-widest hover:bg-white transition-colors uppercase block">{ui.btnDecrypt}</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dense Log Feed */}
|
|
<div>
|
|
<h3 className="text-sm font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-3 border-b border-[#00ff9d]/20 pb-4">
|
|
<Terminal className="w-5 h-5"/> {ui.feedTitle}
|
|
</h3>
|
|
|
|
<div className="flex flex-col border-l border-[#00ff9d]/20 ml-2">
|
|
{articlesToRender.map((art: any, i: number) => (
|
|
<a href={`/${art.id}`} key={art.id} className="block group cursor-pointer">
|
|
<article className="relative pl-6 sm:pl-10 pb-10 last:pb-0">
|
|
{/* Timeline Node */}
|
|
<div className="absolute left-[-5px] top-1 w-[9px] h-[9px] bg-[#020202] border-2 border-[#00ff9d] rounded-full group-hover:bg-[#00ff9d] group-hover:shadow-[0_0_10px_rgba(0,255,157,1)] transition-all"></div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3 text-[10px] uppercase font-bold tracking-widest mb-3">
|
|
<span className="text-[#00ff9d]/50">{art.date}</span>
|
|
<span className="text-[#00ff9d]/20">///</span>
|
|
<span className="text-white bg-[#00ff9d]/20 px-2 py-0.5 border border-[#00ff9d]/30">{art.tag}</span>
|
|
<span className={`px-2 py-0.5 border ${severityColor(art.sev)}`}>SEV: {art.sev}</span>
|
|
</div>
|
|
|
|
<h2 className="text-xl sm:text-2xl font-bold text-white mb-2 leading-tight group-hover:text-[#00ff9d] transition-colors">{art.title}</h2>
|
|
<p className="text-sm text-[#00ff9d]/60 mb-4">{art.excerpt}</p>
|
|
|
|
<div className="text-[10px] font-mono opacity-0 group-hover:opacity-100 transition-opacity text-[#00ff9d]">
|
|
[EXECUTE] grep "full_log" /sys/logs/id_{art.id}
|
|
</div>
|
|
</article>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
/* Article View inside Center Column */
|
|
<article>
|
|
<a href="/" className="mb-10 inline-block text-[10px] font-bold tracking-widest uppercase border border-[#00ff9d]/30 bg-[#00ff9d]/5 px-4 py-2 hover:bg-[#00ff9d] hover:text-black transition-colors">
|
|
{ui.back}
|
|
</a>
|
|
|
|
<div className="mb-12">
|
|
<div className="flex flex-wrap gap-4 text-[10px] font-black uppercase tracking-widest mb-4">
|
|
<span className={`border px-3 py-1 ${severityColor(currentArticle.sev)}`}>SEVERITY: {currentArticle.sev}</span>
|
|
<span className="border border-[#00ff9d]/30 text-[#00ff9d] bg-[#00ff9d]/5 px-3 py-1">AUTHOR_ID: {currentArticle.author}</span>
|
|
</div>
|
|
<h1 className="text-4xl sm:text-5xl font-black text-white leading-tight mb-8 drop-shadow-[0_0_15px_rgba(0,255,157,0.3)]">{currentArticle.title}</h1>
|
|
|
|
<div className="border-t border-[#00ff9d]/20 py-4 flex justify-between tracking-widest text-[10px] font-mono text-[#00ff9d]/50 uppercase">
|
|
<span>TIMESTAMP: {currentArticle.date}</span>
|
|
<span className="flex items-center gap-1 cursor-pointer hover:text-white" onClick={(e) => handleSimulatedAction(e, 'Share log via Onion router')}><Share className="w-3 h-3"/> TRANSMIT VIA ONION</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="prose prose-invert prose-lg max-w-none prose-p:text-[#00ff9d]/80 prose-p:font-['Space_Mono'] prose-p:leading-relaxed prose-headings:font-bold prose-headings:text-white prose-headings:uppercase prose-headings:tracking-widest marker:text-[#00ff9d] prose-img:border prose-img:border-[#00ff9d]/30 prose-img:rounded-none">
|
|
|
|
<div className="bg-[#00ff9d]/5 border-l-4 border-[#00ff9d] p-6 text-xl text-white font-bold leading-normal mb-10">
|
|
{currentArticle.excerpt}
|
|
</div>
|
|
|
|
{/* Injecting Ad block into article flow dynamically (always before content) */}
|
|
<div className="my-10 border border-[#00ff9d]/30 bg-black p-6 flex flex-col items-center justify-center text-center cursor-pointer hover:border-[#00ff9d] transition-colors" onClick={(e) => handleSimulatedAction(e, 'MREC Article Ad')}>
|
|
<span className="text-[10px] tracking-[0.2em] font-bold text-[#00ff9d]/40 mb-2">{ui.sidebarAd} // MREC SCRIPT</span>
|
|
<span className="font-mono text-sm border-b border-dashed border-[#00ff9d]/30 pb-1 text-white">SPONSORED_TERMINAL_BLOCK 300x250</span>
|
|
</div>
|
|
|
|
<div className="text-zinc-300 font-mono leading-relaxed space-y-6 prose prose-invert prose-p:text-zinc-300 prose-headings:text-[#00ff9d] prose-a:text-[#00ff9d] prose-strong:text-white prose-code:text-[#00ff9d] max-w-none">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)}
|
|
|
|
<footer className="mt-20 pt-10 border-t border-[#00ff9d]/10 pb-20">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 text-left mb-10">
|
|
<div>
|
|
<h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Terminal_Core</h4>
|
|
<p className="text-zinc-500 text-xs leading-relaxed">Infraestrutura de segurança distribuída para coleta de inteligência em redes abertas.</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Legal_Stack</h4>
|
|
<ul className="text-zinc-500 text-xs space-y-2">
|
|
<li><a href="/privacy" className="hover:text-[#00ff9d]">PRIVACY_POLICY.MD</a></li>
|
|
<li><a href="/terms" className="hover:text-[#00ff9d]">TERMS_OF_SERVICE.MD</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Node_Status</h4>
|
|
<div className="flex items-center gap-2 text-[10px] text-green-500 font-bold">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
ALL_SYSTEMS_OPERATIONAL
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-center gap-6 mb-8">
|
|
<a href="#" className="hover:text-[#00ff9d]"><Globe className="w-5 h-5"/></a>
|
|
<a href="#" className="hover:text-[#00ff9d]"><Share2 className="w-5 h-5"/></a>
|
|
<a href="#" className="hover:text-[#00ff9d]"><Instagram className="w-5 h-5"/></a>
|
|
</div>
|
|
<div className="text-center font-mono text-[10px] text-[#00ff9d]/40 tracking-widest uppercase">
|
|
EOF - END OF LOGS TRANSMISSION // {new Date().getFullYear()} // ENCRYPTED_SITE
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
|
|
{/* RIGHT COLUMN: STATUS MONITOR & WIDGETS (20-25%) hidden on smaller screens */}
|
|
<aside className="w-72 xl:w-80 border-l border-[#00ff9d]/20 hidden md:flex flex-col bg-[#050505] overflow-y-auto">
|
|
|
|
{/* Status Monitoring Widget */}
|
|
<div className="p-6 border-b border-[#00ff9d]/20 bg-black relative">
|
|
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] mb-4 flex items-center gap-2 text-[#00ff9d]"><Eye className="w-4 h-4"/> {ui.statusMonitor}</h3>
|
|
<div className="flex flex-col gap-3 font-mono text-[10px]">
|
|
<div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">MAIN_ROUTER_1</span><span className="text-green-500 font-bold bg-green-500/10 px-2 rounded">OK 11ms</span></div>
|
|
<div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">SQL_CLUSTER_A</span><span className="text-green-500 font-bold bg-green-500/10 px-2 rounded">OK 42ms</span></div>
|
|
<div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">PROXY_US_EAST</span><span className="text-red-500 font-bold bg-red-500/10 px-2 rounded animate-pulse">ERR DOWN</span></div>
|
|
<div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">VAULT_ENCRYPT</span><span className="text-yellow-500 font-bold bg-yellow-500/10 px-2 rounded">WARN 2.1s</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Newsletter Handshake Configurator */}
|
|
<div className="p-6 border-b border-[#00ff9d]/20 flex flex-col gap-4">
|
|
<div className="w-10 h-10 border border-[#00ff9d]/40 flex items-center justify-center bg-[#00ff9d]/10 text-[#00ff9d]"><Crosshair className="w-5 h-5"/></div>
|
|
<h4 className="text-sm font-black uppercase tracking-widest text-white">SYNC DAEMON DB</h4>
|
|
<p className="text-[10px] text-[#00ff9d]/60 leading-relaxed font-mono">{ui.subscribeText}</p>
|
|
<form className="flex flex-col gap-2 mt-2" onSubmit={(e) => handleSimulatedAction(e, 'Secure PGP Transmission Init')}>
|
|
<input type="text" placeholder="pgp_key_or_email..." className="bg-black border border-[#00ff9d]/40 px-3 py-2 text-xs font-mono text-white outline-none focus:border-[#00ff9d] w-full" required/>
|
|
<button className="bg-[#00ff9d] text-black font-black text-[10px] tracking-widest px-4 py-2 hover:bg-white uppercase w-full">{ui.subscribeBtn}</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Ad Banner Vertical Skyscraper Emulator */}
|
|
<div className="flex-1 p-6 flex items-center justify-center bg-[url('https://www.transparenttextures.com/patterns/black-mamba.png')]">
|
|
<div className="w-[160px] h-[400px] bg-red-500/10 border border-red-500/30 flex flex-col items-center justify-center cursor-pointer group hover:bg-red-500/20 transition-colors relative" onClick={(e) => handleSimulatedAction(e, 'Skyscraper Ad Click')}>
|
|
<ShieldAlert className="w-16 h-16 text-red-500 mb-6 opacity-80 group-hover:scale-110 transition-transform"/>
|
|
<span className="text-red-500 font-black tracking-[0.2em] text-[10px] uppercase writing-vertical-rl rotate-180 mb-6">{ui.sidebarAd} // NETWORK</span>
|
|
<span className="text-red-400 font-mono text-[9px] bg-red-500/20 px-2 py-1 absolute bottom-4">160x600 px</span>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|