81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Star, BadgeCheck } from 'lucide-react';
|
|
|
|
const REVIEWS = [
|
|
{
|
|
name: "Alex Chen",
|
|
role: "Software Engineer",
|
|
text: "Finally, an app that understands biology. No red text, just adjustments. I treat my body like a system now, not a moral failing.",
|
|
rating: 5
|
|
},
|
|
{
|
|
name: "Sarah Jenkins",
|
|
role: "Product Manager",
|
|
text: "The Training Day toggle is a game changer for my hypertrophy blocks. I eat 800 calories more on leg days and I'm leaner than ever.",
|
|
rating: 5
|
|
},
|
|
{
|
|
name: "Marcus Ford",
|
|
role: "Powerlifter",
|
|
text: "I used to binge after 'failing' my diet. FitMate just recalculates the route. It's removed the anxiety completely.",
|
|
rating: 5
|
|
},
|
|
{
|
|
name: "Elena R.",
|
|
role: "Marathon Runner",
|
|
text: "The fueling strategies for long run days vs recovery days are spot on. My recovery metrics have never been better.",
|
|
rating: 5
|
|
},
|
|
{
|
|
name: "David Kim",
|
|
role: "Data Analyst",
|
|
text: "Love the trend weight visualization. Scale weight is so noisy, this app helps me see the signal in the noise.",
|
|
rating: 5
|
|
},
|
|
{
|
|
name: "Jessica T.",
|
|
role: "CrossFit Athlete",
|
|
text: "It doesn't just track; it directs. I wake up and know exactly what the mission is for the day.",
|
|
rating: 5
|
|
}
|
|
];
|
|
|
|
export const Testimonials: React.FC = () => {
|
|
return (
|
|
<section id="reviews" className="py-32 bg-background relative scroll-mt-32">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-20">
|
|
<h2 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tighter">
|
|
Trust the <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-blue-500">Process</span>.
|
|
</h2>
|
|
<p className="text-xl text-gray-400">
|
|
Join thousands of high-performers who stopped guessing.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{REVIEWS.map((review, idx) => (
|
|
<div key={idx} className="p-8 rounded-3xl bg-surfaceHighlight border border-white/5 hover:border-primary-500/20 transition-colors duration-300 flex flex-col h-full">
|
|
<div className="flex gap-1 mb-4">
|
|
{[...Array(review.rating)].map((_, i) => (
|
|
<Star key={i} size={16} fill="#22d3ee" className="text-primary-400" strokeWidth={0} />
|
|
))}
|
|
</div>
|
|
<p className="text-gray-300 leading-relaxed mb-6 flex-1">
|
|
"{review.text}"
|
|
</p>
|
|
<div className="flex items-center justify-between mt-auto pt-6 border-t border-white/5">
|
|
<div>
|
|
<div className="font-bold text-white text-sm">{review.name}</div>
|
|
<div className="text-xs text-gray-500">{review.role}</div>
|
|
</div>
|
|
<BadgeCheck className="text-primary-500 w-5 h-5" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |