<!--
@type: Steps
@industry: Product
@style: Light
@category: Page Section, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-50: #eff6ff;
--color-blue-300: #93c5fd;
--color-blue-400: #60a5fa;
--color-blue-600: #2563eb;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
/* Container */
--container-max-width: 80rem;
--content-max-width: 48rem;
--steps-max-width: 64rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.steps-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) 0;
}
.steps-container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.steps-header {
max-width: var(--content-max-width);
margin: 0 auto;
text-align: center;
margin-bottom: var(--spacing-16);
}
.steps-label {
color: var(--color-blue-600);
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.steps-title {
color: var(--color-gray-800);
font-size: 1.875rem;
font-weight: 500;
margin-top: var(--spacing-2);
margin-bottom: var(--spacing-4);
}
.steps-description {
color: var(--color-gray-600);
font-size: 1.125rem;
}
.steps-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
max-width: var(--steps-max-width);
margin: 0 auto;
}
.step-wrapper {
position: relative;
}
.step-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 10;
}
.step-icon-wrapper {
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-blue-50);
color: var(--color-blue-600);
border-radius: 9999px;
margin-bottom: var(--spacing-6);
}
.step-icon {
width: 2rem;
height: 2rem;
}
.step-label {
color: var(--color-blue-600);
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--spacing-2);
}
.step-title {
color: var(--color-gray-800);
font-size: 1.25rem;
font-weight: 500;
margin-bottom: var(--spacing-3);
}
.step-description {
color: var(--color-gray-600);
margin-bottom: var(--spacing-6);
}
.step-link {
color: var(--color-blue-600);
font-weight: 500;
text-decoration: none;
display: flex;
align-items: center;
margin-top: auto;
}
.step-link-icon {
width: 1rem;
height: 1rem;
margin-left: var(--spacing-1);
}
.step-arrow {
display: none;
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
z-index: 0;
}
.step-arrow svg {
width: 4rem;
height: 2rem;
color: var(--color-blue-400);
}
.steps-cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.steps-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-white);
border: 1px solid var(--color-blue-300);
color: var(--color-gray-800);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: background-color 0.15s ease-in-out;
}
.steps-cta-button:hover {
background-color: var(--color-gray-50);
}
.steps-cta-button-icon {
width: 1.25rem;
height: 1.25rem;
margin-left: var(--spacing-2);
}
.steps-cta-note {
color: var(--color-gray-500);
font-size: 0.875rem;
margin-top: var(--spacing-4);
}
/* Responsive Breakpoints */
@media (min-width: 768px) {
.steps-section {
padding: var(--spacing-24) 0;
}
.steps-container {
padding: 0 var(--spacing-8);
}
.steps-title {
font-size: 2.25rem;
}
.steps-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-12);
}
.step-arrow {
display: block;
}
}
</style>
<section class="steps-section">
<div class="steps-container">
<!-- Section Header -->
<div class="steps-header">
<span class="steps-label">How It Works</span>
<h2 class="steps-title">Transform your workflow in three simple steps</h2>
<p class="steps-description">Our streamlined process makes implementation quick and easy, so you can focus on what matters most.</p>
</div>
<!-- Steps Container -->
<div class="steps-grid">
<!-- Step 1 -->
<div class="step-wrapper">
<div class="step-card">
<div class="step-icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="step-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<span class="step-label">Step 1</span>
<h3 class="step-title">Analyze Your Needs</h3>
<p class="step-description">Our team works with you to understand your unique requirements and goals for product implementation.</p>
<a href="#" class="step-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="step-link-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Arrow for desktop -->
<div class="step-arrow">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</div>
<!-- Step 2 -->
<div class="step-wrapper">
<div class="step-card">
<div class="step-icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="step-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</div>
<span class="step-label">Step 2</span>
<h3 class="step-title">Customize & Configure</h3>
<p class="step-description">We tailor our solution to fit your specific workflow, integrating seamlessly with your existing systems.</p>
<a href="#" class="step-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="step-link-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Arrow for desktop -->
<div class="step-arrow">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</div>
<!-- Step 3 -->
<div class="step-wrapper">
<div class="step-card">
<div class="step-icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="step-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="step-label">Step 3</span>
<h3 class="step-title">Deploy & Support</h3>
<p class="step-description">We ensure smooth implementation with ongoing support and regular updates to optimize performance.</p>
<a href="#" class="step-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="step-link-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="steps-cta-section">
<a href="#" class="steps-cta-button">
<span>Get started today</span>
<svg xmlns="http://www.w3.org/2000/svg" class="steps-cta-button-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
<p class="steps-cta-note">No credit card required • 14-day free trial</p>
</div>
</div>
</section>
<!--
@type: Steps
@industry: Product
@style: Light
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 md:py-24">
<div class="container mx-auto px-4 md:px-8">
<!-- Section Header -->
<div class="max-w-3xl mx-auto text-center mb-16">
<span class="text-blue-600 font-medium text-sm uppercase tracking-wider">How It Works</span>
<h2 class="text-gray-800 text-3xl md:text-4xl font-medium mt-2 mb-4">Transform your workflow in three simple steps</h2>
<p class="text-gray-600 text-lg">Our streamlined process makes implementation quick and easy, so you can focus on what matters most.</p>
</div>
<!-- Steps Container -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 max-w-5xl mx-auto">
<!-- Step 1 -->
<div class="relative">
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm h-full flex flex-col items-center text-center relative z-10">
<div class="w-16 h-16 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<span class="text-blue-600 font-medium text-sm uppercase tracking-wider mb-2">Step 1</span>
<h3 class="text-gray-800 text-xl font-medium mb-3">Analyze Your Needs</h3>
<p class="text-gray-600 mb-6">Our team works with you to understand your unique requirements and goals for product implementation.</p>
<a href="#" class="text-blue-600 font-medium flex items-center mt-auto">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Arrow for desktop -->
<div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 z-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-16 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</div>
<!-- Step 2 -->
<div class="relative">
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm h-full flex flex-col items-center text-center relative z-10">
<div class="w-16 h-16 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</div>
<span class="text-blue-600 font-medium text-sm uppercase tracking-wider mb-2">Step 2</span>
<h3 class="text-gray-800 text-xl font-medium mb-3">Customize & Configure</h3>
<p class="text-gray-600 mb-6">We tailor our solution to fit your specific workflow, integrating seamlessly with your existing systems.</p>
<a href="#" class="text-blue-600 font-medium flex items-center mt-auto">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Arrow for desktop -->
<div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 z-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-16 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</div>
<!-- Step 3 -->
<div class="relative">
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm h-full flex flex-col items-center text-center">
<div class="w-16 h-16 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="text-blue-600 font-medium text-sm uppercase tracking-wider mb-2">Step 3</span>
<h3 class="text-gray-800 text-xl font-medium mb-3">Deploy & Support</h3>
<p class="text-gray-600 mb-6">We ensure smooth implementation with ongoing support and regular updates to optimize performance.</p>
<a href="#" class="text-blue-600 font-medium flex items-center mt-auto">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center bg-white border border-blue-300 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition duration-150 ease-in-out">
<span>Get started today</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
<p class="text-gray-500 mt-4 text-sm">No credit card required • 14-day free trial</p>
</div>
</div>
</section>
