"use client";
import { useRef, useState } from "react";
// "Directional slide transition" animation identity — scoped with a
// unique `al-testimonials03-*` prefix so this never collides with
// another Resource's own animation layer when copied standalone. This is
// the same canonical source shown in the Code tab's Tailwind CSS view.
import "./Testimonials03.tailwind.css";
const TESTIMONIALS = [
    {
        id: "elena-marsh",
        quote: "The migration took a single afternoon. We were nervous for nothing.",
        name: "Elena Marsh",
        role: "Founder",
        company: "Driftwood",
        avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=200&auto=format&fit=crop",
        avatarAlt: "Portrait of Elena Marsh",
    },
    {
        id: "tomas-rivera",
        quote: "Finally, an integration that didn't need a dedicated engineer to maintain.",
        name: "Tomás Rivera",
        role: "Head of Growth",
        company: "Kindling",
        avatar: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=200&auto=format&fit=crop",
        avatarAlt: "Portrait of Tomás Rivera",
    },
    {
        id: "aisha-rahman",
        quote: "Our support ticket volume dropped 40% in the first quarter after switching.",
        name: "Aisha Rahman",
        role: "Customer Success Lead",
        company: "Northstar",
        avatar: "https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=200&auto=format&fit=crop",
        avatarAlt: "Portrait of Aisha Rahman",
    },
    {
        id: "jonas-lindqvist",
        quote: "It just works, which after three failed vendors, is all we wanted.",
        name: "Jonas Lindqvist",
        role: "IT Director",
        company: "Falkvik",
        avatar: "https://images.unsplash.com/photo-1505495693567-59239d461e9f?q=80&w=200&auto=format&fit=crop",
        avatarAlt: "Portrait of Jonas Lindqvist",
    },
    {
        id: "grace-osei",
        quote: "The team treats every request like it's the only one in the queue.",
        name: "Grace Osei",
        role: "Operations Manager",
        company: "Harborline",
        avatar: "https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=200&auto=format&fit=crop",
        avatarAlt: "Portrait of Grace Osei",
    },
];
const SWIPE_THRESHOLD_PX = 50;
function ArrowIcon({ direction }) {
    return (<svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className="h-4.5 w-4.5">
      <path d={direction === "left" ? "M11.25 4.5 6 9l5.25 4.5" : "M6.75 4.5 12 9l-5.25 4.5"} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>);
}
function QuoteMark() {
    return (<svg viewBox="0 0 32 24" fill="currentColor" aria-hidden="true" className="h-7 w-7 text-neutral-200">
      <path d="M9.6 0C4.8 3.2 0 8.8 0 15.2 0 20 3.2 24 8 24c4 0 7.2-3.2 7.2-7.2 0-3.6-2.4-6.4-5.6-7.2C10.4 6.4 12 4 15.2 1.6L9.6 0zm17.6 0c-4.8 3.2-9.6 8.8-9.6 15.2 0 4.8 3.2 8.8 8 8.8 4 0 7.2-3.2 7.2-7.2 0-3.6-2.4-6.4-5.6-7.2C28 6.4 29.6 4 32.8 1.6L27.2 0z"/>
    </svg>);
}
/**
 * Testimonials 03 — a real, functional testimonial carousel. Previous/
 * next are genuine buttons, pagination dots jump straight to a slide,
 * arrow keys move focus-independent of which control has focus within
 * the carousel, and a pointer-based drag supports touch/mouse swipe. An
 * `aria-live` region announces the active slide for assistive tech, and
 * every transition slides in from the direction it was reached from.
 */
