Cta Business Modern

                <!--
@type: Call To Action (CTA)
@industry: Business
@style: Modern
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  --color-white: #ffffff;
  --color-slate-50: #f8fafc;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-900: #0f172a;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
}

/* Component styles */
.cta-section {
  background-color: var(--color-slate-50);
  padding: 4rem 1rem;
}

.cta-card {
  background-color: var(--color-white);
  border-radius: 0.75rem; /* rounded-xl */
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-slate-200);
}

.cta-grid {
  display: grid;
  align-items: center;
}

.cta-content {
  padding: 1.5rem;
}

.cta-tag {
  color: var(--color-indigo-600);
  font-weight: 500; /* font-medium */
}

.cta-title {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700; /* font-bold */
  color: var(--color-slate-900);
}

.cta-text {
  margin-top: 1rem;
  color: var(--color-slate-600);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 500; /* font-medium */
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 1rem;
  line-height: 1.5rem;
  transition: background-color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-indigo-500);
}

.btn-primary {
  background-color: var(--color-indigo-600);
  color: var(--color-white);
  border: 1px solid transparent;
}

.btn-primary:hover {
  background-color: var(--color-indigo-700);
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-slate-700);
  border: 1px solid var(--color-slate-300);
}

.btn-secondary:hover {
  background-color: var(--color-slate-50);
}

.cta-image-container {
  aspect-ratio: 16 / 9;
  height: 100%;
}

.cta-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive breakpoints */
@media (min-width: 640px) {
  .cta-section {
    padding: 6rem 1.5rem;
  }
  
  .cta-content {
    padding: 2.5rem;
  }
}

@media (min-width: 768px) {
  .cta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cta-section {
    padding: 8rem 2rem;
  }
}
</style>

<section class="cta-section">
  <div>
    <div class="cta-card">
      <div class="cta-grid">
        <div class="cta-content">
          <span class="cta-tag">Ready to Transform Your Business?</span>
          <h2 class="cta-title">Take the Next Step Toward Growth</h2>
          <p class="cta-text">
            Discover how you can boost efficiency, cut costs, and accelerate your business success with our all-in-one platform.
          </p>
          <div class="cta-buttons">
            <a href="#" class="btn btn-primary" aria-label="Get started now">
              Get Started Now
            </a>
            <a href="#" class="btn btn-secondary" aria-label="Book a free demo">
              Book a Free Demo
            </a>
          </div>
        </div>
        <div class="cta-image-container">
          <!-- Business image by Pexels (Free to use) -->
          <img src="https://landinggo.com/assets/img/stock/team/team-unsplash-1440x1080.webp" alt="Business team working together" class="cta-image" width="1440" height="1080" loading="lazy">
        </div>
      </div>
    </div> 
  </div>
</section>
            

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

<section class="bg-slate-50 py-16 sm:py-24 lg:py-32">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="bg-white rounded-xl overflow-hidden shadow-xl border border-slate-200">
      <div class="grid md:grid-cols-2 items-center">
        <div class="p-6 sm:p-10">
          <span class="text-indigo-600 font-medium">Ready to Transform Your Business?</span>
          <h2 class="mt-2 text-3xl font-bold text-slate-900">Take the Next Step Toward Growth</h2>
          <p class="mt-4 text-slate-600">
            Discover how you can boost efficiency, cut costs, and accelerate your business success with our all-in-one platform.
          </p>
          <div class="mt-8 flex flex-wrap gap-4">
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg 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" aria-label="Get started now">
              Get Started Now
            </a>
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-slate-300 text-base font-medium rounded-lg text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors" aria-label="Book a free demo">
              Book a Free Demo
            </a>
          </div>
        </div>
        <div class="aspect-video h-full">
          <!-- Business image by Pexels (Free to use) -->
          <img src="https://landinggo.com/assets/img/stock/team/team-unsplash-1440x1080.webp" alt="Business team working together" class="w-full h-full object-cover" width="1440" height="1080" loading="lazy">
        </div>
      </div>
    </div> 
  </div>
</section>