<!--
@type: Steps
@industry: SaaS
@style: Minimal
@category: Page Section, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
/* Font Sizes */
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
}
/* 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 */
.steps-section {
background-color: var(--color-white);
padding: var(--spacing-12) var(--spacing-4);
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
}
.header {
max-width: 48rem; /* max-w-3xl */
margin: 0 auto;
text-align: center;
margin-bottom: var(--spacing-12);
}
.header-tag {
color: var(--color-blue-600);
font-size: var(--text-sm);
font-weight: 500;
display: block;
margin-bottom: var(--spacing-2);
}
.header-title {
font-size: var(--text-3xl);
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: var(--spacing-4);
}
.header-description {
font-size: var(--text-lg);
color: var(--color-gray-600);
}
.steps-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
position: relative;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.step-number {
width: 3rem;
height: 3rem;
border-radius: 9999px;
background-color: var(--color-blue-600);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xl);
font-weight: 600;
margin-bottom: var(--spacing-4);
position: relative;
z-index: 10;
}
.step-title {
font-size: var(--text-xl);
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: var(--spacing-2);
}
.step-description {
color: var(--color-gray-600);
}
.cta-section {
margin-top: var(--spacing-12);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-6);
border: 1px solid transparent;
border-radius: 0.5rem;
font-size: var(--text-base);
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
text-decoration: none;
transition: background-color 150ms ease-in-out;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button svg {
margin-left: var(--spacing-2);
margin-right: -0.25rem;
width: 1.25rem;
height: 1.25rem;
}
.cta-note {
margin-top: var(--spacing-4);
font-size: var(--text-sm);
color: var(--color-gray-600);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.steps-section {
padding: var(--spacing-16) var(--spacing-6);
}
.header-title {
font-size: var(--text-4xl);
}
}
@media (min-width: 1024px) {
.steps-section {
padding: var(--spacing-20) var(--spacing-8);
}
.header {
margin-bottom: var(--spacing-16);
}
.steps-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-12);
}
.cta-section {
margin-top: var(--spacing-16);
}
}
</style>
<section class="steps-section">
<div class="container">
<!-- Section Header -->
<div class="header">
<span class="header-tag">How It Works</span>
<h2 class="header-title">Transform Your Workflow in Three Simple Steps</h2>
<p class="header-description">Experience seamless integration and automation with our enterprise-grade platform designed to streamline your business processes.</p>
</div>
<!-- Steps Container -->
<div class="steps-grid">
<!-- Step 1 -->
<div class="step">
<div class="step-number">1</div>
<h3 class="step-title">Connect Your Tools</h3>
<p class="step-description">Seamlessly integrate with your existing software stack using our powerful API and pre-built connectors.</p>
</div>
<!-- Step 2 -->
<div class="step">
<div class="step-number">2</div>
<h3 class="step-title">Configure Workflows</h3>
<p class="step-description">Design custom automation workflows with our intuitive drag-and-drop interface, no coding required.</p>
</div>
<!-- Step 3 -->
<div class="step">
<div class="step-number">3</div>
<h3 class="step-title">Automate & Scale</h3>
<p class="step-description">Watch your productivity soar as our platform handles repetitive tasks, allowing your team to focus on strategic work.</p>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button" role="button" aria-label="Start Free Trial">
Start Free Trial
<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="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
<p class="cta-note">No credit card required • 14-day free trial</p>
</div>
</div>
</section>
<!--
@type: Steps
@industry: SaaS
@style: Minimal
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16 lg:py-20">
<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-12 lg:mb-16">
<span class="text-blue-600 font-medium mb-2 block text-sm">How It Works</span>
<h2 class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">Transform Your Workflow in Three Simple Steps</h2>
<p class="text-lg text-gray-600">Experience seamless integration and automation with our enterprise-grade platform designed to streamline your business processes.</p>
</div>
<!-- Steps Container -->
<div class="relative">
<!-- Steps Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 relative">
<!-- Step 1 -->
<div class="relative flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-semibold mb-4 relative z-10">1</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Connect Your Tools</h3>
<p class="text-gray-600">Seamlessly integrate with your existing software stack using our powerful API and pre-built connectors.</p>
</div>
<!-- Step 2 -->
<div class="relative flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-semibold mb-4 relative z-10">2</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Configure Workflows</h3>
<p class="text-gray-600">Design custom automation workflows with our intuitive drag-and-drop interface, no coding required.</p>
</div>
<!-- Step 3 -->
<div class="relative flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-semibold mb-4 relative z-10">3</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Automate & Scale</h3>
<p class="text-gray-600">Watch your productivity soar as our platform handles repetitive tasks, allowing your team to focus on strategic work.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 lg:mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-base font-medium text-white bg-blue-600 hover:bg-blue-700 transition duration-150 ease-in-out" role="button" aria-label="Start Free Trial">
Start Free Trial
<svg class="ml-2 -mr-1 w-5 h-5" 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="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
<p class="mt-4 text-sm text-gray-600">No credit card required • 14-day free trial</p>
</div>
</div>
</section>
