Composants Infographies Composant Infographie

Composant Infographie

Composant d’infographie avec design minimaliste / plat, palette de couleurs de tons de terre, complexité modérée pour les entreprises / les entreprises, réactif avec prise en charge du mode sombre.

Aperçu

HTML Code

<div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-10">Our Company at a Glance</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Statistic 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-green-700 dark:text-green-400 mb-2">150+</div>
        <p class="text-gray-600 dark:text-gray-300">Projects Completed</p>
      </div>

      <!-- Statistic 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-amber-700 dark:text-amber-400 mb-2">10 Years</div>
        <p class="text-gray-600 dark:text-gray-300">In Business</p>
      </div>

      <!-- Statistic 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-stone-700 dark:text-stone-400 mb-2">99%</div>
        <p class="text-gray-600 dark:text-gray-300">Client Satisfaction</p>
      </div>
    </div>

    <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Feature 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center text-center transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/infographic1/100/100" alt="Innovation Icon" class="w-20 h-20 mb-4 rounded-full object-cover">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Innovative Solutions</h3>
        <p class="text-gray-600 dark:text-gray-300">We constantly strive to provide cutting-edge solutions for your business needs.</p>
      </div>

      <!-- Feature 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center text-center transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/infographic2/100/100" alt="Support Icon" class="w-20 h-20 mb-4 rounded-full object-cover">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Dedicated Support</h3>
        <p class="text-gray-600 dark:text-gray-300">Our team is committed to offering unparalleled support every step of the way.</p>
      </div>
    </div>

    <div class="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 text-center">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Meet Our Lead Team Member</h3>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member Avatar" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-green-500 dark:border-green-400">
      <p class="text-xl font-semibold text-gray-900 dark:text-white">John Doe</p>
      <p class="text-gray-600 dark:text-gray-300">Chief Executive Officer</p>
      <p class="mt-4 text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">"Our vision is to empower businesses with efficient and effective solutions that drive growth and success in the digital age."</p>
    </div>

  </div>
</div>

Composants associés

Memphis_Muted_Infographics_Component_Government

Un composant infographique pour le gouvernement/les services publics, inspiré du design de Memphis avec une palette de couleurs sourdes/désaturées. Présente des géométries audacieuses, des motifs ludiques et une mise en page réactive avec prise en charge du mode sombre. Affiche visuellement les statistiques et les informations clés.

Ouvrir