an animated testimonials section where the testimonials are shown in columns
import { TestimonialsColumn } from "@/components/ui/testimonials-columns-1";
import { motion } from "motion/react";
const testimonials = [
{
text: "This ERP revolutionized our operations, streamlining finance and inventory. The cloud-based platform keeps us productive, even remotely.",
image: "https://cdn.21st.dev/assets/mirror/7c/7c408d5bb79392ba04b0b8a6294b4eee47a16ec377d3dae0c3108e918864bfad.jpg",
name: "Briana Patton",
role: "Operations Manager",
},
{
text: "Implementing this ERP was smooth and quick. The customizable, user-friendly interface made team training effortless.",
image: "https://cdn.21st.dev/assets/mirror/71/716cfb40836039a4e9e34d89320b6398ba7871ea7882e32b7397029586f6dda7.jpg",
name: "Bilal Ahmed",
role: "IT Manager",
},
{
text: "The support team is exceptional, guiding us through setup and providing ongoing assistance, ensuring our satisfaction.",
image: "https://cdn.21st.dev/assets/mirror/7a/7ae9db9990bb424cc1cf68b6af248e7b88e7add27109a6d951eb5b4f881eda98.jpg",
name: "Saman Malik",
role: "Customer Support Lead",
},
{
text: "This ERP's seamless integration enhanced our business operations and efficiency. Highly recommend for its intuitive interface.",
image: "https://cdn.21st.dev/assets/mirror/d1/d1db668ef30403e132bab1de4720f1c9159e8ba03dc0f3d65d5bf95f3985b80a.jpg",
name: "Omar Raza",
role: "CEO",
},
{
text: "Its robust features and quick support have transformed our workflow, making us significantly more efficient.",
image: "https://cdn.21st.dev/assets/mirror/9e/9ef716cb49c8a7e58c27a65358d91e806a1d4c8579a128772a5d9d09d62cb113.jpg",
name: "Zainab Hussain",
role: "Project Manager",
},
{
text: "The smooth implementation exceeded expectations. It streamlined processes, improving overall business performance.",
image: "https://cdn.21st.dev/assets/mirror/7f/7f2f1b6a4c09f5092437fe960232360d1e2dcf7a198c8580f3c5478c7b2d9386.jpg",
name: "Aliza Khan",
role: "Business Analyst",
},
{
text: "Our business functions improved with a user-friendly design and positive customer feedback.",
image: "https://cdn.21st.dev/assets/mirror/f2/f25b1b7a6a351c0f748d81bf4fcaf8c5a2f8ed036563c2693d4c1ca3718d9d5d.jpg",
name: "Farhan Siddiqui",
role: "Marketing Director",
},
{
text: "They delivered a solution that exceeded expectations, understanding our needs and enhancing our operations.",
image: "https://cdn.21st.dev/assets/mirror/41/417105f5784df0a25c3486becfe5c967d448e3c98b3c0231ef4ea0c59d27cb4b.jpg",
name: "Sana Sheikh",
role: "Sales Manager",
},
{
text: "Using this ERP, our online presence and conversions significantly improved, boosting business performance.",
image: "https://cdn.21st.dev/assets/mirror/62/6252a3b6790cbb48919cb8ea756a4e1ce829f3271a141731226871b3c3df9d6d.jpg",
name: "Hassan Ali",
role: "E-commerce Manager",
},
];
const firstColumn = testimonials.slice(0, 3);
const secondColumn = testimonials.slice(3, 6);
const thirdColumn = testimonials.slice(6, 9);
const Testimonials = () => {
return (
<section className="bg-background my-20 relative">
<div className="container z-10 mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
viewport={{ once: true }}
className="flex flex-col items-center justify-center max-w-[540px] mx-auto"
>
<div className="flex justify-center">
<div className="border py-1 px-4 rounded-lg">Testimonials</div>
</div>
<h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold tracking-tighter mt-5">
What our users say
</h2>
<p className="text-center mt-5 opacity-75">
See what our customers have to say about us.
</p>
</motion.div>
<div className="flex justify-center gap-6 mt-10 [mask-image:linear-gradient(to_bottom,transparent,black_25%,black_75%,transparent)] max-h-[740px] overflow-hidden">
<TestimonialsColumn testimonials={firstColumn} duration={15} />
<TestimonialsColumn testimonials={secondColumn} className="hidden md:block" duration={19} />
<TestimonialsColumn testimonials={thirdColumn} className="hidden lg:block" duration={17} />
</div>
</div>
</section>
);
};
export default { Testimonials };Part of Efferd UI — browse the full library on 21st.dev.