mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import React from "react";
|
|
|
|
const testimonials = [
|
|
{
|
|
name: "Alex Chen",
|
|
role: "Senior Developer",
|
|
company: "TechCorp",
|
|
content:
|
|
"Better-T Stack has revolutionized our development workflow. The type safety and development experience is unmatched.",
|
|
avatar: "AC",
|
|
},
|
|
{
|
|
name: "Sarah Miller",
|
|
role: "Tech Lead",
|
|
company: "Innovation Labs",
|
|
content:
|
|
"This is the future of full-stack development. The integration between all tools is seamless and intuitive.",
|
|
avatar: "SM",
|
|
},
|
|
{
|
|
name: "James Wilson",
|
|
role: "Frontend Architect",
|
|
company: "DevForce",
|
|
content:
|
|
"Finally, a stack that prioritizes both developer experience and performance. It's a game-changer.",
|
|
avatar: "JW",
|
|
},
|
|
];
|
|
|
|
const Testimonials = () => {
|
|
return (
|
|
<section className="w-full py-24 px-4 bg-gradient-to-b from-transparent via-gray-900/50 to-transparent backdrop-blur-sm relative z-50">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500">
|
|
Loved by Developers Worldwide
|
|
</h2>
|
|
<p className="text-gray-400 mt-4 text-lg">
|
|
Join thousands of developers crafting the future with Better-T Stack
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{testimonials.map((testimonial) => (
|
|
<div
|
|
key={testimonial.name}
|
|
className="group rounded-xl border border-gray-800 bg-gray-900/70 p-6 hover:border-gray-700 transition-colors duration-200"
|
|
>
|
|
<div className="flex items-center space-x-4 mb-4">
|
|
<div className="shrink-0">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white font-medium">
|
|
{testimonial.avatar}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-semibold">
|
|
{testimonial.name}
|
|
</h3>
|
|
<p className="text-sm">
|
|
<span className="text-purple-400">{testimonial.role}</span>
|
|
<span className="text-gray-500 mx-1">at</span>
|
|
<span className="text-pink-400">{testimonial.company}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{testimonial.content}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Testimonials;
|