All Prompts
All Prompts
testimonialsliderinteractivetailwindresponsivelanding pageavatarjavascriptsection
Interactive Testimonial Section with Avatar Picker
Интерактивный блок отзывов с выбором аватара. Адаптивный, с анимацией и сменными цитатами. Идеально для лендингов.
Prompt
<section class="sm:px-6 lg:px-8 lg:pt-12 lg:pb-12 z-10 max-w-7xl mr-auto ml-auto pt-32 pr-4 pb-20 pl-4 relative"
id="features">
<div
class="overflow-hidden sm:p-8 bg-gradient-to-br from-white/5 to-white/0 rounded-3xl ring-white/10 ring-1 pt-6 pr-6 pb-6 pl-6 relative backdrop-blur">
<div class="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-blue-500/10 blur-3xl"></div>
<!-- Header -->
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-center mb-12 animate">
<div class="mb-6">
<div
class="flex items-center justify-between text-[13px] sm:text-sm font-medium uppercase tracking-tight text-blue-400">
<span class="font-geist">TESTIMONIALS</span>
<span class="font-geist">(02)</span>
</div>
<div class="mt-2 h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
</div>
<div
class="flex flex-col [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll sm:flex-row sm:items-end sm:justify-between mb-0 gap-x-0 gap-y-0 animate">
<div class="">
<h2 class="sm:text-4xl md:text-5xl text-3xl text-white text-left mt-0 font-geist font-light tracking-tighter">
What our customers say</h2>
</div>
<p class="sm:text-base text-sm text-slate-300 text-left max-w-[42ch] font-geist">Real feedback from teams using
Nura to plan better, focus deeper, and ship faster.</p>
</div>
</div>
<!-- Testimonial Section -->
<section class="sm:px-6 lg:pl-0 lg:pr-0 lg:pt-0 lg:pb-0 z-10 max-w-7xl mr-auto ml-auto relative gap-x-0 gap-y-0"
id="testimonial">
<div
class="overflow-hidden sm:p-10 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll ring-white/10 ring-1 rounded-3xl pt-6 pr-6 pb-6 pl-6 relative backdrop-blur"
style="min-height: 540px">
<div
class="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(to_right,rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.12)_1px,transparent_1px)] bg-[size:64px_64px]">
</div>
<div class="pointer-events-none absolute -top-24 -left-24 h-96 w-96 rounded-full bg-blue-500/10 blur-3xl"></div>
<div class="pointer-events-none absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-blue-400/10 blur-3xl">
</div>
<div class="absolute top-6 left-6 opacity-10 text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 sm:w-16 sm:h-16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.3">
<path d="M7 7h3v10H5V9a2 2 0 0 1 2-2Zm9 0h3v10h-5V9a2 2 0 0 1 2-2Z" class=""></path>
</svg>
</div>
<div class="flex flex-col justify-between" style="min-height: 420px;">
<blockquote
class="relative text-center max-w-5xl mx-auto transition-opacity duration-300 flex-1 flex items-center justify-center"
id="testimonial-quote">
<p
class="sm:text-4xl md:text-5xl lg:text-6xl leading-tight text-2xl font-light text-white tracking-tighter font-geist">
Nura completely
<span class="text-blue-400 font-geist font-light tracking-tighter">transformed the way</span>
our team manages schedules.
It keeps us organized, synced, and focused —
<span class="text-blue-400 font-geist font-light tracking-tighter">without wasting time planning</span> or
switching tools.
</p>
</blockquote>
<div class="mt-8 text-center transition-opacity duration-300" id="testimonial-author">
<p class="text-sm sm:text-base text-slate-200 font-medium font-geist">
Sarah Nguyen <span class="text-slate-400 font-normal font-geist">Project Manager, Nova Studio</span>
</p>
</div>
<div class="mt-10 flex items-end justify-center gap-3 sm:gap-4">
<img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4c9aa348-4474-47a8-8f1e-3fe52ac8d2b9_320w.webp" alt="Avatar 1" data-testimonial-index="0" data-testimonial-name="Michael Chen" data-testimonial-role="CEO, TechFlow" data-testimonial-quote="The AI automation in Nura has <span class='text-blue-400 font-geist font-light tracking-tighter'>saved us countless hours</span> every week. Our team is more productive than ever, and we can finally focus on what really matters — <span class='text-blue-400 font-geist font-light tracking-tighter'>building great products</span>.">
<img class="h-12-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a90d32f-809f-4383-b71f-6a9c50621b69_320w.jpg" alt="Avatar 2" data-testimonial-index="1" data-testimonial-name="Emily Rodriguez" data-testimonial-role="Product Lead, Innovate Labs" data-testimonial-quote="Switching to Nura was the <span class='text-blue-400 font-geist font-light tracking-tighter'>best decision</span> we made this year. The integrations are seamless, the interface is intuitive, and our team collaboration has <span class='text-blue-400 font-geist font-light tracking-tighter'>never been stronger</span>.">
<img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a90aa9b5-558b-479a-9570-1ceaa6005110_320w.jpg" alt="Avatar 3" data-testimonial-index="2" data-testimonial-name="David Kim" data-testimonial-role="Engineering Manager, CloudBase" data-testimonial-quote="Nura's intelligent task prioritization helps us <span class='text-blue-400 font-geist font-light tracking-tighter'>ship features faster</span> and with more confidence. The real-time sync across our distributed team is a <span class='text-blue-400 font-geist font-light tracking-tighter'>game-changer and worthy</span>.">
<img class="h-14 w-14 sm:h-16 sm:w-16 rounded-xl object-cover ring-2 ring-white/20 shadow-lg cursor-pointer" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ca2dff12-04ff-4713-9404-e3cb60f16c8a_320w.jpg" alt="Avatar highlighted" data-testimonial-index="3" data-testimonial-name="Sarah Nguyen" data-testimonial-role="Project Manager, Nova Studio" data-testimonial-quote="Nura completely <span class='text-blue-400 font-geist font-light tracking-tighter'>transformed the way</span> our team manages schedules. It keeps us organized, synced, and focused — <span class='text-blue-400 font-geist font-light tracking-tighter'>without wasting time planning</span> or switching tools." data-active="true">
<img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/eae5dceb-fa80-4934-b110-86decb2f64ac_320w.webp" alt="Avatar 5" data-testimonial-index="4" data-testimonial-name="Jessica Park" data-testimonial-role="Operations Director, Nexus Group" data-testimonial-quote="From onboarding to daily workflows, Nura makes everything <span class='text-blue-400 font-geist font-light tracking-tighter'>effortless and efficient</span>. We've reduced meeting time by 40% and our team satisfaction scores have <span class='text-blue-400 font-geist font-light tracking-tighter'>skyrocketed</span>.">
<img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7d4bf47a-eb10-4503-a4f3-1940c4118868_320w.webp" alt="Avatar 6" data-testimonial-index="5" data-testimonial-name="Alex Thompson" data-testimonial-role="Design Lead, Studio Bright" data-testimonial-quote="The visual clarity and smart notifications in Nura help us stay aligned without <span class='text-blue-400 font-geist font-light tracking-tighter'>constant check-ins</span>. Our design process is smoother and we deliver <span class='text-blue-400 font-geist font-light tracking-tighter'>higher quality work</span> on time.">
<img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://images.unsplash.com/photo-1544717305-2782549b5136?w=96&h=96&fit=crop&crop=faces" alt="Avatar 7" data-testimonial-index="6" data-testimonial-name="Rachel Foster" data-testimonial-role="Marketing VP, Growth Co" data-testimonial-quote="Nura has become the <span class='text-blue-400 font-geist font-light tracking-tighter'>single source of truth</span> for our entire marketing team. Campaign planning, execution, and reporting are all in one place, making us <span class='text-blue-400 font-geist font-light tracking-tighter'>incredibly agile</span>.">
</div>
</div>
<script>
(function() {
const testimonials = document.querySelectorAll('[data-testimonial-index]');
const quoteEl = document.getElementById('testimonial-quote');
const authorEl = document.getElementById('testimonial-author');
testimonials.forEach(function(thumbnail) {
thumbnail.addEventListener('click', function() {
// Remove active state from all
testimonials.forEach(function(t) {
const isActive = t.getAttribute('data-active') === 'true';
t.removeAttribute('data-active');
if (isActive) {
t.classList.remove('h-14', 'w-14', 'sm:h-16', 'sm:w-16', 'ring-2', 'ring-white/20', 'shadow-lg');
t.classList.add('h-12', 'w-12', 'sm:h-14', 'sm:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale');
}
});
// Set clicked as active
thumbnail.setAttribute('data-active', 'true');
thumbnail.classList.remove('h-12', 'w-12', 'sm:h-14', 'sm:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale');
thumbnail.classList.add('h-14', 'w-14', 'sm:h-16', 'sm:w-16', 'ring-2', 'ring-white/20', 'shadow-lg');
// Fade out
quoteEl.style.opacity = '0';
authorEl.style.opacity = '0';
setTimeout(function() {
// Update content
var quote = thumbnail.getAttribute('data-testimonial-quote');
var name = thumbnail.getAttribute('data-testimonial-name');
var role = thumbnail.getAttribute('data-testimonial-role');
quoteEl.querySelector('p').innerHTML = quote;
authorEl.querySelector('p').innerHTML = name + ' <span class="text-slate-400 font-normal font-geist">' + role + '</span>';
// Fade in
quoteEl.style.opacity = '1';
authorEl.style.opacity = '1';
}, 250);
});
});
})();
</script>
</div>
</section>
</div>
<script>
(function() {
const testimonials = document.querySelectorAll('[data-testimonial-index]');
const quoteEl = document.getElementById('testimonial-quote');
const authorEl = document.getElementById('testimonial-author');
testimonials.forEach(function(thumbnail) {
thumbnail.addEventListener('click', function() {
// Remove active state from all
testimonials.forEach(function(t) {
t.removeAttribute('data-active');
t.classList.remove('h-14', 'w-14', 'sm:h-16', 'sm:w-16', 'ring-2', 'ring-white/20', 'shadow-lg');
t.classList.add('h-12', 'w-12', 'sm:h-14', 'sm:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale');
});
// Set clicked as active
thumbnail.setAttribute('data-active', 'true');
thumbnail.classList.remove('h-12', 'w-12', 'sm:h-14', 'sm:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale');
thumbnail.classList.add('h-14', 'w-14', 'sm:h-16', 'sm:w-16', 'ring-2', 'ring-white/20', 'shadow-lg');
// Fade out
quoteEl.style.opacity = '0';
authorEl.style.opacity = '0';
setTimeout(function() {
// Update content
var quote = thumbnail.getAttribute('data-testimonial-quote');
var name = thumbnail.getAttribute('data-testimonial-name');
var role = thumbnail.getAttribute('data-testimonial-role');
quoteEl.querySelector('p').innerHTML = quote;
authorEl.querySelector('p').innerHTML = name + ' <span class="text-slate-400 font-normal font-geist">' + role + '</span>';
// Fade in
quoteEl.style.opacity = '1';
authorEl.style.opacity = '1';
}, 250);
});
});
})();
</script>
</section>