Infografik-Komponente

<section class="py-12 sm:py-16 lg:py-20 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-teal-950 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 lg:mb-16">
      <h2 class="text-4xl font-extrabold text-pink-600 sm:text-5xl lg:text-6xl dark:text-purple-400 leading-tight">
        <span class="block">Our Impact in the Community</span>
        <span class="block text-2xl sm:text-3xl lg:text-4xl text-purple-500 mt-2 dark:text-pink-300">Making a difference, together.</span>
      </h2>
      <p class="mt-4 max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">
        Explore the key areas where our initiatives are creating positive change and fostering a healthier, safer, and more vibrant community for everyone.
      </p>
    </div>

    <div class="grid gap-8 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">

      <!-- Infographic Card 1 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden group transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="p-6 sm:p-8">
          <div class="flex items-center justify-center w-16 h-16 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-500 dark:text-pink-200 mx-auto mb-6 transition-all duration-300 group-hover:scale-110 group-hover:bg-pink-200 dark:group-hover:bg-pink-600">
            <svg class="w-8 h-8" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.944 12c0 4.908 3.012 9.072 7.215 10.602a11.996 11.996 0 002.41 0c4.203-1.53 7.215-5.694 7.215-10.602a12.01 12.01 0 00-1.464-6.016z">
              </path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center mb-4 transition-colors duration-300 group-hover:text-pink-600 dark:group-hover:text-purple-400">Public Health Initiatives</h3>
          <p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-6">
            Dedicated programs improving community well-being.
          </p>
          <div class="text-center">
            <div class="text-5xl font-extrabold text-blue-500 dark:text-blue-300 drop-shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:text-blue-600 dark:group-hover:text-blue-200">
              +25%
            </div>
            <p class="mt-2 text-md text-gray-500 dark:text-gray-400">Increase in health screenings</p>
          </div>
        </div>
      </div>

      <!-- Infographic Card 2 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden group transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="p-6 sm:p-8">
          <div class="flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-700 text-purple-500 dark:text-purple-200 mx-auto mb-6 transition-all duration-300 group-hover:scale-110 group-hover:bg-purple-200 dark:group-hover:bg-purple-600">
            <svg class="w-8 h-8" 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 10V3L4 14h7v7l9-11h-7z">
              </path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center mb-4 transition-colors duration-300 group-hover:text-purple-600 dark:group-hover:text-pink-400">Community Safety Programs</h3>
          <p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-6">
            Working to ensure a safer environment for all residents.
          </p>
          <div class="text-center">
            <div class="text-5xl font-extrabold text-green-500 dark:text-green-300 drop-shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:text-green-600 dark:group-hover:text-green-200">
              -15%
            </div>
            <p class="mt-2 text-md text-gray-500 dark:text-gray-400">Reduction in reported incidents</p>
          </div>
        </div>
      </div>

      <!-- Infographic Card 3 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden group transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="p-6 sm:p-8">
          <div class="flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-700 text-green-500 dark:text-green-200 mx-auto mb-6 transition-all duration-300 group-hover:scale-110 group-hover:bg-green-200 dark:group-hover:bg-green-600">
            <svg class="w-8 h-8" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
              </path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center mb-4 transition-colors duration-300 group-hover:text-green-600 dark:group-hover:text-mint-400">Educational Development</h3>
          <p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-6">
            Investing in learning to foster future growth.
          </p>
          <div class="text-center">
            <div class="text-5xl font-extrabold text-teal-500 dark:text-teal-300 drop-shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:text-teal-600 dark:group-hover:text-teal-200">
              +20%
            </div>
            <p class="mt-2 text-md text-gray-500 dark:text-gray-400">Enrollment in skill workshops</p>
          </div>
        </div>
      </div>

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