Service Showcase Card with Browser Mockup

<div
  class="group relative overflow-hidden sm:p-8 hover:bg-white/10 transition-all duration-500 flex flex-col bg-white/5 h-[600px] border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 max-w-2xl">
  <!-- Enhanced background devices -->
  <div class="relative">
    <!-- Large window with refined styling -->
    <div
      class="bg-neutral-900/90 w-full h-64 sm:h-72 border-white/20 border rounded-xl shadow-[0_40px_120px_rgba(0,0,0,0.6)]">
      <!-- Enhanced title bar -->
      <div class="absolute left-0 right-0 top-0 bg-white/15 h-8 border-white/20 rounded-t-xl border-b backdrop-blur-sm">
        <div class="absolute left-4 top-2.5 flex items-center gap-2">
          <span class="h-2.5 w-2.5 rounded-full bg-rose-400/90 shadow-sm"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-amber-400/90 shadow-sm"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-emerald-400/90 shadow-sm"></span>
        </div>
        <div class="absolute left-1/2 top-2.5 -translate-x-1/2">
          <div class="h-2 w-16 rounded-full bg-white/20"></div>
        </div>
        <div class="absolute right-4 top-2.5">
          <div class="h-2 w-8 rounded-full bg-white/15"></div>
        </div>
      </div>

      <!-- Enhanced wireframe content -->
      <div class="absolute inset-4 top-12 rounded-lg">
        <!-- Header section -->
        <div class="mb-4 pb-3 border-b border-white/10">
          <div class="flex items-center justify-between mb-2">
            <div class="h-3 w-20 rounded-full bg-blue-400/40"></div>
            <div class="flex gap-1">
              <div class="h-2 w-2 rounded-full bg-white/20"></div>
              <div class="h-2 w-2 rounded-full bg-white/20"></div>
              <div class="h-2 w-2 rounded-full bg-white/20"></div>
            </div>
          </div>
          <div class="h-2 w-32 rounded-full bg-white/15 mb-1"></div>
          <div class="h-2 w-24 rounded-full bg-white/10"></div>
        </div>

        <!-- Main content grid -->
        <div class="grid grid-cols-3 gap-3 mb-4">
          <div class="space-y-2">
            <div class="bg-white/10 w-full h-16 border-white/15 border rounded-lg"></div>
            <div class="h-2 w-full rounded-full bg-white/15"></div>
            <div class="h-1 w-3/4 rounded-full bg-white/10"></div>
          </div>
          <div class="space-y-2">
            <div class="bg-white/10 w-full h-16 border-white/15 border rounded-lg"></div>
            <div class="h-2 w-full rounded-full bg-white/15"></div>
            <div class="h-1 w-2/3 rounded-full bg-white/10"></div>
          </div>
          <div class="space-y-2">
            <div class="h-16 w-full rounded-lg bg-white/10 border border-white/15"></div>
            <div class="h-2 w-full rounded-full bg-white/15"></div>
            <div class="h-1 w-4/5 rounded-full bg-white/10"></div>
          </div>
        </div>

        <!-- Bottom section -->
        <div class="flex gap-3 mt-4">
          <div class="flex-1 space-y-2">
            <div class="h-12 w-full rounded-lg bg-white/5 border border-white/10"></div>
            <div class="flex gap-2">
              <div class="h-1.5 w-8 rounded-full bg-emerald-400/30"></div>
              <div class="h-1.5 w-12 rounded-full bg-white/15"></div>
            </div>
          </div>
          <div class="w-16 space-y-2">
            <div class="h-6 w-full rounded bg-emerald-400/20"></div>
            <div class="h-4 w-full rounded bg-white/10"></div>
            <div class="h-2 w-full rounded bg-white/10"></div>
          </div>
        </div>

        <!-- Floating elements -->


      </div>
    </div>
  </div>

  <!-- Enhanced content -->
  <div class="relative flex-1 flex flex-col justify-end mt-6">
    <div
      class="inline-flex gap-2 bg-blue-400/10 border-blue-400/20 border rounded-full mb-4 pt-1 pr-3 pb-1 pl-3 items-center w-fit">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="paintbrush"
        class="lucide lucide-paintbrush text-blue-400" data-icon-replaced="true"
        style="width: 14px; height: 14px; color: rgb(96, 165, 250);">
        <path d="m14.622 17.897-10.68-2.913" class=""></path>
        <path
          d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"
          class=""></path>
        <path
          d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"
          class=""></path>
      </svg>
      <span class="text-xs font-medium text-blue-400 font-geist-mono" style="">Design</span>
    </div>
    <h3
      class="text-2xl md:text-3xl font-semibold tracking-tight text-white mb-3 group-hover:text-blue-300 transition-colors"
      style="">UX/UI Design</h3>
    <p class="text-white/70 leading-relaxed text-base sm:text-lg max-w-2xl font-geist-mono" style="">Creating intuitive
      and aesthetically pleasing user interfaces that offer a frictionless experience. We combine creativity with
      usability to design experiences users love.</p>
  </div>
</div>