All Prompts
All Prompts
testimonialsliderinteractiveresponsivejavascripttailwindcarousel
Interactive Testimonial Slider Section
Интерактивный слайдер отзывов: секция с цитатами, фото, соц. доказательствами и навигацией. Адаптивный, на JavaScript.
Prompt
<section class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll lg:px-6 lg:pt-12 lg:pb-12 animate max-w-6xl mr-auto ml-auto pt-24 pr-4 pb-24 pl-4">
<div class="md:p-8 bg-gradient-to-br from-blue-500/10 via-blue-500/0 to-blue-500/10 rounded-[28px] pt-6 pr-6 pb-6 pl-6 shadow-[0_40px_120px_rgba(0,0,0,0.95)]" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0), rgba(59, 130, 246, 0.2)); --border-radius-before: 28px">
<div class="flex flex-col gap-8 md:flex-row md:items-stretch md:justify-between md:gap-x-12 gap-y-8">
<!-- Left column -->
<div class="flex flex-col md:flex-none max-w-sm justify-between">
<div class="">
<span class="text-[10px] uppercase text-xs text-slate-400 font-geist" style="">
Testimonial
</span>
<h3 class="sm:text-3xl text-2xl font-light text-slate-50 tracking-tighter font-geist mt-2">
Results that speak volumeRead success stories
</h3>
<p class="sm:text-base text-sm text-slate-400 mt-3 font-geist" style="">
NeuroDesk plugs into your existing tools and turns every
scattered document, ticket and thread into one reliable
source of truth for your team.
</p>
<!-- ⭐ KPI BLOCK -->
<div class="flex gap-3 mt-6 gap-x-3 gap-y-3 items-start">
<button class="inline-flex hover:bg-white/10 transition text-sm text-slate-100 font-geist bg-white/5 border-white/10 border rounded-full pt-2 pr-4 pb-2 pl-4 gap-x-2 gap-y-2 items-center" style="">
View all reviews
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(241, 245, 249); width: 16px; height: 16px" class="w-[16px] h-[16px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7">
<path fill="#f1f5f9" fill-rule="evenodd" d="M3.25 12a.75.75 0 0 1 .75-.75h9.25v1.5H4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5" class=""></path>
<path fill="#f1f5f9" d="M13.25 12.75V18a.75.75 0 0 0 1.28.53l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.28.53z" class=""></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Right column card -->
<div class="w-full md:flex-1 mt-2 md:mt-0">
<div class="overflow-hidden md:h-[360px] bg-gradient-to-br from-blue-500/10 to-blue-500/0 h-[340px] rounded-3xl pt-5 pr-5 pb-5 pl-5 relative shadow-[0_24px_60px_rgba(0,0,0,0.9)]" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 24px">
<div class="flex flex-col md:flex-row md:items-center gap-8 h-full relative">
<!-- Left image -->
<div class="md:w-5/12 w-full h-full">
<div class="overflow-hidden h-full rounded-2xl relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3ef9d9bb-799c-4f7d-a32d-bdafde13fc98_800w.webp" alt="Happy customer" class="transition-opacity duration-300 w-full h-full object-cover" id="neuro-t-image">
</div>
</div>
<!-- Right content -->
<div class="md:w-7/12 flex flex-col w-full h-full justify-center">
<div class="relative">
<!-- Quotes -->
<span class="pointer-events-none select-none -left-4 -top-10 text-[100px] md:text-[120px] leading-none font-light text-slate-500/20 font-geist absolute">
“
</span>
<span class="select-none -right-2 -bottom-10 text-[100px] leading-none md:text-[120px] font-light text-slate-500/30 font-geist z-10 absolute translate-y-16">
”
</span>
<p id="neuro-t-text" class="leading-relaxed sm:text-base z-10 text-sm text-slate-100 font-geist mt-0 mb-0 pt-4 pb-4 relative transition-opacity duration-300" style="">
Neuro has completely transformed the way we work. It
automates the repetitive tasks we used to lose hours
on and keeps every workflow organized. Our team moves
faster, communicates better, and stays focused on the
work that matters.
</p>
</div>
<div class="mt-6 z-10">
<p id="neuro-t-author" class="text-base text-slate-50 font-geist transition-opacity duration-300" style="">
Emily Labelle
</p>
<p id="neuro-t-role" class="sm:text-sm text-xs text-slate-400 font-geist transition-opacity duration-300" style="">
Operations Manager, FlowSync Technologies
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ⭐ DIVIDER -->
<div class="w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent my-8"></div>
<!-- ⭐ THIRD ROW BELOW BOTH COLUMNS -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between w-full mt-0 gap-x-6 gap-y-6">
<!-- Left: client count -->
<div class="flex gap-4 items-center">
<div class="flex -space-x-2">
<img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=80&q=80" class="h-10 w-10 rounded-full border border-slate-900 object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="h-10 w-10 rounded-full border border-slate-900 object-cover">
<img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=80&q=80" class="h-10 w-10 rounded-full border border-slate-900 object-cover">
</div>
<div class="flex flex-col">
<span class="text-base text-slate-100 font-geist" style="">
1500 satisfied clients
</span>
<span class="text-sm text-slate-500 font-geist" style="">
love our workspace and automations
</span>
</div>
</div>
<!-- Right: Circle nav arrows -->
<div class="flex items-center gap-3 mt-2 sm:mt-0">
<!-- Left arrow -->
<button onclick="window.neuroPrevTestimonial()" class="h-10 w-10 rounded-full flex items-center justify-center border border-white/10 bg-white/5 hover:bg-white/10 transition backdrop-blur-sm group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="w-[16px] h-[16px] text-slate-300 group-hover:text-white transition-colors" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7">
<path fill="currentColor" fill-rule="evenodd" d="M20.75 12a.75.75 0 0 0-.75-.75h-9.25v1.5H20a.75.75 0 0 0 .75-.75" clip-rule="evenodd" opacity=".5" class=""></path>
<path fill="currentColor" d="M10.75 18a.75.75 0 0 1-1.28.53l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.28.53z" class=""></path>
</svg>
</button>
<!-- Right arrow -->
<button onclick="window.neuroNextTestimonial()" class="h-10 w-10 rounded-full flex items-center justify-center border border-white/10 bg-white/5 hover:bg-white/10 transition backdrop-blur-sm group">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="group-hover:text-white transition-colors w-[16px] h-[16px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" data-icon-replaced="true" style="color: rgb(255, 255, 255); width: 16px; height: 16px">
<path fill="currentColor" fill-rule="evenodd" d="M3.25 12a.75.75 0 0 1 .75-.75h9.25v1.5H4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5" class=""></path>
<path fill="currentColor" d="M13.25 12.75V18a.75.75 0 0 0 1.28.53l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.28.53z" class=""></path>
</svg>
</button>
</div>
</div>
<script>
(function() {
const testimonials = [
{
text: "Neuro has completely transformed the way we work. It automates the repetitive tasks we used to lose hours on and keeps every workflow organized. Our team moves faster, communicates better, and stays focused on the work that matters.",
author: "Emily Labelle",
role: "Operations Manager, FlowSync Technologies",
image: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3ef9d9bb-799c-4f7d-a32d-bdafde13fc98_800w.webp"
},
{
text: "The ability to sync documents across all our platforms instantly has been a game changer. We've cut down meeting times by 30% simply because everyone has the same context before we even start.",
author: "Marcus Chen",
role: "Product Lead, Orbit Systems",
image: "https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=800&q=80"
},
{
text: "Implementation was seamless. Within two days, Neuro was categorizing our support tickets and suggesting automated responses that were actually helpful. It feels like we hired a dozen new assistants.",
author: "Sarah Jenkins",
role: "Head of CX, BrightWave",
image: "https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=800&q=80"
},
{
text: "It's rare to find a tool that actually delivers on its AI promises. Neuro not only organizes our knowledge base but actively helps us discover insights we didn't even know we had.",
author: "David Miller",
role: "CTO, Vertex Dynamics",
image: "https://images.unsplash.com/photo-1724525647065-f948fc102e68?w=800&q=80"
}
];
let currentIndex = 0;
function updateTestimonial() {
const t = testimonials[currentIndex];
const img = document.getElementById('neuro-t-image');
const text = document.getElementById('neuro-t-text');
const author = document.getElementById('neuro-t-author');
const role = document.getElementById('neuro-t-role');
if (!img || !text || !author || !role) return;
// Fade out
img.style.opacity = '0';
text.style.opacity = '0';
author.style.opacity = '0';
role.style.opacity = '0';
setTimeout(() => {
img.src = t.image;
text.textContent = t.text;
author.textContent = t.author;
role.textContent = t.role;
// Fade in
img.style.opacity = '1';
text.style.opacity = '1';
author.style.opacity = '1';
role.style.opacity = '1';
}, 300); // Match transition duration
}
window.neuroNextTestimonial = function() {
currentIndex = (currentIndex + 1) % testimonials.length;
updateTestimonial();
}
window.neuroPrevTestimonial = function() {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
updateTestimonial();
}
})();
</script>
</div>
</section>