<!--
@type: Call To Action (CTA)
@industry: SaaS
@style: Minimal
@category: Sale, Page Section
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Component styles */
.cta-section {
position: relative;
overflow: hidden;
background-color: var(--color-white);
padding: var(--spacing-16) 0;
}
.container {
max-width: 80rem; /* 7xl = 80rem */
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.title {
font-size: 1.875rem; /* text-3xl */
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.description {
margin-top: var(--spacing-4);
max-width: 42rem; /* max-w-2xl */
font-size: 1.125rem; /* text-lg */
line-height: 2rem; /* leading-8 */
color: var(--color-gray-600);
}
.buttons-wrapper {
margin-top: var(--spacing-8);
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
padding: var(--spacing-3) var(--spacing-6);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.button-primary {
background-color: var(--color-blue-600);
color: var(--color-white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.button-primary:hover {
background-color: var(--color-blue-500);
}
.button-secondary {
background-color: var(--color-white);
color: var(--color-gray-900);
border: 1px solid var(--color-gray-300);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.button-secondary:hover {
background-color: #f9fafb; /* gray-50 */
}
.button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-blue-600);
}
.button-secondary:focus-visible {
outline: 2px solid var(--color-gray-600);
}
.cta-list {
margin-top: var(--spacing-10);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-4);
}
.cta-item {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.cta-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-blue-600);
}
.cta-text {
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Responsive styles */
@media (min-width: 640px) {
.container {
padding: 0 var(--spacing-6);
}
.cta-section {
padding: var(--spacing-24) 0;
}
.title {
font-size: 2.25rem; /* text-4xl */
}
.buttons-wrapper {
flex-direction: row;
gap: var(--spacing-6);
}
.cta-list {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-6);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
.title {
font-size: 3rem; /* text-5xl */
}
}
</style>
<section class="cta-section">
<div class="container">
<div class="content-wrapper">
<h2 class="title">
Transform Your Business Today
</h2>
<p class="description">
Join thousands of successful companies who have already streamlined their operations with our enterprise-grade SaaS platform.
</p>
<div class="buttons-wrapper">
<a
href="#"
class="button button-primary"
role="button"
aria-label="Start free trial"
>
Start Free Trial
</a>
<a
href="#"
class="button button-secondary"
role="button"
aria-label="Schedule demo"
>
Schedule Demo
</a>
</div>
<div class="cta-list">
<div class="cta-item">
<svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="feature-text">30-day free trial</span>
</div>
<div class="cta-item">
<svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="feature-text">No credit card required</span>
</div>
<div class="cta-item">
<svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Cancel anytime</span>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Call To Action (CTA)
@industry: SaaS
@style: Minimal
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="relative overflow-hidden bg-white py-16 sm:py-24">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex flex-col items-center text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Transform Your Business Today
</h2>
<p class="mt-4 max-w-2xl text-lg leading-8 text-gray-600">
Join thousands of successful companies who have already streamlined their operations with our enterprise-grade SaaS platform.
</p>
<div class="mt-8 flex flex-col gap-4 sm:flex-row sm:gap-6">
<a
href="#"
class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
role="button"
aria-label="Start free trial"
>
Start Free Trial
</a>
<a
href="#"
class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-semibold text-gray-900 shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
role="button"
aria-label="Schedule demo"
>
Schedule Demo
</a>
</div>
<div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:flex-wrap sm:justify-center sm:gap-6">
<div class="flex items-center gap-x-2">
<svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="text-sm text-gray-600">30-day free trial</span>
</div>
<div class="flex items-center gap-x-2">
<svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="text-sm text-gray-600">No credit card required</span>
</div>
<div class="flex items-center gap-x-2">
<svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="text-sm text-gray-600">Cancel anytime</span>
</div>
</div>
</div>
</div>
</section>
