A responsive, accessible React testimonials section with looping horizontal scrollers, reusable TestimonialCard components, staggered entrance animations, hover-to-pause behavior, and a soft radial background for a polished, product-facing presentation.
import TestimonialsSection from "@/components/ui/community-testimonial";
export default function DemoOne() {
const testimonialsData = {
title: "Don't just take our word for it",
subtitle:
"See what our users are saying about how our app has transformed their daily routines and helped them build lasting habits.",
rows: [
{
id: "row1",
speed: "50s",
direction: "left",
testimonials: [
{
id: "t1",
quote:
"This app completely changed how I approach my goals. The visual feedback is incredibly motivating!",
authorName: "Sarah K.",
authorTitle: "Productivity Blogger",
avatarUrl: "https://cdn.21st.dev/assets/mirror/3c/3c35aa9efdbb352e1b16730e07e61207ab6f55ac60f4d2890d088445f3bbfcc3.svg",
},
{
id: "t2",
quote:
"I've tried countless habit trackers, and this is the first one that actually stuck. It's simple, beautiful, and effective.",
authorName: "Michael B.",
authorTitle: "Software Engineer",
avatarUrl: "https://cdn.21st.dev/assets/mirror/dc/dcf2ad883199e06432ac3549aaee5407d4def90719dcb20298fa85512bd24b3e.svg",
},
{
id: "t3",
quote:
"The team accountability features are a game-changer. Our entire group is more motivated and connected.",
authorName: "Emily W.",
authorTitle: "Startup Founder",
avatarUrl: "https://cdn.21st.dev/assets/mirror/5e/5eecceacc9a31cc5dc836c3481c9b06e469f082eca89c781acf517cabdee9ae0.svg",
},
],
},
{
id: "row2",
speed: "40s",
direction: "right",
testimonials: [
{
id: "t4",
quote:
"The design is just stunning. It feels less like a chore and more like a game. I'm hooked!",
authorName: "David L.",
authorTitle: "UX Designer",
avatarUrl: "https://cdn.21st.dev/assets/mirror/9b/9b492ad9ca71ba7ebc86dc670136102b242a1f8cbc24abe2b1a22b521be19be0.svg",
},
{
id: "t5",
quote:
"Simple, no clutter, does exactly what it promises. The reminders are gentle but effective.",
authorName: "Jessica P.",
authorTitle: "Student",
avatarUrl: "https://cdn.21st.dev/assets/mirror/f7/f729de6cbdaa4d081daf0afba060b23c00ea5fba9d7fce6e81af016d5469443c.svg",
},
{
id: "t6",
quote:
"Seeing my progress in the analytics section is the best part of my week. It shows my work is paying off.",
authorName: "Alex C.",
authorTitle: "Data Analyst",
avatarUrl: "https://cdn.21st.dev/assets/mirror/a3/a340bfeca194b481819bb24a19ccdca19754817c8c7b5b4fbf19a778b1bcf707.svg",
},
],
},
{
id: "row3",
speed: "60s",
direction: "left",
testimonials: [
{
id: "t7",
quote:
"I love that my data is private. In a world where everything is tracked, this feels safe and personal.",
authorName: "Kenji T.",
authorTitle: "Privacy Advocate",
avatarUrl: "https://cdn.21st.dev/assets/mirror/7f/7f787a771af5b6217a60264a1d4619e663c631b92e092fbe7e72ac332823ad20.svg",
},
{
id: "t8",
quote:
"Finally, a habit app that isn't bloated with features I don't need. It's focused and powerful.",
authorName: "Maria G.",
authorTitle: "Writer",
avatarUrl: "https://cdn.21st.dev/assets/mirror/60/60db1a70cb17a418aa5d3a51c96bda847faa6a3d1e302e39599a461fad85e78a.svg",
},
{
id: "t9",
quote:
"The community support is surprisingly wholesome. It's a great place for accountability.",
authorName: "Chris R.",
authorTitle: "Fitness Coach",
avatarUrl: "https://cdn.21st.dev/assets/mirror/c4/c42ee82e6c8087dae0188252065d0b1582f6b38fa7fd69304fbe866f5a5c45ab.svg",
},
],
},
],
};
return (
<div
className="app-root bg-radial min-h-screen flex items-center justify-center py-20 px-4"
aria-label="Testimonials showcase"
>
<TestimonialsSection data={testimonialsData} />
</div>
);
}