Upload 10 files

views/landing/AssetFoundry.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { Hammer, Zap, Box, Layers, ArrowUpRight, CheckCircle2, FlaskConical } from 'lucide-react';
+
+const AssetFoundry: React.FC = () => {
+  const [forging, setForging] = useState(false);
+
+  const startForge = () => {
+    setForging(true);
+    setTimeout(() => setForging(false), 3000);
+  };
+
+  return (
+    <section className="py-40 border-b border-zinc-900 bg-black">
+      <div className="max-w-7xl mx-auto px-10 grid grid-cols-1 lg:grid-cols-2 gap-32 items-center">
+        <div className="relative group order-2 lg:order-1">
+          <div className="absolute -inset-2 bg-gradient-to-br from-amber-500/30 to-blue-500/30 blur-3xl opacity-20 group-hover:opacity-100 transition-opacity duration-1000"></div>
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[5rem] p-16 aspect-[4/5] flex flex-col justify-between shadow-2xl relative z-10 overflow-hidden">
+             <div className="flex justify-between items-start">
+                <div className="space-y-2">
+                   <div className="inline-flex items-center gap-2 px-3 py-1 bg-amber-500/10 text-amber-500 border border-amber-500/20 rounded-full">
+                      <Zap size={10} className="animate-pulse" />
+                      <span className="text-[9px] font-black uppercase tracking-widest">Synthesis Node</span>
+                   </div>
+                   <h3 className="text-4xl font-black text-white italic tracking-tighter uppercase leading-none">Quantum Relic <br /> <span className="text-zinc-600">#8821</span></h3>
+                </div>
+                <div className="p-4 bg-zinc-900 border border-zinc-800 rounded-3xl text-amber-500">
+                   <FlaskConical size={32} />
+                </div>
+             </div>
+
+             <div className="flex-1 my-12 bg-black rounded-[3rem] border border-zinc-900 flex items-center justify-center overflow-hidden relative group/inner">
+                <div className={`transition-all duration-1000 ${forging ? 'scale-125 opacity-0 blur-2xl' : 'scale-100 opacity-100 blur-0'}`}>
+                   <Box size={220} className="text-blue-500 opacity-10 group-hover/inner:opacity-20 transition-opacity" />
+                </div>
+                <div className={`absolute inset-0 flex items-center justify-center transition-all duration-700 ${forging ? 'scale-150 opacity-100' : 'scale-0 opacity-0'}`}>
+                   <div className="w-64 h-64 bg-amber-500/20 rounded-full blur-[100px] animate-pulse"></div>
+                   <Zap size={120} className="text-amber-500 animate-bounce" />
+                </div>
+                {!forging && (
+                   <div className="absolute bottom-10 inset-x-0 flex justify-center animate-in fade-in slide-in-from-bottom-4">
+                      <button 
+                         onClick={startForge}
+                         className="px-10 py-5 bg-white text-black rounded-2xl font-black text-[10px] uppercase tracking-[0.4em] hover:scale-105 transition-all shadow-2xl"
+                      >
+                         Execute Synthesis
+                      </button>
+                   </div>
+                )}
+             </div>
+
+             <div className="grid grid-cols-3 gap-6">
+                {[
+                  { l: 'Forge State', v: forging ? 'ACTIVE' : 'READY', c: forging ? 'text-amber-500' : 'text-emerald-500' },
+                  { l: 'Asset Grade', v: 'ELITE', c: 'text-white' },
+                  { l: 'Block State', v: 'MINED', c: 'text-zinc-500' },
+                ].map((t, i) => (
+                  <div key={i} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-2xl text-center space-y-1">
+                     <p className="text-[8px] font-black text-zinc-600 uppercase tracking-widest">{t.l}</p>
+                     <p className={`text-[10px] font-black uppercase tracking-widest ${t.c}`}>{t.v}</p>
+                  </div>
+                ))}
+             </div>
+          </div>
+        </div>
+
+        <div className="space-y-12 order-1 lg:order-2">
+          <div className="space-y-6">
+            <div className="inline-flex items-center gap-3 px-4 py-1.5 bg-amber-500/10 border border-amber-500/20 rounded-full">
+              <div className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div>
+              <span className="text-[9px] font-black uppercase tracking-[0.3em] text-amber-500">Relic_Synthesis</span>
+            </div>
+            <h2 className="text-7xl lg:text-9xl font-black italic text-white uppercase tracking-tighter leading-none">
+              Asset <br /> <span className="text-amber-500 not-italic">Foundry</span>
+            </h2>
+          </div>
+          <p className="text-zinc-400 text-2xl leading-relaxed font-bold italic">
+            "Forging <span className="text-white">neural relics</span> from the heat of transaction data. Our foundry synthesizes high-fidelity digital assets that represent <span className="text-amber-500">institutional milestones</span> within the quantum mesh."
+          </p>
+          <ul className="space-y-8">
+             {[
+               'Neural Block Validation', 
+               'IPFS Metadata Pinning', 
+               'Proof of Transaction Heritage', 
+               'Smart Contract Encapsulation'
+             ].map((u, i) => (
+               <li key={i} className="flex items-center gap-8 group cursor-default">
+                  <div className="w-12 h-12 bg-zinc-950 border border-zinc-900 rounded-2xl flex items-center justify-center text-zinc-700 group-hover:text-amber-500 group-hover:border-amber-500/30 transition-all shadow-xl">
+                     <Hammer size={20} />
+                  </div>
+                  <div className="space-y-0.5">
+                     <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest group-hover:text-amber-500 transition-colors">Protocol v6.0</p>
+                     <p className="text-lg font-black text-white uppercase italic tracking-tighter">{u}</p>
+                  </div>
+               </li>
+             ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AssetFoundry;

views/landing/EncryptionProtocol.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Lock, ShieldCheck, RefreshCw, ShieldAlert, Fingerprint, Key, Layers } from 'lucide-react';
+
+const EncryptionProtocol: React.FC = () => {
+  return (
+    <section className="py-40 border-b border-zinc-900 bg-black relative">
+      <div className="max-w-7xl mx-auto px-10 text-center space-y-16">
+        <div className="space-y-6">
+          <div className="inline-flex items-center gap-3 px-4 py-1.5 bg-blue-500/10 border border-blue-500/20 rounded-full mx-auto">
+            <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></div>
+            <span className="text-[9px] font-black uppercase tracking-[0.3em] text-blue-500">RSA_Handshake</span>
+          </div>
+          <h2 className="text-7xl lg:text-9xl font-black italic text-white uppercase tracking-tighter leading-none">
+            Encryption <br /> <span className="text-blue-500 not-italic">Protocol</span>
+          </h2>
+        </div>
+
+        <p className="text-zinc-500 text-3xl max-w-5xl mx-auto leading-relaxed font-bold italic mb-32">
+          "Utilizing <span className="text-white">RSA-OAEP-4096</span> and high-entropy neural seeds to secure every Machine-to-Machine handshake. Our security grade is <span className="text-blue-500">beyond</span> institutional standards."
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+          {[
+            { label: 'AES-256', val: 'TUNNELING', icon: ShieldCheck, sub: 'Payload Encapsulation' },
+            { label: 'RSA-4096', val: 'HANDSHAKE', icon: Lock, sub: 'Identity Verification' },
+            { label: 'Seeds', val: 'ROTATING', icon: RefreshCw, sub: 'Entropy Refresh' },
+            { label: 'Breach Prob', val: '0.00%', icon: ShieldAlert, sub: 'Calculated Risk' },
+          ].map((e, i) => (
+            <div key={i} className="p-12 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-blue-500/50 transition-all relative overflow-hidden text-left shadow-2xl">
+               <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+                  <e.icon size={140} />
+               </div>
+               <div className={`w-16 h-16 bg-blue-600/10 text-blue-500 rounded-3xl flex items-center justify-center mb-12 group-hover:scale-110 transition-transform ${e.label === 'Seeds' ? 'animate-spin [animation-duration:10s]' : ''}`}>
+                  <e.icon size={32} />
+               </div>
+               <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-3 flex items-center gap-2">
+                  <span className="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
+                  {e.label}
+               </p>
+               <h5 className="text-2xl font-black text-white uppercase italic tracking-tighter mb-2 leading-none">{e.val}</h5>
+               <p className="text-[9px] font-bold text-zinc-700 uppercase tracking-widest">{e.sub}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="pt-40 flex flex-col items-center gap-12">
+           <div className="flex gap-16 grayscale opacity-20 hover:grayscale-0 hover:opacity-100 transition-all duration-700">
+              <Fingerprint size={64} className="text-zinc-500" />
+              <Key size={64} className="text-zinc-500" />
+              <Layers size={64} className="text-zinc-500" />
+           </div>
+           <p className="text-zinc-700 text-[10px] font-black uppercase tracking-[1em]">Absolute Security Architecture v6.2</p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default EncryptionProtocol;

views/landing/IntelligenceAlpha.tsx

@@ -0,0 +1,172 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { TrendingUp, Activity, BrainCircuit, Zap, BarChart3, Database, Shield, Globe, Cpu, ArrowUpRight } from 'lucide-react';
+
+const IntelligenceAlpha: React.FC = () => {
+  const [activeCell, setActiveCell] = useState<number | null>(null);
+  const [predictionCycle, setPredictionCycle] = useState(0);
+  const [confidence, setConfidence] = useState(98.4);
+  const [marketBias, setMarketBias] = useState('BULLISH');
+
+  // High-density grid simulation
+  const grid = useMemo(() => Array.from({ length: 64 }, (_, i) => ({
+    id: i,
+    intensity: Math.random() * 100,
+    signal: (Math.random() * 10).toFixed(2),
+    coord: `NODE_${Math.floor(i/8)}_${i%8}`
+  })), []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPredictionCycle(prev => (prev + 1) % 100);
+      setConfidence(prev => Math.max(95, Math.min(99.9, prev + (Math.random() - 0.5))));
+      if (Math.random() > 0.95) setMarketBias(b => b === 'BULLISH' ? 'STABLE' : 'BULLISH');
+    }, 3000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <section className="py-60 border-b border-zinc-900 bg-[#050505] relative overflow-hidden">
+      {/* Decorative Neural Web Background */}
+      <div className="absolute inset-0 opacity-[0.03] pointer-events-none">
+        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern id="neural-grid" width="100" height="100" patternUnits="userSpaceOnUse">
+              <circle cx="2" cy="2" r="1" fill="#3b82f6" />
+              <path d="M0 0 L100 100 M100 0 L0 100" stroke="#3b82f6" strokeWidth="0.5" />
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#neural-grid)" />
+        </svg>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-10 relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-32 items-center">
+          <div className="order-2 lg:order-1 relative group">
+             <div className="absolute -inset-10 bg-emerald-500/5 blur-[120px] rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-1000"></div>
+             
+             <div className="bg-black border border-zinc-900 rounded-[5rem] p-16 shadow-[0_50px_100px_rgba(0,0,0,0.8)] relative z-10 overflow-hidden">
+                <div className="flex justify-between items-center mb-12">
+                   <div className="flex items-center gap-6">
+                      <div className="p-4 bg-emerald-500/10 text-emerald-500 rounded-[1.8rem] border border-emerald-500/20 shadow-2xl">
+                         <BrainCircuit size={32} />
+                      </div>
+                      <div>
+                         <h4 className="text-white font-black uppercase tracking-[0.3em] italic text-sm">Neural Synthesis Grid</h4>
+                         <p className="text-[9px] text-zinc-600 font-black uppercase mt-1">Matrix: 8x8 • Entropy: 0.0042</p>
+                      </div>
+                   </div>
+                   <div className="flex flex-col items-end">
+                      <div className="flex items-center gap-2 mb-1">
+                         <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></div>
+                         <span className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Cycle #{predictionCycle}</span>
+                      </div>
+                      <p className="text-[8px] font-black text-zinc-700 uppercase tracking-widest">Parity Synchronized</p>
+                   </div>
+                </div>
+
+                {/* Dense Interaction Grid */}
+                <div className="grid grid-cols-8 gap-4 h-96">
+                   {grid.map((cell) => (
+                     <div 
+                        key={cell.id} 
+                        onMouseEnter={() => setActiveCell(cell.id)}
+                        onMouseLeave={() => setActiveCell(null)}
+                        className="bg-zinc-900/40 border border-zinc-800/50 rounded-xl relative overflow-hidden group cursor-crosshair transition-all hover:scale-125 hover:z-30 hover:border-emerald-500/50 hover:shadow-2xl hover:shadow-emerald-500/10"
+                     >
+                        <div 
+                           className="absolute inset-0 bg-emerald-500 transition-opacity duration-1000" 
+                           style={{ opacity: cell.intensity / 500 }}
+                        ></div>
+                        {activeCell === cell.id && (
+                           <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/90 animate-in zoom-in-50 duration-300">
+                              <span className="text-[8px] font-black text-emerald-500 mono leading-none mb-0.5">{cell.signal}</span>
+                              <span className="text-[6px] font-black text-zinc-600 mono leading-none">{cell.coord}</span>
+                           </div>
+                        )}
+                        <div className="absolute top-1 left-1 w-0.5 h-0.5 rounded-full bg-white/5"></div>
+                     </div>
+                   ))}
+                </div>
+
+                <div className="mt-12 grid grid-cols-2 gap-8">
+                   <div className="p-8 bg-zinc-900/30 border border-zinc-800 rounded-[3rem] space-y-4 group/box hover:border-emerald-500/20 transition-all">
+                      <div className="flex items-center justify-between">
+                         <div className="flex items-center gap-3">
+                            <Activity size={18} className="text-emerald-500" />
+                            <span className="text-[9px] font-black text-white uppercase tracking-widest">Sentiment Bias</span>
+                         </div>
+                         <span className="text-xs font-black text-emerald-500 mono">{marketBias}</span>
+                      </div>
+                      <div className="h-1.5 w-full bg-zinc-950 rounded-full overflow-hidden">
+                         <div className="h-full bg-emerald-500 shadow-[0_0_8px_#10b981]" style={{ width: '74%' }}></div>
+                      </div>
+                   </div>
+                   <div className="p-8 bg-zinc-900/30 border border-zinc-800 rounded-[3rem] space-y-4 group/box hover:border-emerald-500/20 transition-all">
+                      <div className="flex items-center justify-between">
+                         <div className="flex items-center gap-3">
+                            <ArrowUpRight size={18} className="text-emerald-500" />
+                            <span className="text-[9px] font-black text-white uppercase tracking-widest">Alpha Prediction</span>
+                         </div>
+                         <span className="text-xs font-black text-emerald-500 mono">+14.2%</span>
+                      </div>
+                      <p className="text-[9px] text-zinc-600 font-bold uppercase leading-none">Expected Drift (24h)</p>
+                   </div>
+                </div>
+
+                <div className="mt-8 p-6 bg-emerald-500/5 border border-emerald-500/10 rounded-[2rem]">
+                   <p className="text-xs text-zinc-500 font-medium leading-relaxed italic text-center">
+                     "LQI Oracle detects high-confidence institutional accumulation patterns on Layer 2 protocols. Executing directional alpha signals."
+                   </p>
+                </div>
+             </div>
+          </div>
+
+          <div className="order-1 lg:order-2 space-y-16">
+            <div className="space-y-8">
+              <div className="inline-flex items-center gap-4 px-6 py-2.5 bg-emerald-500/10 border border-emerald-500/20 rounded-full animate-in slide-in-from-right-4 duration-700">
+                <Cpu size={16} className="text-emerald-500 animate-pulse" />
+                <span className="text-[11px] font-black uppercase tracking-[0.4em] text-emerald-500">Neural_Logic_Tier_1</span>
+              </div>
+              <h2 className="text-[6rem] lg:text-[10rem] font-black italic text-white uppercase tracking-tighter leading-[0.8] mb-4">Neural <br /> <span className="text-emerald-500 not-italic">Alpha</span></h2>
+              <p className="text-zinc-400 text-3xl font-bold italic leading-relaxed">
+                "Our <span className="text-white">Lumina Oracle</span> processes petabytes of financial metadata to generate actionable insights. By leveraging subspace <span className="text-emerald-500">entanglement</span>, we predict market shifts before they reach consensus."
+              </p>
+            </div>
+
+            <div className="space-y-8">
+              {[
+                { title: 'Alpha Signal', desc: 'Real-time directional drift detection', state: 'ACTIVE', icon: Zap, color: 'emerald' },
+                { title: 'Confidence', desc: 'Predictive mathematical precision', state: `${confidence.toFixed(1)}%`, icon: BarChart3, color: 'blue' },
+                { title: 'Protocol Mask', desc: 'Deterministic consensus trace', state: 'VERIFIED', icon: Database, color: 'purple' },
+                { title: 'Global Parity', desc: 'Node-to-Node verification', state: '100%', icon: Globe, color: 'amber' },
+              ].map((node, i) => (
+                <div key={i} className="flex items-center justify-between p-10 bg-zinc-950 border border-zinc-900 rounded-[3.5rem] group hover:border-emerald-500/20 transition-all hover:translate-x-4 shadow-2xl relative overflow-hidden">
+                  <div className="absolute top-0 right-0 p-8 opacity-[0.02] group-hover:opacity-10 transition-opacity">
+                    <node.icon size={120} />
+                  </div>
+                  <div className="flex items-center gap-10">
+                    <div className={`p-6 bg-zinc-900 rounded-3xl text-zinc-700 group-hover:text-${node.color}-500 transition-colors shadow-2xl border border-white/5`}>
+                      <node.icon size={32} />
+                    </div>
+                    <div>
+                      <h4 className="text-white font-black text-lg uppercase tracking-widest italic leading-none mb-2">{node.title}</h4>
+                      <p className="text-[10px] text-zinc-600 font-black uppercase tracking-[0.2em]">{node.desc}</p>
+                    </div>
+                  </div>
+                  <div className="text-right shrink-0">
+                    <span className="text-emerald-500 font-black text-xl mono tracking-tighter italic">{node.state}</span>
+                    <div className="h-1 w-12 bg-zinc-900 rounded-full mt-2 ml-auto overflow-hidden">
+                       <div className="h-full bg-emerald-500 animate-pulse" style={{ width: '100%' }}></div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default IntelligenceAlpha;

views/landing/LiquidityMesh.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Waves, Zap, Globe, ArrowDownLeft, Activity, Network } from 'lucide-react';
+
+const LiquidityMesh: React.FC = () => {
+  return (
+    <section className="py-40 border-b border-zinc-900 bg-black relative">
+      <div className="max-w-7xl mx-auto px-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-32 items-center">
+          <div className="space-y-12">
+            <div className="space-y-6">
+              <div className="inline-flex items-center gap-3 px-4 py-1.5 bg-blue-500/10 border border-blue-500/20 rounded-full">
+                <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></div>
+                <span className="text-[9px] font-black uppercase tracking-[0.3em] text-blue-500">Velocity_Protocol</span>
+              </div>
+              <h2 className="text-7xl lg:text-9xl font-black italic text-white uppercase tracking-tighter leading-none">
+                Liquidity <br /> <span className="text-blue-600 not-italic">Mesh_Net</span>
+              </h2>
+            </div>
+            <p className="text-zinc-400 text-2xl leading-relaxed font-bold italic">
+              "Sub-millisecond <span className="text-white">settlement</span> across every node in the fleet. We optimize for high-volume disbursements where speed is the primary <span className="text-blue-500">security</span> factor."
+            </p>
+            <div className="grid grid-cols-2 gap-8 pt-6">
+              {[
+                { label: 'Mesh Load', val: 'OPTIMAL', sub: 'Sub-space verified', icon: Network },
+                { label: 'Settlement', val: 'REAL-TIME', sub: 'M2M Native', icon: Zap },
+                { label: 'RTP Sync', val: 'ACTIVE', sub: 'Lumina Protocol', icon: Activity },
+                { label: 'Node Range', val: 'GLOBAL', sub: '24 Regions', icon: Globe },
+              ].map((stat, i) => (
+                <div key={i} className="space-y-3">
+                  <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest flex items-center gap-2">
+                    <stat.icon size={12} className="text-blue-500" />
+                    {stat.label}
+                  </p>
+                  <div className="flex items-center gap-3">
+                    <h4 className="text-3xl font-black text-white italic uppercase tracking-tighter">{stat.val}</h4>
+                    {stat.val === 'OPTIMAL' && <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_10px_#10b981]"></div>}
+                  </div>
+                  <p className="text-[9px] font-bold text-zinc-700 uppercase tracking-widest">{stat.sub}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="bg-zinc-950 border border-zinc-900 rounded-[5rem] p-16 h-[600px] shadow-2xl relative z-10 flex flex-col justify-end overflow-hidden">
+               <div className="absolute inset-0 bg-[radial-gradient(circle_at_100%_0%,_#1e1b4b_0%,_transparent_40%)] opacity-30"></div>
+               
+               <div className="absolute inset-x-0 bottom-0 h-[70%] flex items-end gap-1.5 px-10 opacity-30 pb-20">
+                  {Array.from({ length: 50 }).map((_, i) => (
+                    <div 
+                       key={i} 
+                       className="flex-1 bg-blue-600 hover:bg-white transition-all cursor-pointer rounded-t-full" 
+                       style={{ 
+                          height: `${20 + Math.random() * 80}%`,
+                          animation: `float-bar 3s ease-in-out infinite`,
+                          animationDelay: `${i * 0.05}s`
+                       }}
+                    ></div>
+                  ))}
+               </div>
+
+               <div className="relative z-10 space-y-8 bg-zinc-950/80 backdrop-blur-xl p-10 rounded-[3rem] border border-zinc-900 shadow-2xl animate-in slide-in-from-bottom-10 duration-1000">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                       <div className="p-3 bg-blue-600/10 text-blue-500 rounded-2xl border border-blue-500/20">
+                          <Waves size={24} />
+                       </div>
+                       <div>
+                          <h5 className="text-lg font-black text-white uppercase italic tracking-tighter leading-none">Displacement Wave</h5>
+                          <p className="text-[9px] text-zinc-600 font-bold uppercase tracking-widest mt-1">Registry Signal: STABLE</p>
+                       </div>
+                    </div>
+                    <div className="p-3 bg-zinc-900 rounded-xl text-blue-400">
+                       <ArrowDownLeft size={20} />
+                    </div>
+                  </div>
+                  <div className="h-px w-full bg-zinc-900"></div>
+                  <p className="text-zinc-500 text-sm font-medium leading-relaxed italic">"Global node range coverage verified across all 24 sub-space clusters. Mesh load rebalancing currently executing."</p>
+                  <div className="flex items-center justify-between">
+                     <div className="flex items-center gap-2">
+                        <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-ping"></div>
+                        <span className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">Velocity Sync: 100%</span>
+                     </div>
+                     <span className="text-[10px] font-black text-white mono uppercase tracking-widest">FDX_NATIVE</span>
+                  </div>
+               </div>
+            </div>
+            <div className="absolute -bottom-10 -right-10 w-[400px] h-[400px] bg-blue-600/10 blur-[120px] rounded-full"></div>
+          </div>
+        </div>
+      </div>
+      <style>{`
+        @keyframes float-bar {
+          0%, 100% { transform: scaleY(1); opacity: 0.2; }
+          50% { transform: scaleY(1.3); opacity: 0.5; }
+        }
+      `}</style>
+    </section>
+  );
+};
+
+export default LiquidityMesh;

views/landing/NexusNode.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Network, Activity, Zap, ShieldCheck, Radio, Terminal as TerminalIcon, Cpu, Globe, Server, Layers, Link2 } from 'lucide-react';
+
+const NexusNode: React.FC = () => {
+  const [load, setLoad] = useState(82.4);
+  const [logs, setLogs] = useState<string[]>([]);
+  const [uptime, setUptime] = useState(0);
+  const [activePacket, setActivePacket] = useState<number>(0);
+
+  const nodeStats = useMemo(() => [
+    { id: 'n1', label: 'Identity Protocol', val: 'RSA-OAEP-4096', icon: ShieldCheck, color: 'blue' },
+    { id: 'n2', label: 'Mainnet Status', val: 'SYNCHRONIZED', icon: Activity, color: 'emerald' },
+    { id: 'n3', label: 'Priority Level', val: 'L9 CRITICAL', icon: Zap, color: 'amber' },
+    { id: 'n4', label: 'Sync Latency', val: '0.0004ms', icon: Radio, color: 'purple' },
+  ], []);
+
+  useEffect(() => {
+    const logInterval = setInterval(() => {
+      setLoad(prev => Math.max(70, Math.min(99, prev + (Math.random() - 0.5) * 2)));
+      setUptime(u => u + 1);
+      setActivePacket(p => (p + 1) % 1000);
+      const regions = ['US-EAST-1', 'EU-CENTRAL-1', 'AP-SOUTHEAST-2', 'SA-EAST-1', 'AF-SOUTH-1', 'ME-CENTRAL-1'];
+      const actions = ['Parity Check', 'Quantum Handshake', 'Entanglement Verify', 'Fabric Sync', 'Hash Collision Scan', 'Protocol Seal'];
+      const newLog = `[${regions[Math.floor(Math.random() * regions.length)]}] ${actions[Math.floor(Math.random() * actions.length)]}: 0x${Math.random().toString(16).substring(2, 10).toUpperCase()} - Parity delta: 0.000${Math.floor(Math.random() * 9)}ns`;
+      setLogs(prev => [newLog, ...prev].slice(0, 100));
+    }, 1500);
+    return () => clearInterval(logInterval);
+  }, []);
+
+  return (
+    <section className="py-60 border-b border-zinc-900 relative overflow-hidden bg-black selection:bg-blue-600/30">
+      {/* Dynamic Background Mesh */}
+      <div className="absolute inset-0 opacity-[0.05] pointer-events-none">
+        <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
+          <defs>
+            <linearGradient id="line-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#3b82f6" stopOpacity="0" />
+              <stop offset="50%" stopColor="#3b82f6" stopOpacity="0.5" />
+              <stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+          <line x1="0" y1="20" x2="100" y2="80" stroke="url(#line-grad)" strokeWidth="0.1" />
+          <line x1="100" y1="20" x2="0" y2="80" stroke="url(#line-grad)" strokeWidth="0.1" />
+        </svg>
+      </div>
+      
+      <div className="max-w-7xl mx-auto px-10 relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-40 items-center">
+          <div className="space-y-16">
+            <div className="space-y-10">
+              <div className="inline-flex items-center gap-5 px-6 py-3 bg-blue-600/10 border border-blue-600/20 rounded-full animate-in slide-in-from-left-4 duration-700">
+                <Cpu size={18} className="text-blue-500 animate-pulse" />
+                <span className="text-[11px] font-black uppercase tracking-[0.5em] text-blue-500">Core_Protocol_Apex_v6.2</span>
+              </div>
+              <h2 className="text-[7rem] lg:text-[11rem] font-black italic text-white uppercase tracking-tighter leading-[0.8] mb-4">Quantum <br /> <span className="text-blue-600 not-italic">Nexus_01</span></h2>
+              <p className="text-zinc-500 text-3xl font-bold italic leading-relaxed max-w-2xl">
+                "The architectural <span className="text-white">apex</span> of corporate treasury management. We facilitate the high-velocity routing of institutional grade digital assets via <span className="text-blue-500">subspace entanglement</span> mechanisms."
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {nodeStats.map((stat, i) => (
+                <div key={stat.id} style={{ transitionDelay: `${i * 150}ms` }} className="p-10 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-blue-600/40 transition-all hover:translate-y-[-10px] shadow-[0_50px_100px_rgba(0,0,0,0.5)] relative overflow-hidden animate-in fade-in zoom-in-95">
+                  <div className="absolute top-0 right-0 p-10 opacity-[0.02] group-hover:opacity-10 transition-opacity duration-700">
+                    <stat.icon size={160} />
+                  </div>
+                  <div className={`p-6 rounded-[2rem] bg-${stat.color}-500/10 text-${stat.color}-500 mb-10 group-hover:scale-110 transition-transform duration-700 inline-block border border-white/5 shadow-2xl`}>
+                    <stat.icon size={36} />
+                  </div>
+                  <p className="text-[11px] font-black text-zinc-600 uppercase tracking-[0.4em] mb-3 flex items-center gap-3">
+                     <span className={`w-1.5 h-1.5 rounded-full bg-${stat.color}-500 animate-pulse`}></span>
+                     {stat.label}
+                  </p>
+                  <h3 className="text-3xl font-black text-white italic uppercase tracking-tighter leading-none">{stat.val}</h3>
+                </div>
+              ))}
+            </div>
+
+            <div className="p-10 bg-zinc-900/40 border border-zinc-800 rounded-[4rem] flex items-center justify-between group hover:border-blue-500/20 transition-all shadow-2xl backdrop-blur-md">
+               <div className="flex items-center gap-10">
+                  <div className="w-16 h-16 bg-black rounded-[1.8rem] border border-zinc-800 flex items-center justify-center text-blue-500 shadow-2xl group-hover:rotate-180 transition-transform duration-1000">
+                     <Globe size={32} className="animate-spin [animation-duration:20s]" />
+                  </div>
+                  <div>
+                     <p className="text-[12px] font-black text-white uppercase tracking-[0.3em] mb-1">Global Mesh Uptime</p>
+                     <p className="text-xl font-bold text-zinc-500 mono uppercase tracking-widest italic">
+                       {Math.floor(uptime / 3600)}H {Math.floor((uptime % 3600) / 60)}M {uptime % 60}S
+                     </p>
+                  </div>
+               </div>
+               <div className="flex flex-col items-end gap-3">
+                  <div className="flex items-center gap-3">
+                    <div className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_12px_#10b981]"></div>
+                    <span className="text-[11px] font-black text-emerald-500 uppercase tracking-[0.2em]">Node Healthy</span>
+                  </div>
+                  <p className="text-[8px] font-black text-zinc-700 uppercase tracking-widest">ID: {activePacket}</p>
+               </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            {/* Visual Halo Effects */}
+            <div className="absolute -inset-10 bg-blue-600/10 blur-[150px] rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-1000"></div>
+            
+            <div className="bg-zinc-950 border border-zinc-900 rounded-[6rem] p-24 aspect-square flex flex-col justify-between shadow-[0_100px_200px_rgba(0,0,0,0.8)] relative z-10 overflow-hidden">
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,_#1e1b4b_0%,_transparent_60%)] opacity-40"></div>
+              
+              <div className="flex justify-between items-start relative z-10">
+                 <div className="w-36 h-36 bg-blue-600 rounded-[4rem] flex items-center justify-center text-white shadow-[0_40px_80px_rgba(37,99,235,0.4)] border border-blue-400/20 group-hover:scale-105 transition-transform duration-1000">
+                    <Network size={72} className="animate-pulse" />
+                 </div>
+                 <div className="text-right space-y-4">
+                    <p className="text-[14px] font-black text-zinc-500 uppercase tracking-[0.6em] mb-2">Registry Parity</p>
+                    <p className="text-9xl font-black text-white mono tracking-tighter italic leading-none">100<span className="text-4xl text-blue-500">%</span></p>
+                 </div>
+              </div>
+
+              {/* Complex SVG Radial Dashboard */}
+              <div className="flex-1 my-20 relative flex items-center justify-center">
+                 <svg className="absolute inset-0 w-full h-full rotate-[-90deg]">
+                    <circle cx="50%" cy="50%" r="48%" fill="none" stroke="currentColor" strokeWidth="1" className="text-zinc-900" />
+                    <circle cx="50%" cy="50%" r="48%" fill="none" stroke="currentColor" strokeWidth="6" strokeDasharray="1,25" className="text-blue-600/20 animate-spin [animation-duration:40s]" />
+                    <circle cx="50%" cy="50%" r="40%" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="4,8" className="text-zinc-800" />
+                    <circle cx="50%" cy="50%" r="45%" fill="none" stroke="currentColor" strokeWidth="0.5" strokeDasharray="120,40" className="text-blue-500/10 animate-spin [animation-duration:20s]" />
+                 </svg>
+                 
+                 <div className="text-center z-10 bg-black/50 backdrop-blur-3xl p-16 rounded-full border border-white/5 shadow-[0_50px_100px_rgba(0,0,0,0.5)] group-hover:scale-110 transition-transform duration-1000">
+                    <p className="text-[12px] font-black text-blue-500 uppercase tracking-[0.8em] mb-6">Fabric Density</p>
+                    <h4 className="text-[10rem] font-black text-white italic tracking-tighter mono leading-none">{load.toFixed(1)}<span className="text-3xl text-zinc-600">%</span></h4>
+                    <div className="mt-10 flex justify-center gap-4">
+                       {[1,2,3,4,5,6,7,8].map(i => <div key={i} className={`h-1.5 w-10 rounded-full transition-all duration-700 ${load > i*12 ? 'bg-blue-600 shadow-[0_0_10px_#3b82f6]' : 'bg-zinc-800'}`}></div>)}
+                    </div>
+                 </div>
+
+                 {/* Orbital Node Assets */}
+                 <div className="absolute inset-0 animate-spin [animation-duration:30s] pointer-events-none">
+                    <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-zinc-900 border border-zinc-800 rounded-[1.5rem] text-blue-400 shadow-2xl">
+                       <Server size={24} />
+                    </div>
+                 </div>
+                 <div className="absolute inset-0 animate-reverse-spin [animation-duration:25s] pointer-events-none">
+                    <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 p-4 bg-zinc-900 border border-zinc-800 rounded-[1.5rem] text-emerald-400 shadow-2xl">
+                       <ShieldCheck size={24} />
+                    </div>
+                 </div>
+                 <div className="absolute inset-0 animate-spin [animation-duration:45s] pointer-events-none">
+                    <div className="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-zinc-900 border border-zinc-800 rounded-[1.5rem] text-purple-400 shadow-2xl">
+                       <Layers size={24} />
+                    </div>
+                 </div>
+              </div>
+
+              {/* Console Output Integration */}
+              <div className="bg-black/95 border border-zinc-900 rounded-[4rem] p-14 h-96 overflow-hidden relative group/console shadow-inner animate-in slide-in-from-bottom-10">
+                <div className="absolute top-0 inset-x-0 px-14 py-8 border-b border-zinc-900 bg-zinc-900/60 flex justify-between items-center backdrop-blur-xl z-20">
+                   <div className="flex items-center gap-6">
+                      <TerminalIcon size={18} className="text-blue-500" />
+                      <span className="text-[12px] font-black uppercase text-zinc-500 tracking-[0.5em]">LQI_CORE_FABRIC Trace Stream</span>
+                   </div>
+                   <div className="flex gap-3">
+                      <div className="w-3 h-3 rounded-full bg-zinc-800"></div>
+                      <div className="w-3 h-3 rounded-full bg-zinc-800"></div>
+                      <div className="w-3 h-3 rounded-full bg-blue-600 animate-pulse shadow-[0_0_12px_#3b82f6]"></div>
+                   </div>
+                </div>
+                <div className="mt-20 space-y-3 font-mono text-[11px] custom-scrollbar overflow-y-auto h-56 pt-8 px-4 relative z-10">
+                  {logs.map((log, i) => (
+                    <div key={i} className="flex gap-10 group/line animate-in slide-in-from-right-4 duration-500">
+                       <span className="text-zinc-800 font-black shrink-0 tracking-tighter">[{new Date().toLocaleTimeString([], {hour12: false})}]</span>
+                       <span className={`${log.includes('Success') || log.includes('Verify') ? 'text-blue-400' : 'text-zinc-500'} group-hover/line:text-white transition-colors tracking-tight`}>{log}</span>
+                    </div>
+                  ))}
+                </div>
+                <div className="absolute bottom-0 inset-x-0 h-20 bg-gradient-to-t from-black to-transparent z-20"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <style>{`
+        @keyframes reverse-spin { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
+        .animate-reverse-spin { animation: reverse-spin linear infinite; }
+      `}</style>
+    </section>
+  );
+};
+
+export default NexusNode;

views/landing/OracleAuthority.tsx

@@ -0,0 +1,174 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Shield, Activity, Search, Terminal as TerminalIcon, CheckCircle2, AlertTriangle, Infinity, Eye, Cpu, Zap, Radio, Database } from 'lucide-react';
+
+const OracleAuthority: React.FC = () => {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [disparity, setDisparity] = useState(0.001);
+  const [scanProgress, setScanProgress] = useState(0);
+  const [activeLayer, setActiveLayer] = useState<'MESH' | 'CONSENSUS' | 'HARD_STATE'>('MESH');
+
+  useEffect(() => {
+    const logInterval = setInterval(() => {
+      setDisparity(prev => Math.max(0.0001, Math.min(0.01, prev + (Math.random() - 0.5) * 0.0005)));
+      const regions = ['US', 'EU', 'JP', 'SG', 'AU'];
+      const actions = ['Scanning block', 'Verifying hash', 'M2M handshake', 'Fabric sync'];
+      const newLog = `[OBSERVER] ${actions[Math.floor(Math.random()*actions.length)]} ${Math.floor(Math.random()*900000)}... REGION_${regions[Math.floor(Math.random()*regions.length)]} verified.`;
+      setLogs(prev => [newLog, ...prev].slice(0, 100));
+      setScanProgress(p => (p + 1) % 101);
+    }, 3000);
+
+    const layerInterval = setInterval(() => {
+      setActiveLayer(l => l === 'MESH' ? 'CONSENSUS' : l === 'CONSENSUS' ? 'HARD_STATE' : 'MESH');
+    }, 8000);
+
+    return () => {
+      clearInterval(logInterval);
+      clearInterval(layerInterval);
+    };
+  }, []);
+
+  const systemAttributes = useMemo(() => [
+    { label: 'Observer', val: 'ACTIVE', sub: 'Omni-presence Polling', icon: Eye },
+    { label: 'Disparity', val: disparity.toFixed(4) + '%', sub: 'Tolerance Threshold', icon: Activity },
+    { label: 'Consensus', val: 'HARD', sub: 'Block Signature Fixed', icon: CheckCircle2 },
+    { label: 'Registry State', val: 'ABSOLUTE', sub: 'Immutable Fabric', icon: Database }
+  ], [disparity]);
+
+  return (
+    <section className="py-60 relative bg-black overflow-hidden selection:bg-blue-600/30">
+      {/* Decorative SVG Pattern */}
+      <div className="absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none">
+        <svg width="100%" height="100%">
+          <pattern id="oracle-pattern" width="80" height="80" patternUnits="userSpaceOnUse">
+            <path d="M 0 40 L 80 40 M 40 0 L 40 80" stroke="#3b82f6" strokeWidth="0.5" fill="none" />
+            <circle cx="40" cy="40" r="1.5" fill="#3b82f6" />
+          </pattern>
+          <rect width="100%" height="100%" fill="url(#oracle-pattern)" />
+        </svg>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-10 relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-40 items-center">
+          <div className="space-y-20">
+            <div className="space-y-8">
+              <div className="inline-flex items-center gap-4 px-6 py-2.5 bg-blue-600/10 border border-blue-600/20 rounded-full animate-in zoom-in-95 duration-700">
+                <Radio size={16} className="text-blue-500 animate-pulse" />
+                <span className="text-[11px] font-black uppercase tracking-[0.5em] text-blue-500">Final_Authority_Node_v6.2</span>
+              </div>
+              <h2 className="text-[7rem] lg:text-[11rem] font-black italic text-white uppercase tracking-tighter leading-[0.8]">
+                The <br /> <span className="text-blue-600 not-italic">Oracle_Node</span>
+              </h2>
+              <p className="text-zinc-400 text-3xl font-bold italic leading-relaxed">
+                "The <span className="text-white">final authority</span> on system parity. The Oracle observes the mesh from a sub-space perspective to detect any <span className="text-blue-500">discrepancies</span> in the global registry fabric."
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+               {systemAttributes.map((attr, i) => (
+                 <div key={i} className="p-12 bg-zinc-950 border border-zinc-900 rounded-[4rem] group hover:border-blue-500/40 transition-all hover:translate-y-[-8px] shadow-[0_50px_100px_rgba(0,0,0,0.5)] relative overflow-hidden">
+                    <div className="absolute top-0 right-0 p-8 opacity-[0.02] group-hover:opacity-10 transition-opacity">
+                       <attr.icon size={120} />
+                    </div>
+                    <div className="w-16 h-16 bg-blue-600/10 text-blue-500 rounded-3xl flex items-center justify-center mb-10 border border-white/5 group-hover:scale-110 transition-transform duration-500">
+                       <attr.icon size={28} />
+                    </div>
+                    <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-2 flex items-center gap-2">
+                       <span className="w-1 h-1 rounded-full bg-blue-500"></span>
+                       {attr.label}
+                    </p>
+                    <h3 className="text-4xl font-black text-white italic uppercase tracking-tighter mb-2">{attr.val}</h3>
+                    <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">{attr.sub}</p>
+                 </div>
+               ))}
+            </div>
+          </div>
+
+          <div className="relative group">
+            {/* Massive Ambient Aura */}
+            <div className="absolute -inset-20 bg-blue-600/5 blur-[150px] rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-1000"></div>
+
+            <div className="bg-zinc-950 border border-zinc-900 rounded-[5rem] p-20 shadow-[0_100px_200px_rgba(0,0,0,0.8)] relative z-10 overflow-hidden flex flex-col justify-between h-[1000px]">
+               <div className="absolute inset-0 bg-[radial-gradient(circle_at_0%_0%,_#1e1b4b_0%,_transparent_50%)] opacity-30"></div>
+               
+               <div className="flex justify-between items-start relative z-10">
+                  <div className="p-8 bg-blue-600/10 text-blue-500 rounded-[3rem] border border-blue-500/20 shadow-2xl group-hover:rotate-6 transition-transform duration-1000">
+                     <Cpu size={56} className="animate-pulse" />
+                  </div>
+                  <div className="text-right space-y-3">
+                     <p className="text-[14px] font-black text-zinc-500 uppercase tracking-[0.5em]">Network Layer</p>
+                     <p className="text-6xl font-black text-white italic tracking-tighter uppercase leading-none">{activeLayer}</p>
+                  </div>
+               </div>
+
+               {/* Central Scanning Component */}
+               <div className="flex-1 my-24 relative flex items-center justify-center">
+                  <div className="absolute inset-0 border-[3px] border-dashed border-zinc-900 rounded-full animate-spin [animation-duration:60s]"></div>
+                  <div className="absolute inset-20 border border-blue-500/10 rounded-full animate-reverse-spin [animation-duration:40s]"></div>
+                  <div className="absolute inset-40 border-2 border-zinc-800 rounded-full animate-spin [animation-duration:20s]"></div>
+                  
+                  <div className="text-center z-10 bg-black/40 backdrop-blur-3xl p-20 rounded-full border border-white/5 shadow-[0_50px_100px_rgba(0,0,0,0.8)]">
+                     <Zap size={64} className="text-blue-500 mx-auto mb-8 animate-bounce" />
+                     <p className="text-[12px] font-black text-zinc-500 uppercase tracking-[0.8em] mb-4">Observation Depth</p>
+                     <h4 className="text-9xl font-black text-white italic tracking-tighter leading-none">{scanProgress}<span className="text-3xl text-blue-500">%</span></h4>
+                  </div>
+
+                  {/* Dynamic Indicators */}
+                  <div className="absolute inset-0 animate-spin [animation-duration:15s] pointer-events-none">
+                     <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-4">
+                        <div className="w-4 h-4 bg-blue-600 rounded-full shadow-[0_0_20px_#3b82f6]"></div>
+                        <span className="text-[10px] font-black text-blue-500 uppercase bg-black px-4 py-2 rounded-full border border-blue-500/30">SCANNER_01</span>
+                     </div>
+                  </div>
+               </div>
+
+               <div className="space-y-10 relative z-10">
+                  <div className="bg-black/90 border border-zinc-900 rounded-[4rem] p-12 h-80 overflow-hidden relative group/console shadow-inner">
+                    <div className="absolute top-0 inset-x-0 px-12 py-6 border-b border-zinc-900 bg-zinc-900/50 flex justify-between items-center backdrop-blur-md">
+                       <div className="flex items-center gap-5">
+                          <TerminalIcon size={16} className="text-blue-500" />
+                          <span className="text-[11px] font-black uppercase text-zinc-500 tracking-[0.4em]">Oracle_OS Consensus Trace</span>
+                       </div>
+                       <div className="flex gap-3">
+                          <div className="w-2.5 h-2.5 rounded-full bg-zinc-800"></div>
+                          <div className="w-2.5 h-2.5 rounded-full bg-zinc-800"></div>
+                          <div className="w-2.5 h-2.5 rounded-full bg-blue-600 animate-pulse"></div>
+                       </div>
+                    </div>
+                    <div className="mt-16 space-y-3 font-mono text-[11px] custom-scrollbar overflow-y-auto h-48 pt-6 px-4">
+                      {logs.map((log, i) => (
+                        <div key={i} className="flex gap-8 group/line animate-in slide-in-from-left-4 duration-500">
+                           <span className="text-zinc-800 font-bold shrink-0">[{new Date().toLocaleTimeString([], {hour12: false})}]</span>
+                           <span className={`${log.includes('verified') ? 'text-blue-400' : 'text-zinc-500'} group-hover/line:text-white transition-colors`}>{log}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-between px-12">
+                     <div className="flex items-center gap-6">
+                        <div className="flex items-center gap-3">
+                           <div className="w-3 h-3 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_12px_#10b981]"></div>
+                           <span className="text-[12px] font-black text-white uppercase tracking-widest">State: ABSOLUTE</span>
+                        </div>
+                        <div className="h-6 w-px bg-zinc-800"></div>
+                        <span className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">Block Height: 884,102</span>
+                     </div>
+                     <Infinity size={24} className="text-zinc-800" />
+                  </div>
+               </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <style>{`
+        @keyframes reverse-spin {
+          from { transform: rotate(360deg); }
+          to { transform: rotate(0deg); }
+        }
+        .animate-reverse-spin { animation: reverse-spin linear infinite; }
+      `}</style>
+    </section>
+  );
+};
+
+export default OracleAuthority;

views/landing/PrivacyManifesto.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import { Shield, Fingerprint, Lock, EyeOff, Scissors, Trash2 } from 'lucide-react';
+
+const PrivacyManifesto: React.FC = () => {
+  const [shredding, setShredding] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setShredding(true);
+      setTimeout(() => setShredding(false), 800);
+    }, 4000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <section className="py-60 border-b border-zinc-900 bg-[#020202] relative overflow-hidden">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_#1e1b4b_0%,_transparent_70%)] opacity-20"></div>
+      
+      <div className="max-w-5xl mx-auto px-10 text-center space-y-16 relative z-10">
+        <div className="space-y-6">
+          <div className="inline-flex items-center gap-3 px-4 py-1.5 bg-rose-500/10 border border-rose-500/20 rounded-full mx-auto">
+            <div className="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></div>
+            <span className="text-[9px] font-black uppercase tracking-[0.3em] text-rose-500">Security_Ethos</span>
+          </div>
+          <h2 className="text-7xl lg:text-9xl font-black italic text-white uppercase tracking-tighter leading-none">
+            Privacy <br /> <span className="text-rose-600 not-italic">Manifesto</span>
+          </h2>
+        </div>
+
+        <p className="text-white text-5xl font-black italic tracking-tighter leading-tight uppercase max-w-4xl mx-auto">
+          "Data <span className="text-rose-500 underline decoration-8 decoration-rose-900/50 underline-offset-[12px]">sovereignty</span> is the foundation of the Lumina protocol. We believe in <span className="text-rose-500">zero-persistence</span> logging and node-level <span className="text-rose-500">shredding</span> of all packets once ledger parity is achieved."
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 pt-20">
+          {[
+            { label: 'Zero Trace', val: 'VERIFIED', icon: EyeOff },
+            { label: 'P2P Sync', val: 'PRIVATE', icon: Fingerprint },
+            { label: 'Secret Cache', val: 'FLUSHED', icon: Trash2 },
+            { label: 'Sovereign', val: 'ABSOLUTE', icon: Lock },
+          ].map((item, i) => (
+            <div key={i} className="p-10 bg-zinc-950 border border-zinc-900 rounded-[3rem] group hover:border-rose-500/40 transition-all shadow-2xl relative overflow-hidden">
+              <div className={`p-4 rounded-2xl bg-zinc-900 text-zinc-700 group-hover:text-rose-500 transition-all mb-8 ${shredding && i === 2 ? 'animate-bounce text-rose-500' : ''}`}>
+                 <item.icon size={32} />
+              </div>
+              <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-2">{item.label}</p>
+              <h3 className="text-xl font-black text-white italic tracking-tighter uppercase mb-2">{item.val}</h3>
+            </div>
+          ))}
+        </div>
+
+        <div className="pt-40 max-w-2xl mx-auto space-y-10">
+           <div className="h-px w-full bg-gradient-to-r from-transparent via-zinc-800 to-transparent"></div>
+           <p className="text-zinc-500 text-lg font-medium italic leading-relaxed">
+             "Lumina does not store your history. We facilitate consensus and evaporate. Metadata persistence is an institutional liability that we mathematically eliminate."
+           </p>
+           <div className="flex justify-center gap-16 grayscale opacity-10 hover:grayscale-0 hover:opacity-100 transition-all duration-1000">
+              <Shield size={48} />
+              <Scissors size={48} />
+              <EyeOff size={48} />
+           </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default PrivacyManifesto;

views/landing/QuantumCompute.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react';
+import { Cpu, Zap, Activity, Thermometer, ShieldAlert, Layers, Infinity } from 'lucide-react';
+
+const QuantumCompute: React.FC = () => {
+  const [qubits, setQubits] = useState(2048);
+  const [temp, setTemp] = useState(0.001);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setQubits(prev => Math.max(2000, Math.min(2048, prev + (Math.random() > 0.8 ? -1 : 1))));
+      setTemp(prev => Math.max(0.001, Math.min(0.005, prev + (Math.random() - 0.5) * 0.001)));
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <section className="py-40 border-b border-zinc-900 bg-zinc-950/40 relative">
+      <div className="max-w-7xl mx-auto px-10 text-center">
+        <div className="space-y-6 mb-16">
+          <div className="inline-flex items-center gap-3 px-4 py-1.5 bg-cyan-500/10 border border-cyan-500/20 rounded-full mx-auto">
+            <div className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-pulse"></div>
+            <span className="text-[9px] font-black uppercase tracking-[0.3em] text-cyan-500">Forecast_Node</span>
+          </div>
+          <h2 className="text-7xl lg:text-9xl font-black italic text-white uppercase tracking-tighter leading-none">
+            Quantum <br /> <span className="text-cyan-500 not-italic">Compute</span>
+          </h2>
+        </div>
+
+        <p className="text-zinc-500 text-3xl max-w-5xl mx-auto leading-relaxed font-bold italic mb-32">
+          "Harnessing the power of <span className="text-white">qubit stabilization</span> to forecast complex market shocks. Our compute nodes are cooled to absolute zero to maintain the <span className="text-cyan-500">integrity</span> of our neural forecasting."
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {[
+            { label: 'Stable Qubits', val: qubits, sub: 'Error Correction High', icon: Cpu },
+            { label: 'Entropy', val: `${temp.toFixed(3)}%`, sub: 'Thermal Shield Active', icon: Thermometer },
+            { label: 'Shocks', val: 'SIMULATED', sub: 'Hyper-Inflation Q3', icon: ShieldAlert },
+            { label: 'Drift', val: 'CORRECTED', sub: 'Sub-Space Alignment', icon: Activity },
+          ].map((q, i) => (
+            <div key={i} className="p-12 border border-zinc-900 rounded-[4rem] bg-black group hover:border-cyan-500/30 transition-all shadow-2xl relative overflow-hidden text-left">
+               <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+                  <q.icon size={120} />
+               </div>
+               <div className="w-14 h-14 bg-cyan-500/10 text-cyan-500 rounded-3xl flex items-center justify-center mb-10 group-hover:scale-110 transition-transform shadow-2xl">
+                  <q.icon size={28} />
+               </div>
+               <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-2 flex items-center gap-2">
+                 <span className="w-1 h-1 rounded-full bg-cyan-500"></span>
+                 {q.label}
+               </p>
+               <h4 className="text-4xl font-black text-white uppercase italic tracking-tighter mb-2">{q.val}</h4>
+               <p className="text-[9px] font-bold text-cyan-500 uppercase tracking-[0.3em]">{q.sub}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-40 p-16 bg-zinc-950 border border-zinc-900 rounded-[5rem] flex flex-col md:flex-row items-center justify-between gap-16 shadow-inner relative overflow-hidden">
+           <div className="absolute inset-0 opacity-[0.03] pointer-events-none bg-[size:20px_20px] bg-[radial-gradient(#3b82f6_1px,transparent_1px)]"></div>
+           <div className="flex items-center gap-10 relative z-10 text-left">
+              <div className="w-24 h-24 bg-cyan-500/5 rounded-[3rem] border border-cyan-500/10 flex items-center justify-center text-cyan-500">
+                 <Infinity size={48} />
+              </div>
+              <div className="space-y-2">
+                 <h5 className="text-2xl font-black text-white italic uppercase tracking-tighter">Sub-Space Link</h5>
+                 <p className="text-zinc-500 text-sm font-medium leading-relaxed max-w-lg">Persistent entanglement verified across all 24 sub-space clusters. Forecasting latency: <span className="text-cyan-500 mono">0.0004ns</span>.</p>
+              </div>
+           </div>
+           <div className="flex gap-4 relative z-10">
+              <div className="h-12 w-48 bg-zinc-900 border border-zinc-800 rounded-2xl flex items-center px-6 gap-4">
+                 <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
+                 <span className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">Coherence: 99%</span>
+              </div>
+           </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default QuantumCompute;

views/landing/RegistryVault.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Building2, CheckCircle2, ShieldCheck, ArrowRight, RefreshCw, Layers } from 'lucide-react';
+
+const RegistryVault: React.FC = () => {
+  return (
+    <section className="py-40 border-b border-zinc-900 bg-black relative">
+      <div className="max-w-7xl mx-auto px-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-32 items-center">
+          <div className="space-y-12">
+            <div className="space-y-6">
+              <div className="inline-flex items-center gap-3 px-4 py-1.5 bg-blue-500/10 border border-blue-500/20 rounded-full">
+                <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></div>
+                <span className="text-[9px] font-black uppercase tracking-[0.3em] text-blue-500">Vault_Integration</span>
+              </div>
+              <h2 className="text-7xl lg:text-9xl font-black italic text-white uppercase tracking-tighter leading-none">
+                Bank <br /> <span className="text-blue-600 not-italic">Registry_Node</span>
+              </h2>
+            </div>
+            <p className="text-zinc-400 text-2xl leading-relaxed font-bold italic">
+              "Direct M2M handshakes with <span className="text-white">institutional vaults</span>. We utilize the FDX-standard to provision virtual nodes that route liquidity directly from your treasury into the <span className="text-blue-500">Quantum foundry</span>."
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+               {[
+                 { t: 'FDX Native', s: 'Active' },
+                 { t: 'Vault Sync', s: 'Priority' },
+                 { t: 'Audit Log', s: 'Signed' },
+                 { t: 'Routing', s: 'Layer 2' }
+               ].map((line, i) => (
+                 <div key={i} className="flex items-center gap-6 p-6 bg-zinc-900/50 border border-zinc-800 rounded-3xl group hover:border-blue-500/50 transition-all shadow-xl">
+                    <div className="p-2 bg-blue-600/10 text-blue-500 rounded-xl group-hover:scale-110 transition-transform"><CheckCircle2 size={18} /></div>
+                    <div className="space-y-0.5">
+                       <p className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">{line.t}</p>
+                       <p className="text-[11px] font-black text-white uppercase tracking-widest">{line.s}</p>
+                    </div>
+                 </div>
+               ))}
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute -inset-4 bg-gradient-to-br from-blue-600/20 to-transparent blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
+            <div className="bg-zinc-950 border border-zinc-900 rounded-[5rem] p-16 shadow-[0_50px_100px_rgba(0,0,0,0.5)] group relative z-10">
+               <div className="flex items-center justify-between mb-16">
+                  <div className="flex items-center gap-4">
+                     <Building2 size={28} className="text-blue-500" />
+                     <span className="text-[10px] font-black text-zinc-500 uppercase tracking-widest italic">Registry Metadata Node</span>
+                  </div>
+                  <div className="flex gap-3">
+                     <div className="w-2.5 h-2.5 rounded-full bg-zinc-900"></div>
+                     <div className="w-2.5 h-2.5 rounded-full bg-zinc-900"></div>
+                     <div className="w-2.5 h-2.5 rounded-full bg-blue-500 animate-pulse shadow-[0_0_10px_#3b82f6]"></div>
+                  </div>
+               </div>
+               <div className="space-y-10">
+                  {[
+                    { name: 'Citi Master Node', balance: '$1,245,000.50', status: 'ACTIVE', trend: '+1.2%' },
+                    { name: 'Chase Liquidity Node', balance: '$840,200.00', status: 'SYNCING', trend: 'STABLE' },
+                    { name: 'DB Treasury Hub', balance: '$2,105,000.12', status: 'ACTIVE', trend: '+0.4%' },
+                  ].map((acc, i) => (
+                    <div key={i} className="flex justify-between items-end border-b border-zinc-900 pb-10 last:border-0 last:pb-0 hover:border-zinc-700 transition-colors group/item cursor-default">
+                       <div className="space-y-2">
+                          <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-1 group-hover/item:text-blue-500 transition-colors">{acc.name}</p>
+                          <h4 className="text-4xl font-black text-white mono tracking-tighter italic">{acc.balance}</h4>
+                       </div>
+                       <div className="text-right space-y-2">
+                          <p className="text-[8px] font-black text-emerald-500 mono">{acc.trend}</p>
+                          <p className={`text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1 rounded-full border ${acc.status === 'ACTIVE' ? 'text-emerald-500 border-emerald-500/20 bg-emerald-500/5' : 'text-blue-400 border-blue-400/20 bg-blue-400/5'}`}>
+                            {acc.status}
+                          </p>
+                       </div>
+                    </div>
+                  ))}
+               </div>
+               <div className="mt-16 pt-10 border-t border-zinc-900 flex justify-between items-center">
+                  <div className="flex items-center gap-3 text-zinc-600 text-[10px] font-black uppercase tracking-widest">
+                     <RefreshCw size={14} className="animate-spin [animation-duration:5s]" />
+                     <span>Last Polled: 2m ago</span>
+                  </div>
+                  <button className="text-blue-500 hover:text-white transition-colors flex items-center gap-2 group/btn">
+                    <span className="text-[9px] font-black uppercase tracking-[0.3em]">Full Registry</span>
+                    <ArrowRight size={14} className="group-hover/btn:translate-x-1 transition-transform" />
+                  </button>
+               </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default RegistryVault;

views/landing/SystemFabric.tsx

@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from 'react';
+import { Infinity, Globe, Database, Network, ShieldCheck, Cpu, Radio, Server, Activity, Shield } from 'lucide-react';
+
+const SystemFabric: React.FC = () => {
+  const [load, setLoad] = useState(14.2);
+  const [activeRegion, setActiveRegion] = useState('US-EAST');
+  const [nodeCount, setNodeCount] = useState(1242);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setLoad(prev => Math.max(10, Math.min(25, prev + (Math.random() - 0.5))));
+      if (Math.random() > 0.8) setNodeCount(prev => prev + (Math.random() > 0.5 ? 1 : -1));
+    }, 2000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const regions = [
+    { name: 'US-EAST', load: '12%', latency: '0.4ms', status: 'Optimal' },
+    { name: 'EU-WEST', load: '18%', latency: '0.8ms', status: 'Optimal' },
+    { name: 'AP-SOUTH', load: '14%', latency: '1.2ms', status: 'Synced' },
+    { name: 'LATAM', load: '22%', latency: '1.5ms', status: 'Stable' }
+  ];
+
+  return (
+    <section className="py-60 border-b border-zinc-900 bg-black relative overflow-hidden">
+      <div className="absolute inset-0 opacity-[0.05] pointer-events-none bg-[radial-gradient(circle_at_50%_50%,#3b82f6_0%,transparent_70%)]"></div>
+
+      <div className="max-w-7xl mx-auto px-10 text-center space-y-24">
+        <div className="space-y-10">
+          <div className="inline-flex items-center gap-4 px-6 py-3 bg-blue-500/10 border border-blue-500/20 rounded-full mx-auto animate-in zoom-in-95 duration-700">
+            <Radio size={16} className="text-blue-500 animate-pulse" />
+            <span className="text-[11px] font-black uppercase tracking-[0.5em] text-blue-500">System_Fabric_Layer_v6.2</span>
+          </div>
+          <h2 className="text-[7rem] lg:text-[11rem] font-black italic text-white uppercase tracking-tighter leading-[0.8] mb-4">
+            System <br /> <span className="text-blue-600 not-italic">Fabric_v6</span>
+          </h2>
+          <p className="text-zinc-500 text-3xl max-w-6xl mx-auto leading-relaxed font-bold italic">
+            "The <span className="text-white">connective tissue</span> of our global registry. We maintain over <span className="text-blue-500 mono">{nodeCount}</span> active nodes across sub-space mesh fabrics. Our <span className="text-blue-500">consensus</span> mechanism ensures that every ledger entry is cryptographically absolute."
+          </p>
+        </div>
+
+        {/* Global Cluster Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+          {[
+            { label: 'Collective Load', val: `${load.toFixed(1)}%`, sub: 'Sub-space Pathing', icon: Network, color: 'blue' },
+            { label: 'Mesh Parity', val: '100%', sub: 'Deterministic State', icon: ShieldCheck, color: 'emerald' },
+            { label: 'Encryption', val: 'AES-256', sub: 'M2M Encapsulation', icon: Database, color: 'purple' },
+            { label: 'Sovereignty', val: 'ABSOLUTE', sub: 'Neural Authority', icon: Cpu, color: 'amber' },
+          ].map((item, i) => (
+            <div key={i} className="p-16 bg-zinc-950 border border-zinc-900 rounded-[5rem] group hover:border-blue-500/40 transition-all hover:scale-105 shadow-[0_50px_100px_rgba(0,0,0,0.5)] relative overflow-hidden text-left">
+              <div className="absolute top-0 right-0 p-12 opacity-[0.02] group-hover:opacity-10 transition-opacity">
+                <item.icon size={200} />
+              </div>
+              <div className={`w-20 h-20 bg-${item.color}-500/10 text-${item.color}-500 rounded-[2.5rem] flex items-center justify-center mb-12 border border-white/5 shadow-2xl group-hover:rotate-12 transition-transform duration-700`}>
+                <item.icon size={40} />
+              </div>
+              <p className="text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] mb-4 flex items-center gap-3">
+                 <span className={`w-1.5 h-1.5 rounded-full bg-${item.color}-500 animate-pulse`}></span>
+                 {item.label}
+              </p>
+              <h3 className="text-6xl font-black text-white italic tracking-tighter uppercase mb-3 leading-none">{item.val}</h3>
+              <p className="text-[11px] font-bold text-blue-500 uppercase tracking-[0.3em]">{item.sub}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Regional Monitoring Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-40">
+           <div className="bg-zinc-950 border border-zinc-900 rounded-[5rem] p-16 shadow-2xl text-left relative overflow-hidden group">
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_100%_100%,#3b82f6_0%,transparent_40%)] opacity-20"></div>
+              <div className="flex items-center justify-between mb-16 relative z-10">
+                 <div className="flex items-center gap-6">
+                    <div className="p-5 bg-blue-600/10 text-blue-500 rounded-[2rem] border border-blue-500/20 shadow-2xl">
+                       <Globe size={32} />
+                    </div>
+                    <h4 className="text-2xl font-black text-white italic tracking-tighter uppercase">Regional Mesh Polling</h4>
+                 </div>
+                 <Activity size={24} className="text-zinc-800 animate-pulse" />
+              </div>
+              <div className="space-y-10 relative z-10">
+                 {regions.map((reg, i) => (
+                   <button 
+                     key={i} 
+                     onClick={() => setActiveRegion(reg.name)}
+                     className={`w-full flex items-center justify-between p-8 rounded-[2.5rem] border transition-all ${activeRegion === reg.name ? 'bg-blue-600/10 border-blue-500 shadow-xl' : 'bg-black border-zinc-900 opacity-60 hover:opacity-100 hover:border-zinc-700'}`}
+                   >
+                     <div className="flex items-center gap-8">
+                        <span className="text-lg font-black text-white mono">{reg.name}</span>
+                        <div className="h-1 w-24 bg-zinc-900 rounded-full overflow-hidden">
+                           <div className="h-full bg-blue-600" style={{ width: reg.load }}></div>
+                        </div>
+                     </div>
+                     <div className="flex items-center gap-10">
+                        <div className="text-right">
+                           <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest">Latency</p>
+                           <p className="text-sm font-black text-blue-400 mono">{reg.latency}</p>
+                        </div>
+                        <div className="text-right min-w-[80px]">
+                           <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest">Status</p>
+                           <p className="text-sm font-black text-emerald-500 uppercase">{reg.status}</p>
+                        </div>
+                     </div>
+                   </button>
+                 ))}
+              </div>
+           </div>
+
+           <div className="bg-zinc-950 border border-zinc-900 rounded-[5rem] p-16 shadow-2xl text-left flex flex-col justify-between group">
+              <div className="space-y-10">
+                 <div className="p-6 bg-zinc-900 rounded-[2.5rem] border border-zinc-800 shadow-2xl inline-block group-hover:scale-110 transition-transform duration-700">
+                    <Shield size={48} className="text-blue-500" />
+                 </div>
+                 <h4 className="text-4xl font-black text-white italic tracking-tighter uppercase leading-[0.9]">Absolute <br /> <span className="text-blue-500">Node Architecture</span></h4>
+                 <p className="text-zinc-500 text-lg font-bold leading-relaxed italic">
+                    "Every node in the Lumina fabric is a self-contained vault, performing real-time zero-knowledge proofs to ensure total network integrity without centralized reliance."
+                 </p>
+              </div>
+              <div className="pt-16 border-t border-zinc-900 grid grid-cols-3 gap-8">
+                 {[
+                   { icon: Server, label: 'Bare Metal Cluster' },
+                   { icon: ShieldCheck, label: 'Quantum Sealed' },
+                   { icon: Infinity, label: 'Zero Persistence' }
+                 ].map((t, i) => (
+                   <div key={i} className="text-center space-y-3 opacity-40 hover:opacity-100 transition-opacity">
+                      <t.icon size={24} className="text-zinc-500 mx-auto" />
+                      <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest leading-tight">{t.label}</p>
+                   </div>
+                 ))}
+              </div>
+           </div>
+        </div>
+
+        <div className="mt-40 grid grid-cols-2 md:grid-cols-4 gap-20 opacity-10 hover:opacity-100 transition-all duration-1000 grayscale hover:grayscale-0">
+           {['Global Hub', 'Encrypted Core', 'Hard Consensus', 'State Elasticity'].map((label, i) => (
+             <div key={i} className="flex flex-col items-center gap-6">
+                <div className="w-1.5 h-1.5 rounded-full bg-blue-600 animate-ping"></div>
+                <span className="text-[10px] font-black uppercase tracking-[1em] text-zinc-600">{label}</span>
+             </div>
+           ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SystemFabric;