Component:

Steps SaaS Minimal

Name: Steps SaaS Minimal
Availability: InStock

Free

Tags: Steps Page Section Sale SaaS Minimal

Colors:

Description:

This carefully crafted Steps component is perfect for SaaS landing pages, featuring a Minimal design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@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>

Steps SaaS Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions