Spaces:

admin08077
/

aibanking.dev

Sleeping

App Files Files Community

admin08077 commited on 8 days ago

Commit

1ce59e0

verified ·

1 Parent(s): 6b0e3cb

Upload 27 files

Browse files

Files changed (5) hide show

views/Documentation.tsx +135 -86
views/Landing.tsx +158 -192
views/PrivacyPolicy.tsx +118 -62
views/TechnicalDeepDive.tsx +167 -0
views/routes.ts +14 -28

views/Documentation.tsx CHANGED Viewed

@@ -1,110 +1,159 @@
-import React from 'react';
-import { BookOpen, Search, Code, LayoutDashboard, Building2, Cpu, ShieldCheck, Zap, Bitcoin, Terminal, ArrowRight, ChevronRight } from 'lucide-react';
-const DocSection: React.FC<{ icon: any, title: string, description: string, details: string[] }> = ({ icon: Icon, title, description, details }) => (
-  <div className="group bg-zinc-950 border border-zinc-900 p-10 rounded-[3rem] hover:border-blue-500/30 transition-all shadow-2xl">
-    <div className="flex items-center gap-6 mb-8">
-      <div className="p-4 bg-zinc-900 rounded-2xl text-blue-500 group-hover:scale-110 transition-transform duration-500 border border-zinc-800">
-        <Icon size={24} />
       </div>
       <div>
-        <h3 className="text-xl font-black text-white italic tracking-tighter uppercase">{title}</h3>
-        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">Protocol Segment v6.0</p>
       </div>
     </div>
-    <p className="text-zinc-400 text-sm leading-relaxed mb-8 font-medium italic">"{description}"</p>
-    <div className="space-y-4 border-t border-zinc-900 pt-8">
-      <h4 className="text-[9px] font-black text-zinc-500 uppercase tracking-widest mb-4">Core Functions</h4>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {details.map((d, i) => (
-          <div key={i} className="flex items-center gap-3 text-xs font-bold text-zinc-300">
-            <div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
-            {d}
-          </div>
-        ))}
       </div>
     </div>
   </div>
 );
 const Documentation: React.FC = () => {
   return (
-    <div className="max-w-6xl mx-auto py-20 animate-in slide-in-from-bottom-6 duration-1000">
-      <div className="flex flex-col md:flex-row justify-between items-end mb-20 gap-10">
-        <div>
-          <div className="inline-flex items-center space-x-3 px-4 py-2 bg-blue-500/10 border border-blue-500/20 rounded-full text-[10px] font-black text-blue-500 uppercase tracking-widest mb-6">
-            <BookOpen size={12} />
-            <span>Lumina System Manual</span>
           </div>
-          <h1 className="text-6xl font-black italic text-white uppercase tracking-tighter leading-none">
-            Documentation <br /> <span className="text-blue-500 not-italic">Core</span>
-          </h1>
         </div>
-        <div className="relative w-full md:w-96">
-          <Search className="absolute left-6 top-1/2 -translate-y-1/2 text-zinc-600" size={18} />
-          <input
-            placeholder="Search Protocol Map..."
-            className="w-full bg-zinc-950 border-2 border-zinc-900 focus:border-blue-500/50 rounded-[2rem] py-6 pl-16 pr-8 text-white font-bold outline-none transition-all"
           />
         </div>
-      </div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
-        <DocSection
-          icon={LayoutDashboard}
-          title="Command Overview"
-          description="The central nervous system of the Lumina Quantum Ledger. Aggregates live data from multiple institutional nodes into a singular dashboard."
-          details={["Real-time Cash Curve Monitoring", "AI-Driven Liquidity Alerts", "Carbon Deficit Tracking", "Node Health Verification"]}
-        />
-        <DocSection
-          icon={Building2}
-          title="Bank Registry"
-          description="Managed corporate treasury nodes connecting directly to tier-1 banks via the FDX v6 protocol. Secure, read-write access to institutional vaults."
-          details={["FDX Native Handshakes", "Multi-Institution Syncing", "Available Balance Polling", "Real-time Node Status"]}
-        />
-        <DocSection
-          icon={Cpu}
-          title="Quantum Oracle"
-          description="Neural financial forecasting engine. Runs complex 'What-If' simulations using high-fidelity economic models and predictive drift analysis."
-          details={["Inflation Spike Modeling", "Compute Cost Forecasting", "Market Volatility Stress Testing", "Resilience AA- Ratings"]}
-        />
-        <DocSection
-          icon={ShieldCheck}
-          title="Record Vault"
-          description="Encrypted long-term storage for audit compliance. Every document is cryptographically signed and stored with sha256 checksum integrity."
-          details={["Institutional Archive Export", "Cryptographic Metadata Storage", "Compliance Audit Trails", "Multi-format Ledger Support"]}
-        />
-        <DocSection
-          icon={Bitcoin}
-          title="Asset Terminal"
-          description="Decentralized finance gateway for corporate treasuries. High-frequency trading (HFT) interface with neural-enhanced depth analysis."
-          details={["Real-time Global Market Data", "AI Sentiment Monitoring", "High-Frequency Tick Visualization", "Subspace Signal Parity"]}
-        />
-        <DocSection
-          icon={Zap}
-          title="Onboarding Flows"
-          description="Low-friction institutional integration layer. Dynamically generate secure handshakes for account collection and payment authorization."
-          details={["AI SDK Code Architect", "RTP Payment Triggering", "Dynamic Client Registration", "Secure Token Issuance"]}
-        />
-      </div>
-      <div className="mt-20 p-12 bg-blue-600 rounded-[3.5rem] flex flex-col md:flex-row justify-between items-center gap-10 shadow-[0_30px_60px_rgba(37,99,235,0.2)]">
-        <div className="flex items-center gap-8">
-          <div className="w-20 h-20 bg-white/20 rounded-3xl flex items-center justify-center text-white backdrop-blur-md">
-            <Terminal size={40} />
-          </div>
-          <div>
-            <h4 className="text-2xl font-black text-white italic tracking-tighter uppercase mb-2">Need Direct Handshake?</h4>
-            <p className="text-blue-100 text-sm max-w-lg font-bold leading-relaxed">Our AI Terminal architects are online 24/7 to help you deploy custom node integrations and quantum-resistant treasury flows.</p>
-          </div>
         </div>
-        <button onClick={() => window.history.back()} className="px-10 py-5 bg-white text-blue-600 rounded-2xl font-black text-xs uppercase tracking-widest hover:scale-105 transition-all shadow-xl">
-           Open AI Advisor
-        </button>
       </div>
     </div>
   );
 };
-export default Documentation;

