Productivity Analytics Card

<div class="bg-gradient-to-t from-indigo-500/20 to-purple-600/10 hover:from-indigo-500/30 hover:to-purple-600/20 border border-indigo-500/30 hover:border-indigo-500/60 rounded-2xl p-6 backdrop-blur-sm transition-all duration-500 hover:shadow-2xl hover:shadow-indigo-500/30 group text-center" style="transform: none;">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,800,900&display=swap'); .hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-lift:hover { transform: translateY(-8px) scale(1.02); }
  </style>
  <div class="hover-lift" style="font-family: 'Inter', sans-serif;">
    <div class="flex gap-2 mb-6 items-center justify-start">
      <div class="w-10 h-10 flex bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl items-center justify-center group-hover:scale-110 transition-transform duration-300">
        <i data-lucide="trending-up" class="w-5 h-5 text-white"></i>
      </div>
      <div class="text-left">
        <h3 class="font-semibold text-white group-hover:text-indigo-400 transition-colors duration-300">Productivity Impact</h3>
        <p class="text-xs text-gray-400">Last 30 days</p>
      </div>
    </div>
    <div class="space-y-4">
      <div>
        <div class="text-4xl lg:text-5xl font-bold text-white mb-1 group-hover:text-indigo-400 transition-colors duration-500" style="font-family: 'Satoshi', 'Arial Black', sans-serif;">92%</div>
        <p class="text-sm text-gray-300">Time saved on manual tasks</p>
      </div>
      <div class="grid grid-cols-2 gap-4 text-center">
        <div class="bg-white/5 hover:bg-white/10 rounded-lg p-3 transition-all duration-300 hover:scale-105">
          <div class="text-xl font-bold text-green-400">+31h</div>
          <p class="text-xs text-gray-400">Weekly savings</p>
        </div>
        <div class="bg-white/5 hover:bg-white/10 rounded-lg p-3 transition-all duration-300 hover:scale-105">
          <div class="text-xl font-bold text-blue-400">-67%</div>
          <p class="text-xs text-gray-400">Context switches</p>
        </div>
      </div>
      <div class="flex items-center justify-center gap-4 text-xs text-gray-400">
        <span class="flex items-center gap-1 hover:text-yellow-400 transition-colors duration-300">
          Real-time tracking
          <i data-lucide="clock" class="w-3 h-3 text-yellow-400"></i>
        </span>
        <span class="flex items-center gap-1 hover:text-red-400 transition-colors duration-300">
          Goal: 95%
          <i data-lucide="target" class="w-3 h-3 text-red-400"></i>
        </span>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <script>lucide.createIcons();</script>
</div>