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.
HTML Code
<div class="font-sans bg-stone-950 text-emerald-300 min-h-screen p-8 sm:p-12 lg:p-16 flex items-center justify-center dark:bg-gray-950 dark:text-emerald-300">
<div class="w-full max-w-4xl">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 sm:mb-14 relative group leading-tight">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-emerald-200 to-emerald-400 drop-shadow-lg inline-block relative">
Our Consulting Process
<span class="absolute inset-x-0 bottom-[-5px] h-[3px] bg-gradient-to-r from-emerald-500 via-emerald-300 to-emerald-500 blur-sm opacity-75 animate-pulse"></span>
</span>
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Step 1 -->
<div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
<div class="relative z-10">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
<p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">1</p>
<span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
</div>
<h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Discovery</h3>
<p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Understanding your unique needs and challenges through detailed consultation.</p>
</div>
</div>
<!-- Step 2 -->
<div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
<div class="relative z-10">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
<p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">2</p>
<span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
</div>
<h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Strategy</h3>
<p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Crafting tailored strategies and actionable plans specific to your objectives.</p>
</div>
</div>
<!-- Step 3 -->
<div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
<div class="relative z-10">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
<p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">3</p>
<span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
</div>
<h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Execution</h3>
<p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Implementing solutions and providing hands-on support for successful deployment.</p>
</div>
</div>
<!-- Step 4 -->
<div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
<div class="relative z-10">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
<p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">4</p>
<span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
</div>
<h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Growth</h3>
<p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Monitoring performance and refining strategies for continuous improvement and growth.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès industriel
Un composant complexe et contrasté d’indicateurs de progression avec une esthétique de design industriel, adapté aux sites Web d’entreprise. Comprend plusieurs barres de progression, une section d’état détaillée et des textures de matières premières, entièrement réactives avec la prise en charge du mode sombre.
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 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.