Componente Indicatori di progresso
Un componente indicatore di progresso semplice, pulito e professionale con toni caldi del tramonto, adatto per servizi aziendali e di consulenza, caratterizzato da un design reattivo e supporto per la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente Indicatori di progresso
Un componente indicatore di stato con uno stile glassmorphism, un design reattivo e il supporto per i temi scuri. Utilizza Tailwind CSS per lo stile.
ArtDeco_Food_Restaurant_Progress_Indicators
Componente degli indicatori di progresso ispirato all'Art Déco per i siti Web di cibo/ristoranti, con motivi geometrici, stile lussuoso e toni della terra. Interfaccia complessa con più passaggi e supporto per la modalità oscura.
Componente Indicatori di progresso
Un complesso componente indicatore di avanzamento con sfumature di colore neutro fredde, transizioni fluide e progressione in più fasi adatto per siti Web governativi/di servizio pubblico. Include il supporto per la modalità oscura ed è completamente reattivo.