Image grid style testimonial cards
Category: Testimonials
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>Analytics Showcase</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
.animate-on-scroll-hidden {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.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;
}
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(6, 64, 53)',
'brand-secondary': 'rgb(231, 249, 211)',
'neutral-background': 'rgb(255, 255, 255)',
'neutral-surface': 'rgb(240, 244, 243)',
'text-primary': 'rgb(6, 64, 53)',
'text-secondary': 'rgb(82, 82, 82)',
'text-onPrimary': 'rgb(255, 255, 255)',
},
fontFamily: {
'primary': ['Poppins', 'sans-serif'],
'secondary': ['Instrument Sans', 'sans-serif'],
},
borderRadius: {
'custom': '15px',
}
}
}
}</script></head>
<body id="app-root" class="font-secondary bg-neutral-background text-text-secondary overflow-x-hidden">
<main><div id="testimonial-section" class="flex flex-col items-center py-20 px-4 md:px-0 gap-12 max-w-[1200px] mx-auto overflow-visible">
<!-- Heading Section -->
<div data-animation-on-scroll="" class="flex flex-col items-center text-center gap-5 max-w-[700px]">
<h2 class="font-primary text-[40px] font-500 leading-[44px] tracking-[-2px] text-brand-primary capitalize">
Guaranteed result for clients
</h2>
<p class="text-lg leading-[27px] text-text-secondary">
Brands love how our AI-powered platform automates campaigns, generates authentic content, and delivers actionable insights.
</p>
</div>
<!-- Testimonials Grid -->
<div class="flex flex-col lg:flex-row gap-[10px] w-full items-center">
<!-- Column 1 -->
<div data-animation-on-scroll="" class="flex-1 flex flex-col gap-[10px] w-full lg:w-[366.6px]">
<!-- Image Card 1 -->
<div class="relative h-[280px] rounded-custom overflow-hidden group">
<img src="https://framerusercontent.com/images/gMKevbQSpU3FG0HJpneTf2omc.png?width=616&height=822" alt="Sophie Nguyen" class="w-full h-full object-cover object-[44.9%_8.4%]">
<!-- Name Overlay -->
<div class="absolute bottom-5 left-0 translate-x-0 w-[231px] bg-brand-primary rounded-r-custom p-[10px_20px] flex flex-col justify-center gap-1 z-10">
<p class="text-[18px] leading-[27px] text-[#f0f4f3] font-secondary">Sophie Nguyen</p>
<p class="text-[12px] leading-[18px] text-[#e7f9d3] font-secondary">Content Strategist at Gumper</p>
</div>
</div>
<!-- Text Card 1 -->
<div class="h-[180px] bg-neutral-surface rounded-custom p-5 flex flex-col justify-between">
<h5 class="text-[18px] font-500 leading-[19.8px] text-brand-primary">Top Tier Content Generation</h5>
<p class="text-[16px] leading-[24px] text-text-secondary">“We finally have authentic UGC at scale. The platform makes it easy to turn real customer videos into posts that actually convert.”</p>
</div>
</div>
<!-- Column 2 -->
<div data-animation-on-scroll="" class="flex-1 flex flex-col gap-[10px] w-full lg:w-[366.6px]">
<!-- Text Card 2 (Top) -->
<div class="h-[180px] bg-neutral-surface rounded-custom p-5 flex flex-col justify-between">
<h5 class="text-[18px] font-500 leading-[19.8px] text-brand-primary">Useful Analytics</h5>
<p class="text-[16px] leading-[24px] text-text-secondary">“Since using this platform, our engagement on TikTok has tripled. The AI content generator is a game-changer.”</p>
</div>
<!-- Image Card 2 -->
<div class="relative h-[280px] rounded-custom overflow-hidden">
<img src="https://framerusercontent.com/images/TL5soJW6AxRFaGMENRsCrR3jLdE.png?width=896&height=1200" alt="Isha Greenwood" class="w-full h-full object-cover object-top">
<div class="absolute bottom-5 left-0 w-[231px] bg-brand-primary rounded-r-custom p-[10px_20px] flex flex-col justify-center gap-1 z-10">
<p class="text-[18px] leading-[27px] text-[#f0f4f3] font-secondary">Isha Greenwood</p>
<p class="text-[12px] leading-[18px] text-[#e7f9d3] font-secondary">Brand Manager at LoopWear</p>
</div>
</div>
</div>
<!-- Column 3 -->
<div data-animation-on-scroll="" class="flex-1 flex flex-col gap-[10px] w-full lg:w-[366.6px]">
<!-- Image Card 3 -->
<div class="relative h-[280px] rounded-custom overflow-hidden">
<img src="https://framerusercontent.com/images/TvJPRDZPJ8JOS4tNymN1nu9VCUA.png?width=902&height=1200" alt="Enola Linsten" class="w-full h-full object-cover object-top">
<div class="absolute bottom-5 left-0 w-[231px] bg-brand-primary rounded-r-custom p-[10px_20px] flex flex-col justify-center gap-1 z-10">
<p class="text-[18px] leading-[27px] text-[#f0f4f3] font-secondary">Enola Linsten</p>
<p class="text-[12px] leading-[18px] text-[#e7f9d3] font-secondary">Marketing Director at Evo</p>
</div>
</div>
<!-- Text Card 3 -->
<div class="h-[180px] bg-neutral-surface rounded-custom p-5 flex flex-col justify-between">
<h5 class="text-[18px] font-500 leading-[19.8px] text-brand-primary">Perfect Campaign Planning</h5>
<p class="text-[16px] leading-[24px] text-text-secondary">“We finally have authentic UGC at scale. The platform makes it easy to turn real customer videos into posts that actually convert.”</p>
</div>
</div>
</div>
<!-- CTA Button -->
<div data-animation-on-scroll="">
<a href="/waitlist" class="inline-flex items-center justify-center px-[25px] py-[15px] bg-brand-primary text-white font-semibold text-sm rounded-[36px] transition-transform active:scale-95">
Join Waitlist
</a>
</div>
</div>
<style>
#testimonial-section .rounded-custom {
border-radius: 15px;
}
</style></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.05 });
document.querySelectorAll('[data-animation-on-scroll]').forEach(el => {
el.classList.add('animate-on-scroll-hidden');
observer.observe(el);
});
});
</script>
</body></html>
change the content
Created by: LandingHero
![\"Sophie](\"https://framerusercontent.com/images/gMKevbQSpU3FG0HJpneTf2omc.png?width=616&height=822\")
\n \n ![\"Isha](\"https://framerusercontent.com/images/TL5soJW6AxRFaGMENRsCrR3jLdE.png?width=896&height=1200\")
\n ![\"Enola](\"https://framerusercontent.com/images/TvJPRDZPJ8JOS4tNymN1nu9VCUA.png?width=902&height=1200\")
\n