Component:

Cta Software Minimal

Name: Cta Software Minimal
Availability: InStock

Free

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

Colors:

Description:

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

<style>
:root {
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-300: #d1d5db;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-green-100: #dcfce7;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-yellow-400: #facc15;
}

* {
  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";
}

.final-cta-section {
  background-color: var(--color-white);
  padding: 4rem 1rem;
}

@media (min-width: 640px) {
  .final-cta-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;
  }
}

.final-cta-wrapper {
  background-image: linear-gradient(to right, var(--color-indigo-50), var(--color-indigo-50));
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.final-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .final-cta-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.final-cta-content-column {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 640px) {
  .final-cta-content-column {
    padding: 3rem;
  }
}

.final-cta-heading {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

@media (min-width: 640px) {
  .final-cta-heading {
    font-size: 2.25rem;
  }
}

.final-cta-description {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--color-gray-600);
  max-width: 42rem;
}

.final-cta-trust-indicators {
  margin-top: 1.5rem;
}

.final-cta-user-avatars {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.final-cta-avatar-group {
  display: flex;
  margin-right: 0.5rem;
}

.final-cta-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 2px solid var(--color-white);
  object-fit: cover;
  margin-right: -0.5rem;
}

.final-cta-avatar-text {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.final-cta-star-rating {
  display: flex;
  align-items: center;
}

.final-cta-star {
  height: 1.25rem;
  width: 1.25rem;
  color: var(--color-yellow-400);
}

.final-cta-rating-text {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.final-cta-buttons {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .final-cta-buttons {
    flex-direction: row;
  }
}

.final-cta-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-white);
  background-color: var(--color-indigo-600);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
  text-decoration: none;
}

.final-cta-primary-button:hover {
  background-color: var(--color-indigo-700);
}

.final-cta-primary-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-600);
}

.final-cta-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-gray-700);
  background-color: var(--color-white);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
  text-decoration: none;
}

.final-cta-secondary-button:hover {
  background-color: var(--color-gray-50);
}

.final-cta-secondary-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-600);
}

.final-cta-button-icon {
  margin-left: 0.5rem;
  margin-right: -0.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

.final-cta-security-info {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
}

.final-cta-security-icon {
  height: 1.25rem;
  width: 1.25rem;
  margin-right: 0.5rem;
  color: var(--color-green-500);
}

.final-cta-visual-column {
  position: relative;
  display: none;
}

@media (min-width: 1024px) {
  .final-cta-visual-column {
    display: block;
  }
}

.final-cta-decorative-circle-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  background-color: var(--color-indigo-200);
  border-radius: 9999px;
  opacity: 0.5;
  transform: translate(1rem, -1rem);
}

.final-cta-decorative-circle-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8rem;
  height: 8rem;
  background-color: var(--color-indigo-200);
  border-radius: 9999px;
  opacity: 0.5;
  transform: translate(-1rem, 1rem);
}

.final-cta-dashboard-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.final-cta-dashboard-preview {
  background-color: var(--color-white);
  border-radius: 0.75rem;
  border: 2px solid var(--color-indigo-600);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  max-width: 28rem;
  transform: rotate(1deg);
}

