CTA section with animated screen element
Category: CTA
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Marqo CTA</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600&family=Poppins:wght@500&display=swap" rel="stylesheet">
<style>
.animate-on-scroll-hidden {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll-visible {
opacity: 1;
transform: translateY(0);
}
</style>
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.profile-stack-overlap {
margin-left: -15px;
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': '#A7E563',
'brand-dark': '#064035',
'neutral-background': '#ffffff',
'text-white': '#ffffff',
'text-muted': '#F0F4F3',
},
fontFamily: {
'primary': ['Poppins', 'sans-serif'],
'secondary': ['Instrument Sans', 'sans-serif'],
},
borderRadius: {
'xl': '15px',
'full': '999px',
}
}
}
}</script></head>
<body id="app-root" class="bg-white overflow-x-hidden">
<main><section class="w-full flex justify-center items-center py-20 px-8">
<div class="relative w-full max-w-[1200px] min-h-[429px] rounded-xl overflow-hidden flex flex-col justify-center p-12 lg:p-16" data-animation-on-scroll="">
<!-- Background Image -->
<div class="absolute inset-0 z-0">
<img src="https://framerusercontent.com/images/6KDSQ6Slhbtd5qTUnTgZsa1Ah8.png?width=2120&height=864" alt="Background pattern" class="w-full h-full object-cover">
</div>
<!-- Content Wrapper -->
<div class="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
<!-- Left Content -->
<div class="flex flex-col items-start gap-8 max-w-[580px]">
<!-- Social Proof Pill -->
<div class="flex items-center gap-3 bg-white/5 backdrop-blur-sm rounded-full pl-2 pr-4 py-1">
<div class="flex items-center">
<img src="https://images.unsplash.com/photo-1640951613773-54706e06851d?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxVc2VyJTIwYXZhdGFyJTIwbWFsZXxlbnwwfDJ8fHwxNzcwMDEwMzAxfDA&ixlib=rb-4.1.0&w=60&h=60&fit=crop&fm=jpg&q=80" class="w-7 h-7 rounded-full border-2 border-brand-dark z-40" alt="user">
<img src="https://images.unsplash.com/photo-1701615004837-40d8573b6652?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxVc2VyJTIwYXZhdGFyJTIwZmVtYWxlfGVufDB8Mnx8fDE3NzAwMTAzMDF8MA&ixlib=rb-4.1.0&w=60&h=60&fit=crop&fm=jpg&q=80" class="w-7 h-7 rounded-full border-2 border-brand-dark -ml-3 z-30" alt="user">
<img src="https://images.unsplash.com/photo-1750535135593-3a8e5def331d?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxVc2VyJTIwYXZhdGFyJTIweW91bmd8ZW58MHwyfHx8MTc3MDAxMDMwMXww&ixlib=rb-4.1.0&w=60&h=60&fit=crop&fm=jpg&q=80" class="w-7 h-7 rounded-full border-2 border-brand-dark -ml-3 z-20" alt="user">
<img src="https://images.pexels.com/photos/31513875/pexels-photo-31513875.jpeg?w=60&h=60&fit=crop" class="w-7 h-7 rounded-full border-2 border-brand-dark -ml-3 z-10" alt="user">
</div>
<span class="font-secondary text-xs text-text-muted">
Join 5k+ marketing leads worldwide on Marqo
</span>
</div>
<!-- Heading & Copy -->
<div class="flex flex-col gap-5">
<h2 class="font-primary text-[40px] leading-[44px] font-medium text-text-white tracking-[-2px] capitalize">
Don’t wait.<br>Get Results From Day One.
</h2>
<p class="font-secondary text-lg leading-[27px] text-text-white opacity-90">
Find answers to common questions about AI-powered content creation, campaign automation, and analytics tools.
</p>
</div>
<!-- CTA Button -->
<a href="/waitlist" class="bg-brand-primary text-brand-dark font-secondary font-semibold text-sm px-8 py-4 rounded-full transition-transform hover:scale-105">
Join the waitlist
</a>
</div>
<!-- Right Dashboard Image -->
<div class="hidden lg:block relative w-[425px] h-[377px] self-end translate-y-12" data-animation-on-scroll="">
<img src="https://framerusercontent.com/images/U2sq8X4nufcwPCrgMs8aR6r2dOM.svg?width=422&height=374" alt="Dashboard Preview" class="w-full h-full object-contain object-bottom">
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Specific page logic if needed
});
</script></main>
<script>
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-on-scroll-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('[data-animation-on-scroll]').forEach(el => {
el.classList.add('animate-on-scroll-hidden');
observer.observe(el);
});
});
</script>
</body></html> change the textual content
Created by: LandingHero
![\"Background](\"https://framerusercontent.com/images/6KDSQ6Slhbtd5qTUnTgZsa1Ah8.png?width=2120&height=864\")
\n ![\"user\"](\"https://images.unsplash.com/photo-1640951613773-54706e06851d?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxVc2VyJTIwYXZhdGFyJTIwbWFsZXxlbnwwfDJ8fHwxNzcwMDEwMzAxfDA&ixlib=rb-4.1.0&w=60&h=60&fit=crop&fm=jpg&q=80\")
\n ![\"user\"](\"https://images.unsplash.com/photo-1701615004837-40d8573b6652?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxVc2VyJTIwYXZhdGFyJTIwZmVtYWxlfGVufDB8Mnx8fDE3NzAwMTAzMDF8MA&ixlib=rb-4.1.0&w=60&h=60&fit=crop&fm=jpg&q=80\")
\n ![\"user\"](\"https://images.unsplash.com/photo-1750535135593-3a8e5def331d?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxVc2VyJTIwYXZhdGFyJTIweW91bmd8ZW58MHwyfHx8MTc3MDAxMDMwMXww&ixlib=rb-4.1.0&w=60&h=60&fit=crop&fm=jpg&q=80\")
\n ![\"user\"](\"https://images.pexels.com/photos/31513875/pexels-photo-31513875.jpeg?w=60&h=60&fit=crop\")
\n ![\"Dashboard](\"https://framerusercontent.com/images/U2sq8X4nufcwPCrgMs8aR6r2dOM.svg?width=422&height=374\")
\n