Spaces:
Paused
Paused
File size: 3,655 Bytes
17b60d4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import React from 'react';
import { CheckCircle, Timer, Clock, ClipboardCheck, Smile, Gauge } from 'lucide-react';
const TrustedBy: React.FC = () => {
const metrics = [
{
icon: <CheckCircle size={20} />,
category: "Task Success Rate",
question: "Do users complete their goals?",
outcome: "Identify drop-off points in critical flows."
},
{
icon: <Timer size={20} />,
category: "Time-on-Task",
question: "How quickly do they finish?",
outcome: "Benchmark efficiency against previous versions."
},
{
icon: <Clock size={20} />,
category: "Session Duration",
question: "How long do they stay engaged?",
outcome: "Balance retention with efficient task completion."
},
{
icon: <ClipboardCheck size={20} />,
category: "System Usability Scale",
question: "Is the product usable?",
outcome: "Standardized scoring for overall usability."
},
{
icon: <Smile size={20} />,
category: "Customer Satisfaction",
question: "Are users happy with the experience?",
outcome: "Predict long-term retention and loyalty."
},
{
icon: <Gauge size={20} />,
category: "Customer Effort Score",
question: "Is it easy to get things done?",
outcome: "Reduce friction to increase conversion."
}
];
return (
<section className="py-24 border-t border-gray-800 bg-black">
<div className="max-w-7xl mx-auto px-6">
<h3 className="text-center text-3xl md:text-4xl font-semibold text-white mb-6">
Quantify your UX quality programmatically.
</h3>
<p className="text-center text-gray-400 mb-16 max-w-2xl mx-auto text-lg">
Developers use SyncUsers to predict performance on core metrics without waiting for live traffic data.
</p>
{/* UX Metrics Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
{metrics.map((item, idx) => (
<div key={idx} className="group p-8 rounded-2xl border border-gray-800 bg-gray-900/20 hover:border-teal-900/50 hover:bg-gray-900/40 transition-all duration-300">
<div className="flex items-center gap-3 mb-5 text-gray-500 group-hover:text-teal-400 transition-colors">
{item.icon}
<span className="text-xs font-mono uppercase tracking-widest">{item.category}</span>
</div>
<div className="text-xl font-medium text-white mb-3 group-hover:translate-x-1 transition-transform duration-300">
{item.question}
</div>
<p className="text-sm text-gray-500 leading-relaxed group-hover:text-gray-400 transition-colors">
{item.outcome}
</p>
</div>
))}
</div>
{/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{[
{ value: "2,000+", label: "Persona Database ready", color: "border-blue-900" },
{ value: "REST & GraphQL", label: "API Available", color: "border-teal-900" },
].map((stat, idx) => (
<div key={idx} className={`relative flex flex-col items-center justify-center py-16 rounded-full border border-t-2 ${stat.color} bg-gradient-to-b from-gray-900 to-black`}>
<h4 className="text-4xl md:text-5xl font-bold text-white mb-2">{stat.value}</h4>
<p className="text-gray-400">{stat.label}</p>
</div>
))}
</div>
</div>
</section>
);
};
export default TrustedBy; |