Added ShowcaseUI app

2026-10-29 17:40:48 +02:00
parent 0fe6f40b2a
commit 2bd0b12335
50 changed files with 4182 additions and 0 deletions
@@ -0,0 +1,82 @@
+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>
+  );
+};
+