Testimonials Rotating Hero Block for React

Edit TESTIMONIALS at the top of the file: each quote has its quote text, the author, their role and company, and the initials in the avatar. A dot is added for each quote and the count follows the list. INTERVAL is how long a quote stays, in milliseconds (5000 by default); give longer quotes more time, since a visitor has to finish reading before it changes.

Three ways. The pause button under the quote stops it until it's pressed again; it's a toggle, announced as pressed while the quotes are paused. Moving the pointer over the card, or tabbing to the pause button or a dot, holds the current quote until the pointer leaves or focus moves on. And choosing a quote with its dot stops the rotation, so the quote the visitor picked stays. Content that moves on its own needs a way to pause it (WCAG 2.2.2), and the button is that way for keyboard and touch users who can't hover.

The card is a region named by its heading, "What our customers say", and each quote is a figure with a blockquote and its author as the figcaption. While the quotes change on their own, nothing is announced, so a screen reader isn't interrupted every five seconds. Once the visitor picks a quote with a dot, the area becomes a polite live region and the chosen quote is read out. Each dot is named after its quote ("Quote 2 of 3, from James Whitfield") and the current one is marked as current. The "1 / 3" count is hidden, since the dots already say it.

With reduced motion the quotes don't rotate on their own: the first quote shows, the pause button shows play, and the visitor can start the rotation or move between quotes with the dots. Quotes then change without the fade, and the page's entrance doesn't play.

Fetch the quotes on the server and pass them into the block in place of TESTIMONIALS, keeping the same fields: the dots, the count, the timer and the reserved height all come from the list, so any number of quotes works. Give each one a unique author, since it keys the quote and its dot. Keep the list short, three to five quotes: a visitor rarely waits for the sixth.

Use rotating quotes when space is tight and one voice at a time is enough: the card takes the room of a single quote, beside a hero that stays focused on the pitch. Use a wall when the volume is the message, many customers at a glance; a rotating quote hides all but one at any moment, and most visitors won't wait to see the rest.