Componente Infografica

<div class="p-8 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans relative overflow-hidden">

  <!-- Background texture overlaid with a subtle grid for depth -->
  <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/clean-gray-paper.png');"></div>

  <!-- Main container with a rounded, lifted effect -->
  <div class="relative max-w-7xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-2xl overflow-hidden
              transform transition-all duration-300 hover:scale-[1.005] hover:shadow-3xl
              dark:shadow-[0_20px_50px_rgba(0,0,0,0.8)] dark:border dark:border-gray-600">

    <!-- Inner metallic bezel effect -->
    <div class="absolute inset-0 rounded-3xl p-px
                bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-800
                pointer-events-none"></div>

    <!-- Content Area -->
    <div class="relative p-8 md:p-12 lg:p-16 text-gray-800 dark:text-gray-200">

      <!-- Header Section -->
      <div class="mb-12 text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4
                   text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600
                   dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                   drop-shadow-[0_4px_3px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_4px_3px_rgba(0,0,0,0.6)]">
          Corporate Performance Overview
        </h1>
        <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto
                  drop-shadow-[0_1px_1px_rgba(0,0,0,0.1)]">
          A comprehensive look at our key metrics and strategic achievements in the past year.
        </p>
      </div>

      <!-- Infographics Grid Container -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12">

        <!-- Card 1: Sales Growth -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-cyan-400 to-blue-600 dark:from-cyan-700 dark:to-blue-900
                    rounded-2xl shadow-xl border border-blue-700/50 dark:border-blue-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-blue-700 dark:bg-blue-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8A5 5 0 013 17V7h4a2 2 0 002-2V3a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Sales Growth</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">+25%</p>
            <p class="text-cyan-100 dark:text-cyan-200 text-lg">Year-over-year revenue increase, driven by new market penetration.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Q4 Target:</span>
              <span class="text-white text-xl font-bold">$12M</span>
            </div>
          </div>
        </div>

        <!-- Card 2: Customer Satisfaction -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-lime-400 to-green-600 dark:from-lime-700 dark:to-green-900
                    rounded-2xl shadow-xl border border-green-700/50 dark:border-green-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-green-700 dark:bg-green-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Customer Satisfaction</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">92%</p>
            <p class="text-lime-100 dark:text-lime-200 text-lg">Improved NPS score, showcasing our commitment to client success.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Target Score:</span>
              <span class="text-white text-xl font-bold">90%</span>
            </div>
          </div>
        </div>

        <!-- Card 3: Employee Retention -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-purple-400 to-indigo-600 dark:from-purple-700 dark:to-indigo-900
                    rounded-2xl shadow-xl border border-indigo-700/50 dark:border-indigo-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-indigo-300 to-indigo-500 dark:from-indigo-600 dark:to-indigo-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-indigo-700 dark:bg-indigo-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2m3-2h4m-4 0h4m-12 0h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Employee Retention</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">88%</p>
            <p class="text-purple-100 dark:text-purple-200 text-lg">High talent retention demonstrating a positive work environment.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Industry Avg:</span>
              <span class="text-white text-xl font-bold">80%</span>
            </div>
          </div>
        </div>

      </div>

      <!-- Key Initiatives Section -->
      <div class="mt-16 bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl shadow-xl
                  border border-gray-200 dark:border-gray-700
                  flex flex-col lg:flex-row items-center justify-between gap-8">
        <div class="lg:w-1/2">
          <h3 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4
                     text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-500
                     dark:from-red-400 dark:to-yellow-400
                     drop-shadow-[0_2px_2px_rgba(0,0,0,0.1)]">
            Our Key Initiatives
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
            Focused efforts on research & development, sustainability, and global expansion are driving our future success.
          </p>
        </div>
        <div class="lg:w-1/2 grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-blue-600 dark:text-blue-400 mb-2">Innovation Hub</h4>
            <p class="text-gray-600 dark:text-gray-300">Investing in cutting-edge technology and talent.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-green-600 dark:text-green-400 mb-2">Sustainable Practices</h4>
            <p class="text-gray-600 dark:text-gray-300">Reducing our environmental footprint globally.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-purple-600 dark:text-purple-400 mb-2">Global Expansion</h4>
            <p class="text-gray-600 dark:text-gray-300">Opening new markets and partnerships worldwide.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-red-600 dark:text-red-400 mb-2">Team Empowerment</h4>
            <p class="text-gray-600 dark:text-gray-300">Fostering growth and well-being for all employees.</p>
          </div>
        </div>
      </div>

      <!-- Call to Action / Footer -->
      <div class="mt-16 text-center">
        <a href="#" class="inline-flex items-center px-8 py-4 rounded-full
                          bg-gradient-to-r from-orange-500 to-red-600 text-white text-xl font-bold
                          shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300
                          dark:from-orange-400 dark:to-red-500
                          border border-orange-700 dark:border-orange-300
                          group">
          View Full Report
          <svg class="ml-3 h-6 w-6 text-white transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
        <p class="mt-8 text-gray-500 dark:text-gray-400 text-sm">
          © 2023 Your Company Name. All rights reserved.
        </p>
      </div>

    </div>
  </div>

</div>

<!-- To enable dark mode, add a class "dark" to your html tag:
<html class="dark">
  ... the component ...
</html>
-->