UX/UI Service Card with Browser Mockup & Hover Effect

<div
  class="group relative overflow-hidden sm:p-8 hover:bg-white/10 transition-all duration-500 flex flex-col gap-6 bg-white/5 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6">
  <!-- Enhanced background devices -->
  <div class="relative">
    <!-- Large window with refined styling -->
    <div
      class="bg-neutral-900/90 w-full h-44 sm:h-56 border-white/20 border rounded-xl shadow-[0_40px_120px_rgba(0,0,0,0.6)]">
      <div class="absolute inset-0 bg-gradient-to-br from-white/15 to-transparent opacity-30 rounded-xl"></div>
      <!-- Enhanced title bar -->
      <div class="absolute left-0 right-0 top-0 bg-white/15 h-7 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 w-2 rounded-full bg-rose-400/90 shadow-sm"></span>
          <span class="h-2 w-2 rounded-full bg-amber-400/90 shadow-sm"></span>
          <span class="h-2 w-2 rounded-full bg-emerald-400/90 shadow-sm"></span>
        </div>
        <div class="absolute right-4 top-2.5">
          <div class="h-2 w-12 rounded-full bg-white/20"></div>
        </div>
      </div>
      <!-- Content elements -->
      <div class="absolute inset-4 top-11 rounded-lg">
        <div class="bg-white/10 w-full h-8 rounded-lg mb-3"></div>
        <div class="grid grid-cols-2 gap-2">
          <div class="bg-white/10 w-full h-8 rounded-lg mb-3"></div>
          <div class="bg-white/10 w-full h-8 rounded-lg mb-3"></div>

        </div>
        <div class="grid grid-cols-2 gap-2">
          <div class="bg-white/10 w-full h-8 rounded-lg mb-1"></div>
          <div class="bg-white/10 w-full h-8 rounded-lg mb-3"></div>

        </div>
        <div class="grid grid-cols-2 gap-2">
          <div class="bg-white/10 w-full h-8 rounded-lg mb-3"></div>
          <div class="bg-white/10 w-full h-8 rounded-lg mb-3"></div>

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

  <!-- Enhanced content -->
  <div class="relative">
    <div class="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-blue-400/10 border border-blue-400/20">
      <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">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">
      UX/UI Design</h3>
    <p class="text-white/70 leading-relaxed text-base sm:text-lg max-w-2xl font-geist-mono">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>