Component:

Cta SaaS Minimal

Name: Cta SaaS Minimal
Availability: InStock

Free

Tags: Call To Action (CTA)Page Section Sale SaaS Minimal

Colors:

Description:

This carefully crafted Call To Action (CTA) 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: Call To Action (CTA)
@industry: SaaS
@style: Minimal
@category: Sale, Page Section
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-300: #d1d5db;
  --color-gray-600: #4b5563;
  --color-gray-900: #111827;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  
  /* Spacing */
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Component styles */
.cta-section {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  padding: var(--spacing-16) 0;
}

.container {
  max-width: 80rem; /* 7xl = 80rem */
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-gray-900);
}

.description {
  margin-top: var(--spacing-4);
  max-width: 42rem; /* max-w-2xl */
  font-size: 1.125rem; /* text-lg */
  line-height: 2rem; /* leading-8 */
  color: var(--color-gray-600);
}

.buttons-wrapper {
  margin-top: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: var(--spacing-3) var(--spacing-6);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.button-primary {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button-primary:hover {
  background-color: var(--color-blue-500);
}

.button-secondary {
  background-color: var(--color-white);
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-300);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button-secondary:hover {
  background-color: #f9fafb; /* gray-50 */
}

.button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.button-primary:focus-visible {
  outline: 2px solid var(--color-blue-600);
}

.button-secondary:focus-visible {
  outline: 2px solid var(--color-gray-600);
}

.cta-list {
  margin-top: var(--spacing-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.cta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.cta-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-blue-600);
}

.cta-text {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

/* Responsive styles */
@media (min-width: 640px) {
  .container {
    padding: 0 var(--spacing-6);
  }
  
  .cta-section {
    padding: var(--spacing-24) 0;
  }
  
  .title {
    font-size: 2.25rem; /* text-4xl */
  }
  
  .buttons-wrapper {
    flex-direction: row;
    gap: var(--spacing-6);
  }
  
  .cta-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-8);
  }
  
  .title {
    font-size: 3rem; /* text-5xl */
  }
}
</style>

<section class="cta-section">
  <div class="container">
    <div class="content-wrapper">
      <h2 class="title">
        Transform Your Business Today
      </h2>
      
      <p class="description">
        Join thousands of successful companies who have already streamlined their operations with our enterprise-grade SaaS platform.
      </p>

      <div class="buttons-wrapper">
        <a
          href="#"
          class="button button-primary"
          role="button"
          aria-label="Start free trial"
        >
          Start Free Trial
        </a>
        
        <a
          href="#"
          class="button button-secondary"
          role="button"
          aria-label="Schedule demo"
        >
          Schedule Demo
        </a>
      </div>

      <div class="cta-list">
        <div class="cta-item">
          <svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
          <span class="feature-text">30-day free trial</span>
        </div>

        <div class="cta-item">
          <svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
          <span class="feature-text">No credit card required</span>
        </div>

        <div class="cta-item">
          <svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
          <span class="feature-text">Cancel anytime</span>
        </div>
      </div>
    </div>
  </div>
</section>


                <!--
@type: Call To Action (CTA)
@industry: SaaS
@style: Minimal
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->

<section class="relative overflow-hidden bg-white py-16 sm:py-24">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col items-center text-center">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
        Transform Your Business Today
      </h2>
      
      <p class="mt-4 max-w-2xl text-lg leading-8 text-gray-600">
        Join thousands of successful companies who have already streamlined their operations with our enterprise-grade SaaS platform.
      </p>

      <div class="mt-8 flex flex-col gap-4 sm:flex-row sm:gap-6">
        <a
          href="#"
          class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
          role="button"
          aria-label="Start free trial"
        >
          Start Free Trial
        </a>
        
        <a
          href="#"
          class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-semibold text-gray-900 shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
          role="button"
          aria-label="Schedule demo"
        >
          Schedule Demo
        </a>
      </div>

      <div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:flex-wrap sm:justify-center sm:gap-6">
        <div class="flex items-center gap-x-2">
          <svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
          <span class="text-sm text-gray-600">30-day free trial</span>
        </div>

        <div class="flex items-center gap-x-2">
          <svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
          <span class="text-sm text-gray-600">No credit card required</span>
        </div>

        <div class="flex items-center gap-x-2">
          <svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
          <span class="text-sm text-gray-600">Cancel anytime</span>
        </div>
      </div>
    </div>
  </div>
</section>

Cta SaaS Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions