<!--
@type: Steps
@industry: Business
@style: Modern
@category: Page Section, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-50: #eef2ff;
--color-indigo-100: #e0e7ff;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-white: #ffffff;
/* Spacing */
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component styles */
.process-section {
background-color: var(--color-slate-50);
padding: var(--spacing-16) var(--spacing-4);
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
}
.section-header {
text-align: center;
max-width: 48rem; /* max-w-3xl */
margin: 0 auto var(--spacing-12) auto;
}
.section-title {
font-size: 1.875rem; /* text-3xl */
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: 1.125rem; /* text-lg */
color: var(--color-slate-600);
}
.steps-grid {
display: grid;
gap: var(--spacing-8);
}
.step-card {
position: relative;
}
.step-content {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: var(--spacing-6);
border: 1px solid var(--color-slate-200);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
height: 100%;
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 9999px;
background-color: var(--color-indigo-100);
color: var(--color-indigo-600);
font-weight: 700;
font-size: 1.25rem;
margin-bottom: var(--spacing-6);
}
.step-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 0.75rem;
}
.step-description {
color: var(--color-slate-600);
margin-bottom: var(--spacing-4);
}
.arrow-connector {
display: none;
position: absolute;
top: 50%;
right: -1.5rem;
transform: translateY(-50%);
width: 3rem;
height: 3rem;
color: var(--color-indigo-600);
}
.cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.cta-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-6);
}
.cta-buttons {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--spacing-4);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
font-weight: 500;
transition: background-color 0.2s;
text-decoration: none;
}
.btn-primary {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-indigo-700);
}
.btn-secondary {
background-color: var(--color-white);
color: var(--color-indigo-600);
border: 1px solid var(--color-indigo-600);
}
.btn-secondary:hover {
background-color: var(--color-indigo-50);
}
.btn-icon {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
/* Responsive styles */
@media (min-width: 640px) {
.process-section {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
.cta-buttons {
flex-direction: row;
}
}
@media (min-width: 768px) {
.section-title {
font-size: 2.25rem; /* text-4xl */
}
.steps-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-6);
}
.step-content {
padding: var(--spacing-8);
}
}
@media (min-width: 1024px) {
.process-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
.steps-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-12);
}
.arrow-connector {
display: block;
}
}
</style>
<section class="process-section">
<div class="container">
<!-- Section header -->
<div class="section-header">
<h2 class="section-title">How Our Process Works</h2>
<p class="section-description">We've refined our business consulting approach into a simple, effective four-step process that delivers consistent results for organizations of all sizes.</p>
</div>
<!-- Process steps -->
<div class="steps-grid">
<!-- Step 1 -->
<div class="step-card">
<div class="step-content">
<div class="step-number">1</div>
<h3 class="step-title">Discovery Session</h3>
<p class="step-description">We begin with a comprehensive analysis of your business goals, challenges, and current operations to identify key opportunities.</p>
</div>
<!-- Arrow connector -->
<div class="arrow-connector">
<svg 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 2 -->
<div class="step-card">
<div class="step-content">
<div class="step-number">2</div>
<h3 class="step-title">Strategic Planning</h3>
<p class="step-description">Based on our findings, we develop a customized roadmap with actionable strategies tailored to your specific business needs.</p>
</div>
<!-- Arrow connector -->
<div class="arrow-connector">
<svg 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 3 -->
<div class="step-card">
<div class="step-content">
<div class="step-number">3</div>
<h3 class="step-title">Implementation</h3>
<p class="step-description">Our team works alongside yours to execute the strategic plan, providing guidance and support throughout the process.</p>
</div>
<!-- Arrow connector -->
<div class="arrow-connector">
<svg 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 4 -->
<div class="step-card">
<div class="step-content">
<div class="step-number">4</div>
<h3 class="step-title">Evaluation</h3>
<p class="step-description">We continuously monitor progress, measure results against KPIs, and make data-driven adjustments to optimize outcomes.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<h3 class="cta-title">Ready to transform your business?</h3>
<div class="cta-buttons">
<a href="#" class="btn btn-primary">
Schedule a Consultation
<svg class="btn-icon" 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 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<a href="#" class="btn btn-secondary">View Case Studies</a>
</div>
</div>
</div>
</section>
<!--
@type: Steps
@industry: Business
@style: Modern
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<!-- Section header -->
<div class="text-center max-w-3xl mx-auto mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">How Our Process Works</h2>
<p class="text-lg text-slate-600">We've refined our business consulting approach into a simple, effective four-step process that delivers consistent results for organizations of all sizes.</p>
</div>
<!-- Process steps -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-6 lg:gap-12">
<!-- Step 1 -->
<div class="relative">
<div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-slate-200 h-full">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mb-6">1</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Discovery Session</h3>
<p class="text-slate-600 mb-4">We begin with a comprehensive analysis of your business goals, challenges, and current operations to identify key opportunities.</p>
</div>
<!-- Arrow connector (hidden on mobile) -->
<div class="hidden lg:block absolute top-1/2 -right-6 transform -translate-y-1/2">
<svg class="w-12 h-12 text-indigo-600" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 2 -->
<div class="relative">
<div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-slate-200 h-full">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mb-6">2</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Strategic Planning</h3>
<p class="text-slate-600 mb-4">Based on our findings, we develop a customized roadmap with actionable strategies tailored to your specific business needs.</p>
</div>
<!-- Arrow connector (hidden on mobile) -->
<div class="hidden lg:block absolute top-1/2 -right-6 transform -translate-y-1/2">
<svg class="w-12 h-12 text-indigo-600" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 3 -->
<div class="relative">
<div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-slate-200 h-full">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mb-6">3</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Implementation</h3>
<p class="text-slate-600 mb-4">Our team works alongside yours to execute the strategic plan, providing guidance and support throughout the process.</p>
</div>
<!-- Arrow connector (hidden on mobile) -->
<div class="hidden lg:block absolute top-1/2 -right-6 transform -translate-y-1/2">
<svg class="w-12 h-12 text-indigo-600" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 4 -->
<div>
<div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-slate-200 h-full">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mb-6">4</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Evaluation</h3>
<p class="text-slate-600 mb-4">We continuously monitor progress, measure results against KPIs, and make data-driven adjustments to optimize outcomes.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<h3 class="text-2xl font-bold text-slate-900 mb-6">Ready to transform your business?</h3>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="inline-flex items-center justify-center bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium">
Schedule a Consultation
<svg class="w-5 h-5 ml-2" 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 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<a href="#" class="inline-flex items-center justify-center bg-white text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg hover:bg-indigo-50 transition-colors font-medium">
View Case Studies
</a>
</div>
</div>
</div>
</section>
