Three-Column Crypto Treasury Hero with Swap Form

<div class="flex flex-col lg:grid lg:grid-cols-[1fr_1.2fr_1fr] min-h-screen w-full bg-[#F2F0E9] text-[#111111]"
  style="font-family: 'Inter', sans-serif;">

  <!-- Left Column: Navigation -->
  <aside class="hidden lg:flex flex-col justify-between p-12 border-r border-black/10 relative">
    <div>
      <div class="flex items-center gap-2.5 mb-8 text-2xl italic" style="font-family: 'Playfair Display', serif;">
        <span class="inline-block w-[30px] height-[30px] border border-black rounded-full text-center leading-[28px] text-[10px] not-italic" style="font-family: 'Inter', sans-serif;">NF</span>
        NEXUS FLOW
      </div>

      <nav class="flex flex-col gap-6">
        <a href="#" class="text-2xl text-[#555555] hover:text-[#111111] hover:italic transition-all duration-300"
          style="font-family: 'Playfair Display', serif;">Exchange</a>
        <a href="#" class="text-2xl text-[#555555] hover:text-[#111111] hover:italic transition-all duration-300"
          style="font-family: 'Playfair Display', serif;">Billing</a>
        <a href="#" class="text-2xl text-[#555555] hover:text-[#111111] hover:italic transition-all duration-300"
          style="font-family: 'Playfair Display', serif;">Security</a>
        <a href="#" class="text-2xl text-[#111111] italic font-medium"
          style="font-family: 'Playfair Display', serif;">Enterprise</a>
      </nav>
    </div>

    <div class="mt-auto">
      <div class="text-[0.75rem] uppercase tracking-widest opacity-60 mb-2">Liquidity Pulse</div>
      <div class="flex justify-between border-t border-black/40 pt-4 mt-4 text-[0.75rem] uppercase tracking-widest">
        <span>USDC / INR</span>
        <span>83.48 (+0.12%)</span>
      </div>
      <div class="flex justify-between border-t border-black/40 pt-4 mt-4 text-[0.75rem] uppercase tracking-widest">
        <span>Network</span>
        <span class="text-[#8B8C67]">Optimal</span>
      </div>
    </div>
  </aside>

  <!-- Center Column: Hero Content -->
  <main class="flex flex-col items-center text-center py-16 px-8 bg-[#F2F0E9]">
    <h1 class="text-6xl lg:text-8xl uppercase text-[#1A2621] leading-[0.95] tracking-tighter mb-4"
      style="font-family: 'Playfair Display', serif;">
      Pure Capital
      <span class="block text-4xl italic lowercase mt-2 text-[#6B6C4B]" style="font-family: 'Playfair Display', serif; text-transform: none;">seamless velocity</span>
    </h1>

    <div class="text-[0.75rem] uppercase tracking-widest text-[#555555] mb-4">
      High-Liquidity • Global Standards
    </div>

    <div class="relative w-full max-w-[400px] h-[500px] my-12 overflow-hidden group">
      <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2938&auto=format&fit=crop" alt="Corporate Architecture" class="w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110" style="filter: contrast(1.1) saturate(0.8) sepia(0.2);">
      <div class="absolute bottom-8 left-0 right-0 text-white z-10">
        <span class="block text-[0.7rem] uppercase tracking-[0.2em] mb-2 drop-shadow-md">Global Treasury</span>
        <span class="text-3xl drop-shadow-md" style="font-family: 'Playfair Display', serif;">Elite Settlements</span>
      </div>
    </div>

    <div class="max-w-[320px] mt-8">
      <p class="text-lg italic leading-relaxed text-[#555555]" style="font-family: 'Playfair Display', serif;">
        "Reimagining the bridge between digital assets and traditional bank rails with absolute precision."
      </p>
    </div>
  </main>

  <!-- Right Column: Interface -->
  <section class="bg-[#1A2621] text-[#F2F0E9] p-12 flex flex-col justify-center relative">
    <div
      class="absolute top-8 right-8 border border-white/20 rounded-full w-20 h-20 flex items-center justify-center text-center text-[0.6rem] uppercase animate-spin-slow">
      Premium<br>Tier
    </div>

    <h2 class="text-5xl lg:text-6xl mb-12 leading-[1.1]" style="font-family: 'Playfair Display', serif;">
      Initiate
      <span class="block text-[#8B8C67] italic">Transfer</span>
    </h2>

    <form id="swap-form" onsubmit="event.preventDefault();">
      <div class="relative mb-8">
        <span class="absolute -top-2.5 left-8 bg-[#1A2621] px-2 text-[0.75rem] text-[#8B8C67] tracking-wider uppercase">Deposit Amount</span>
        <div
          class="w-full border border-white/30 rounded-full py-5 px-8 flex justify-between items-center transition-all hover:border-[#8B8C67]">
          <input type="number" id="input-amount" value="5000" class="bg-transparent border-none text-white text-xl w-[70%] outline-none">
          <span class="text-sm opacity-60">USDC</span>
        </div>
      </div>

      <div class="relative mb-8">
        <span class="absolute -top-2.5 left-8 bg-[#1A2621] px-2 text-[0.75rem] text-[#8B8C67] tracking-wider uppercase">Projected Payout</span>
        <div class="w-full border border-white/30 rounded-full py-5 px-8 flex justify-between items-center opacity-80">
          <input type="text" id="output-amount" value="4,17,400.00" readonly class="bg-transparent border-none text-white text-xl w-[70%] outline-none">
          <span class="text-sm opacity-60">INR</span>
        </div>
      </div>

      <button class="w-full bg-[#F2F0E9] text-[#1A2621] rounded-full py-5 text-sm font-medium tracking-widest uppercase hover:bg-[#8B8C67] hover:text-white transition-colors duration-300">
        Execute Settlement
      </button>
    </form>

    <div class="mt-16 border-t border-white/10">
      <div class="flex items-baseline gap-4 py-6 border-b border-white/10 group cursor-default">
        <span class="text-[0.7rem] text-[#8B8C67]">01</span>
        <span class="text-xl flex-grow" style="font-family: 'Playfair Display', serif;">Verified Corridors</span>
        <span class="opacity-50 transition-transform group-hover:rotate-90">+</span>
      </div>
      <div class="flex items-baseline gap-4 py-6 border-b border-white/10 group cursor-default">
        <span class="text-[0.7rem] text-[#8B8C67]">02</span>
        <span class="text-xl flex-grow" style="font-family: 'Playfair Display', serif;">Deep Liquidity Pools</span>
        <span class="opacity-50 transition-transform group-hover:rotate-90">+</span>
      </div>
      <div class="flex items-baseline gap-4 py-6 border-b border-white/10 group cursor-default">
        <span class="text-[0.7rem] text-[#8B8C67]">03</span>
        <span class="text-xl flex-grow" style="font-family: 'Playfair Display', serif;">Automated Tax Sync</span>
        <span class="opacity-50 transition-transform group-hover:rotate-90">+</span>
      </div>
    </div>
  </section>

  <style>
    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .animate-spin-slow {
      animation: spin-slow 15s linear infinite;
    }
  </style>

  <script>
    const inputAmount = document.getElementById('input-amount');
    const outputAmount = document.getElementById('output-amount');
    const rate = 83.48;

    inputAmount.addEventListener('input', (e) => {
      const val = parseFloat(e.target.value) || 0;
      outputAmount.value = (val * rate).toLocaleString('en-IN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    });
  </script>
</div>