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