<!--
@type: Call To Action (CTA)
@industry: Product
@style: Light
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-yellow-400: #facc15;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.final-cta-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) var(--spacing-4);
}
.final-cta-container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.cta-card {
position: relative;
overflow: hidden;
border-radius: 1rem;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cta-grid {
display: grid;
gap: var(--spacing-8);
}
.cta-content {
padding: var(--spacing-8);
}
.cta-label {
display: inline-block;
color: var(--color-blue-600);
font-weight: 500;
margin-bottom: var(--spacing-3);
line-height: 1;
}
.cta-title {
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
letter-spacing: -0.025em;
line-height: 1.2;
}
.cta-description {
margin-top: var(--spacing-4);
color: var(--color-gray-600);
font-size: 1.125rem;
}
.cta-feature-list {
margin-top: var(--spacing-8);
display: flex;
flex-direction: column;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.cta-feature-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-blue-600);
}
.cta-feature-text {
color: var(--color-gray-600);
}
.final-cta-buttons {
margin-top: var(--spacing-10);
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
font-weight: 500;
font-size: 1rem;
text-decoration: none;
transition: all 0.2s ease;
}
.cta-button-secondary {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
color: var(--color-gray-800);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cta-button-secondary:hover {
background-color: var(--color-gray-50);
}
.cta-button-primary {
background-color: var(--color-blue-600);
color: var(--color-white);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cta-button-primary:hover {
background-color: var(--color-blue-700);
}
.cta-button-icon {
margin-left: var(--spacing-2);
margin-right: -0.25rem;
width: 1rem;
height: 1rem;
}
.cta-image-wrapper {
position: relative;
height: 100%;
}
.cta-image {
height: 100%;
width: 100%;
object-fit: cover;
}
.cta-footer {
background-color: var(--color-gray-50);
padding: var(--spacing-6) var(--spacing-8);
margin-top: var(--spacing-6);
border-top: 1px solid var(--color-gray-100);
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-4);
}
.avatar-group {
display: flex;
margin-right: var(--spacing-4);
}
.avatar {
width: 2rem;
height: 2rem;
border-radius: 9999px;
margin-right: -0.5rem;
border: 2px solid var(--color-white);
}
.stats-group {
display: flex;
align-items: center;
}
.stats-text {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.stats-value {
font-weight: 500;
color: var(--color-gray-800);
}
.rating-stars {
display: flex;
color: var(--color-yellow-400);
}
.star-icon {
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.cta-section {
padding: var(--spacing-20) var(--spacing-6);
}
.cta-content {
padding: var(--spacing-10);
}
.cta-title {
font-size: 2.25rem;
line-height: 1.2;
}
.footer-content {
flex-direction: row;
justify-content: space-between;
}
.stats-group {
flex-direction: row;
}
}
@media (min-width: 768px) {
.cta-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-12);
}
.cta-footer {
margin-top: 0;
}
}
@media (min-width: 1024px) {
.cta-section {
padding: var(--spacing-24) var(--spacing-8);
}
.cta-content {
padding: var(--spacing-12);
}
}
</style>
<section class="final-cta-section">
<div class="final-cta-container">
<div class="cta-card">
<div class="cta-grid">
<div class="cta-content">
<span class="cta-label">Limited Time Offer</span>
<h2 class="cta-title">
Elevate your product experience
</h2>
<p class="cta-description">
Join thousands of product teams who have streamlined their design workflow and improved collaboration with our intuitive platform.
</p>
<div class="cta-feature-list">
<div class="feature-item">
<svg class="cta-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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="cta-feature-text">14-day free trial with full access</span>
</div>
<div class="feature-item">
<svg class="cta-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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="cta-feature-text">No credit card required</span>
</div>
<div class="feature-item">
<svg class="cta-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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="cta-feature-text">Cancel anytime</span>
</div>
</div>
<div class="final-cta-buttons">
<a href="#" class="cta-button cta-button-secondary" aria-label="Try for free">
Try for free
</a>
<a href="#" class="cta-button cta-button-primary" aria-label="Schedule a demo">
Schedule a demo
<svg class="cta-button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="cta-image-wrapper">
<img
src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
alt="Product dashboard interface"
class="cta-image"
width="1320"
height="900"
loading="lazy"
>
</div>
</div>
<div class="cta-footer">
<div class="footer-content">
<div class="stats-group">
<div class="avatar-group">
<img class="avatar" src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="User avatar" width="40" height="40" loading="lazy">
<img class="avatar" src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="User avatar" width="40" height="40" loading="lazy">
<img class="avatar" src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="User avatar" width="40" height="40" loading="lazy">
</div>
<p class="stats-text">
<span class="stats-value">500+</span> product teams trust us
</p>
</div>
<div class="stats-group">
<div class="rating-stars">
<svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
</div>
<p class="stats-text">
<span class="stats-value">4.9/5</span> from 2,000+ reviews
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Call To Action (CTA)
@industry: Product
@style: Light
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 sm:py-20 lg:py-24">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="relative overflow-hidden rounded-2xl bg-white border border-gray-200 shadow-sm">
<div class="grid md:grid-cols-2 gap-8 lg:gap-12">
<div class="p-8 sm:p-10 lg:p-12">
<span class="inline-block text-blue-600 font-medium mb-3">Limited Time Offer</span>
<h2 class="text-3xl sm:text-4xl font-medium text-gray-800 tracking-tight">
Elevate your product experience
</h2>
<p class="mt-4 text-gray-600 text-lg">
Join thousands of product teams who have streamlined their design workflow and improved collaboration with our intuitive platform.
</p>
<div class="mt-8 space-y-4">
<div class="flex items-center gap-x-3">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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-gray-600">14-day free trial with full access</span>
</div>
<div class="flex items-center gap-x-3">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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-gray-600">No credit card required</span>
</div>
<div class="flex items-center gap-x-3">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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-gray-600">Cancel anytime</span>
</div>
</div>
<div class="mt-10 flex flex-wrap gap-4">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-white border border-gray-200 text-gray-800 rounded-lg hover:bg-gray-50 shadow-sm transition-colors duration-200 font-medium" aria-label="Try for free">
Try for free
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-sm transition-colors duration-200 font-medium" aria-label="Schedule a demo">
Schedule a demo
<svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="relative h-full">
<!-- Product image by Figcomponents (CC BY 4.0) -->
<img
src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
alt="Product dashboard interface"
class="h-full w-full object-cover md:absolute md:inset-0"
width="1320"
height="900"
loading="lazy"
>
</div>
</div>
<div class="bg-gray-50 px-8 py-6 mt-6 md:mt-0 md:border-t border-gray-100">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center space-x-4">
<div class="flex -space-x-2">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="User avatar" width="40" height="40" loading="lazy">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="User avatar" width="40" height="40" loading="lazy">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="User avatar" width="40" height="40" loading="lazy">
</div>
<p class="text-sm text-gray-600">
<span class="font-medium text-gray-800">500+</span> product teams trust us
</p>
</div>
<div class="flex items-center">
<div class="flex text-yellow-400">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
</svg>
</div>
<p class="ml-2 text-sm text-gray-600">
<span class="font-medium text-gray-800">4.9/5</span> from 2,000+ reviews
</p>
</div>
</div>
</div>
</div>
</div>
</section>
