Glassmorphism IDE Code Preview Panel

<div class="max-w-6xl mr-auto ml-auto">
    <!-- Glow background for IDE -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full max-w-4xl blur-[100px] rounded-full -z-10 bg-sky-900/10">
    </div>

    <div class="glass-panel overflow-hidden bg-[radial-gradient(circle_at_top_left,var(--tw-gradient-stops))] from-blue-500/10 via-blue-500/0 to-blue-500/10 rounded-2xl backdrop-blur-xl shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5),0_0_60px_-15px_rgba(56,189,248,0.3)]" style="position: relative; --border-gradient: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 16px">

      <!-- Border Beam Animation -->
      <div class="absolute inset-0 z-20 pointer-events-none rounded-2xl overflow-hidden" style="mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; padding: 1px;">
        <div class="absolute top-1/2 left-1/2 w-[200%] h-[200%] -translate-x-1/2 -translate-y-1/2 animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_0deg,transparent_0_340deg,#38bdf8_360deg)] opacity-100">
        </div>
      </div>

      <!-- Toolbar -->
      <div class="flex items-center justify-between px-4 py-3 border-b border-white/5 bg-white/[0.02]">
        <div class="flex items-center gap-2">
          <div class="flex gap-1.5 mr-4">
            <div class="w-2.5 h-2.5 rounded-full bg-red-500/20 border border-red-500/50"></div>
            <div class="w-2.5 h-2.5 rounded-full bg-div class=" w-2.5="" h-2.5="" rounded-full="" bg-green-500="" 20="" border="" border-green-500="" 50"=""></div>
          </div>
          <div class="flex items-center gap-2 px-3 py-1 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-white/60">
            <iconify-icon icon="solar:lock-keyhole-linear" width="10"></iconify-icon>
            sora-core/app.tsx
          </div>
        </div>
        <div class="flex items-center gap-3">
          <span class="flex items-center gap-1 text-[10px] text-green-400 font-mono">
                <span class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span>
          Live Connected
          </span>
          <div class="h-4 w-[1px] bg-white/10"></div>
          <iconify-icon icon="solar:play-linear" class="text-white/40 hover:text-white cursor-pointer transition-colors" width="14"></iconify-icon>
          <iconify-icon icon="solar:settings-linear" class="text-white/40 hover:text-white cursor-pointer transition-colors" width="14"></iconify-icon>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-12 min-h-[500px]">
        <!-- Sidebar -->
        <div class="hidden lg:block lg:col-span-3 text-xs font-mono bg-black/20 border-white/5 border-r pt-4 pr-4 pb-4 pl-4">
          <div class="flex items-center gap-2 text-white/40 mb-4 hover:text-white transition-colors cursor-pointer">
            <iconify-icon icon="solar:folder-with-files-linear"></iconify-icon>
            <span>src</span>
          </div>
          <div class="pl-4 space-y-3">
            <div class="flex items-center gap-2 text-white/40 hover:text-white transition-colors cursor-pointer">
              <iconify-icon icon="solar:folder-linear"></iconify-icon>
              <span class="">components</span>
            </div>
            <div class="pl-4 space-y-2">
              <div class="flex items-center gap-2 text-sky-400 bg-sky-500/10 -mx-2 px-2 py-1 rounded border border-sky-500/20 cursor-pointer">
                <iconify-icon icon="solar:code-file-linear"></iconify-icon>
                <span class="">Hero.tsx</span>
              </div>
              <div class="flex items-center gap-2 text-white/40 hover:text-white transition-colors cursor-pointer">
                <iconify-icon icon="solar:code-file-linear"></iconify-icon>
                <span class="">Nav.tsx</span>
              </div>
            </div>
            <div class="flex items-center gap-2 text-white/40 hover:text-white transition-colors cursor-pointer">
              <iconify-icon icon="solar:folder-linear" class=""></iconify-icon>
              <span class="">lib</span>
            </div>
            <div class="flex items-center gap-2 text-white/40 hover:text-white transition-colors cursor-pointer">
              <iconify-icon icon="solar:document-text-linear"></iconify-icon>
              <span>config.ts</span>
            </div>
          </div>
        </div>

        <!-- Code Area -->
        <div class="col-span-1 lg:col-span-9 sm:text-sm leading-7 overflow-hidden text-xs text-white/80 font-mono pt-6 pr-6 pb-6 pl-6 relative">
          <!-- Line Numbers -->
          <div class="select-none text-white/20 text-right w-10 pr-3 absolute top-6 bottom-0 left-0">
            123456789101112131415
          </div>

          <!-- Code Content with Typing Effect -->
          <div class="pl-8 pt-10" id="typewriter-code">
            <div class="text-neutral-500">
              // Initialize Sora Neural Core
            </div>
            <div class="">
              <span class="text-sky-400">import</span>
              {
              <span class="text-yellow-200">NeuralInterface</span>
              }
              <span class="text-sky-400">from</span>
              <span class="text-green-300">'@sora/core'</span>
              ;
            </div>
            <div class="">
              <span class="text-sky-400">import</span>
              {
              <span class="text-yellow-200">QuantumState</span>
              }
              <span class="text-sky-400">from</span>
              <span class="text-green-300">'@sora/state'</span>
              ;
            </div>

            <div class="">
              <span class="text-sky-400">export default function</span>
              <span class="text-blue-300">SystemDeploy</span>
              () {
            </div>
            <div class="pl-4">
              <span class="text-sky-400">const</span>
              [status, setStatus] =
              <span class="text-blue-300">useQuantumState</span>
              (
              <span class="text-green-300">'idle'</span>
              );
            </div>

            <div class="pl-4">
              <span class="text-sky-400">const</span>
              <span class="text-blue-300">initiateSequence</span>
              =
              <span class="text-sky-400">async</span>
              () =&gt; {
            </div>
            <div class="pl-8">
              <span class="text-sky-400">await</span>
              <span class="text-blue-300">NeuralInterface</span>
              .
              <span class="text-blue-300">connect</span>
              ({
            </div>
            <div class="pl-12">
              mode:
              <span class="text-green-300">'autonomous'</span>
              ,
            </div>
            <div class="pl-12">
              latency:
              <span class="text-orange-300">0</span>
              ,
            </div>
            <div class="pl-12">
              security:
              <span class="text-green-300">'max_grade'</span>
            </div>
            <div class="pl-8">});</div>

            <div class="pl-8">
              <span class="text-neutral-400">
                    // Dynamic injection point
                  </span>
            </div>
            <div class="pl-8 flex items-center">
              <span id="typing-text" class="text-white">setStatus('act</span>
              <span class="typing-cursor"></span>
            </div>
            <div class="pl-4">};</div>
            <div class="">}</div>
          </div>
        </div>
      </div>
    </div>
  </div>