Neural Data Intake Hero with Drag-and-Drop Zone

<div
  style="--color-paper: #0a0a0b; --color-ink: #f1f1f1; --color-ink-70: #a1a1aa; --color-ink-50: #52525b; --color-accent: #3b82f6; --font-sans: 'Inter', system-ui, sans-serif; height: 100vh; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); display: flex; overflow: hidden; border: 1px solid #27272a;"
  class="antialiased">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .nav-label {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--color-ink-50);
      white-space: nowrap;
      transition: color 0.3s;
      cursor: pointer;
    }

    .nav-label:hover {
      color: var(--color-ink);
    }

    .nav-label.active {
      color: var(--color-accent);
      font-weight: 700;
    }

    .drop-zone {
      border: 1px dashed rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.02);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .drop-zone:hover {
      background: rgba(59, 130, 246, 0.05);
      border-color: var(--color-accent);
    }

    .scan-line {
      position: absolute;
      top: -10%;
      left: 0;
      width: 100%;
      height: 40%;
      background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.1), transparent);
      animation: scan 4s infinite ease-in-out;
      pointer-events: none;
    }

    @keyframes scan {
      0% {
        transform: translateY(-100%);
      }

      100% {
        transform: translateY(400%);
      }
    }

    .pulse-dot {
      width: 6px;
      height: 6px;
      background: var(--color-accent);
      border-radius: 50%;
      box-shadow: 0 0 12px var(--color-accent);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 0.4;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.3);
      }
    }

    .tag {
      font-size: 9px;
      padding: 3px 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-ink-70);
      background: rgba(255, 255, 255, 0.03);
    }

    .glass-panel {
      border-right: 1px solid rgba(255, 255, 255, 0.05);
    }
  </style>

  <nav class="w-20 glass-panel flex flex-col items-center py-12 gap-10">
    <div class="text-blue-500 font-bold text-xl">V</div>
    <span class="nav-label active">Sources</span>
    <span class="nav-label">Syncs</span>
    <span class="nav-label">Mapping</span>
    <span class="nav-label">Flows</span>
    <span class="nav-label">Logs</span>
    <span class="nav-label">Security</span>
    <span class="nav-label">Nodes</span>
    <div class="mt-auto text-[10px] opacity-30 tracking-widest">v2.4</div>
  </nav>

  <main class="flex-1 grid grid-cols-[38%_62%] h-full">
    <section class="p-16 flex flex-col justify-center glass-panel bg-[#0d0d0f]">
      <div class="text-[10px] tracking-[0.3em] uppercase text-blue-500 mb-10 font-bold">System Initialization</div>
      <h1 class="text-5xl leading-[1.1] font-light tracking-tight mb-8">
        Scale <span class="font-semibold text-white">Vantage</span> across your infrastructure.
      </h1>
      <p class="text-lg leading-relaxed text-zinc-400 mb-10 max-w-md">
        Integrate your system logs or cloud database exports. Our neural engine automates architectural mapping in
        milliseconds.
      </p>

      <div class="flex items-center gap-4">
        <div
          class="inline-flex items-center gap-3 px-1 py-2 border-b border-zinc-700 transition-all hover:border-blue-500 group cursor-pointer">
          <div class="pulse-dot hidden" id="status-dot"></div>
          <span class="text-sm font-medium tracking-wide text-zinc-300 group-hover:text-white" id="cta-text">Awaiting source files</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            class="opacity-40 group-hover:translate-x-1 transition-transform">
            <path d="M5 12h14M12 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </section>

    <section class="p-16 flex flex-col justify-center relative overflow-hidden">
      <div class="flex justify-between items-center mb-10">
        <div class="text-[10px] tracking-[0.2em] uppercase text-zinc-500">Intake Terminal</div>
        <div class="text-[10px] tracking-[0.1em] text-zinc-600 font-mono">01 // 04</div>
      </div>

      <div class="drop-zone flex-1 rounded-xl relative flex flex-col items-center justify-center p-12 overflow-hidden"
        id="drop-area">
        <div class="scan-line"></div>

        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="mb-8 p-6 rounded-full bg-zinc-900/50 border border-white/5">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 17V3m0 0l-5 5m5-5l5 5M4 21h16" />
            </svg>
          </div>
          <p class="text-xl font-light text-white mb-3">Sync local infrastructure data</p>
          <p class="text-xs text-zinc-500 tracking-widest uppercase">Drag files or click to navigate</p>
        </div>

        <div class="absolute bottom-10 flex gap-4">
          <span class="tag">JSON</span>
          <span class="tag">YAML</span>
          <span class="tag">SQL</span>
          <span class="tag">LOG</span>
        </div>
      </div>

      <div class="mt-12 grid grid-cols-2 gap-12">
        <div>
          <div class="text-[10px] tracking-widest uppercase text-blue-400 mb-3 font-semibold">Neural Parsing</div>
          <p class="text-xs text-zinc-500 leading-relaxed">
            Automatic schema detection is active. Vantage supports AWS CloudWatch, Kubernetes manifests, and Prometheus
            exports.
          </p>
        </div>
        <div class="flex flex-col items-end justify-end">
          <div class="text-[9px] text-zinc-600 text-right leading-loose tracking-tight uppercase">
            End-to-End Vault Encryption<br>
            Zero-Trust Data Isolation Enabled
          </div>
        </div>
      </div>
    </section>
  </main>

  <script>
    (function() {
      const cta = document.getElementById('cta-text');
      const dot = document.getElementById('status-dot');
      const zone = document.getElementById('drop-area');
      
      setTimeout(() => {
        cta.innerText = "Indexing System Nodes...";
        cta.classList.add('text-blue-400');
        dot.style.display = "block";
      }, 2500);

      zone.addEventListener('dragover', (e) => {
        e.preventDefault();
        zone.style.borderColor = "#3b82f6";
        zone.style.background = "rgba(59, 130, 246, 0.08)";
      });

      zone.addEventListener('dragleave', () => {
        zone.style.borderColor = "rgba(255, 255, 255, 0.1)";
        zone.style.background = "rgba(255, 255, 255, 0.02)";
      });
    })();
  </script>
</div>