+import React, { useState } from 'react';
+import {
+  BookOpen, Search, Code, LayoutDashboard, Building2, Cpu, ShieldCheck, Zap,
+  Bitcoin, Terminal, ArrowRight, ChevronRight, Activity, Globe, Database,
+  Layers, Lock, Server, FileText, Smartphone, ArrowLeft, Shield
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+const DocSection: React.FC<{ icon: any, title: string, description: string, details: string[], code?: string }> = ({ icon: Icon, title, description, details, code }) => (
+  <div className="group bg-zinc-950 border border-zinc-900 p-12 rounded-[4rem] hover:border-blue-500/30 transition-all shadow-2xl relative overflow-hidden">
+    <div className="absolute top-0 right-0 p-10 opacity-[0.02] group-hover:opacity-10 transition-opacity">
+      <Icon size={180} />
+    </div>
+    <div className="flex items-center gap-8 mb-10 relative z-10">
+      <div className="p-5 bg-zinc-900 rounded-3xl text-blue-500 group-hover:scale-110 transition-transform duration-500 border border-zinc-800 shadow-xl">
+        <Icon size={32} />
       </div>
       <div>
+        <h3 className="text-3xl font-black text-white italic tracking-tighter uppercase leading-none">{title}</h3>
+        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mt-2">Protocol Segment v6.5 • Synchronized</p>
       </div>
     </div>
+    <p className="text-zinc-400 text-lg leading-relaxed mb-12 font-medium italic relative z-10">"{description}"</p>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-12 relative z-10">
+      <div className="space-y-6">
+        <h4 className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-6">Core Functions</h4>
+        <div className="space-y-4">
+          {details.map((d, i) => (
+            <div key={i} className="flex items-start gap-4 text-sm font-bold text-zinc-300">
+              <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 shrink-0 shadow-[0_0_8px_#3b82f6]"></div>
+              <span>{d}</span>
+            </div>
+          ))}
+        </div>
       </div>
+      {code && (
+        <div className="bg-black border border-zinc-900 rounded-3xl p-8 font-mono text-[10px] text-emerald-500/80 shadow-inner group-hover:border-zinc-700 transition-colors h-48 overflow-y-auto custom-scrollbar">
+          <p className="text-zinc-700 italic mb-4">// Protocol Implementation</p>
+          <pre className="whitespace-pre-wrap">{code}</pre>
+        </div>
+      )}
     </div>
   </div>
 );
 const Documentation: React.FC = () => {
+  const navigate = useNavigate();
   return (
+    <div className="min-h-screen bg-black text-white py-20 px-10 animate-in slide-in-from-bottom-6 duration-1000">
+      <div className="max-w-7xl mx-auto space-y-24">
+        <div className="flex flex-col md:flex-row justify-between items-end gap-12 border-b border-zinc-900 pb-20">
+          <div className="space-y-10">
+             <button onClick={() => navigate(-1)} className="group flex items-center gap-4 text-zinc-600 hover:text-white transition-colors">
+                <ArrowLeft size={20} className="group-hover:-translate-x-2 transition-transform" />
+                <span className="text-[11px] font-black uppercase tracking-[0.4em]">Return to Nexus</span>
+             </button>
+            <div className="inline-flex items-center space-x-3 px-6 py-2.5 bg-blue-500/10 border border-blue-500/20 rounded-full text-[11px] font-black text-blue-500 uppercase tracking-widest">
+              <BookOpen size={16} />
+              <span>Lumina System Manual v6.5.0</span>
+            </div>
+            <h1 className="text-[8rem] font-black italic text-white uppercase tracking-tighter leading-none">
+              Manual <br /> <span className="text-blue-500 not-italic">Registry</span>
+            </h1>
+          </div>
+          <div className="relative w-full md:w-[480px]">
+            <Search className="absolute left-8 top-1/2 -translate-y-1/2 text-zinc-600" size={24} />
+            <input
+              placeholder="Search Protocol Map..."
+              className="w-full bg-zinc-950 border-2 border-zinc-900 focus:border-blue-500/50 rounded-[3rem] py-8 pl-20 pr-10 text-xl text-white font-bold outline-none transition-all shadow-2xl"
+            />
           </div>
         </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <DocSection
+            icon={LayoutDashboard}
+            title="Command Interface"
+            description="The central nervous system of the Lumina Quantum Ledger. Aggregates live data from multiple institutional nodes into a singular dashboard."
+            details={["Real-time Cash Curve Monitoring", "AI-Driven Liquidity Alerts", "Carbon Deficit Tracking", "Node Health Verification"]}
+            code={`const dashboard = await Lumina.Core.initialize({
+  nodeParity: 'STRICT',
+  refreshInterval: 'REALTIME',
+  metrics: ['liquidity', 'alpha', 'esg']
+});`}
+          />
+          <DocSection
+            icon={Building2}
+            title="Bank Registry"
+            description="Managed corporate treasury nodes connecting directly to tier-1 banks via the FDX v6 protocol. Secure, read-write access to institutional vaults."
+            details={["FDX Native Handshakes", "Multi-Institution Syncing", "Available Balance Polling", "Real-time Node Status"]}
+            code={`await Registry.Handshake('CITI-USA-1', {
+  protocol: 'FDX_V6_NATIVE',
+  scope: ['READ_WRITE'],
+  auth: { type: 'RSA-OAEP-4096' }
+});`}
+          />
+          <DocSection
+            icon={Cpu}
+            title="Quantum Oracle"
+            description="Neural financial forecasting engine. Runs complex 'What-If' simulations using high-fidelity economic models and predictive drift analysis."
+            details={["Inflation Spike Modeling", "Compute Cost Forecasting", "Market Volatility Stress Testing", "Resilience AA- Ratings"]}
+            code={`const forecast = await Oracle.Simulate({
+  scenario: 'HYPER_INFLATION_Q3',
+  assetClass: 'REAL_ESTATE',
+  confidence: 0.98
+});`}
+          />
+          <DocSection
+            icon={ShieldCheck}
+            title="Record Vault"
+            description="Encrypted long-term storage for audit compliance. Every document is cryptographically signed and stored with sha256 checksum integrity."
+            details={["Institutional Archive Export", "Cryptographic Metadata Storage", "Compliance Audit Trails", "Multi-format Ledger Support"]}
+            code={`const record = await Vault.Seal(payload, {
+  encryption: 'AES-256-GCM',
+  sign: 'RSA-PSS-4096',
+  auditTrail: true
+});`}
           />
         </div>
+        <div className="p-20 bg-zinc-950 border border-zinc-900 rounded-[5rem] shadow-[0_100px_200px_rgba(0,0,0,0.8)] relative overflow-hidden group">
+           <div className="absolute inset-0 bg-[radial-gradient(circle_at_0%_0%,_#1e1b4b_0%,_transparent_50%)] opacity-30"></div>
+           <div className="relative z-10 flex flex-col md:flex-row justify-between items-center gap-16">
+              <div className="space-y-8 flex-1">
+                 <div className="p-6 bg-blue-600/10 text-blue-500 rounded-[2.5rem] border border-blue-500/20 shadow-2xl inline-block group-hover:scale-110 transition-transform duration-700">
+                    <Terminal size={48} />
+                 </div>
+                 <h2 className="text-5xl font-black italic text-white uppercase tracking-tighter leading-none">Need Direct <br /> <span className="text-blue-500">Handshake?</span></h2>
+                 <p className="text-zinc-500 text-xl font-bold italic leading-relaxed max-w-2xl">
+                    "Our AI Terminal architects are online 24/7 to help you deploy custom node integrations and quantum-resistant treasury flows."
+                 </p>
+              </div>
+              <div className="w-full md:w-auto flex flex-col gap-6">
+                 <button onClick={() => navigate('/advisor')} className="px-16 py-8 bg-white text-black rounded-[2.5rem] font-black text-sm uppercase tracking-[0.5em] hover:scale-105 transition-all shadow-[0_30px_60px_rgba(255,255,255,0.1)] flex items-center justify-center gap-6">
+                    Open Advisor <ChevronRight size={24} />
+                 </button>
+                 <button className="px-16 py-8 bg-zinc-900 text-white border border-zinc-800 rounded-[2.5rem] font-black text-sm uppercase tracking-[0.5em] hover:bg-zinc-800 transition-all flex items-center justify-center gap-6">
+                    API Reference <Globe size={24} />
+                 </button>
+              </div>
+           </div>
+        </div>
+        <div className="pt-20 border-t border-zinc-900 grid grid-cols-2 md:grid-cols-4 gap-20 opacity-20 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-1000">
+           {/* Fix: Use Shield which is now imported */}
+           {['AES-256', 'RSA-4096', 'SHA-256', 'RSA-PSS'].map((label, i) => (
+             <div key={i} className="text-center space-y-4">
+                <Shield size={32} className="mx-auto text-zinc-500" />
+                <span className="text-[12px] font-black uppercase tracking-[1em] text-zinc-600">{label}</span>
+             </div>
+           ))}
         </div>
       </div>
     </div>
   );
 };
+export default Documentation;

views/Landing.tsx CHANGED Viewed

@@ -1,30 +1,38 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 import {
-  Cpu, Sparkles, ArrowRight, Loader2, X, Terminal, Mic, Zap, MessageSquare, ChevronDown,
   ShieldCheck, Globe, Activity, Layers, Database, Lock, Eye, Building2, BarChart3, Radio, RefreshCw,
-  BrainCircuit, Network, Server, Fingerprint, Key, Wallet, Briefcase, FileText, Smartphone,
-  Shield, Infinity, Waves, Thermometer, FlaskConical, Gavel, Scale, Hammer, UserPlus, Heart,
-  // Added missing imports Code and ChevronRight
-  ShieldAlert, Repeat, ChevronLeft, GitPullRequest, Box, Code, ChevronRight
 } from 'lucide-react';
 import { apiClient } from '../services/api';
 const FEATURE_CARDS = [
   { id: 1, title: "Neural Parity", desc: "Real-time ledger consensus across 1,200 nodes with zero-drift synchronization.", icon: Fingerprint, color: "blue", img: "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2832&auto=format&fit=crop" },
   { id: 2, title: "Quantum Oracle", desc: "Predictive treasury drift detection using qubit-stabilized neural forecasting models.", icon: Cpu, color: "purple", img: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2872&auto=format&fit=crop" },
-  { id: 3, title: "Liquidity Mesh", desc: "High-velocity disbursement fabrics optimized for sub-millisecond M2M settlement.", icon: Waves, color: "emerald", img: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=80&w=2570&auto=format&fit=crop" },
   { id: 4, title: "Sovereign ID", desc: "Encapsulated identity vault utilizing RSA-OAEP-4096 and rotating high-entropy seeds.", icon: Lock, color: "rose", img: "https://images.unsplash.com/photo-1558494949-ef010cbdcc51?q=80&w=2546&auto=format&fit=crop" },
-  { id: 5, title: "Forge Foundry", desc: "Synthesis of high-fidelity digital relics from transaction heat-maps and block-states.", icon: Hammer, color: "amber", img: "https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=2560&auto=format&fit=crop" },
-  { id: 2, title: "Edge Routing", desc: "Global distribution node Map with proximity-optimized gateway handshakes.", icon: Globe, color: "cyan", img: "https://images.unsplash.com/photo-1484417894907-623942c8ee29?q=80&w=2832&auto=format&fit=crop" }
 ];
 const Landing: React.FC = () => {
   const navigate = useNavigate();
   const [isDemoLoading, setIsDemoLoading] = useState(false);
   const [scrollY, setScrollY] = useState(0);
-  // Feature Shuffle State
   const [activeFeatureIndex, setActiveFeatureIndex] = useState(0);
   useEffect(() => {
@@ -61,49 +69,53 @@ const Landing: React.FC = () => {
       </div>
       {/* FORTUNE 1200 MEGA HEADER */}
-      <nav className={`fixed top-0 left-0 w-full z-[100] px-10 py-8 flex justify-between items-center transition-all duration-700 ${scrollY > 50 ? 'backdrop-blur-3xl bg-black/80 border-b border-white/5 py-6' : 'bg-transparent'}`}>
         <div className="flex items-center gap-12">
-          <div className="flex items-center gap-6 group cursor-pointer" onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>
-            <div className="w-14 h-14 bg-white rounded-[1.8rem] flex items-center justify-center group-hover:rotate-12 transition-transform duration-700 shadow-2xl border-2 border-zinc-900">
-              <Cpu size={32} className="text-black" />
             </div>
             <div>
-              <h1 className="text-2xl font-black italic tracking-tighter text-white uppercase leading-none">AIBanking<span className="text-blue-500 not-italic">.dev</span></h1>
-              <p className="text-[10px] uppercase tracking-[0.8em] font-black text-zinc-600 mt-1.5">Consensus Registry</p>
             </div>
-          </div>
-          <div className="hidden xl:flex items-center gap-10">
-            <div className="group relative py-4">
-               <button className="text-[11px] font-black uppercase tracking-[0.4em] text-zinc-400 group-hover:text-white transition-colors flex items-center gap-2">Protocol Tiers <ChevronDown size={10} /></button>
-               <div className="absolute top-full left-0 w-[700px] bg-zinc-950 border border-zinc-900 rounded-[3.5rem] p-12 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-y-2 transition-all shadow-[0_40px_80px_rgba(0,0,0,0.8)] grid grid-cols-2 gap-10">
-                  <MegaLink icon={Zap} title="Enterprise Core" desc="Authenticated via paid Google API nodes. 100% SLA." />
-                  <MegaLink icon={Globe} title="Regular Mesh" desc="Public access tier for regional node exploration." />
-                  <MegaLink icon={Code} title="SDK Import" desc="NPM-ready modules for M2M treasury automation." />
-                  <MegaLink icon={ShieldCheck} title="Compliance Hub" desc="FDX v6.5 verified long-term archival registry." />
-               </div>
-            </div>
-            <div className="group relative py-4">
-               <button className="text-[11px] font-black uppercase tracking-[0.4em] text-zinc-400 group-hover:text-white transition-colors flex items-center gap-2">Resources <ChevronDown size={10} /></button>
-               <div className="absolute top-full left-0 w-[500px] bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-y-2 transition-all shadow-2xl space-y-6">
-                  <MegaLink icon={FileText} title="Whitepaper Genesis" desc="The mathematical proof of neural banking." />
-                  <MegaLink icon={Fingerprint} title="Security Manifesto" desc="Zero-persistence shredding protocol v1.2." />
-               </div>
-            </div>
-            <a href="#developers" className="text-[11px] font-black uppercase tracking-[0.4em] text-zinc-400 hover:text-white transition-colors">Developer Core</a>
           </div>
         </div>
-        <div className="flex items-center gap-10">
-          <button onClick={() => navigate('/documentation')} className="hidden md:block text-[11px] font-black uppercase tracking-[0.4em] text-zinc-500 hover:text-white transition-colors">Manual Registry</button>
-          <button onClick={handleDemoAccess} className="px-12 py-5 bg-blue-600 text-white rounded-full font-black text-[11px] uppercase tracking-[0.5em] hover:bg-blue-500 transition-all flex items-center gap-4 shadow-[0_0_40px_rgba(37,99,235,0.4)] group">
-            {isDemoLoading ? <Loader2 size={16} className="animate-spin" /> : <Sparkles size={16} className="group-hover:scale-125 transition-transform" />}
-            Initialize Handshake
           </button>
         </div>
       </nav>
-      {/* HERO HERO SECTION */}
       <section className="relative z-10 min-h-screen flex flex-col justify-center items-center px-10 pt-40 pb-20 text-center overflow-hidden">
         <div className="absolute inset-0 z-0 opacity-30">
            <img src="https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=2832&auto=format&fit=crop" className="w-full h-full object-cover blur-[140px] scale-110" alt="Liquid Space" />
@@ -113,41 +125,41 @@ const Landing: React.FC = () => {
           <div className="inline-flex items-center gap-4 px-10 py-4 bg-blue-600/10 border border-blue-600/20 rounded-full animate-in zoom-in-95 duration-1000 relative overflow-hidden group">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent animate-[shimmer_2s_infinite]"></div>
             <Activity size={18} className="text-blue-500" />
-            <span className="text-[12px] font-black uppercase tracking-[0.8em] text-blue-500">Subspace_Handshake_Stabilized</span>
           </div>
-          <h1 className="text-[10rem] lg:text-[16rem] font-black italic tracking-tighter uppercase leading-[0.7] mb-12 drop-shadow-2xl">
-            Global <br /><span className="text-blue-600 not-italic decoration-blue-900/40 underline-offset-[40px] underline decoration-[30px]">Standard</span>
           </h1>
           <p className="text-zinc-500 text-3xl lg:text-4xl font-bold italic max-w-6xl mx-auto mb-16 leading-relaxed">
-            "The definitive interface for <span className="text-white">high-velocity institutional assets</span>. Route neural signals through the mesh with absolute parity."
           </p>
-          <div className="flex flex-wrap justify-center gap-12 pt-10">
             <button
               onClick={handleDemoAccess}
-              className="px-20 py-10 bg-white text-black rounded-[3rem] font-black text-sm uppercase tracking-[0.8em] flex items-center gap-10 hover:bg-blue-600 hover:text-white transition-all shadow-[0_50px_100px_rgba(255,255,255,0.1)] group active:scale-95"
             >
-              {isDemoLoading ? <Loader2 size={32} className="animate-spin" /> : <span>Start Session</span>}
-              <ArrowRight size={32} className="group-hover:translate-x-6 transition-transform duration-700" />
             </button>
-            <button className="px-20 py-10 bg-zinc-950 border-2 border-zinc-900 text-white rounded-[3rem] font-black text-sm uppercase tracking-[0.8em] flex items-center gap-10 hover:border-blue-600 transition-all shadow-2xl group active:scale-95">
-              <Database size={32} className="text-blue-500" />
-              Whitepaper Genesis
             </button>
           </div>
         </div>
         <div className="mt-40 animate-bounce opacity-20"><ChevronDown size={64} /></div>
       </section>
-      {/* ENDLESS TINDER SHUFFLE SECTION */}
       <section className="relative z-10 py-60 px-10 bg-zinc-950/20">
          <div className="max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-32 items-center">
             <div className="space-y-16">
                <div className="space-y-6">
-                  <h3 className="text-blue-500 font-black text-xs uppercase tracking-[0.8em]">Deep Feature Stack</h3>
-                  <h2 className="text-8xl lg:text-[10rem] font-black italic text-white tracking-tighter uppercase leading-[0.85]">Endless <br /> <span className="text-blue-600 not-italic">Optimization</span></h2>
                </div>
                <p className="text-zinc-500 text-2xl font-bold leading-relaxed italic max-w-2xl">
                  "Our architectural layers are infinite. Swipe through the core protocols that define the future of sovereign digital wealth management."
@@ -163,42 +175,27 @@ const Landing: React.FC = () => {
                  const isActive = activeFeatureIndex === i;
                  const isPrev = (activeFeatureIndex - 1 + FEATURE_CARDS.length) % FEATURE_CARDS.length === i;
                  const isNext = (activeFeatureIndex + 1) % FEATURE_CARDS.length === i;
-                 let offset = 0;
-                 let opacity = 0;
-                 let scale = 0.8;
-                 let rotate = 0;
-                 let zIndex = 0;
-                 if (isActive) { offset = 0; opacity = 1; scale = 1; rotate = 0; zIndex = 50; }
-                 else if (isNext) { offset = 60; opacity = 0.4; scale = 0.9; rotate = 5; zIndex = 40; }
-                 else if (isPrev) { offset = -60; opacity = 0; scale = 0.9; rotate = -5; zIndex = 30; }
-                 else { opacity = 0; offset = 100; scale = 0.7; zIndex = 0; }
                  return (
                    <div
                      key={card.id}
                      className="absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)]"
-                     style={{
-                       transform: `translateX(${offset}px) scale(${scale}) rotate(${rotate}deg)`,
-                       opacity,
-                       zIndex
-                     }}
                    >
                      <div className="w-full h-full bg-zinc-950 border border-zinc-900 rounded-[5rem] overflow-hidden shadow-[0_100px_200px_rgba(0,0,0,0.8)] relative group">
-                        <img src={card.img} className="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-60 group-hover:scale-110 transition-all duration-[3s]" alt={card.title} />
                         <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
                         <div className="absolute bottom-16 left-16 right-16 space-y-8">
-                           <div className={`w-20 h-20 bg-${card.color}-600/20 text-${card.color}-500 rounded-[2rem] flex items-center justify-center border border-${card.color}-500/30 shadow-2xl backdrop-blur-xl`}>
                               <card.icon size={40} />
                            </div>
                            <div className="space-y-4">
                               <h4 className="text-6xl font-black italic uppercase tracking-tighter text-white leading-none">{card.title}</h4>
                               <p className="text-zinc-400 text-xl font-bold leading-relaxed italic pr-10">"{card.desc}"</p>
                            </div>
-                           <button className="flex items-center gap-4 text-[11px] font-black uppercase tracking-[0.5em] text-blue-500 hover:text-white transition-colors group/link">
-                              Deploy Protocol <ArrowRight size={16} className="group-hover/link:translate-x-3 transition-transform" />
-                           </button>
                         </div>
                      </div>
                    </div>
@@ -208,79 +205,19 @@ const Landing: React.FC = () => {
          </div>
       </section>
-      {/* DEVELOPER CORE SECTION (REGULAR API) */}
-      <section id="developers" className="relative z-10 py-60 px-10 border-y border-white/5 bg-black">
-         <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-40 items-center">
-            <div className="space-y-16">
-               <div className="space-y-6">
-                  <h3 className="text-emerald-500 font-black text-xs uppercase tracking-[0.8em]">Open Source Registry</h3>
-                  <h2 className="text-8xl lg:text-[10rem] font-black italic text-white tracking-tighter uppercase leading-[0.85]">The Free <br /> <span className="text-emerald-500 not-italic">Import</span></h2>
-               </div>
-               <p className="text-zinc-500 text-2xl font-bold leading-relaxed italic">
-                 "Our Regular Tier API is accessible to any verified node globally. Initialize your treasury mesh with a single command line. Zero friction, total parity."
-               </p>
-               <div className="grid grid-cols-2 gap-10">
-                  <div className="space-y-3">
-                     <p className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Rate Limit</p>
-                     <p className="text-xl font-black italic uppercase text-white">100 Req / Sec</p>
-                  </div>
-                  <div className="space-y-3">
-                     <p className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Latency Hub</p>
-                     <p className="text-xl font-black italic uppercase text-white">Global Nodes</p>
-                  </div>
-               </div>
-            </div>
-            <div className="bg-zinc-950 border border-zinc-900 rounded-[4rem] p-12 shadow-2xl relative overflow-hidden group">
-               <div className="absolute top-0 right-0 p-10 opacity-5">
-                  <Code size={120} className="text-emerald-500" />
-               </div>
-               <div className="flex items-center gap-6 mb-12">
-                  <div className="w-4 h-4 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_12px_#10b981]"></div>
-                  <span className="text-[11px] font-black uppercase text-zinc-500 tracking-[0.5em]">Terminal Instance Active</span>
-               </div>
-               <div className="bg-black/80 rounded-[2.5rem] border border-zinc-900 p-10 font-mono text-sm space-y-6">
-                  <p className="text-zinc-600 italic">// Initialize Lumina Regular Mesh</p>
-                  <p className="text-emerald-500">npm install @aibanking/core</p>
-                  <div className="text-zinc-400 space-y-2">
-                     <p><span className="text-blue-500">import</span> &#123; <span className="text-amber-500">LuminaNode</span> &#125; <span className="text-blue-500">from</span> <span className="text-emerald-400">'@aibanking/core'</span>;</p>
-                     <p><span className="text-zinc-500 italic">// Establish regular node handshake</span></p>
-                     <p><span className="text-blue-500">const</span> node = <span className="text-blue-500">await</span> <span className="text-amber-500">LuminaNode</span>.<span className="text-white">initialize</span>(&#123;</p>
-                     <p className="pl-6">tier: <span className="text-emerald-400">'regular'</span>,</p>
-                     <p className="pl-6">region: <span className="text-emerald-400">'US-EAST'</span></p>
-                     <p>&#125;);</p>
-                  </div>
-                  <button className="flex items-center gap-3 text-zinc-500 hover:text-white transition-colors group/copy">
-                     <Smartphone size={16} />
-                     <span className="text-[10px] font-black uppercase tracking-widest">Copy Connection String</span>
-                  </button>
-               </div>
-            </div>
-         </div>
-      </section>
-      {/* MASSIVE CONTENT SLAM SECTIONS */}
-      <section className="relative z-10 py-60 px-10 border-t border-white/5">
-        <div className="max-w-7xl mx-auto space-y-40">
-           <div className="grid grid-cols-1 lg:grid-cols-2 gap-40 items-center">
-              <div className="relative aspect-square rounded-[6rem] overflow-hidden shadow-2xl border border-zinc-900 group">
-                 <img src="https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2832&auto=format&fit=crop" className="w-full h-full object-cover opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-[3s]" alt="Neural Fabric" />
-              </div>
-              <div className="space-y-10">
-                 <h2 className="text-8xl font-black italic text-white uppercase tracking-tighter leading-[0.9]">The Neural <br /> <span className="text-blue-500">Subspace</span></h2>
-                 <p className="text-zinc-500 text-2xl font-bold italic leading-relaxed">
-                    "Interconnecting 80+ financial protocols through a singular, high-entropy neural gateway. We don't just route; we synthesize consensus."
-                 </p>
-                 <div className="grid grid-cols-2 gap-8">
-                    <HeritageCard icon={GitPullRequest} title="Requests" val="1.4M / sec" />
-                    <HeritageCard icon={Box} title="Parity Blocks" val="Synced" />
-                 </div>
-              </div>
-           </div>
-        </div>
-      </section>
-      {/* JAM-PACKED FAT FOOTER */}
       <footer className="relative z-10 bg-black pt-80 pb-40 px-10 border-t border-zinc-900">
          <div className="max-w-[1600px] mx-auto">
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-20 mb-60">
@@ -292,29 +229,64 @@ const Landing: React.FC = () => {
                     <h2 className="text-4xl font-black italic tracking-tighter uppercase leading-none">AIBanking<span className="text-blue-500 not-italic">.dev</span></h2>
                   </div>
                   <p className="text-zinc-500 text-xl font-bold italic leading-relaxed max-w-md">
-                    "The undisputed leader in neural treasury automation and institutional mesh fabrics. Building the future of sovereign digital assets."
                   </p>
                   <div className="flex gap-8">
                      <SocialIcon icon={Globe} /><SocialIcon icon={Shield} /><SocialIcon icon={Zap} /><SocialIcon icon={MessageSquare} />
                   </div>
                </div>
-               <FooterColumn title="Protocols" links={['FDX v6.5 Registry', 'RSA-OAEP-4096', 'Subspace Handshake', 'M2M Consensus', 'SHA-256 Shredding', 'Neural Entanglement', 'Zero-Knowledge Vaults', 'Layer 2 Settlement', 'Cross-Node Parity', 'Entropy Rotation']} />
-               <FooterColumn title="Intelligence" links={['Lumina Oracle', 'Predictive Alpha', 'Drift Detection', 'Machine Sentiment', 'HFT Neural Pathing', 'Simulation Core', 'Risk Analysis v4', 'Treasury Logic', 'Sentiment Polling', 'Market Biasing']} />
-               <FooterColumn title="Network" links={['Global Node Map', 'US-EAST Cluster', 'EU-WEST Parity', 'APAC Dispersal', 'Latency Hubs', 'Bare Metal Clusters', 'Sub-millisecond Routing', 'Edge Distribution', 'Sub-Space Tunneling', 'Node Health Polling']} />
-               <FooterColumn title="Institutional" links={['Vault Registry', 'Disbursements', 'Collections', 'Registry Settlement', 'Partner CRM', 'KYC Handshake', 'Compliance Node', 'Audit Trail Genesis', 'Asset Custody', 'Corporate Ledger']} />
             </div>
             <div className="pt-20 border-t border-zinc-900 flex flex-col md:flex-row justify-between items-center gap-12">
-               <div className="flex flex-wrap justify-center md:justify-start gap-12">
-                  <FooterPolicyLink to="/manifesto" label="Honest Manifesto" />
-                  <FooterPolicyLink to="/documentation" label="System Manual" />
-                  <FooterPolicyLink to="/documentation" label="API Registry" />
-                  <FooterPolicyLink to="/airdrop" label="Genesis Airdrop" />
-                  <FooterPolicyLink to="/documentation" label="Cookie Protocol" />
-                  <FooterPolicyLink to="/documentation" label="SLA Standard" />
                </div>
-               <p className="text-[11px] font-black uppercase tracking-[1em] text-zinc-800">Verified 2025 • Citibank Demo Business Inc • aibanking.dev Protocol</p>
             </div>
          </div>
       </footer>
@@ -322,33 +294,34 @@ const Landing: React.FC = () => {
   );
 };
-const MegaLink = ({ icon: Icon, title, desc }: any) => (
-  <div className="group/mega flex gap-8 cursor-pointer hover:translate-x-2 transition-transform">
-     <div className="p-5 bg-zinc-900 rounded-[2rem] text-zinc-600 group-hover/mega:text-blue-500 transition-colors border border-zinc-800 shadow-xl group-hover/mega:border-blue-500/20">
-        <Icon size={32} />
-     </div>
-     <div>
-        <h4 className="text-base font-black text-white uppercase italic tracking-widest mb-1">{title}</h4>
-        <p className="text-xs text-zinc-500 font-bold leading-relaxed">{desc}</p>
-     </div>
-  </div>
-);
-const HeritageCard = ({ icon: Icon, title, val }: any) => (
-  <div className="p-10 bg-zinc-900/30 border border-zinc-800 rounded-[3rem] hover:border-blue-500/20 transition-all shadow-xl group">
-     <Icon size={36} className="text-blue-500 mb-8 group-hover:scale-110 transition-transform" />
-     <p className="text-[11px] font-black text-zinc-600 uppercase tracking-widest mb-2">{title}</p>
-     <p className="text-3xl font-black italic uppercase tracking-tighter text-white leading-none">{val}</p>
   </div>
 );
-const FooterColumn = ({ title, links }: any) => (
   <div className="space-y-12">
      <h4 className="text-[12px] font-black uppercase tracking-[0.6em] text-white italic">{title}</h4>
      <ul className="space-y-6">
-        {links.map((link: string, i: number) => (
           <li key={i}>
-            <a href="#" className="text-[10px] font-bold text-zinc-600 hover:text-blue-400 transition-colors uppercase tracking-widest">{link}</a>
           </li>
         ))}
      </ul>
@@ -356,16 +329,9 @@ const FooterColumn = ({ title, links }: any) => (
 );
 const SocialIcon = ({ icon: Icon }: any) => (
-  <div className="p-6 bg-zinc-900 border border-zinc-800 rounded-3xl text-zinc-500 hover:text-white hover:border-blue-500 transition-all cursor-pointer shadow-xl">
-    <Icon size={32} />
   </div>
 );
-const FooterPolicyLink = ({ to, label }: any) => {
-  const navigate = useNavigate();
-  return (
-    <button onClick={() => navigate(to)} className="text-[10px] font-black uppercase tracking-[0.4em] text-zinc-600 hover:text-white transition-colors">{label}</button>
-  );
-};
 export default Landing;

+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
 import {
+  Cpu, Sparkles, ArrowRight, Loader2, ChevronDown,
   ShieldCheck, Globe, Activity, Layers, Database, Lock, Eye, Building2, BarChart3, Radio, RefreshCw,
+  BrainCircuit, Network, Server, Fingerprint, Key, Wallet, FileText, Zap,
+  ChevronLeft, GitPullRequest, Box, Code, ChevronRight, Shield, MessageSquare, Plus, Info,
+  ArrowUpRight, FileCode, Terminal, ArrowRightLeft, Bitcoin
 } from 'lucide-react';
 import { apiClient } from '../services/api';
+// Landing Page Components
+import NexusNode from './landing/NexusNode';
+import IntelligenceAlpha from './landing/IntelligenceAlpha';
+import SystemFabric from './landing/SystemFabric';
+import RegistryVault from './landing/RegistryVault';
+import PrivacyManifesto from './landing/PrivacyManifesto';
+import AssetFoundry from './landing/AssetFoundry';
+import QuantumCompute from './landing/QuantumCompute';
+import LiquidityMesh from './landing/LiquidityMesh';
+import EncryptionProtocol from './landing/EncryptionProtocol';
+import OracleAuthority from './landing/OracleAuthority';
 const FEATURE_CARDS = [
   { id: 1, title: "Neural Parity", desc: "Real-time ledger consensus across 1,200 nodes with zero-drift synchronization.", icon: Fingerprint, color: "blue", img: "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2832&auto=format&fit=crop" },
   { id: 2, title: "Quantum Oracle", desc: "Predictive treasury drift detection using qubit-stabilized neural forecasting models.", icon: Cpu, color: "purple", img: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2872&auto=format&fit=crop" },
+  { id: 3, title: "Liquidity Mesh", desc: "High-velocity disbursement fabrics optimized for sub-millisecond M2M settlement.", icon: Network, color: "emerald", img: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=80&w=2570&auto=format&fit=crop" },
   { id: 4, title: "Sovereign ID", desc: "Encapsulated identity vault utilizing RSA-OAEP-4096 and rotating high-entropy seeds.", icon: Lock, color: "rose", img: "https://images.unsplash.com/photo-1558494949-ef010cbdcc51?q=80&w=2546&auto=format&fit=crop" },
+  { id: 5, title: "Foundry Sync", desc: "Global distribution node Map with proximity-optimized gateway handshakes.", icon: Globe, color: "cyan", img: "https://images.unsplash.com/photo-1484417894907-623942c8ee29?q=80&w=2832&auto=format&fit=crop" }
 ];
 const Landing: React.FC = () => {
   const navigate = useNavigate();
   const [isDemoLoading, setIsDemoLoading] = useState(false);
   const [scrollY, setScrollY] = useState(0);
   const [activeFeatureIndex, setActiveFeatureIndex] = useState(0);
   useEffect(() => {
       </div>
       {/* FORTUNE 1200 MEGA HEADER */}
+      <nav className={`fixed top-0 left-0 w-full z-[100] px-10 py-6 flex justify-between items-center transition-all duration-700 ${scrollY > 50 ? 'backdrop-blur-3xl bg-black/80 border-b border-white/5 py-4' : 'bg-transparent'}`}>
         <div className="flex items-center gap-12">
+          <Link to="/" className="flex items-center gap-6 group">
+            <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform duration-700 shadow-2xl border border-zinc-900">
+              <Cpu size={24} className="text-black" />
             </div>
             <div>
+              <h1 className="text-xl font-black italic tracking-tighter text-white uppercase leading-none">AIBanking<span className="text-blue-500 not-italic">.dev</span></h1>
+              <p className="text-[8px] uppercase tracking-[0.6em] font-black text-zinc-600 mt-1">Institutional Consensus</p>
             </div>
+          </Link>
+          <div className="hidden xl:flex items-center gap-8">
+            <MegaNavItem label="Commercial" items={[
+              { icon: Zap, title: "Treasury Nodes", desc: "Automated liquidity mesh.", to: "/protocol/treasury" },
+              /* Fix: Use ArrowRightLeft which is now imported */
+              { icon: ArrowRightLeft, title: "Disbursements", desc: "Real-time global routing.", to: "/payments" },
+              { icon: Database, title: "Collections", desc: "Consolidated node intake.", to: "/protocol/collections" }
+            ]} />
+            <MegaNavItem label="Institutional" items={[
+              { icon: Building2, title: "Prime Brokerage", desc: "HFT neural execution.", to: "/protocol/prime" },
+              { icon: ShieldCheck, title: "Custody Layer", desc: "RSA-OAEP vaulting.", to: "/protocol/custody" },
+              { icon: FileText, title: "Trust Services", desc: "Deterministic ledger audit.", to: "/protocol/trust" }
+            ]} />
+            <MegaNavItem label="Global Markets" items={[
+              /* Fix: Use Bitcoin which is now imported */
+              { icon: Bitcoin, title: "Asset Foundry", desc: "Relic synthesis node.", to: "/crypt" },
+              { icon: Globe, title: "Forex Mesh", desc: "Sub-ms currency parity.", to: "/protocol/forex" }
+            ]} />
+            <MegaNavItem label="Tech Stack" items={[
+              { icon: Code, title: "API Registry", desc: "FDX v6.5 native sync.", to: "/dcr" },
+              { icon: Server, title: "Node Map", desc: "Global cluster health.", to: "/connectivity" },
+              { icon: Terminal, title: "SDK Blueprint", desc: "M2M automation core.", to: "/documentation" }
+            ]} />
           </div>
         </div>
+        <div className="flex items-center gap-8">
+          <button onClick={() => navigate('/login')} className="hidden md:block text-[10px] font-black uppercase tracking-[0.4em] text-zinc-500 hover:text-white transition-colors">Client Terminal</button>
+          <button onClick={handleDemoAccess} className="px-8 py-4 bg-blue-600 text-white rounded-full font-black text-[10px] uppercase tracking-[0.4em] hover:bg-blue-500 transition-all flex items-center gap-4 shadow-[0_0_30px_rgba(37,99,235,0.3)] group active:scale-95">
+            {isDemoLoading ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} className="group-hover:scale-125 transition-transform" />}
+            Connect Node
           </button>
         </div>
       </nav>
+      {/* HERO SECTION */}
       <section className="relative z-10 min-h-screen flex flex-col justify-center items-center px-10 pt-40 pb-20 text-center overflow-hidden">
         <div className="absolute inset-0 z-0 opacity-30">
            <img src="https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=2832&auto=format&fit=crop" className="w-full h-full object-cover blur-[140px] scale-110" alt="Liquid Space" />
           <div className="inline-flex items-center gap-4 px-10 py-4 bg-blue-600/10 border border-blue-600/20 rounded-full animate-in zoom-in-95 duration-1000 relative overflow-hidden group">
             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent animate-[shimmer_2s_infinite]"></div>
             <Activity size={18} className="text-blue-500" />
+            <span className="text-[12px] font-black uppercase tracking-[0.8em] text-blue-500">Subspace_Mesh_Stabilized</span>
           </div>
+          <h1 className="text-[10rem] lg:text-[14rem] font-black italic tracking-tighter uppercase leading-[0.7] mb-12 drop-shadow-2xl">
+            Sovereign <br /><span className="text-blue-600 not-italic decoration-blue-900/40 underline-offset-[30px] underline decoration-[20px]">Assets</span>
           </h1>
           <p className="text-zinc-500 text-3xl lg:text-4xl font-bold italic max-w-6xl mx-auto mb-16 leading-relaxed">
+            "The definitive interface for <span className="text-white">high-velocity institutional liquidity</span>. Route neural signals through the mesh with absolute cryptographic parity."
           </p>
+          <div className="flex flex-wrap justify-center gap-10 pt-10">
             <button
               onClick={handleDemoAccess}
+              className="px-16 py-8 bg-white text-black rounded-[2.5rem] font-black text-sm uppercase tracking-[0.6em] flex items-center gap-8 hover:bg-blue-600 hover:text-white transition-all shadow-[0_40px_80px_rgba(255,255,255,0.1)] group active:scale-95"
             >
+              {isDemoLoading ? <Loader2 size={24} className="animate-spin" /> : <span>Initialize Registry</span>}
+              <ArrowRight size={24} className="group-hover:translate-x-4 transition-transform duration-700" />
             </button>
+            <button onClick={() => navigate('/documentation')} className="px-16 py-8 bg-zinc-950 border border-zinc-900 text-white rounded-[2.5rem] font-black text-sm uppercase tracking-[0.6em] flex items-center gap-8 hover:border-blue-600 transition-all shadow-2xl group active:scale-95">
+              <FileCode size={24} className="text-blue-500" />
+              Manual_v6.5
             </button>
           </div>
         </div>
         <div className="mt-40 animate-bounce opacity-20"><ChevronDown size={64} /></div>
       </section>
+      {/* FEATURE SHUFFLE */}
       <section className="relative z-10 py-60 px-10 bg-zinc-950/20">
          <div className="max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-32 items-center">
             <div className="space-y-16">
                <div className="space-y-6">
+                  <h3 className="text-blue-500 font-black text-xs uppercase tracking-[0.8em]">Endless Feature Stack</h3>
+                  <h2 className="text-8xl lg:text-[10rem] font-black italic text-white tracking-tighter uppercase leading-[0.85]">Infinite <br /> <span className="text-blue-600 not-italic">Optimization</span></h2>
                </div>
                <p className="text-zinc-500 text-2xl font-bold leading-relaxed italic max-w-2xl">
                  "Our architectural layers are infinite. Swipe through the core protocols that define the future of sovereign digital wealth management."
                  const isActive = activeFeatureIndex === i;
                  const isPrev = (activeFeatureIndex - 1 + FEATURE_CARDS.length) % FEATURE_CARDS.length === i;
                  const isNext = (activeFeatureIndex + 1) % FEATURE_CARDS.length === i;
+                 let offset = isActive ? 0 : isNext ? 80 : isPrev ? -80 : 160;                 let opacity = isActive ? 1 : isNext || isPrev ? 0.4 : 0;
+                 let scale = isActive ? 1 : 0.8;
+                 let zIndex = isActive ? 50 : 30;
                  return (
                    <div
                      key={card.id}
                      className="absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)]"
+                     style={{ transform: `translateX(${offset}px) scale(${scale})`, opacity, zIndex }}
                    >
                      <div className="w-full h-full bg-zinc-950 border border-zinc-900 rounded-[5rem] overflow-hidden shadow-[0_100px_200px_rgba(0,0,0,0.8)] relative group">
+                        <img src={card.img} className="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-60 transition-opacity duration-[3s]" alt={card.title} />
                         <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
                         <div className="absolute bottom-16 left-16 right-16 space-y-8">
+                           <div className={`p-8 bg-white/10 text-white rounded-[2rem] flex items-center justify-center border border-white/20 shadow-2xl backdrop-blur-xl inline-block w-20 h-20`}>
                               <card.icon size={40} />
                            </div>
                            <div className="space-y-4">
                               <h4 className="text-6xl font-black italic uppercase tracking-tighter text-white leading-none">{card.title}</h4>
                               <p className="text-zinc-400 text-xl font-bold leading-relaxed italic pr-10">"{card.desc}"</p>
                            </div>
                         </div>
                      </div>
                    </div>
          </div>
       </section>
+      {/* FULL SUB-SECTIONS INTEGRATED */}
+      <NexusNode />
+      <IntelligenceAlpha />
+      <SystemFabric />
+      <RegistryVault />
+      <PrivacyManifesto />
+      <AssetFoundry />
+      <QuantumCompute />
+      <LiquidityMesh />
+      <EncryptionProtocol />
+      <OracleAuthority />
+      {/* FAT INSTITUTIONAL FOOTER (THE 50+ LINKS) */}
       <footer className="relative z-10 bg-black pt-80 pb-40 px-10 border-t border-zinc-900">
          <div className="max-w-[1600px] mx-auto">
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-20 mb-60">
                     <h2 className="text-4xl font-black italic tracking-tighter uppercase leading-none">AIBanking<span className="text-blue-500 not-italic">.dev</span></h2>
                   </div>
                   <p className="text-zinc-500 text-xl font-bold italic leading-relaxed max-w-md">
+                    "The undisputed leader in neural treasury automation and institutional mesh fabrics. Verified 2025."
                   </p>
                   <div className="flex gap-8">
                      <SocialIcon icon={Globe} /><SocialIcon icon={Shield} /><SocialIcon icon={Zap} /><SocialIcon icon={MessageSquare} />
                   </div>
                </div>
+               <FooterColumn title="Protocols" links={[
+                 { l: 'FDX v6.5 Registry', to: '/protocol/fdx-registry' },
+                 { l: 'RSA-OAEP-4096', to: '/protocol/rsa-oaep' },
+                 { l: 'Subspace Handshake', to: '/protocol/subspace' },
+                 { l: 'M2M Consensus', to: '/protocol/m2m' },
+                 { l: 'Zero-Knowledge Vaults', to: '/protocol/zk-vaults' },
+                 { l: 'Layer 2 Settlement', to: '/protocol/l2-settlement' },
+                 { l: 'Cross-Node Parity', to: '/protocol/node-parity' },
+                 { l: 'Entropy Rotation', to: '/protocol/entropy' }
+               ]} />
+               <FooterColumn title="Intelligence" links={[
+                 { l: 'Lumina Oracle', to: '/intelligence/oracle' },
+                 { l: 'Predictive Alpha', to: '/intelligence/alpha' },
+                 { l: 'Drift Detection', to: '/intelligence/drift' },
+                 { l: 'Machine Sentiment', to: '/intelligence/sentiment' },
+                 { l: 'HFT Neural Pathing', to: '/intelligence/hft' },
+                 { l: 'Simulation Core', to: '/oracle' },
+                 { l: 'Risk Analysis v4', to: '/intelligence/risk' },
+                 { l: 'Treasury Logic', to: '/intelligence/treasury-logic' }
+               ]} />
+               <FooterColumn title="Network" links={[
+                 { l: 'Global Node Map', to: '/connectivity' },
+                 { l: 'US-EAST Cluster', to: '/network/us-east' },
+                 { l: 'EU-WEST Parity', to: '/network/eu-west' },
+                 { l: 'APAC Dispersal', to: '/network/apac' },
+                 { l: 'Latency Hubs', to: '/network/latency' },
+                 { l: 'Bare Metal Clusters', to: '/network/bare-metal' },
+                 { l: 'Edge Distribution', to: '/network/edge' },
+                 { l: 'Node Health Polling', to: '/network/health' }
+               ]} />
+               <FooterColumn title="Institutional" links={[
+                 { l: 'Vault Registry', to: '/vault' },
+                 { l: 'Disbursements', to: '/payments' },
+                 { l: 'Collections', to: '/institutional/collections' },
+                 { l: 'Registry Settlement', to: '/institutional/settlement' },
+                 { l: 'Partner CRM', to: '/partners' },
+                 { l: 'KYC Handshake', to: '/institutional/kyc' },
+                 { l: 'Compliance Node', to: '/institutional/compliance' },
+                 { l: 'Asset Custody', to: '/institutional/custody' }
+               ]} />
             </div>
             <div className="pt-20 border-t border-zinc-900 flex flex-col md:flex-row justify-between items-center gap-12">
+               <div className="flex flex-wrap justify-center md:justify-start gap-12 text-[10px] font-black uppercase tracking-[0.4em] text-zinc-600">
+                  <button onClick={() => navigate('/manifesto')} className="hover:text-white transition-colors">Manifesto</button>
+                  <button onClick={() => navigate('/documentation')} className="hover:text-white transition-colors">System Manual</button>
+                  <button onClick={() => navigate('/documentation')} className="hover:text-white transition-colors">API Registry</button>
+                  <button onClick={() => navigate('/airdrop')} className="hover:text-white transition-colors">Genesis Airdrop</button>
+                  <button onClick={() => navigate('/documentation')} className="hover:text-white transition-colors">SLA Standard</button>
                </div>
+               <p className="text-[10px] font-black uppercase tracking-[1em] text-zinc-800">Citibank Demo Business Inc • aibanking.dev Protocol</p>
             </div>
          </div>
       </footer>
   );
 };
+const MegaNavItem = ({ label, items }: { label: string, items: any[] }) => (
+  <div className="group relative py-4">
+    <button className="text-[10px] font-black uppercase tracking-[0.4em] text-zinc-400 group-hover:text-white transition-colors flex items-center gap-2">
+      {label} <ChevronDown size={10} />
+    </button>
+    <div className="absolute top-full left-0 w-[480px] bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-10 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-y-2 transition-all shadow-2xl space-y-6 z-[110]">
+      {items.map((item, i) => (
+        <Link key={i} to={item.to} className="flex gap-6 items-start hover:translate-x-2 transition-transform group/link">
+          <div className="p-3 bg-zinc-900 rounded-xl text-zinc-600 group-hover/link:text-blue-500 group-hover/link:bg-blue-500/10 transition-all">
+            <item.icon size={20} />
+          </div>
+          <div>
+            <h4 className="text-sm font-black text-white uppercase italic tracking-widest">{item.title}</h4>
+            <p className="text-[9px] text-zinc-500 font-bold leading-relaxed">{item.desc}</p>
+          </div>
+        </Link>
+      ))}
+    </div>
   </div>
 );
+const FooterColumn = ({ title, links }: { title: string, links: {l: string, to: string}[] }) => (
   <div className="space-y-12">
      <h4 className="text-[12px] font-black uppercase tracking-[0.6em] text-white italic">{title}</h4>
      <ul className="space-y-6">
+        {links.map((link, i) => (
           <li key={i}>
+            <Link to={link.to} className="text-[10px] font-bold text-zinc-600 hover:text-blue-400 transition-colors uppercase tracking-widest">{link.l}</Link>
           </li>
         ))}
      </ul>
 );
 const SocialIcon = ({ icon: Icon }: any) => (
+  <div className="p-4 bg-zinc-900 border border-zinc-800 rounded-2xl text-zinc-500 hover:text-white hover:border-blue-500 transition-all cursor-pointer shadow-xl">
+    <Icon size={24} />
   </div>
 );
 export default Landing;

views/PrivacyPolicy.tsx CHANGED Viewed

@@ -1,79 +1,135 @@
 import React from 'react';
-import { ShieldAlert, Lock, EyeOff, Scale, Gavel, Globe, FileText, ChevronRight, ArrowLeft } from 'lucide-react';
-/* Fix: react-router-dom exports may be flaky in this environment, using standard v6 imports */
 import { useNavigate } from 'react-router-dom';
-const PrivacyPolicy: React.FC = () => {
   const navigate = useNavigate();
   return (
-    <div className="max-w-5xl mx-auto py-32 px-10 animate-in fade-in duration-500">
-      <div className="flex flex-col items-center text-center mb-24">
-        <div className="w-32 h-32 bg-yellow-500 border-8 border-black rounded-[3rem] flex items-center justify-center mb-10 shadow-[20px_20px_0px_black] rotate-3">
-          <Gavel size={64} className="text-black" />
-        </div>
-        <h1 className="text-8xl font-black italic text-black uppercase tracking-tighter leading-none mb-6">
-          Honest <span className="text-yellow-500 underline decoration-black decoration-8">Manifesto</span>
-        </h1>
-        <p className="text-[14px] font-black text-zinc-500 uppercase tracking-[0.8em]">Transparency First • 527 Org Protocol</p>
       </div>
-      <div className="bg-white border-8 border-black rounded-[4rem] p-16 lg:p-24 space-y-32 shadow-[40px_40px_0px_rgba(255,215,0,0.2)] relative overflow-hidden">
-        <section className="space-y-10">
-          <div className="flex items-center gap-6">
-            <div className="w-14 h-14 bg-black rounded-2xl flex items-center justify-center text-yellow-500 shadow-xl">
-              <Lock size={28} />
-            </div>
-            <h2 className="text-4xl font-black italic text-black uppercase tracking-tight">Our Honest Position</h2>
           </div>
-          <p className="text-black text-2xl leading-relaxed font-bold italic">
-            Citibank Demo Business Inc is a 527 political organization. We do not offer banking services. We provide mathematical proof of AI expertise to educate the public and policy makers. Our "privacy policy" isn't a legal shield; it's a statement of fact: We do not want your data. We built this mesh to process information in real-time and then discard it.
-          </p>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div className="p-10 bg-zinc-50 border-4 border-black rounded-[3rem] space-y-4">
-              <h4 className="text-[12px] font-black text-zinc-400 uppercase tracking-widest">Data Disposal</h4>
-              <p className="text-black font-black text-lg uppercase tracking-tight">Every packet is shredded immediately after ledger verification. Zero persistence is our technical reality.</p>
-            </div>
-            <div className="p-10 bg-yellow-500 border-4 border-black rounded-[3rem] space-y-4">
-              <h4 className="text-[12px] font-black text-black uppercase tracking-widest">No Tracking</h4>
-              <p className="text-black font-black text-lg uppercase tracking-tight">We do not use cookies, pixels, or behavioral trackers. We are here to prove intelligence, not sell attention.</p>
-            </div>
-          </div>
-        </section>
-        <section className="space-y-10">
-          <div className="flex items-center gap-6">
-            <div className="w-14 h-14 bg-black rounded-2xl flex items-center justify-center text-yellow-500 shadow-xl">
-              <Scale size={28} />
-            </div>
-            <h2 className="text-4xl font-black italic text-black uppercase tracking-tight">Expert Terms</h2>
           </div>
-          <p className="text-black text-xl leading-relaxed font-bold italic">
-            By interacting with this registry, you acknowledge that you are viewing educational artifacts. These simulations are designed to demonstrate the convergence of AI and treasury protocols. This platform is provided "as is" to prove that we are the undisputed experts in the liminal world of neural finance.
-          </p>
-          <ul className="space-y-4">
-            {["Identity remains sovereign", "Logic is distributed", "Consensus is hard-coded", "Expertise is verified"].map((term, i) => (
-              <li key={i} className="flex items-center gap-4 text-black font-black text-sm uppercase tracking-[0.4em] bg-zinc-100 p-6 rounded-2xl border-4 border-black">
-                <div className="w-4 h-4 bg-yellow-500 rounded-full border-2 border-black" />
-                {term}
-              </li>
-            ))}
-          </ul>
-        </section>
-        <footer className="pt-24 border-t-8 border-black text-center space-y-12">
-          <p className="text-[12px] font-black text-zinc-400 uppercase tracking-[1em]">Citibank Demo Business Inc • 527 Org • Verified 2025</p>
-          <button
-            onClick={() => navigate(-1)}
-            className="px-20 py-8 bg-black text-white rounded-full font-black text-lg uppercase tracking-[0.5em] hover:bg-yellow-500 hover:text-black transition-all shadow-[0_20px_50px_rgba(0,0,0,0.3)] flex items-center gap-6 mx-auto"
-          >
-            <ArrowLeft size={24} /> Acknowledge Truth
-          </button>
-        </footer>
       </div>
     </div>
   );
 };
-export default PrivacyPolicy;

 import React from 'react';
+import { ShieldAlert, Lock, EyeOff, Scale, Gavel, Globe, FileText, ChevronRight, ArrowLeft, Terminal, ShieldCheck, Activity, Database, Lock as LockIcon, Fingerprint } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
+const SecurityManifesto: React.FC = () => {
   const navigate = useNavigate();
   return (
+    <div className="min-h-screen bg-black text-white selection:bg-rose-600/30 selection:text-white pb-40">
+      {/* Background Ambience */}
+      <div className="fixed inset-0 z-0 pointer-events-none">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,_#1e1b4b_0%,_transparent_60%)] opacity-40"></div>
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808005_1px,transparent_1px),linear-gradient(to_bottom,#80808005_1px,transparent_1px)] bg-[size:100px_100px]"></div>
       </div>
+      <div className="max-w-7xl mx-auto py-40 px-10 relative z-10">
+        <div className="flex flex-col items-center text-center mb-40">
+          <div className="w-24 h-24 bg-rose-600/10 border border-rose-500/20 rounded-[2.5rem] flex items-center justify-center mb-10 shadow-2xl group hover:rotate-12 transition-transform duration-700">
+            <ShieldAlert size={48} className="text-rose-500 animate-pulse" />
           </div>
+          <h1 className="text-[8rem] font-black italic text-white uppercase tracking-tighter leading-none mb-10">
+            Security <br /> <span className="text-rose-600 underline decoration-rose-900/50 decoration-8 underline-offset-[20px]">Manifesto</span>
+          </h1>
+          <p className="text-[14px] font-black text-zinc-600 uppercase tracking-[1em]">Zero-Persistence Protocol v1.2 • FDX Compliant</p>
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-20 items-start">
+          {/* Left: Terminal Log */}
+          <div className="lg:col-span-4 space-y-10 sticky top-40">
+             <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 shadow-2xl relative overflow-hidden group">
+                <div className="flex items-center justify-between mb-10">
+                   <div className="flex items-center gap-4">
+                      <Terminal size={18} className="text-rose-500" />
+                      <span className="text-[11px] font-black uppercase text-zinc-500 tracking-[0.3em]">Compliance Trace</span>
+                   </div>
+                   <div className="flex gap-2">
+                      <div className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></div>
+                   </div>
+                </div>
+                <div className="space-y-4 font-mono text-[10px] text-zinc-700">
+                   <p>[09:12:01] Initializing Shredder_Core...</p>
+                   <p>[09:12:02] RSA-OAEP Key Rotation: OK</p>
+                   <p>[09:12:05] Memory Flush executed: 0x8821...FF01</p>
+                   <p className="text-rose-500/60 font-bold">[CRITICAL] Zero-Persistence SEALED.</p>
+                   <p>[09:12:10] Syncing Identity nodes...</p>
+                   <p>[09:12:15] Packet shredding active.</p>
+                </div>
+             </div>
+             <div className="p-10 bg-zinc-900/40 border border-zinc-800 rounded-[3rem] backdrop-blur-xl">
+                <h4 className="text-white font-black text-xs uppercase tracking-widest mb-4 italic">Protocol Status</h4>
+                <div className="space-y-4">
+                   {[
+                     { l: 'Data Encryption', v: 'AES-256-GCM', c: 'text-rose-500' },
+                     { l: 'Auth Method', v: 'RSA-4096', c: 'text-white' },
+                     { l: 'Persistence', v: '0.0%', c: 'text-rose-500' },
+                     { l: 'Audit State', v: 'VERIFIED', c: 'text-emerald-500' },
+                   ].map((item, i) => (
+                     <div key={i} className="flex justify-between items-center border-b border-zinc-800 pb-4 last:border-0">
+                        <span className="text-[9px] font-black text-zinc-600 uppercase tracking-widest">{item.l}</span>
+                        <span className={`text-[10px] font-black mono ${item.c}`}>{item.v}</span>
+                     </div>
+                   ))}
+                </div>
+             </div>
           </div>
+          {/* Right: Narrative Content */}
+          <div className="lg:col-span-8 space-y-32">
+             <section className="space-y-10">
+                <div className="flex items-center gap-6">
+                   <div className="w-16 h-16 bg-white text-black rounded-3xl flex items-center justify-center shadow-2xl group-hover:scale-110 transition-transform duration-700">
+                      <LockIcon size={32} />
+                   </div>
+                   <h2 className="text-5xl font-black italic text-white uppercase tracking-tighter">Zero Persistence</h2>
+                </div>
+                <p className="text-zinc-400 text-3xl leading-relaxed font-bold italic">
+                   "Lumina is designed as a <span className="text-white">liminal processor</span>. We do not store your institutional metadata. Every packet that enters the mesh is shredded immediately after ledger parity is achieved. Persistence is a vulnerability we mathematically eliminate."
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-10">
+                   <div className="p-12 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-rose-500/40 transition-all shadow-2xl relative overflow-hidden">
+                      <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity"><Database size={100} /></div>
+                      <h5 className="text-[11px] font-black text-rose-500 uppercase tracking-widest mb-6">Ephemeral Vaults</h5>
+                      <p className="text-zinc-500 font-medium italic leading-relaxed text-sm">Session-level vaults are initialized for transient handshakes and purged with 7-pass random overwrite logic on termination.</p>
+                   </div>
+                   <div className="p-12 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-rose-500/40 transition-all shadow-2xl relative overflow-hidden">
+                      <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity"><Activity size={100} /></div>
+                      <h5 className="text-[11px] font-black text-rose-500 uppercase tracking-widest mb-6">Packet Shredding</h5>
+                      <p className="text-zinc-500 font-medium italic leading-relaxed text-sm">Encrypted payloads are shredded post-verification to ensure zero historical trace within the global registry nodes.</p>
+                   </div>
+                </div>
+             </section>
+             <section className="space-y-10">
+                <div className="flex items-center gap-6">
+                   <div className="w-16 h-16 bg-rose-600 text-white rounded-3xl flex items-center justify-center shadow-2xl shadow-rose-900/40">
+                      <ShieldCheck size={32} />
+                   </div>
+                   <h2 className="text-5xl font-black italic text-white uppercase tracking-tighter">Institutional Terms</h2>
+                </div>
+                <p className="text-zinc-500 text-xl font-bold italic leading-relaxed">
+                   By interacting with this registry, you acknowledge that you are entering an <span className="text-white">educational simulation</span> built for mathematical proof of AI expertise. This platform facilitates transient node interactions via FDX v6 protocols. Citibank Demo Business Inc is a 527 political organization and does not provide regulated banking services.
+                </p>
+                <ul className="space-y-4">
+                   {[
+                     "Identity remains encapsulated within the mesh",
+                     "Logical consensus is hard-coded into the fabric",
+                     "Metadata is mathematically destroyed post-parity",
+                     "Handshakes are secured via RSA-OAEP-4096"
+                   ].map((item, i) => (
+                     <li key={i} className="flex items-center gap-6 p-8 bg-zinc-950 border border-zinc-900 rounded-[2.5rem] group hover:border-rose-500/20 transition-all cursor-default">
+                        <div className="w-4 h-4 bg-rose-500 rounded-full shadow-[0_0_12px_#f43f5e]" />
+                        <span className="text-[12px] font-black text-white uppercase tracking-[0.4em] italic">{item}</span>
+                     </li>
+                   ))}
+                </ul>
+             </section>
+             <footer className="pt-40 border-t border-zinc-900 flex flex-col items-center gap-12">
+                <div className="flex gap-20 grayscale opacity-20">
+                   {/* Fix: Use Fingerprint which is now imported */}
+                   <Globe size={48} /><Database size={48} /><Fingerprint size={48} />
+                </div>
+                <p className="text-[12px] font-black text-zinc-800 uppercase tracking-[1em]">Verified 2025 • Citibank Demo Business Inc • aibanking.dev</p>
+                <button onClick={() => navigate(-1)} className="px-16 py-8 bg-white text-black rounded-full font-black text-sm uppercase tracking-[0.6em] hover:scale-105 transition-all shadow-[0_20px_50px_rgba(255,255,255,0.1)] flex items-center gap-6">
+                   <ArrowLeft size={24} /> Acknowledge Protocol
+                </button>
+             </footer>
+          </div>
+        </div>
       </div>
     </div>
   );
 };
+export default SecurityManifesto;

views/TechnicalDeepDive.tsx ADDED Viewed

	@@ -0,0 +1,167 @@

+import React, { useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+  ArrowLeft, Terminal, ShieldCheck, Cpu, Globe, Database,
+  Code, Activity, Lock, Layers, Zap, Network, Radio, Server,
+  ChevronRight, ArrowUpRight, Copy, Share2
+} from 'lucide-react';
+const TechnicalDeepDive: React.FC = () => {
+  const { slug } = useParams<{ slug: string }>();
+  const navigate = useNavigate();
+  const content = useMemo(() => {
+    const title = slug?.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ') || 'Protocol Node';
+    return {
+      title,
+      identifier: `LQI-${slug?.toUpperCase()}-NODE`,
+      version: 'v6.5.0-STABLE',
+      parity: '100%',
+      latency: '0.0004ms',
+      code: `// Lumina Quantum Registry Implementation
+// Protocol: ${title}
+// Security: RSA-OAEP-4096-PSS
+import { LuminaMesh } from '@aibanking/core';
+const node = await LuminaMesh.initialize({
+  tier: 'ENTERPRISE_NODE',
+  encryption: 'AES-256-GCM',
+  shredding: 'IMMEDIATE_POST_PARITY',
+  consensus: 'HARD_STATE'
+});
+await node.handshake({
+  endpoint: 'https://nexus.aibanking.dev/v1',
+  credentials: process.env.LQI_MASTER_SECRET
+});`
+    };
+  }, [slug]);
+  return (
+    <div className="min-h-screen bg-black text-white pb-40 selection:bg-blue-600/30">
+      <div className="fixed inset-0 z-0 opacity-10">
+        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_0%,_#1e1b4b_0%,_transparent_70%)]"></div>
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808005_1px,transparent_1px),linear-gradient(to_bottom,#80808005_1px,transparent_1px)] bg-[size:80px_80px]"></div>
+      </div>
+      <div className="max-w-7xl mx-auto py-32 px-10 relative z-10">
+        <button
+          onClick={() => navigate(-1)}
+          className="group flex items-center gap-4 text-zinc-600 hover:text-white transition-all mb-20"
+        >
+          <ArrowLeft size={20} className="group-hover:-translate-x-2 transition-transform" />
+          <span className="text-[11px] font-black uppercase tracking-[0.4em]">Return to Nexus Hub</span>
+        </button>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-20">
+          <div className="lg:col-span-8 space-y-24">
+            <div className="space-y-12">
+               <div className="flex items-center gap-4">
+                  <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse shadow-[0_0_10px_#3b82f6]"></div>
+                  <span className="text-[11px] font-black text-blue-500 uppercase tracking-[0.5em]">{content.identifier}</span>
+               </div>
+               <h1 className="text-[8rem] lg:text-[10rem] font-black italic text-white uppercase tracking-tighter leading-none">
+                 {content.title} <br /> <span className="text-blue-600 not-italic">Specification</span>
+               </h1>
+               <p className="text-zinc-500 text-3xl font-bold leading-relaxed italic max-w-4xl">
+                 "This document defines the <span className="text-white">Machine-to-Machine (M2M)</span> handshake parameters for the {content.title} protocol within the Lumina Quantum Mesh. Implementation requires valid enterprise parity."
+               </p>
+            </div>
+            <div className="space-y-10">
+               <h3 className="text-white font-black text-xl uppercase tracking-widest italic flex items-center gap-4">
+                 <Terminal size={24} className="text-blue-500" />
+                 Integration Blueprint
+               </h3>
+               <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl relative group">
+                  <div className="absolute top-4 right-8 flex gap-4 opacity-30 group-hover:opacity-100 transition-opacity">
+                     <button className="p-3 bg-zinc-900 rounded-xl hover:text-blue-500"><Copy size={16} /></button>
+                     <button className="p-3 bg-zinc-900 rounded-xl hover:text-blue-500"><Share2 size={16} /></button>
+                  </div>
+                  <div className="bg-zinc-900/50 px-8 py-4 border-b border-zinc-800 flex items-center gap-3">
+                     <div className="w-2.5 h-2.5 rounded-full bg-rose-500/20"></div>
+                     <div className="w-2.5 h-2.5 rounded-full bg-amber-500/20"></div>
+                     <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/20"></div>
+                     <span className="text-[10px] font-mono text-zinc-600 ml-4">protocol_impl.ts</span>
+                  </div>
+                  <div className="p-12 font-mono text-sm text-emerald-500/80 leading-relaxed overflow-x-auto custom-scrollbar">
+                     <pre>{content.code}</pre>
+                  </div>
+               </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+               <div className="p-12 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-blue-500/30 transition-all shadow-2xl">
+                  <h4 className="text-white font-black text-sm uppercase tracking-widest mb-6">Compliance Check</h4>
+                  <p className="text-zinc-500 text-lg leading-relaxed font-medium italic mb-10">"Verified against FDX v6.5 and SWIFT gpi standards for high-value transactional settlement."</p>
+                  <div className="flex items-center gap-3">
+                     <ShieldCheck size={20} className="text-emerald-500" />
+                     <span className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Verification Status: OK</span>
+                  </div>
+               </div>
+               <div className="p-12 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-blue-500/30 transition-all shadow-2xl">
+                  <h4 className="text-white font-black text-sm uppercase tracking-widest mb-6">Security Layer</h4>
+                  <p className="text-zinc-500 text-lg leading-relaxed font-medium italic mb-10">"Session metadata is shredded using 7-pass random overwrite logic immediately post-consensus."</p>
+                  <div className="flex items-center gap-3">
+                     <Lock size={20} className="text-blue-500" />
+                     <span className="text-[10px] font-black text-blue-500 uppercase tracking-widest">Encapsulation: RSA-OAEP</span>
+                  </div>
+               </div>
+            </div>
+          </div>
+          <div className="lg:col-span-4 space-y-10">
+             <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 shadow-2xl sticky top-10">
+                <div className="flex items-center gap-4 mb-10 pb-10 border-b border-zinc-900">
+                   <div className="p-4 bg-blue-600/10 text-blue-500 rounded-2xl">
+                      <Activity size={24} className="animate-pulse" />
+                   </div>
+                   <div>
+                      <h4 className="text-white font-black uppercase tracking-widest italic leading-none">Node Telemetry</h4>
+                      <p className="text-[9px] text-zinc-600 font-black uppercase mt-1">Real-time Parity Polling</p>
+                   </div>
+                </div>
+                <div className="space-y-8">
+                   {[
+                     { label: 'Network Parity', val: content.parity, icon: Globe },
+                     { label: 'Sync Latency', val: content.latency, icon: Radio },
+                     { label: 'Cluster Load', val: '14.2%', icon: Server },
+                     { label: 'Fabric Grade', val: 'ELITE', icon: Layers },
+                   ].map((stat, i) => (
+                     <div key={i} className="flex justify-between items-center group/stat">
+                        <div className="flex items-center gap-4">
+                           <stat.icon size={16} className="text-zinc-700 group-hover/stat:text-blue-500 transition-colors" />
+                           <span className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">{stat.label}</span>
+                        </div>
+                        <span className="text-sm font-black text-white mono">{stat.val}</span>
+                     </div>
+                   ))}
+                </div>
+                <div className="mt-12 space-y-6">
+                   <button className="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[1.8rem] font-black text-[10px] uppercase tracking-[0.4em] transition-all shadow-xl shadow-blue-900/30 flex items-center justify-center gap-4">
+                      Initialize Node <ArrowUpRight size={16} />
+                   </button>
+                   <button className="w-full py-5 bg-zinc-900 hover:bg-zinc-800 text-zinc-500 hover:text-white rounded-[1.8rem] font-black text-[10px] uppercase tracking-[0.4em] transition-all border border-zinc-800 flex items-center justify-center gap-4">
+                      Download SDK <Code size={16} />
+                   </button>
+                </div>
+                <div className="mt-10 pt-10 border-t border-zinc-900">
+                   <div className="p-6 bg-black rounded-2xl border border-zinc-900 text-center">
+                      <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest leading-relaxed">
+                        Authorized Identity: alex@aibanking.dev <br /> Access Level: Root_Admin
+                      </p>
+                   </div>
+                </div>
+             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default TechnicalDeepDive;

views/routes.ts CHANGED Viewed

@@ -1,31 +1,9 @@
 import React from 'react';
 import {
-  LayoutDashboard,
-  Building2,
-  Users,
-  Database,
-  ShieldCheck,
-  Cpu,
-  Key,
-  ArrowLeftRight,
-  CreditCard,
-  FileText,
-  Leaf,
-  MessageSquare,
-  Settings as SettingsIcon,
-  ListTree,
-  Network,
-  Zap,
-  ShieldAlert,
-  Bitcoin,
-  Hammer,
-  FileLock2,
-  BookOpen,
-  Map,
-  Activity,
-  Infinity,
-  Gift,
-  Radio
 } from 'lucide-react';
 import Overview from './Overview';
@@ -41,7 +19,6 @@ import AnalyticsReport from './AnalyticsReport';
 import Sustainability from './Sustainability';
 import Advisor from './Advisor';
 import Settings from './Settings';
-import LineItems from './LineItems';
 import VirtualAccounts from './VirtualAccounts';
 import Flows from './Flows';
 import Validations from './Validations';
@@ -51,6 +28,7 @@ import PrivacyPolicy from './PrivacyPolicy';
 import Documentation from './Documentation';
 import Airdrop from './Airdrop';
 import Broadcast from './Broadcast';
 export interface RouteConfig {
   path: string;
@@ -58,10 +36,11 @@ export interface RouteConfig {
   label: string;
   icon: any;
   showInSidebar: boolean;
-  category: 'core' | 'registry' | 'system' | 'intelligence' | 'finance' | 'admin';
 }
 export const routes: RouteConfig[] = [
   { path: '/overview', component: Overview, label: 'Overview', icon: LayoutDashboard, showInSidebar: true, category: 'core' },
   { path: '/broadcast', component: Broadcast, label: 'Global Node', icon: Radio, showInSidebar: true, category: 'core' },
   { path: '/registry', component: InternalAccounts, label: 'Bank Registry', icon: Building2, showInSidebar: true, category: 'registry' },
@@ -84,4 +63,11 @@ export const routes: RouteConfig[] = [
   { path: '/manifesto', component: PrivacyPolicy, label: 'Privacy Manifesto', icon: FileLock2, showInSidebar: true, category: 'admin' },
   { path: '/documentation', component: Documentation, label: 'Documentation Core', icon: BookOpen, showInSidebar: true, category: 'admin' },
   { path: '/settings', component: Settings, label: 'System Config', icon: SettingsIcon, showInSidebar: false, category: 'admin' },
 ];

 import React from 'react';
 import {
+  LayoutDashboard, Building2, Users, Database, ShieldCheck, Cpu, Key,
+  ArrowLeftRight, CreditCard, FileText, Leaf, MessageSquare,
+  Settings as SettingsIcon, Network, Zap, ShieldAlert, Bitcoin,
+  Hammer, FileLock2, BookOpen, Radio, Gift, Code, BrainCircuit
 } from 'lucide-react';
 import Overview from './Overview';
 import Sustainability from './Sustainability';
 import Advisor from './Advisor';
 import Settings from './Settings';
 import VirtualAccounts from './VirtualAccounts';
 import Flows from './Flows';
 import Validations from './Validations';
 import Documentation from './Documentation';
 import Airdrop from './Airdrop';
 import Broadcast from './Broadcast';
+import TechnicalDeepDive from './TechnicalDeepDive';
 export interface RouteConfig {
   path: string;
   label: string;
   icon: any;
   showInSidebar: boolean;
+  category: 'core' | 'registry' | 'system' | 'intelligence' | 'finance' | 'admin' | 'technical';
 }
 export const routes: RouteConfig[] = [
+  // Core App
   { path: '/overview', component: Overview, label: 'Overview', icon: LayoutDashboard, showInSidebar: true, category: 'core' },
   { path: '/broadcast', component: Broadcast, label: 'Global Node', icon: Radio, showInSidebar: true, category: 'core' },
   { path: '/registry', component: InternalAccounts, label: 'Bank Registry', icon: Building2, showInSidebar: true, category: 'registry' },
   { path: '/manifesto', component: PrivacyPolicy, label: 'Privacy Manifesto', icon: FileLock2, showInSidebar: true, category: 'admin' },
   { path: '/documentation', component: Documentation, label: 'Documentation Core', icon: BookOpen, showInSidebar: true, category: 'admin' },
   { path: '/settings', component: Settings, label: 'System Config', icon: SettingsIcon, showInSidebar: false, category: 'admin' },
+  // Dynamic Technical Deep Dives (The "50 Views")
+  /* Add missing Code and BrainCircuit icons to routes */
+  { path: '/protocol/:slug', component: TechnicalDeepDive, label: 'Protocol Detail', icon: Code, showInSidebar: false, category: 'technical' },
+  { path: '/institutional/:slug', component: TechnicalDeepDive, label: 'Institutional Spec', icon: Building2, showInSidebar: false, category: 'technical' },
+  { path: '/intelligence/:slug', component: TechnicalDeepDive, label: 'Intelligence Log', icon: BrainCircuit, showInSidebar: false, category: 'technical' },
+  { path: '/network/:slug', component: TechnicalDeepDive, label: 'Network Node', icon: Network, showInSidebar: false, category: 'technical' }
 ];