'use client'; import { useRef, useState } from 'react'; import { RiArrowLeftLongLine, RiArrowRightLongLine } from '@remixicon/react'; import Image from './next-image-mock'; import type { Swiper as SwiperType } from 'swiper'; import { EffectFade, Navigation } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; import * as StatusBadge from './components/ui/status-badge'; import 'swiper/css'; import 'swiper/css/effect-fade'; const testimonials = [ { name: 'Matthew Johnson', title: 'Co-founder', quote: 'Everything we needed was already built in reporting, automation, integrations.', highlight: 'It just worked out of the box.', image: 'https://alignui.com/images/blocks/testimonials-3-image-1.jpg', logo: 'https://alignui.com/images/blocks/testimonials-3-logo.svg', logoDark: 'https://alignui.com/images/blocks/testimonials-3-logo-dark.svg', stats: [ { label: 'Decision time', value: '9.5h' }, { label: 'Conversion uplift', value: '+49%' }, ], }, { name: 'Sarah Williams', title: 'Head of Sales', quote: 'Our team productivity increased dramatically after implementing this solution.', highlight: 'The results speak for themselves.', image: 'https://alignui.com/images/blocks/testimonials-3-image-1.jpg', logo: 'https://alignui.com/images/blocks/testimonials-3-logo.svg', logoDark: 'https://alignui.com/images/blocks/testimonials-3-logo-dark.svg', stats: [ { label: 'Decision time', value: '7.2h' }, { label: 'Conversion uplift', value: '+62%' }, ], }, { name: 'David Chen', title: 'VP of Operations', quote: 'The seamless integration with our existing tools made adoption effortless.', highlight: 'A game-changer for our workflow.', image: 'https://alignui.com/images/blocks/testimonials-3-image-1.jpg', logo: 'https://alignui.com/images/blocks/testimonials-3-logo.svg', logoDark: 'https://alignui.com/images/blocks/testimonials-3-logo-dark.svg', stats: [ { label: 'Decision time', value: '5.8h' }, { label: 'Conversion uplift', value: '+71%' }, ], }, ]; export default function Testimonials03() { const swiperImageRef = useRef(null); const swiperContentRef = useRef(null); const swiperStat1Ref = useRef(null); const swiperStat2Ref = useRef(null); const [isBeginning, setIsBeginning] = useState(true); const [isEnd, setIsEnd] = useState(false); const [activeIndex, setActiveIndex] = useState(0); const handlePrev = () => { swiperImageRef.current?.slidePrev(); swiperContentRef.current?.slidePrev(); swiperStat1Ref.current?.slidePrev(); swiperStat2Ref.current?.slidePrev(); }; const handleNext = () => { swiperImageRef.current?.slideNext(); swiperContentRef.current?.slideNext(); swiperStat1Ref.current?.slideNext(); swiperStat2Ref.current?.slideNext(); }; return (

Top-performing teams

Real stories, proven impact

Hear how sales teams improved performance, built trust faster, and{' '} closed more deals using our smart tools.

{ swiperImageRef.current = swiper; setIsBeginning(swiper.isBeginning); setIsEnd(swiper.isEnd); }} onSlideChange={(swiper) => { setIsBeginning(swiper.isBeginning); setIsEnd(swiper.isEnd); setActiveIndex(swiper.activeIndex); }} className='w-full h-full' > {testimonials.map((testimonial, index) => ( testimonials image

))}

{ swiperContentRef.current = swiper; }} className='w-full' >

{testimonials.map((testimonial, index) => (

{testimonial.name}

{testimonial.title}

{testimonial.quote}{' '} {testimonial.highlight}

))}

{ swiperStat1Ref.current = swiper; }} className='w-full' > {testimonials.map((testimonial, index) => (

{testimonial.stats[0].label}

{testimonial.stats[0].value}

))}

{ swiperStat2Ref.current = swiper; }} className='w-full' > {testimonials.map((testimonial, index) => (

{testimonial.stats[1].label}

{testimonial.stats[1].value}

))}

); }