Glassmorphic Card with Code Typing Animation

<div class="relative lg:p-8 bg-black/40 border-white/10 border rounded-[28px] pt-6 pr-6 pb-6 pl-6 backdrop-blur-xl">
      <div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[28px] bg-gradient-to-b from-white/10 to-transparent"></div>
      <div class="relative mb-6">
        <!-- Code window mock with typing animation -->
        <div class="ring-1 ring-white/10 overflow-hidden bg-white/5 rounded-2xl">
          <div class="h-8 w-full bg-white/10 flex items-center px-3">
            <div class="flex gap-2">
              <div class="w-3 h-3 rounded-full bg-red-400"></div>
              <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
              <div class="w-3 h-3 rounded-full bg-green-400"></div>
            </div>
          </div>
          <div class="pt-4 pr-4 pb-4 pl-4 typing-container" id="codeContainer">
            <!-- Lines will be populated by JavaScript with typing effect -->
          <div class="text-sm text-gray-400 font-geist-mono mb-2 typing-line" style="opacity: 1; border-right: 2px solid rgb(16, 185, 129);">/</div></div>
        </div>
      </div>
      <div class="relative">
        <h3 class="text-2xl text-white mb-3 font-geist tracking-tight font-light" style="">Design &amp; Prototype</h3>
        <p class="text-gray-300 leading-relaxed text-base font-geist" style="">
          From wireframes to high-fidelity designs, I create <span class="font-semibold text-white font-geist" style="">interactive prototypes</span> that bring ideas to life and enable early user testing.
        </p>
      </div>
      <div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-[28px] ring-1 ring-white/10"></div>
    </div>