All Prompts
All Prompts
testimonialcarouseltailwindresponsiveanimatedscrollablesectionlanding page
Animated Testimonials Carousel Section
Адаптивный карусель отзывов с анимацией и плавным скроллом. Идеально для лендингов, демонстрирует истории успеха клиентов. Tailwind CSS.
Prompt
<section class="z-10 sm:p-8 animate-scaleIn animation-delay-400 bg-[#ffffff] w-full max-w-7xl border-neutral-200/70 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 relative shadow-2xl">
<!-- Header -->
<div class="flex gap-6 sm:px-0 animate-fadeInUp pr-1 pl-1 items-center">
<h2 class="text-[44px] sm:text-6xl lg:text-7xl xl:text-8xl leading-[0.9] text-[#000000] font-geist tracking-tighter" style="">Testimonials.</h2>
<span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px bg-neutral-200 h-10"></span>
<p class="sm:text-base text-sm text-zinc-400 mt-1 font-geist tracking-tight" style="">Real stories, real success. Our customers have experienced firsthand the impact of our AI-powered solutions.</p>
</div>
<div class="h-px animate-fadeIn animation-delay-100 bg-neutral-200 mt-4"></div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-10 sm:mt-8 mt-6 items-center">
<!-- Header -->
<!-- Carousel -->
<div class="lg:col-span-12 relative">
<div class="relative overflow-hidden h-[420px] rounded-3xl mt-6">
<!-- Edge fades -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-white to-transparent z-10"></div>
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-white to-transparent z-10"></div>
<!-- Rail -->
<div class="flex gap-6 overflow-x-auto scroll-smooth pr-6 pl-6 absolute top-0 right-0 bottom-0 left-0 items-center" style="scrollbar-width: none; -ms-overflow-style: none;" id="testimonial-rail">
<!-- Card 1 -->
<article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-white border border-neutral-200/70 rounded-[24px] p-8 text-neutral-900 hover-lift backdrop-blur-sm snap-center -rotate-2 shadow-2xl">
<p class="text-lg sm:text-xl md:text-2xl text-neutral-900 font-geist tracking-tighter" style="">
"FlowAI transformed our content strategy. We now generate 10x more content while maintaining quality."
</p>
<div class="mt-8 flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=200&h=200&fit=crop&crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
<div class="">
<div class="text-sm font-geist tracking-tight" style="">Sarah Chen</div>
<div class="text-xs text-neutral-500 font-geist tracking-tight" style="">Marketing Director, TechFlow</div>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-white border border-neutral-200/70 rounded-[24px] p-8 text-neutral-900 hover-lift backdrop-blur-sm snap-center rotate-1 shadow-2xl">
<p class="text-lg sm:text-xl md:text-2xl text-neutral-900 font-geist tracking-tighter" style="">
"The AI automation saved us 20+ hours weekly. Our content performance increased by 300%."
</p>
<div class="mt-8 flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&w=200&h=200&fit=crop&crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
<div class="">
<div class="text-sm font-geist tracking-tight" style="">Marcus Rodriguez</div>
<div class="text-xs text-neutral-500 font-geist tracking-tight" style="">Content Lead, GrowthLab</div>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-white border border-neutral-200/70 rounded-[24px] p-8 text-neutral-900 hover-lift backdrop-blur-sm snap-center -rotate-1 shadow-2xl">
<p class="text-lg sm:text-xl md:text-2xl text-neutral-900 font-geist tracking-tighter" style="">
"Incredible ROI. FlowAI paid for itself within the first month of implementation."
</p>
<div class="mt-8 flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&h=200&fit=crop&crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
<div class="">
<div class="text-sm font-geist tracking-tight" style="">Emma Thompson</div>
<div class="text-xs text-neutral-500 font-geist tracking-tight" style="">Founder, Digital Ventures</div>
</div>
</div>
</article>
<!-- Card 4 -->
<article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-white border border-neutral-200/70 rounded-[24px] p-8 text-neutral-900 hover-lift backdrop-blur-sm snap-center rotate-2 shadow-2xl">
<p class="text-lg sm:text-xl md:text-2xl text-neutral-900 font-geist tracking-tighter" style="">
"From brief to published content in minutes — completely game-changing for our workflow."
</p>
<div class="mt-8 flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=200&h=200&fit=crop&crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
<div>
<div class="text-sm font-geist tracking-tight" style="">Alex Morgan</div>
<div class="text-xs text-neutral-500 font-geist tracking-tight" style="">Creative Director, Apex Studios</div>
</div>
</div>
</article>
<!-- Card 5 -->
<article class="min-w-[420px] sm:min-w-[520px] max-w-[640px] bg-white border border-neutral-200/70 rounded-[24px] p-8 text-neutral-900 hover-lift backdrop-blur-sm snap-center -rotate-3 shadow-2xl">
<p class="text-lg sm:text-xl md:text-2xl text-neutral-900 font-geist tracking-tighter" style="">
"The analytics and multi-channel distribution features are phenomenal. Best investment we made."
</p>
<div class="mt-8 flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=200&h=200&fit=crop&crop=faces" alt="" class="w-10 h-10 rounded-xl object-cover">
<div>
<div class="text-sm font-geist tracking-tight" style="">Priya Patel</div>
<div class="text-xs text-neutral-500 font-geist tracking-tight" style="">Head of Marketing, InnovateCorp</div>
</div>
</div>
</article>
</div>
<!-- Controls -->
<div class="absolute bottom-6 right-6 z-20 flex items-center gap-3">
<button aria-label="Previous" class="hover:bg-neutral-200 transition-colors inline-flex text-neutral-900 bg-neutral-100 w-10 h-10 border-neutral-200 border rounded-full items-center justify-center" id="testimonial-prev" style="opacity: 0.5; pointer-events: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-left" style="stroke-width:1.5" class="lucide lucide-arrow-left w-5 h-5"><path d="m12 19-7-7 7-7" class=""></path><path d="M19 12H5" class=""></path></svg>
</button>
<button aria-label="Next" class="w-10 h-10 rounded-full text-white bg-neutral-900 hover:bg-neutral-800 transition-colors inline-flex items-center justify-center" id="testimonial-next" style="opacity: 1; pointer-events: auto;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" style="stroke-width: 1.5; width: 24px; height: 20px; color: rgb(255, 255, 255);" class="lucide lucide-arrow-right w-[24px] h-[20px]" data-icon-replaced="true"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<script>
(function() {
const rail = document.getElementById('testimonial-rail');
const prevButton = document.getElementById('testimonial-prev');
const nextButton = document.getElementById('testimonial-next');
if (rail && prevButton && nextButton) {
const scrollDistance = 540; // Card width + gap
// Previous button click handler
prevButton.addEventListener('click', function(e) {
e.preventDefault();
rail.scrollBy({
left: -scrollDistance,
behavior: 'smooth'
});
});
// Next button click handler
nextButton.addEventListener('click', function(e) {
e.preventDefault();
rail.scrollBy({
left: scrollDistance,
behavior: 'smooth'
});
});
// Update button states based on scroll position
function updateButtonStates() {
const scrollLeft = rail.scrollLeft;
const maxScroll = rail.scrollWidth - rail.clientWidth;
// Disable/enable previous button
if (scrollLeft <= 10) {
prevButton.style.opacity = '0.5';
prevButton.style.pointerEvents = 'none';
} else {
prevButton.style.opacity = '1';
prevButton.style.pointerEvents = 'auto';
}
// Disable/enable next button
if (scrollLeft >= maxScroll - 10) {
nextButton.style.opacity = '0.5';
nextButton.style.pointerEvents = 'none';
} else {
nextButton.style.opacity = '1';
nextButton.style.pointerEvents = 'auto';
}
}
// Initial button state update
updateButtonStates();
// Update button states on scroll
rail.addEventListener('scroll', updateButtonStates);
// Update button states on window resize
window.addEventListener('resize', updateButtonStates);
}
})();
</script>
</section>