Testimonial

Heroes 392

About

Animated Testimonial Grid This component displays a visually engaging testimonial section with a dynamic, floating grid of images in the background. It is designed to be highly reusable, allowing you to easily customize the text, images, and call-to-action through props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Testimonial to your project and fits it to your theme.

Code

How Testimonial is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedTestimonialGrid } from '@/components/ui/testimonial-2';

// --- SAMPLE DATA ---
const testimonials = [
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/fd/fd8577e83451651ddbbffb200651f6cba5f2ce2c1545c852df7d4a01155cf225.jpg', alt: 'Professional Man' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/3f/3f085e6862bf6e1a3efb31a7c2a4b634d450803b5f71faac444f0e218fc7104d.jpg', alt: 'Smiling Man' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/cf/cfbe5b0df4ce00aded772b911009cceb52572901b07c6c95ea18b39b4731e361.jpg', alt: 'Professional Woman' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/15/15ad0d66c6837c2523a3a81b045d8a389c5a356a98878aa7f68b6df11ec5ffae.jpg', alt: 'Smiling Woman' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/ef/ef40d20675e8e7a3ca6351f1d82e9ded87217219abfabf3c2af9c3a8a38b93ab.jpg', alt: 'Man in a suit' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/8e/8efa8abfee362bff6c22e00fe1d0b4a22f5b3e7891e6e81176e34dc04f8d9d66.jpg', alt: 'Bearded Man' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/b3/b397be091320e1fff2350adacb246e8a5d80f034d450ea900cdb778841225df9.jpg', alt: 'Man in a blue shirt' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/c0/c021a27db20697f320296e872284e2e5fa1251033cec9030af63c1b9bcdc2f87.jpg', alt: 'Older Man' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/68/686e42b16d8c33182e9215d13dd9197b98e896dbb901b170d5cbdad6b8e9c838.jpg', alt: 'Woman with curly hair' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/c3/c34aaf845173396fa0669e13bad93ee10a1b01cc9fc8f48db370d2b35cf9f04d.jpg', alt: 'Woman in an office' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/64/644cfc8f66b54eddac9d921672b3179ed0bcc471ebb33e6aad4d174cb5a8f8c8.jpg', alt: 'Woman with glasses' },
  { imgSrc: 'https://cdn.21st.dev/assets/mirror/5c/5c2834e8867c5e7e7c9d038068b65445998b97479723c6de57e2c946221303d3.jpg', alt: 'Woman with a dog' },
];

export default function TestimonialSectionDemo() {
  return (
    <div className="w-full bg-background">
      <AnimatedTestimonialGrid
        testimonials={testimonials}
        title={
          <>
            Trusted by leaders
            <br />
            from various industries
          </>
        }
        description="Learn why professionals trust our solutions to complete their customer journeys."
        ctaText="Read Success Stories"
        ctaHref="#"
      />
    </div>
  );
}