svrjs-nextjs-website/components/shared/Testimonials.tsx

import React from "react";
import TestimonialCard from "../cards/testimonialCard";

const testimonials = [
	{
		name: "John Doe",
		role: "CEO, Example Corp.",
		avatar: "avatar1",
		testimonial:
			"Working with this team was a fantastic experience. They developed our website exactly to our specifications, and everything was seamless and well-integrated.",
		rating: 5,
	},
	{
		name: "Jane Smith",
		role: "CEO, CleanCo",
		avatar: "avatar2",
		testimonial:
			"We're thrilled with the website. It's simple, clean, and has significantly boosted our sales. The developers did an excellent job.",
		rating: 4,
	},
	{
		name: "Sam Green",
		role: "Web Developer",
		avatar: "avatar3",
		testimonial:
			"Collaborating with this team to build a SaaS-integrated website was a perfect experience. I look forward to working with them again.",
		rating: 5,
	},
	{
		name: "Chris Brown",
		role: "Web Coder",
		avatar: "avatar4",
		testimonial:
			"The team's understanding of our needs and their ability to provide fitting solutions was impressive. Their support and guidance were invaluable.",
		rating: 4,
	},
	{
		name: "Alex Johnson",
		avatar: "avatar5",
		testimonial:
			"Exceptional service and outstanding results. They consistently deliver on time and within budget, making them our go-to partner for all our projects.",
		rating: 5,
	},
	{
		name: "Patricia Taylor",
		role: "Web Developer",
		avatar: "avatar6",
		testimonial:
			"It was great to work with them. I needed a design for a SaaS project, and it was delivered within 2 days.",
		rating: 4,
	},
	{
		name: "Emily Davis",
		role: "UX Designer, Creative Agency",
		avatar: "avatar7",
		testimonial:
			"Collaborating with them has been a pleasure. Their creativity and user-centric approach have significantly enhanced our product's usability.",
		rating: 5,
	},
	{
		name: "Michael Lee",
		avatar: "avatar8",
		testimonial:
			"They have a keen understanding of our business needs and consistently deliver top-notch solutions. Their reliability and efficiency are commendable.",
		rating: 5,
	},
	{
		name: "Sarah Wilson",
		avatar: "avatar9",
		testimonial:
			"Their dedication to client satisfaction is evident in everything they do. We've seen remarkable improvements in our processes thanks to their expertise.",
		rating: 4,
	},
];

const Testimonials = () => {
	return (
		<section className="mx-auto flex w-full max-w-7xl flex-col pt-12 md:pt-24">
			<div className="flex flex-row items-center justify-center space-x-1">
				<span className="text-white/50 text-xs lg:text-base">Testimonials</span>
			</div>
			<h1 className="text-3xl md:text-5xl font-bold text-center">
				Hear it from{" "}
				<span className="bg-gradient-to-b from-green-300 to-primary text-transparent bg-clip-text">
					our users
				</span>
			</h1>

			<ul className="wrapper columns-1 gap-5 md:columns-2 lg:columns-3 py-6 mt-6">
				{testimonials.map((testimonial, idx) => (
					<TestimonialCard
						avatar={testimonial.avatar}
						name={testimonial.name}
						role={testimonial.role}
						testimonial={testimonial.testimonial}
						rating={testimonial.rating}
						key={idx}
					/>
				))}
			</ul>
		</section>
	);
};

export default Testimonials;