Volet Indicateurs de progrès
Un composant d’indicateur de progression simple, propre et professionnel avec des tons chauds de coucher de soleil, adapté aux services d’affaires et de conseil, doté d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<div class="font-sans bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-10">
Our Consulting Process
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Step 1 -->
<div class="relative flex flex-col items-center group">
<div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-yellow-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-yellow-600 shadow-lg">
1
<div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden md:block"></div>
<div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden lg:hidden md:block"></div>
</div>
<div class="text-center mt-4 w-full md:w-auto">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Initial Consultation</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Understanding your needs and goals to tailor our approach.</p>
</div>
<div class="absolute top-16 md:hidden w-1 h-8 bg-yellow-500 dark:bg-yellow-400"></div>
</div>
<!-- Step 2 -->
<div class="relative flex flex-col items-center group">
<div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-orange-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-orange-600 shadow-lg">
2
<div class="absolute -left-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
<div class="absolute -right-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
</div>
<div class="text-center mt-4 w-full md:w-auto">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Strategy & Planning</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Developing a custom strategy roadmap and detailed action plans.</p>
</div>
<div class="absolute top-16 md:hidden w-1 h-8 bg-orange-500 dark:bg-orange-400"></div>
</div>
<!-- Step 3 -->
<div class="relative flex flex-col items-center group">
<div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-red-600 shadow-lg">
3
<div class="absolute -left-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-red-400 transform -translate-y-1/2 hidden md:block"></div>
</div>
<div class="text-center mt-4 w-full md:w-auto">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Execution & Review</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Implementing solutions and continuously reviewing progress.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Volet Indicateurs de progrès
Un composant d’indicateur de progression réactif avec un design brutalisme, des tons de couleur terreux et une prise en charge du thème sombre, adapté à un blog ou à un site de contenu.
Volet Indicateurs de progrès
Un composant d’indicateur de progression simple et réactif avec des effets néon/lumineux et des tons de bijoux, adapté aux sites de conseil/de services. Inclut la prise en charge du mode sombre.