<!--
@type: Call To Action (CTA)
@industry: Marketing
@style: Dark
@category: Sale, Page Section
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
}
/* Reset */
* {
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";
}
/* Component styles */
.cta-section {
position: relative;
background-color: var(--color-gray-900);
padding: 4rem 1rem;
overflow: hidden;
}
.content-wrapper {
max-width: 42rem; /* max-w-2xl */
margin: 0 auto;
text-align: center;
}
.title {
font-size: 1.875rem; /* text-3xl */
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
line-height: 1;
}
.description {
margin-top: 1.5rem;
font-size: 1.125rem;
line-height: 2rem;
color: var(--color-gray-300);
}
.button-group {
margin-top: 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
.primary-button,
.secondary-button {
width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 0.5rem;
transition: background-color 0.2s;
text-decoration: none;
}
.primary-button {
color: var(--color-white);
background-color: var(--color-blue-600);
}
.primary-button:hover {
background-color: var(--color-blue-700);
}
.primary-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-500), 0 0 0 4px var(--color-gray-900);
}
.secondary-button {
color: var(--color-gray-300);
background-color: var(--color-gray-800);
}
.secondary-button:hover {
background-color: var(--color-gray-700);
}
.secondary-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-gray-500), 0 0 0 4px var(--color-gray-900);
}
.arrow-icon {
margin-left: 0.625rem;
height: 1.25rem;
width: 1.25rem;
}
/* Responsive styles */
@media (min-width: 640px) {
.cta-section {
padding: 6rem 1.5rem;
}
.title {
font-size: 2.25rem; /* sm:text-4xl */
}
.button-group {
flex-direction: row;
}
.primary-button,
.secondary-button {
width: auto;
}
}
@media (min-width: 1024px) {
.cta-section {
padding: 8rem 2rem;
}
.title {
font-size: 3rem; /* lg:text-5xl */
}
}
</style>
<section class="cta-section">
<div class="content-wrapper">
<h2 class="title">
Transform Your Marketing Strategy Today
</h2>
<p class="description">
Join over 3,000+ marketing professionals who have already elevated their campaigns. Get access to premium tools, templates, and insights that drive real results.
</p>
<div class="button-group">
<a
href="#"
class="primary-button"
aria-label="Start free trial"
>
Start Free Trial
<svg class="arrow-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<a
href="#"
class="secondary-button"
aria-label="Schedule demo"
>
Schedule Demo
</a>
</div>
</div>
</section>
<!--
@type: Call To Action (CTA)
@industry: Marketing
@style: Dark
@category: Sale, Page Section
@framework: Tailwind
@license: Free
-->
<section class="relative bg-gray-900 py-16 sm:py-24 lg:py-32 overflow-hidden">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
Transform Your Marketing Strategy Today
</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">
Join over 3,000+ marketing professionals who have already elevated their campaigns. Get access to premium tools, templates, and insights that drive real results.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-6">
<a
href="#"
class="w-full sm:w-auto inline-flex justify-center items-center px-6 py-3 text-base font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 rounded-lg transition-colors duration-200"
aria-label="Start free trial"
>
Start Free Trial
<svg class="ml-2.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<a
href="#"
class="w-full sm:w-auto inline-flex justify-center items-center px-6 py-3 text-base font-semibold text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-900 rounded-lg transition-colors duration-200"
aria-label="Schedule demo"
>
Schedule Demo
</a>
</div>
</div>
</div>
</section>
