83 lines
3.8 KiB
TypeScript
83 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
ShieldCheck,
|
|
FileCheck2,
|
|
Check,
|
|
ArrowRight,
|
|
ExternalLink,
|
|
Sparkles
|
|
} from 'lucide-react';
|
|
import { COMPARISON_FEATURES } from '../../data/showcaseData';
|
|
|
|
export const DualExperienceComparison: React.FC = () => {
|
|
return (
|
|
<section className="py-24 bg-slate-950 relative border-t border-slate-900 overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Section Header */}
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-slate-900 border border-slate-800 text-indigo-400 text-xs font-semibold mb-4">
|
|
<Sparkles className="w-3.5 h-3.5" />
|
|
<span>Dual Experience Matrix</span>
|
|
</div>
|
|
<h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight leading-tight">
|
|
PFM Console vs.{' '}
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-emerald-400">
|
|
PFM Partner
|
|
</span>
|
|
</h2>
|
|
<p className="mt-3 text-base text-slate-300 leading-relaxed">
|
|
Engineered with clear separation of duties. Backoffice fiduciary gatekeepers govern portfolios, while field implementation teams deliver verified outcomes.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Comparison Table */}
|
|
<div className="overflow-x-auto rounded-3xl border border-slate-800 bg-slate-900/40 backdrop-blur-xl shadow-2xl">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-slate-800 bg-slate-950/80">
|
|
<th className="py-5 px-6 text-xs font-mono uppercase tracking-wider text-slate-400 w-1/4">
|
|
Functional Dimension
|
|
</th>
|
|
<th className="py-5 px-6 text-xs font-bold uppercase tracking-wider text-blue-400 w-3/8 bg-blue-950/20 border-x border-slate-800">
|
|
<div className="flex items-center gap-2">
|
|
<ShieldCheck className="w-4 h-4" />
|
|
<span>PFM Console (Funders & DFIs)</span>
|
|
</div>
|
|
</th>
|
|
<th className="py-5 px-6 text-xs font-bold uppercase tracking-wider text-emerald-400 w-3/8 bg-emerald-950/20">
|
|
<div className="flex items-center gap-2">
|
|
<FileCheck2 className="w-4 h-4" />
|
|
<span>PFM Partner (Grantees & Contractors)</span>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-800/60 text-xs sm:text-sm">
|
|
{COMPARISON_FEATURES.map((row, idx) => (
|
|
<tr key={idx} className="hover:bg-slate-800/30 transition-colors">
|
|
<td className="py-4 px-6 font-semibold text-slate-300">
|
|
{row.feature}
|
|
</td>
|
|
<td className="py-4 px-6 text-slate-300 bg-blue-950/10 border-x border-slate-800/80">
|
|
<div className="flex items-start gap-2">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-blue-400 mt-2 flex-shrink-0"></span>
|
|
<span>{row.console}</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-4 px-6 text-slate-300 bg-emerald-950/10">
|
|
<div className="flex items-start gap-2">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mt-2 flex-shrink-0"></span>
|
|
<span>{row.partner}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|