Crypto-to-Fiat Converter Hero Section

<div class="relative min-h-screen w-full overflow-hidden font-mono text-slate-200"
  style="background-color: #020617; background-image: radial-gradient(circle at 50% 50%, #0f172a 0%, #020617 100%);">
  <!-- Background Grid Effect -->
  <div class="absolute inset-0 opacity-10"
    style="background-image: linear-gradient(#94a3b8 1px, transparent 1px), linear-gradient(90deg, #94a3b8 1px, transparent 1px); background-size: 50px 50px;">
  </div>

  <!-- Navigation -->
  <nav class="relative z-50 flex items-center justify-between px-8 py-6">
    <div class="flex items-center gap-2">
      <div class="h-6 w-6 rounded-full border-2 border-cyan-400" style="box-shadow: 0 0 15px #22d3ee;"></div>
      <span class="text-lg font-black tracking-tighter text-white">AETHER.FLUX</span>
    </div>
    <div class="flex items-center gap-8 text-[10px] uppercase tracking-[0.2em]">
      <a href="#" class="hover:text-cyan-400 transition-colors">Protocol</a>
      <a href="#" class="hover:text-cyan-400 transition-colors">Nodes</a>
      <button class="px-6 py-2 border border-slate-700 bg-slate-900/50 hover:bg-cyan-400 hover:text-black transition-all duration-300">
        Sync Wallet
      </button>
    </div>
  </nav>

  <!-- Main Grid -->
  <div class="relative z-10 mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-8 pt-12 lg:grid-cols-2 lg:pt-24">

    <!-- Left Column: Content -->
    <div class="space-y-8">
      <div
        class="inline-flex items-center gap-2 rounded-full border border-cyan-500/30 bg-cyan-500/10 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-cyan-400">
        <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-cyan-400"></span>
        Neural Link Active
      </div>

      <h1 class="text-6xl font-black leading-tight tracking-tighter text-white lg:text-8xl"
        style="text-shadow: 0 0 40px rgba(255,255,255,0.1);">
        QUANTUM<br/>SETTLEMENT.
      </h1>

      <p class="max-w-md text-lg leading-relaxed text-slate-400">
        Automated asset migration for the sovereign individual. Bridge digital liquidity to physical infrastructure with
        zero latency and absolute transparency.
      </p>

      <div class="grid grid-cols-2 gap-4 pt-8">
        <div class="border-l border-slate-800 pl-4">
          <div class="text-[10px] uppercase tracking-widest text-slate-500">Latency</div>
          <div class="text-xl font-bold text-white">0.004 MS</div>
        </div>
        <div class="border-l border-slate-800 pl-4">
          <div class="text-[10px] uppercase tracking-widest text-slate-500">Protocol</div>
          <div class="text-xl font-bold text-cyan-400">L3 ISOLATED</div>
        </div>
      </div>
    </div>

    <!-- Right Column: Interactive Component -->
    <div id="converter-container" class="relative flex aspect-square w-full items-center justify-center">
      <!-- Rotating Decorative Rings -->
      <div class="absolute h-[80%] w-[80%] rounded-full border border-slate-800 animate-spin"
        style="animation-duration: 20s; border-style: dashed;"></div>
      <div class="absolute h-[65%] w-[65%] rounded-full border border-cyan-500/20 animate-spin"
        style="animation-duration: 15s; animation-direction: reverse;"></div>

      <!-- Core UI -->
      <div class="relative z-20 w-full max-w-md rounded-2xl border border-white/10 bg-slate-900/40 p-8 backdrop-blur-xl"
        style="box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">

        <div class="mb-8 flex justify-between">
          <span class="text-[10px] uppercase tracking-widest text-cyan-400">Asset Migration Tool</span>
          <span class="text-[10px] uppercase tracking-widest text-slate-500" id="current-rate">1 USDC = 84.42 INR</span>
        </div>

        <!-- Input Section -->
        <div class="group relative mb-6">
          <label class="mb-2 block text-[10px] uppercase tracking-widest text-slate-500">Source (USDC)</label>
          <input type="number" id="usdc-input" value="1000" class="w-full bg-transparent text-4xl font-light tracking-tighter text-white outline-none" style="font-family: monospace;" />
          <div class="h-px w-full bg-slate-800 group-focus-within:bg-cyan-400 transition-colors"></div>
        </div>

        <!-- Divider with Pulsing Icon -->
        <div class="relative my-8 flex justify-center">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-slate-800"></div>
          </div>
          <div
            class="relative flex h-10 w-10 items-center justify-center rounded-full border border-slate-700 bg-slate-900">
            <svg class="h-4 w-4 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
          </div>
        </div>

        <!-- Output Section -->
        <div class="mb-10">
          <label class="mb-2 block text-[10px] uppercase tracking-widest text-slate-500">Destination (INR)</label>
          <div id="inr-output" class="text-4xl font-light tracking-tighter text-slate-400"
            style="font-family: monospace;">84,420.00</div>
          <div class="mt-2 text-[10px] text-cyan-500/50 uppercase tracking-widest italic">Slippage Protection Enabled
          </div>
        </div>

        <!-- Action Button -->
        <button class="relative w-full group overflow-hidden py-4 rounded-lg bg-white text-black font-black uppercase tracking-[0.3em] text-xs transition-all hover:scale-[1.02] active:scale-[0.98]">
          <span class="relative z-10">Initiate Sequence</span>
          <div class="absolute inset-0 bg-cyan-400 translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
        </button>
      </div>

      <!-- Orbital Data Points -->
      <div
        class="absolute top-10 right-10 rounded-md border border-slate-800 bg-slate-950/80 p-3 text-[9px] uppercase tracking-widest text-slate-400 backdrop-blur-md">
        Gas: <span class="text-green-400">0.0001 ETH</span>
      </div>
      <div
        class="absolute bottom-10 left-10 rounded-md border border-slate-800 bg-slate-950/80 p-3 text-[9px] uppercase tracking-widest text-slate-400 backdrop-blur-md">
        Nodes: <span class="text-cyan-400">CONNECTED</span>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.js"></script>
  <script>
    (function() {
      const usdcInput = document.getElementById('usdc-input');
      const inrOutput = document.getElementById('inr-output');
      const rate = 84.42;

      function updateValue() {
        const val = parseFloat(usdcInput.value) || 0;
        const converted = (val * rate).toLocaleString(undefined, {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        });
        inrOutput.textContent = converted;
      }

      usdcInput.addEventListener('input', updateValue);
      
      // Visual flair: slightly move the container based on mouse position
      const container = document.getElementById('converter-container');
      window.addEventListener('mousemove', (e) => {
        const xAxis = (window.innerWidth / 2 - e.pageX) / 50;
        const yAxis = (window.innerHeight / 2 - e.pageY) / 50;
        container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
      });
    })();
  </script>
</div>