function Testimonials03() {
    const [activeIndex, setActiveIndex] = useState(0);
    const [direction, setDirection] = useState("next");
    const pointerStartX = useRef(null);
    function goTo(index, dir) {
        setDirection(dir);
        setActiveIndex(index);
    }
    function goNext() {
        goTo((activeIndex + 1) % TESTIMONIALS.length, "next");
    }
    function goPrev() {
        goTo((activeIndex - 1 + TESTIMONIALS.length) % TESTIMONIALS.length, "prev");
    }
    function handleKeyDown(event) {
        if (event.key === "ArrowRight") {
            event.preventDefault();
            goNext();
        }
        else if (event.key === "ArrowLeft") {
            event.preventDefault();
            goPrev();
        }
    }
    function handlePointerDown(event) {
        pointerStartX.current = event.clientX;
    }
    function handlePointerUp(event) {
        if (pointerStartX.current === null)
            return;
        const delta = event.clientX - pointerStartX.current;
        pointerStartX.current = null;
        if (delta <= -SWIPE_THRESHOLD_PX) {
            goNext();
        }
        else if (delta >= SWIPE_THRESHOLD_PX) {
            goPrev();
        }
    }
    const active = TESTIMONIALS[activeIndex];
    return (<section aria-label="Customer testimonials" aria-roledescription="carousel" onKeyDown={handleKeyDown} className="al-testimonials03 bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
      <div className="mx-auto max-w-3xl text-center">
        <h2 className="text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl">What customers are saying</h2>
        <p className="mt-3 text-sm leading-relaxed text-neutral-500">Swipe, click, or use the arrow keys to browse.</p>
      </div>

      <div className="mx-auto mt-12 max-w-2xl lg:mt-16">
        <div onPointerDown={handlePointerDown} onPointerUp={handlePointerUp} className="al-testimonials03-viewport touch-pan-y overflow-hidden">
          <figure key={active.id} data-direction={direction} aria-roledescription="slide" aria-label={`${activeIndex + 1} of ${TESTIMONIALS.length}`} className="al-testimonials03-slide flex flex-col items-center rounded-2xl border border-neutral-200 bg-white p-8 text-center sm:p-10">
            <QuoteMark />
            <blockquote className="mt-4 text-lg leading-relaxed font-medium text-neutral-800 sm:text-xl">&ldquo;{active.quote}&rdquo;</blockquote>
            <figcaption className="mt-6 flex flex-col items-center gap-3">
              <img src={active.avatar} alt={active.avatarAlt} width={48} height={48} loading="lazy" decoding="async" className="h-12 w-12 shrink-0 rounded-full object-cover"/>
              <div>
                <p className="text-sm font-semibold text-neutral-900">{active.name}</p>
                <p className="text-xs text-neutral-500">
                  {active.role}, {active.company}
                </p>
              </div>
            </figcaption>
          </figure>
        </div>

        <div className="mt-6 flex items-center justify-center gap-6">
          <button type="button" onClick={goPrev} aria-label="Previous testimonial" className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-neutral-200 text-neutral-600 transition-colors hover:border-neutral-900 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700">
            <ArrowIcon direction="left"/>
          </button>

          <div role="group" aria-label="Choose testimonial" className="flex items-center gap-2">
            {TESTIMONIALS.map((testimonial, index) => (<button key={testimonial.id} type="button" onClick={() => goTo(index, index > activeIndex ? "next" : "prev")} aria-label={`Go to testimonial ${index + 1}`} aria-current={index === activeIndex} className={`h-2 rounded-full transition-all duration-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700 ${index === activeIndex ? "w-6 bg-neutral-900" : "w-2 bg-neutral-200 hover:bg-neutral-300"}`}/>))}
          </div>

          <button type="button" onClick={goNext} aria-label="Next testimonial" className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-neutral-200 text-neutral-600 transition-colors hover:border-neutral-900 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700">
            <ArrowIcon direction="right"/>
          </button>
        </div>
      </div>

      <p aria-live="polite" className="sr-only">
        Testimonial {activeIndex + 1} of {TESTIMONIALS.length}: {active.name}
      </p>
    </section>);
}
export { Testimonials03 };
Testimonials 03

Requirements

Dependencies

Usage