.final-cta-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.final-cta-dashboard-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.final-cta-dashboard-subtitle {
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.final-cta-dashboard-badge {
  background-color: var(--color-indigo-50);
  color: var(--color-indigo-700);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.final-cta-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.final-cta-stat-card {
  background-color: var(--color-gray-50);
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.final-cta-stat-label {
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.final-cta-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

.final-cta-stat-change {
  font-size: 0.75rem;
  color: var(--color-green-600);
  display: flex;
  align-items: center;
}

.final-cta-stat-icon {
  height: 0.75rem;
  width: 0.75rem;
  margin-right: 0.25rem;
}

.final-cta-quick-actions {
  background-color: var(--color-indigo-50);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.final-cta-quick-actions-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-indigo-800);
  margin-bottom: 0.5rem;
}

.final-cta-action-buttons {
  display: flex;
  gap: 0.5rem;
}

.final-cta-action-button-primary {
  background-color: var(--color-indigo-600);
  color: var(--color-white);
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}

.final-cta-action-button-secondary {
  background-color: var(--color-white);
  color: var(--color-indigo-600);
  border: 1px solid var(--color-indigo-200);
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.final-cta-activity-section {
  margin-top: 0.5rem;
}

.final-cta-activity-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: 0.5rem;
}

.final-cta-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.final-cta-activity-item {
  display: flex;
  align-items: center;
}

.final-cta-activity-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  margin-right: 0.75rem;
}

.final-cta-activity-icon--green {
  background-color: var(--color-green-100);
  color: var(--color-green-600);
}

.final-cta-activity-icon--indigo {
  background-color: var(--color-indigo-100);
  color: var(--color-indigo-600);
}

.final-cta-activity-content-title {
  font-size: 0.75rem;
  color: var(--color-gray-900);
}

.final-cta-activity-content-time {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}
</style>

<section class="final-cta-section" aria-labelledby="final-cta-heading">
  <div class="container">
    <!-- Two-column layout container -->
    <div class="final-cta-wrapper">
      <div class="final-cta-grid">
        <!-- Left column: Content -->
        <div class="final-cta-content-column">
          <h2 id="final-cta-heading" class="final-cta-heading">
            Ready to streamline your business operations?
          </h2>
          <p class="final-cta-description">
            Join thousands of small business owners who have transformed their workflow with DevStack. Start your 14-day free trial today - no credit card required.
          </p>
          
          <!-- Trust indicators -->
          <div class="final-cta-trust-indicators">
            <div class="final-cta-user-avatars">
              <div class="final-cta-avatar-group">
                <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="John Doe" class="final-cta-avatar">
                <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Kate Lee" class="final-cta-avatar">
                <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Mike North" class="final-cta-avatar">
              </div>
              <span class="final-cta-avatar-text">Joined last week</span>
            </div>
            <div class="final-cta-star-rating">
              <svg class="final-cta-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="final-cta-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="final-cta-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="final-cta-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="final-cta-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <span class="final-cta-rating-text">4.9/5 from 230+ reviews</span>
            </div>
          </div>
          
          <!-- Action buttons -->
          <div class="final-cta-buttons">
            <a href="#" class="final-cta-primary-button">
              Start free trial
            </a>
            <a href="#" class="final-cta-secondary-button">
              Schedule demo
              <svg xmlns="http://www.w3.org/2000/svg" class="final-cta-button-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>
          
          <!-- Additional trust info -->
          <p class="final-cta-security-info">
            <svg xmlns="http://www.w3.org/2000/svg" class="final-cta-security-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            Enterprise-grade security with SOC 2 and GDPR compliance
          </p>
        </div>
        
        <!-- Right column: Image/Visual -->
        <div class="final-cta-visual-column">
          <!-- Decorative elements -->
          <div class="final-cta-decorative-circle-1"></div>
          <div class="final-cta-decorative-circle-2"></div>
          
          <!-- Main visual -->
          <div class="final-cta-dashboard-container">
            <!-- Dashboard preview -->
            <div class="final-cta-dashboard-preview">
              <!-- Dashboard header -->
              <div class="final-cta-dashboard-header">
                <div>
                  <h3 class="final-cta-dashboard-title">Dashboard Overview</h3>
                  <p class="final-cta-dashboard-subtitle">Welcome back, Sarah</p>
                </div>
                <div class="final-cta-dashboard-badge">
                  Pro Plan
                </div>
              </div>
              
              <!-- Dashboard stats -->
              <div class="final-cta-dashboard-stats">
                <div class="final-cta-stat-card">
                  <p class="final-cta-stat-label">Monthly Revenue</p>
                  <p class="final-cta-stat-value">$24,500</p>
                  <p class="final-cta-stat-change">
                    <svg xmlns="http://www.w3.org/2000/svg" class="final-cta-stat-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                    </svg>
                    12% from last month
                  </p>
                </div>
                <div class="final-cta-stat-card">
                  <p class="final-cta-stat-label">Active Clients</p>
                  <p class="final-cta-stat-value">48</p>
                  <p class="final-cta-stat-change">
                    <svg xmlns="http://www.w3.org/2000/svg" class="final-cta-stat-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                    </svg>
                    3 new this week
                  </p>
                </div>
              </div>
              
              <!-- Quick actions -->
              <div class="final-cta-quick-actions">
                <h4 class="final-cta-quick-actions-title">Ready to get started?</h4>
                <div class="final-cta-action-buttons">
                  <button class="final-cta-action-button-primary">Import Data</button>
                  <button class="final-cta-action-button-secondary">Invite Team</button>
                </div>
              </div>
              
              <!-- Recent activity -->
              <div class="final-cta-activity-section">
                <h4 class="final-cta-activity-title">Recent Activity</h4>
                <div class="final-cta-activity-list">
                  <div class="final-cta-activity-item">
                    <div class="final-cta-activity-icon final-cta-activity-icon--green">✓</div>
                    <div>
                      <p class="final-cta-activity-content-title">Invoice #2984 paid</p>
                      <p class="final-cta-activity-content-time">2 hours ago</p>
                    </div>
                  </div>
                  <div class="final-cta-activity-item">
                    <div class="final-cta-activity-icon final-cta-activity-icon--indigo">+</div>
                    <div>
                      <p class="final-cta-activity-content-title">New client: Acme Inc.</p>
                      <p class="final-cta-activity-content-time">Yesterday</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


                <!--
@type: Call To Action (CTA)
@industry: Software
@style: Minimal
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="cta-heading">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Two-column layout container -->
    <div class="bg-gradient-to-r from-indigo-50 to-indigo-50 rounded-2xl overflow-hidden shadow-sm">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Left column: Content -->
        <div class="p-8 sm:p-12 flex flex-col justify-center">
          <h2 id="cta-heading" class="text-3xl sm:text-4xl font-bold text-gray-900 tracking-tight">
            Ready to streamline your business operations?
          </h2>
          <p class="mt-4 text-lg text-gray-600 max-w-2xl">
            Join thousands of small business owners who have transformed their workflow with DevStack. Start your 14-day free trial today - no credit card required.
          </p>
          
          <!-- Trust indicators -->
          <div class="mt-6">
            <div class="flex items-center mb-2">
              <div class="flex -space-x-2">
                <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="John Doe" class="w-8 h-8 rounded-full border-2 border-white object-cover">
                <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Kate Lee" class="w-8 h-8 rounded-full border-2 border-white object-cover">
                <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Mike North" class="w-8 h-8 rounded-full border-2 border-white object-cover">
              </div>
              <span class="ml-2 text-sm text-gray-500">Joined last week</span>
            </div>
            <div class="flex items-center">
              <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <span class="ml-2 text-sm text-gray-500">4.9/5 from 230+ reviews</span>
            </div>
          </div>
          
          <!-- Action buttons -->
          <div class="mt-8 flex flex-col sm:flex-row gap-4">
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
              Start free trial
            </a>
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
              Schedule demo
              <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 -mr-1 h-5 w-5" 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>
          
          <!-- Additional trust info -->
          <p class="mt-6 text-sm text-gray-500 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            Enterprise-grade security with SOC 2 and GDPR compliance
          </p>
        </div>
        
        <!-- Right column: Image/Visual -->
        <div class="hidden lg:block relative">
          <!-- Decorative elements -->
          <div class="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-indigo-200 rounded-full opacity-50"></div>
          <div class="absolute bottom-0 left-0 -mb-4 -ml-4 w-32 h-32 bg-indigo-200 rounded-full opacity-50"></div>
          
          <!-- Main visual -->
          <div class="h-full flex items-center justify-center p-8">
            <!-- Dashboard preview -->
            <div class="bg-white rounded-xl border-2 border-indigo-600 shadow-lg p-4 max-w-md transform rotate-1">
              <!-- Dashboard header -->
              <div class="flex items-center justify-between mb-4">
                <div>
                  <h3 class="text-lg font-medium text-gray-900">Dashboard Overview</h3>
                  <p class="text-sm text-gray-500">Welcome back, Sarah</p>
                </div>
                <div class="bg-indigo-50 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium">
                  Pro Plan
                </div>
              </div>
              
              <!-- Dashboard stats -->
              <div class="grid grid-cols-2 gap-4 mb-4">
                <div class="bg-gray-50 p-3 rounded-lg">
                  <p class="text-sm text-gray-500">Monthly Revenue</p>
                  <p class="text-xl font-bold text-gray-900">$24,500</p>
                  <p class="text-xs text-green-600 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                    </svg>
                    12% from last month
                  </p>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                  <p class="text-sm text-gray-500">Active Clients</p>
                  <p class="text-xl font-bold text-gray-900">48</p>
                  <p class="text-xs text-green-600 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                    </svg>
                    3 new this week
                  </p>
                </div>
              </div>
              
              <!-- Quick actions -->
              <div class="bg-indigo-50 p-4 rounded-lg mb-4">
                <h4 class="text-sm font-medium text-indigo-800 mb-2">Ready to get started?</h4>
                <div class="flex space-x-2">
                  <button class="bg-indigo-600 text-white text-xs py-1 px-3 rounded">Import Data</button>
                  <button class="bg-white text-indigo-600 border border-indigo-200 text-xs py-1 px-3 rounded">Invite Team</button>
                </div>
              </div>
              
              <!-- Recent activity -->
              <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">Recent Activity</h4>
                <div class="space-y-2">
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-xs mr-3">✓</div>
                    <div>
                      <p class="text-xs text-gray-900">Invoice #2984 paid</p>
                      <p class="text-xs text-gray-500">2 hours ago</p>
                    </div>
                  </div>
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 text-xs mr-3">+</div>
                    <div>
                      <p class="text-xs text-gray-900">New client: Acme Inc.</p>
                      <p class="text-xs text-gray-500">Yesterday</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Cta Software Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions