Cta Software Minimal

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