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’indicateur de progression minimaliste conçu pour mettre en valeur la progression du portefeuille à l’aide de couleurs vives et d’un design réactif avec prise en charge du thème sombre.
Volet Indicateurs de progrès
Un composant d’indicateur de progression de style glassmorphism pour les applications de médias sociaux, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou. Il utilise un schéma de couleurs analogue et offre une interface complexe et riche avec de multiples éléments interactifs. Le composant est réactif et prend en charge un thème sombre avec Tailwind CSS.
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.