File size: 4,919 Bytes
42df68f bf7f696 42df68f d1db5ee b143c59 42df68f b143c59 42df68f b143c59 42df68f b143c59 42df68f b143c59 42df68f b143c59 42df68f b143c59 42df68f | 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 93 94 95 96 97 98 99 100 101 102 103 104 | "use client";
import { useEffect, useState } from "react";
export default function GlobalSync({ onComplete }: { onComplete: () => void }) {
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("Initializing Neural Sync...");
const messages = [
"Establishing encrypted connection...",
"Synchronizing with Mercado Público...",
"Activating Legal Analyst Agent...",
"Activating Technical Reviewer Agent...",
"Activating Commercial Strategist Agent...",
"Orchestrating multi-agent pipeline...",
"Ready for analysis."
];
useEffect(() => {
let currentMsg = 0;
const interval = setInterval(() => {
setProgress(prev => {
if (prev >= 100) {
clearInterval(interval);
setTimeout(onComplete, 500);
return 100;
}
// Update message based on progress
const msgIdx = Math.floor((prev / 100) * messages.length);
if (msgIdx !== currentMsg && messages[msgIdx]) {
currentMsg = msgIdx;
setMessage(messages[msgIdx]);
}
return prev + 2;
});
}, 40);
return () => clearInterval(interval);
}, [onComplete]);
return (
<div
className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#020202] text-white overflow-hidden cursor-pointer"
onClick={onComplete}
title="Click to skip"
>
<button
onClick={(e) => { e.stopPropagation(); onComplete(); }}
className="absolute top-8 right-8 text-[10px] uppercase tracking-widest text-slate-500 hover:text-white transition-colors"
>
Skip Sync [ESC]
</button>
{/* Cinematic Grid Background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
{/* Decorative Blur Orbs */}
<div className="absolute -top-24 -left-24 w-96 h-96 bg-purple-500/10 blur-[120px] animate-pulse" />
<div className="absolute -bottom-24 -right-24 w-96 h-96 bg-cyan-500/10 blur-[120px] animate-pulse" />
{/* Floating Code Snippets (Pure CSS Animations) */}
<div className="absolute inset-0 opacity-20 pointer-events-none select-none font-mono text-[8px] md:text-[10px] text-purple-400/40">
<div className="absolute top-[10%] left-[5%] animate-[pulse_3s_infinite]">GET /api/tenders/sync HTTP/1.1</div>
<div className="absolute top-[20%] right-[10%] animate-[pulse_4s_infinite]">SELECT * FROM active_opportunities;</div>
<div className="absolute bottom-[30%] left-[15%] animate-[pulse_5s_infinite]">AGENT_ORCHESTRATOR.INIT()</div>
<div className="absolute bottom-[10%] right-[5%] animate-[pulse_6s_infinite]">Status: 200 OK | Payload: 4.2k items</div>
</div>
<div className="relative w-64 h-64 flex items-center justify-center mb-12">
{/* Animated Rings - Enhanced */}
<div className="absolute inset-0 border border-purple-500/20 rounded-full animate-[spin_12s_linear_infinite]" />
<div className="absolute inset-4 border border-indigo-500/30 rounded-full animate-[spin_8s_linear_infinite_reverse]" />
<div className="absolute inset-8 border border-cyan-500/40 rounded-full animate-[spin_6s_linear_infinite]" />
{/* Progress Text */}
<div className="flex flex-col items-center relative z-10">
<span className="text-5xl font-black tracking-tighter text-white mb-1 drop-shadow-[0_0_15px_rgba(168,85,247,0.5)]">{progress}%</span>
<span className="text-[9px] uppercase tracking-[0.4em] text-slate-500 font-black">Neural Link</span>
</div>
</div>
<div className="relative z-10 space-y-6 text-center max-w-sm px-6">
<h2 className="text-xl font-bold tracking-tight text-slate-200 animate-in fade-in slide-in-from-bottom-2 duration-300">{message}</h2>
<div className="relative w-72 h-1.5 bg-white/5 rounded-full overflow-hidden border border-white/5">
<div
className="h-full bg-gradient-to-r from-purple-600 via-indigo-500 to-cyan-400 transition-all duration-300 ease-out shadow-[0_0_10px_rgba(168,85,247,0.5)]"
style={{ width: `${progress}%` }}
/>
</div>
<p className="text-[10px] text-slate-500 font-medium tracking-widest uppercase opacity-60">Initializing AndesOps AI Engine</p>
</div>
<div className="absolute bottom-12 flex flex-col items-center gap-2">
<div className="w-1 h-8 bg-gradient-to-b from-purple-500/40 to-transparent" />
<div className="text-[10px] uppercase tracking-[0.5em] text-slate-700 font-black">
Orchestrated by REW Intelligence
</div>
</div>
</div>
);
}
|