Composants Infographies Composant Infographie

Composant Infographie

Il s’agit d’un composant infographique complexe et minimaliste pour les portfolios, présentant des statistiques ou des réalisations clés. Il utilise une palette de couleurs complémentaire et comprend un design réactif avec prise en charge du mode sombre.

Aperçu

HTML Code

<div class="p-6 sm:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Section 1: Introduction/Title -->
    <div class="lg:col-span-1 md:col-span-2 col-span-1 p-6 rounded-lg shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 text-white flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl">
      <div>
        <h2 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">My Portfolio Highlights</h2>
        <p class="text-lg opacity-90">A concise overview of key achievements and impact across various projects.</p>
      </div>
      <div class="mt-8 text-right">
        <svg class="h-12 w-12 opacity-80 inline-block" 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="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"></path>
        </svg>
      </div>
    </div>

    <!-- Stat Card 1 -->
    <div class="p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div>
        <h3 class="text-5xl font-bold text-teal-600 dark:text-teal-400 mb-2">500+</h3>
        <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Projects Completed</p>
        <p class="text-gray-600 dark:text-gray-400">Successfully delivered a wide range of projects, from small-scale applications to enterprise-level solutions.</p>
      </div>
      <div class="mt-6 flex justify-end">
        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200">
          <svg class="w-4 h-4 mr-1" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          Milestone
        </span>
      </div>
    </div>

    <!-- Stat Card 2 -->
    <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div>
        <h3 class="text-5xl font-bold text-emerald-600 dark:text-emerald-400 mb-2">95%+</h3>
        <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Client Satisfaction</p>
        <p class="text-gray-600 dark:text-gray-400">Consistently achieved high client satisfaction ratings through effective communication and stellar results.</p>
      </div>
      <div class="mt-6 flex justify-end">
        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200">
          <svg class="w-4 h-4 mr-1" 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="M5 3v4M3 5h4M6 17v-2m-2-2H4a2 2 0 00-2 2v4a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2H6m5-11V3h8v8h-8V7m0 4h.01M17 11h.01M13 16h.01M17 16h.01M14 21h.01"></path></svg>
          Feedback
        </span>
      </div>
    </div>

    <!-- Stat Card 3 -->
    <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div>
        <h3 class="text-5xl font-bold text-orange-600 dark:text-orange-400 mb-2">10K+</h3>
        <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Users Impacted</p>
        <p class="text-gray-600 dark:text-gray-400">Developed solutions that have positively impacted thousands of users globally across various platforms.</p>
      </div>
      <div class="mt-6 flex justify-end">
        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
          <svg class="w-4 h-4 mr-1" 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12a4 4 0 014 4v2H17zm0 0c-4.148 0-7.793-1.428-10-4L2 20h15zm0 0c-4.148 0-7.793-1.428-10-4L2 20h15zm0-16a3 3 0 00-3-3H7a3 3 0 00-3 3v2h12zm0 0v2h2V4z"></path></svg>
          Audience
        </span>
      </div>
    </div>

    <!-- Image Callout / Visual Element -->
    <div class="md:col-span-2 col-span-1 p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col lg:flex-row items-center justify-center space-y-6 lg:space-y-0 lg:space-x-8 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl">
      <div class="flex-shrink-0 lg:w-1/3">
        <img src="https://picsum.photos/400/300?random=1" alt="Creative Process" class="rounded-lg object-cover h-48 w-full lg:h-auto lg:w-full shadow-md" loading="lazy">
      </div>
      <div class="lg:flex-grow text-center lg:text-left">
        <h3 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-3">Innovation at Core</h3>
        <p class="text-gray-600 dark:text-gray-400 text-lg">Embracing cutting-edge technologies and methodologies to deliver forward-thinking solutions.</p>
      </div>
    </div>

    <!-- Testimonial / Quote -->
    <div class="p-6 rounded-lg shadow-lg bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-900 dark:to-teal-950 border border-emerald-200 dark:border-emerald-800 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl relative overflow-hidden">
      <blockquote class="relative z-10">
        <p class="text-xl italic font-medium text-gray-800 dark:text-gray-200 leading-relaxed mb-4">“Working with [Your Name] was a game-changer for our project. Their expertise and dedication are truly unmatched.”</p>
        <footer class="flex items-center">
          <img class="h-12 w-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" loading="lazy">
          <div>
            <cite class="block text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</cite>
            <span class="block text-gray-700 dark:text-gray-300 text-sm">CEO, Tech Solutions Inc.</span>
          </div>
        </footer>
      </blockquote>
      <div class="absolute -bottom-4 -right-4 text-emerald-300 dark:text-emerald-700 opacity-30 z-0">
        <svg class="w-32 h-32" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 10C4.343 10 3 11.343 3 13s1.343 3 3 3h3l-3 4v-7c0-1.657 1.343-3 3-3zm9 0c-1.657 0-3 1.343-3 3s1.343 3 3 3h3l-3 4v-7c0-1.657 1.343-3 3-3z"></path>
        </svg>
      </div>
    </div>

    <!-- Skillset / Progress Bar (simplified) -->
    <div class="lg:col-span-2 col-span-1 p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.015] hover:shadow-xl">
      <div>
        <h3 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-4">Core Competencies</h3>
        <div class="space-y-4">
          <div>
            <div class="flex justify-between items-center mb-1">
              <span class="text-lg font-medium text-gray-700 dark:text-gray-300">Frontend Development</span>
              <span class="text-gray-500 dark:text-gray-400">95%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
              <div class="bg-emerald-500 h-2 rounded-full" style="width: 95%;"></div>
            </div>
          </div>
          <div>
            <div class="flex justify-between items-center mb-1">
              <span class="text-lg font-medium text-gray-700 dark:text-gray-300">Backend Development</span>
              <span class="text-gray-500 dark:text-gray-400">85%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
              <div class="bg-teal-500 h-2 rounded-full" style="width: 85%;"></div>
            </div>
          </div>
          <div>
            <div class="flex justify-between items-center mb-1">
              <span class="text-lg font-medium text-gray-700 dark:text-gray-300">UI/UX Design</span>
              <span class="text-gray-500 dark:text-gray-400">70%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
              <div class="bg-orange-500 h-2 rounded-full" style="width: 70%;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Composants associés

Composant Infographie

Un composant d’infographie 3D réactif conçu pour les interfaces de médias sociaux avec des couleurs vives et une prise en charge des thèmes sombres, incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement.

Ouvrir

Composant Infographie

Infographie Composant pour portfolio - Material Design, Palette de couleurs analogue, Complexité modérée, Réactif, Prise en charge du thème sombre

Ouvrir

Brutalist_Infographics_Component_Earth_Tones

Un composant graphique d’inspiration brutaliste pour les sites Web d’entreprise, avec une typographie brute, un contraste élevé et des tons de terre. Il est réactif et prend en charge le mode sombre.

Ouvrir