<!--
@type: Steps
@industry: Software
@style: Minimal
@category: Page Section, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-600: #4f46e5;
}
* {
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";
}
.steps-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.steps-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.steps-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.steps-grid {
position: relative;
}
.steps-list {
display: grid;
grid-template-columns: 1fr;
gap: 3rem 2rem;
list-style: none;
}
@media (min-width: 1024px) {
.steps-list {
grid-template-columns: repeat(4, 1fr);
}
}
.step-item {
position: relative;
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
}
.step-circle {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 9999px;
border: 2px solid var(--color-indigo-600);
background-color: var(--color-white);
font-size: 1.25rem;
font-weight: 600;
color: var(--color-indigo-600);
position: relative;
z-index: 10;
}
.step-content {
margin-top: 1.5rem;
text-align: center;
}
.step-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.step-description {
margin-top: 0.5rem;
font-size: 1rem;
color: var(--color-gray-600);
}
</style>
<section class="steps-section" aria-labelledby="steps-heading">
<div class="container">
<!-- Section Header -->
<div class="steps-header">
<span class="header-badge">Getting Started</span>
<h2 id="steps-heading" class="header-title">
Start streamlining your business in four simple steps
</h2>
<p class="header-description">
Our straightforward implementation process gets you up and running quickly, with minimal disruption to your daily operations
</p>
</div>
<!-- Steps Grid -->
<div class="steps-grid">
<ol class="steps-list">
<!-- Step 1 -->
<li class="step-item">
<!-- Step number -->
<div class="step-number">
<div class="step-circle">
1
</div>
</div>
<!-- Step content -->
<div class="step-content">
<h3 class="step-title">Schedule a demo</h3>
<p class="step-description">
Book a personalized demo with our small business specialists to see how our software addresses your specific needs.
</p>
</div>
</li>
<!-- Step 2 -->
<li class="step-item">
<!-- Step number -->
<div class="step-number">
<div class="step-circle">
2
</div>
</div>
<!-- Step content -->
<div class="step-content">
<h3 class="step-title">Customize your setup</h3>
<p class="step-description">
Our team will help configure the software to match your existing workflows and business processes.
</p>
</div>
</li>
<!-- Step 3 -->
<li class="step-item">
<!-- Step number -->
<div class="step-number">
<div class="step-circle">
3
</div>
</div>
<!-- Step content -->
<div class="step-content">
<h3 class="step-title">Import your data</h3>
<p class="step-description">
We'll handle the migration of your existing data with our secure import tools and validation processes.
</p>
</div>
</li>
<!-- Step 4 -->
<li class="step-item">
<!-- Step number -->
<div class="step-number">
<div class="step-circle">
4
</div>
</div>
<!-- Step content -->
<div class="step-content">
<h3 class="step-title">Go live with support</h3>
<p class="step-description">
Launch with confidence knowing our dedicated support team is available to help you every step of the way.
</p>
</div>
</li>
</ol>
</div>
</div>
</section>
<!--
@type: Steps
@industry: Software
@style: Minimal
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="steps-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-lg font-semibold text-indigo-600">Getting Started</span>
<h2 id="steps-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Start streamlining your business in four simple steps
</h2>
<p class="mt-4 text-lg text-gray-600">
Our straightforward implementation process gets you up and running quickly, with minimal disruption to your daily operations
</p>
</div>
<!-- Steps Grid -->
<div class="relative">
<ol class="grid grid-cols-1 gap-y-12 gap-x-8 lg:grid-cols-4">
<!-- Step 1 -->
<li class="relative lg:col-span-1">
<!-- Step number -->
<div class="flex items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-indigo-600 bg-white text-xl font-semibold text-indigo-600 relative z-10">
1
</div>
</div>
<!-- Step content -->
<div class="mt-6 text-center">
<h3 class="text-lg font-medium text-gray-900">Schedule a demo</h3>
<p class="mt-2 text-base text-gray-600">
Book a personalized demo with our small business specialists to see how our software addresses your specific needs.
</p>
</div>
</li>
<!-- Step 2 -->
<li class="relative lg:col-span-1">
<!-- Step number -->
<div class="flex items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-indigo-600 bg-white text-xl font-semibold text-indigo-600 relative z-10">
2
</div>
</div>
<!-- Step content -->
<div class="mt-6 text-center">
<h3 class="text-lg font-medium text-gray-900">Customize your setup</h3>
<p class="mt-2 text-base text-gray-600">
Our team will help configure the software to match your existing workflows and business processes.
</p>
</div>
</li>
<!-- Step 3 -->
<li class="relative lg:col-span-1">
<!-- Step number -->
<div class="flex items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-indigo-600 bg-white text-xl font-semibold text-indigo-600 relative z-10">
3
</div>
</div>
<!-- Step content -->
<div class="mt-6 text-center">
<h3 class="text-lg font-medium text-gray-900">Import your data</h3>
<p class="mt-2 text-base text-gray-600">
We'll handle the migration of your existing data with our secure import tools and validation processes.
</p>
</div>
</li>
<!-- Step 4 -->
<li class="relative lg:col-span-1">
<!-- Step number -->
<div class="flex items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-indigo-600 bg-white text-xl font-semibold text-indigo-600 relative z-10">
4
</div>
</div>
<!-- Step content -->
<div class="mt-6 text-center">
<h3 class="text-lg font-medium text-gray-900">Go live with support</h3>
<p class="mt-2 text-base text-gray-600">
Launch with confidence knowing our dedicated support team is available to help you every step of the way.
</p>
</div>
</li>
</ol>
</div>
</div>
</section>
