Spaces:
Sleeping
Sleeping
File size: 6,109 Bytes
39a2130 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 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; |