Skeuomorphic_Vibrant_Business_Dashboard

<div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Main Metrics Panel -->
    <div class="lg:col-span-2 bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 drop-shadow-md">Business Overview Dashboard</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Metric Card 1 -->
        <div class="bg-gradient-to-br from-indigo-300 to-indigo-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-indigo-700 dark:to-indigo-900 dark:border-indigo-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Total Revenue</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">$1.2M</p>
          <p class="text-sm text-white opacity-80">+12% from last month</p>
        </div>
        <!-- Metric Card 2 -->
        <div class="bg-gradient-to-br from-green-300 to-green-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-green-700 dark:to-green-900 dark:border-green-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">New Customers</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A4 4 0 013 11a1 1 0 10-2 0 6 6 0 006 6h6a6 6 0 006-6 1 1 0 10-2 0 4 4 0 01-4 4H7z"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">2,450</p>
          <p class="text-sm text-white opacity-80">+8% from last week</p>
        </div>
         <!-- Metric Card 3 -->
        <div class="bg-gradient-to-br from-red-300 to-red-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-red-700 dark:to-red-900 dark:border-red-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Churn Rate</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">4.5%</p>
          <p class="text-sm text-white opacity-80">-1% from last month</p>
        </div>
         <!-- Metric Card 4 -->
        <div class="bg-gradient-to-br from-purple-300 to-purple-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-purple-700 dark:to-purple-900 dark:border-purple-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Active Users</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">18,700</p>
          <p class="text-sm text-white opacity-80">+5% from yesterday</p>
        </div>
      </div>

      <!-- Chart Placeholder -->
      <div class="mt-8 bg-gray-50/70 dark:bg-gray-700/70 rounded-2xl p-6 shadow-inset shadow-md dark:shadow-sm border border-gray-300 dark:border-gray-600 transform transition-all duration-300 hover:scale-[1.005]">
        <h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">Monthly Performance</h3>
        <img src="https://picsum.photos/800/300?random=1" alt="Placeholder Chart" class="w-full rounded-lg shadow-inner border border-gray-200 dark:border-gray-600" />
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">This chart represents the projected growth and actual performance over the last 12 months.</p>
      </div>
    </div>

    <!-- Recent Activities Panel -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-teal-800 dark:text-teal-400 mb-6 drop-shadow-md">Recent Activities</h2>

      <ul class="space-y-4">
        <!-- Activity Item 1 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe <span class="text-green-600 dark:text-green-400">completed task</span> 'Project X launch'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Just now</p>
          </div>
        </li>
        <!-- Activity Item 2 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="text-purple-600 dark:text-purple-400">updated report</span> 'Q3 Financials'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">15 minutes ago</p>
          </div>
        </li>
        <!-- Activity Item 3 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Mike Ross <span class="text-red-600 dark:text-red-400">added new lead</span> 'Acme Corp.' to CRM</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">30 minutes ago</p>
          </div>
        </li>
        <!-- Activity Item 4 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Lee <span class="text-blue-600 dark:text-blue-400">scheduled meeting</span> 'Team Sync'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">1 hour ago</p>
          </div>
        </li>
      </ul>
    </div>

    <!-- Sales Funnel Panel -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-orange-800 dark:text-orange-400 mb-6 drop-shadow-md">Sales Funnel Progress</h2>
      <div class="space-y-4">
        <!-- Stage 1 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Leads:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 90%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">90%</span>
          </div>
        </div>
        <!-- Stage 2 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Engaged:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 70%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">70%</span>
          </div>
        </div>
        <!-- Stage 3 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Proposals:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 50%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">50%</span>
          </div>
        </div>
        <!-- Stage 4 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Closed Won:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 30%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">30%</span>
          </div>
        </div>
         <!-- Chart Placeholder -->
        <div class="mt-6 bg-gray-50/70 dark:bg-gray-700/70 rounded-2xl p-6 shadow-inset shadow-md dark:shadow-sm border border-gray-300 dark:border-gray-600 transform transition-all duration-300 hover:scale-[1.005]">
          <h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">Conversion Rate</h3>
          <img src="https://picsum.photos/400/200?random=2" alt="Placeholder Doughnut Chart" class="w-full rounded-lg shadow-inner border border-gray-200 dark:border-gray-600" />
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Overall conversion rate from lead to closed-won customer.</p>
        </div>
      </div>
    </div>

    <!-- Quick Actions Panel -->
    <div class="md:col-span-2 lg:col-span-1 bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-cyan-800 dark:text-cyan-400 mb-6 drop-shadow-md">Quick Actions</h2>
      <div class="grid grid-cols-2 gap-4">
        <!-- Action Button 1 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-cyan-300 to-cyan-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-cyan-700 dark:to-cyan-900 dark:border-cyan-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">New Report</span>
        </button>
        <!-- Action Button 2 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-yellow-300 to-yellow-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-yellow-700 dark:to-yellow-900 dark:border-yellow-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.06-.665.06-1a7.001 7.001 0 00-12 0c0 .335.014.673.06 1H.75c.08.748.514 1.42 1.174 1.932.712.519 1.597.858 2.503.858h.5l.003.012A9.95 9.95 0 0010 18a9.95 9.95 0 005.49-.706l.003-.012h.5c.906 0 1.791-.339 2.503-.858.66-.512 1.094-1.184 1.174-1.932h-.807z"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Manage Users</span>
        </button>
        <!-- Action Button 3 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-pink-300 to-pink-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-pink-700 dark:to-pink-900 dark:border-pink-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Settings</span>
        </button>
        <!-- Action Button 4 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-lime-300 to-lime-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-lime-700 dark:to-lime-900 dark:border-lime-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Export Data</span>
        </button>
      </div>
    </div>

  </div>
</div>