Crypto SEPA Liquidity Hero with Radar UI

<div
  style="background-color: #020617; color: #f8fafc; font-family: 'Inter', system-ui, sans-serif; height: 100vh; width: 100vw; overflow: hidden; display: flex; flex-direction: column; position: relative;">
  <style>
    @keyframes radarScan {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes slowRotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulseGlow {

      0%,
      100% {
        opacity: 0.3;
      }

      50% {
        opacity: 0.6;
      }
    }

    .radar-container {
      perspective: 1000px;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  </style>
  <script src="https://unpkg.com/lucide@latest"></script>

  <!-- Navigation -->
  <nav class="flex justify-between items-center px-10 py-6 w-full z-50">
    <div class="text-xl font-bold tracking-tighter flex items-center gap-2">
      <div style="width: 12px; height: 12px; background: #38bdf8; border-radius: 2px;"></div>
      NEXUS.SETTLE
    </div>
    <button class="px-5 py-2 rounded-full border border-slate-800 bg-slate-900/50 hover:bg-slate-800 transition-all text-sm font-medium backdrop-blur-md">
      INSTITUTIONAL ACCESS
    </button>
  </nav>

  <!-- Main Grid -->
  <main class="flex-1 grid grid-cols-1 lg:grid-cols-2 items-center px-20 relative">

    <!-- Content Section -->
    <div class="max-w-xl z-10">
      <div
        class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-sky-500/20 bg-sky-500/5 text-sky-400 text-xs font-bold tracking-widest mb-6 uppercase">
        <span class="relative flex h-2 w-2">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 bg-sky-500"></span>
        </span>
        MiCA REGULATED • VASP LICENSED
      </div>

      <h1 class="text-6xl font-medium tracking-tight mb-8 leading-[1.1]"
        style="background: linear-gradient(to bottom, #fff 40%, #64748b); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
        INSTANT SEPA.<br>ZERO SPREAD.<br>GLOBAL SCALE.
      </h1>

      <p class="text-slate-400 text-lg leading-relaxed mb-10 max-w-md">
        The preferred liquidity bridge for European hedge funds and DAOs.
        Liquidate USDC to EUR directly into your IBAN with sub-second finality.
      </p>

      <div class="grid grid-cols-3 gap-8 pt-8 border-t border-slate-800/50">
        <div>
          <div class="text-[10px] uppercase tracking-widest text-slate-500 mb-1">Settlement</div>
          <div class="text-sm font-semibold text-slate-200">SEPA Instant</div>
        </div>
        <div>
          <div class="text-[10px] uppercase tracking-widest text-slate-500 mb-1">Compliance</div>
          <div class="text-sm font-semibold text-slate-200">L1 Verified</div>
        </div>
        <div>
          <div class="text-[10px] uppercase tracking-widest text-slate-500 mb-1">Live EUR/USD</div>
          <div class="text-sm font-semibold text-sky-400">1.0842</div>
        </div>
      </div>
    </div>

    <!-- Interactive Radar Section -->
    <div class="relative flex justify-center items-center h-[600px] radar-container">
      <div
        style="position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%); pointer-events: none;">
      </div>

      <!-- Visual Orbits -->
      <div
        style="position: absolute; width: 480px; height: 480px; border: 1px dashed rgba(255,255,255,0.05); border-radius: 50%;">
      </div>
      <div
        style="position: absolute; width: 320px; height: 320px; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; background: rgba(2, 6, 23, 0.4);">
      </div>

      <!-- Scanning Line -->
      <div
        style="position: absolute; width: 240px; height: 1px; background: linear-gradient(90deg, transparent, #38bdf8); transform-origin: left; top: 50%; left: 50%; animation: radarScan 5s linear infinite; opacity: 0.5;">
      </div>

      <!-- Crosshairs -->
      <div class="absolute w-full h-[1px] bg-slate-800/30" style="top: 50%;"></div>
      <div class="absolute h-full w-[1px] bg-slate-800/30" style="left: 50%;"></div>

      <!-- Nodes -->
      <div
        class="absolute top-10 left-1/2 -translate-x-1/2 bg-slate-900 border border-slate-700 px-4 py-2 rounded-full text-[10px] text-slate-300 flex flex-col items-center">
        <span class="text-slate-500 uppercase tracking-tighter">Chain</span>
        <span class="font-bold">ETHEREUM MAINNET</span>
      </div>
      <div
        class="absolute bottom-10 left-1/2 -translate-x-1/2 bg-slate-900 border border-slate-700 px-4 py-2 rounded-full text-[10px] text-slate-300 flex flex-col items-center">
        <span class="text-slate-500 uppercase tracking-tighter">Destination</span>
        <span class="font-bold">REVOLUT BUSINESS</span>
      </div>

      <!-- Curved Text Label -->
      <div style="position: absolute; width: 380px; height: 380px; animation: slowRotate 20s linear infinite;">
        <svg viewBox="0 0 100 100" class="w-full h-full">
          <path id="curve-path" d="M 50, 50 m -40, 0 a 40,40 0 1,1 80,0 a 40,40 0 1,1 -80,0" fill="transparent" />
          <text font-size="2.8" fill="#334155" letter-spacing="2.5" font-weight="700">
            <textPath href="#curve-path">MICA COMPLIANT SETTLEMENT • REAL-TIME LIQUIDITY • NO SLIPPAGE •</textPath>
          </text>
        </svg>
      </div>

      <!-- Transaction Trigger -->
      <button id="nexus-trigger" class="relative z-20 group">
        <div class="absolute inset-0 bg-sky-400 blur-2xl opacity-20 group-hover:opacity-40 transition-opacity"></div>
        <div class="w-20 h-20 rounded-full bg-white flex items-center justify-center text-slate-950 transition-transform active:scale-90">
          <i data-lucide="arrow-down-up" class="w-8 h-8"></i>
        </div>
      </button>

      <!-- Input HUD -->
      <div class="absolute top-[28%] right-[22%] text-right">
        <div class="text-[10px] text-sky-400 font-bold tracking-widest mb-1">DEPOSIT USDC</div>
        <input type="number" value="25000.00" class="bg-transparent text-3xl font-light text-white outline-none border-none text-right w-48">
      </div>

      <div class="absolute bottom-[28%] left-[22%] text-left">
        <div class="text-[10px] text-sky-400 font-bold tracking-widest mb-1">RECEIVE EUR</div>
        <input type="number" value="23062.50" readonly class="bg-transparent text-3xl font-light text-white outline-none border-none w-48">
      </div>
    </div>
  </main>

  <!-- Status Bar -->
  <footer class="p-10 flex justify-end">
    <div
      class="flex items-center gap-3 px-4 py-2 rounded-full bg-slate-900/80 border border-slate-800 backdrop-blur-sm">
      <div class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_10px_#10b981]"></div>
      <span class="text-[10px] font-bold tracking-widest text-slate-300">CORE SYSTEMS NOMINAL</span>
    </div>
  </footer>

  <script>
    lucide.createIcons();
    const trigger = document.getElementById('nexus-trigger');
    trigger.addEventListener('click', () => {
      trigger.style.transform = 'rotate(180deg)';
      setTimeout(() => trigger.style.transform = 'rotate(0deg)', 500);
    });

    document.addEventListener('mousemove', (e) => {
      const x = (window.innerWidth / 2 - e.pageX) / 50;
      const y = (window.innerHeight / 2 - e.pageY) / 50;
      const container = document.querySelector('.radar-container');
      container.style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`;
    });
  </script>
</div>