Загрузка...
Секция отзывов клиентов с интерактивной каруселью, темным дизайном и анимацией. Позволяет просматривать цитаты и аватары пользователей.
<div class="bg-neutral-950 rounded-3xl ring-neutral-800 ring-1 pt-6 pr-6 pb-6 pl-6 backdrop-blur relative">
<style>@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap'); .font-geist { font-family: 'Geist', 'Inter', sans-serif; }</style>
<div class="overflow-hidden sm:p-8 backdrop-blur">
<div class="text-center mb-12">
<div class="mb-6">
<div class="flex items-center justify-between text-[13: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 sm:flex-row sm:items-end sm:justify-between mb-0 gap-x-0 gap-y-0">
<div>
<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>
<div class="overflow-hidden p-6 sm:p-8 md:p-10 bg-gradient-to-br
from-black/10 to-black/0 ring-white/10 ring-1 rounded-2xl
sm:rounded-3xl relative backdrop-blur min-h-[400px]
sm:min-h-[500px] md:min-h-[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"></path>
</svg>
</div>
<div class="flex flex-col justify-between pb-20 sm:pb-0 min-h-[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="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl
2xl:text-6xl leading-tight font-light text-white
tracking-tighter font-geist px-2 sm:px-4">
<span class="text-blue-400 font-geist font-light tracking-tighter">transformed the way</span>
<span class="text-blue-400 font-geist font-light tracking-tighter">without wasting time planning</span>
</p>
</blockquote>
<div class="mt-6 sm:mt-8 text-center transition-opacity duration-300 px-4" id="testimonial-author">
<p class="text-sm sm:text-base text-slate-200 font-medium font-geist">
<span class="text-slate-400 font-normal font-geist">Project Manager, Nova Studio</span>
</p>
</div>
<div class="fixed bottom-4 left-4 right-4 sm:static sm:mt-8 sm:mt-10
flex items-end justify-center gap-1.5 sm:gap-3 md:gap-4
flex-wrap px-2 bg-neutral-950/95 sm:bg-transparent
backdrop-blur-lg sm:backdrop-blur-none rounded-xl
sm:rounded-none p-3 sm:p-0 border border-white/10
sm:border-0">
<img class="h-8 w-8 sm:h-12 sm:w-12 md:h-14 md:w-14 rounded-lg sm
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-8 w-8 sm:h-12 sm:w-12 md:h-14 md:w-14 rounded-lg
sm: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-8 w-8 sm:h-12 sm:w-12 md:h-14 md:w-14 rounded-lg
sm: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-9 w-9 sm:h-14 sm:w-14 md:h-16 md:w-16 rounded-lg sm: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-8 w-8 sm:h-12 sm:w-12 md:h-14 md:w-14 rounded-lg
sm: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-8 w-8 sm:h-12 sm:w-12 md:h-14 md:w-14 rounded-lg
sm: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-8 w-8 sm:h-12 sm:w-12 md:h-14 md:w-14 rounded-lg
sm: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>
</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() { testimonials.forEach(function(t) { const isActive = t.getAttribute('data-active') === 'true'; t.removeAttribute('data-active'); if (isActive) { t.classList.remove('h-9', 'w-9', 'sm:h-14', 'sm:w-14', 'sm:h-16', 'sm:w-16', 'md:h-16', 'md:w-16', 'ring-2', 'ring-white/20', 'shadow-lg'); t.classList.add('h-8', 'w-8', 'sm:h-12', 'sm:w-12', 'md:h-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale'); } }); thumbnail.setAttribute('data-active', 'true'); thumbnail.classList.remove('h-8', 'w-8', 'sm:h-12', 'sm:w-12', 'md:h-14', 'md:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale'); thumbnail.classList.add('h-9', 'w-9', 'sm:h-14', 'sm:w-14', 'md:h-16', 'md:w-16', 'ring-2', 'ring-white/20', 'shadow-lg'); quoteEl.style.opacity = '0'; authorEl.style.opacity = '0'; setTimeout(function() { 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>'; quoteEl.style.opacity = '1'; authorEl.style.opacity = '1'; }, 250); }); }); })();</script>
</div>