Single card layout testimonial
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>Atlas Studio Testimonials</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=Chivo+Mono:wght@500&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;
@font-face {
font-family: 'General Sans';
src: url('https://fonts.cdnfonts.com/s/73114/GeneralSans-Medium.woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'New Title';
src: url('https://fonts.cdnfonts.com/s/91211/NewTitle-Medium.woff');
font-weight: 500;
font-style: normal;
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(0, 0, 0)',
'neutral-background': 'rgb(255, 255, 255)',
'neutral-surface': 'rgb(240, 240, 240)',
'text-primary': 'rgb(0, 0, 0)',
'text-secondary': 'rgba(0, 0, 0, 0.6)',
},
fontFamily: {
'primary': ['New Title', 'sans-serif'],
'secondary': ['General Sans', 'sans-serif'],
'mono': ['Chivo Mono', 'monospace'],
},
borderRadius: {
'testimonial': '20px',
'container': '32px',
'avatar': '10px',
},
}
}
}</script></head>
<body id="app-root" class="bg-neutral-background overflow-x-hidden">
<main><section class="flex flex-col items-center justify-center py-1 overflow-visible bg-transparent">
<div class="bg-neutral-surface rounded-container w-full max-w-[1520px] mx-auto py-32 px-20 flex flex-col items-center justify-center overflow-visible">
<div class="w-full max-w-[1360px] flex flex-col items-center gap-16 overflow-visible" data-animation-on-scroll="">
<!-- Heading Section -->
<div class="w-full flex flex-col items-start gap-8">
<div class="w-full h-[1px] bg-brand-primary opacity-100"></div>
<h2 class="font-primary text-[96px] leading-[96px] font-medium uppercase text-text-primary tracking-tight">
Testimonials
</h2>
</div>
<!-- Testimonials Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 w-full overflow-hidden">
<!-- Testimonial 1 -->
<div class="flex flex-col items-start gap-5">
<div class="font-primary text-[160px] leading-[144px] font-medium text-text-primary h-11 flex items-center">
“
</div>
<p class="font-secondary text-[20px] leading-[26px] font-medium text-text-primary tracking-[0.2px]">
Atlas clarified our story and tightened our brand. The identity is easy to use and the site is fast. Handover was tidy and on time.
</p>
<div class="flex items-center gap-3 h-16 mt-5">
<img src="https://images.pexels.com/photos/946071/pexels-photo-946071.jpeg?w=128&h=128&fit=crop" alt="Marcus Johnson" class="w-16 h-16 rounded-avatar object-cover flex-shrink-0">
<div class="flex flex-col gap-0.5">
<span class="font-mono text-[14px] leading-[16.8px] font-medium uppercase text-text-primary">Marcus Johnson</span>
<span class="font-mono text-[14px] leading-[16.8px] font-medium uppercase text-text-primary opacity-60">Nexa</span>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="flex flex-col items-start gap-5">
<div class="font-primary text-[160px] leading-[144px] font-medium text-text-primary h-11 flex items-center">
“
</div>
<p class="font-secondary text-[20px] leading-[26px] font-medium text-text-primary tracking-[0.2px]">
Calm, senior, and quick. Atlas kept us aligned, cut the noise, and shipped work that performs. Demos and sign-ups are up.
</p>
<div class="flex items-center gap-3 h-16 mt-5">
<img src="https://images.pexels.com/photos/12606351/pexels-photo-12606351.jpeg?w=128&h=128&fit=crop" alt="Emily Chang" class="w-16 h-16 rounded-avatar object-cover flex-shrink-0">
<div class="flex flex-col gap-0.5">
<span class="font-mono text-[14px] leading-[16.8px] font-medium uppercase text-text-primary">Emily Chang</span>
<span class="font-mono text-[14px] leading-[16.8px] font-medium uppercase text-text-primary opacity-60">Luminate</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section></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>
Created by: LandingHero
![\"Marcus](\"https://images.pexels.com/photos/946071/pexels-photo-946071.jpeg?w=128&h=128&fit=crop\")
\n ![\"Emily](\"https://images.pexels.com/photos/12606351/pexels-photo-12606351.jpeg?w=128&h=128&fit=crop\")
\n