dev-api-ui 0.1.7

package/ui/components/ComparePage.tsx

@@ -0,0 +1,364 @@
+// Static — no client state needed. All data derived from the `rival` prop.
+
+interface CmpRow {
+  feat: string;
+  aText: string;
+  aColor: string;
+  bText: string;
+  bColor: string;
+}
+
+interface RelatedCard {
+  type: string;
+  title: string;
+}
+
+const ACCENT = '#1F8A5B';
+const DOWN   = '#C2453B';
+const SEC    = '#5B6470';
+const TERT   = '#8A8F98';
+
+function renderCell(v: string, isUs: boolean): { text: string; color: string } {
+  if (v === 'check') return { text: '✓ Yes', color: ACCENT };
+  if (v === 'cross') return { text: '✗ No',  color: DOWN   };
+  return { text: v, color: isUs ? ACCENT : SEC };
+}
+
+const ROW_DEFS: [string, string, string][] = [
+  ['Point-in-time history',            'check',    'manual'],
+  ['Per-value source provenance',      'check',    'cross'],
+  ['REST + WebSocket API',             'check',    'terminal only'],
+  ['Public, per-call pricing',         'check',    'quote-based'],
+  ['Free tier',                        'check',    'cross'],
+  ['One schema across fx · metals · power', 'check', 'siloed'],
+  ['CSV / Parquet export',             'check',    'limited'],
+  ['Time to first call',               'minutes',  'weeks'],
+];
+
+function buildRows(): CmpRow[] {
+  return ROW_DEFS.map(([feat, a, b]) => {
+    const ca = renderCell(a, true);
+    const cb = renderCell(b, false);
+    return { feat, aText: ca.text, aColor: ca.color, bText: cb.text, bColor: cb.color };
+  });
+}
+
+// ── External link glyph ────────────────────────────────────────────────────────
+function ExtIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width={13} height={13} fill="none" stroke="currentColor"
+      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M13 5h6v6" />
+      <path d="M19 5l-8 8" />
+      <path d="M19 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5" />
+    </svg>
+  );
+}
+
+// ── Arrow icon ─────────────────────────────────────────────────────────────────
+function ArrowRight() {
+  return (
+    <svg viewBox="0 0 24 24" width={13} height={13} fill="none" stroke="currentColor"
+      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M5 12h14" />
+      <path d="M13 6l6 6-6 6" />
+    </svg>
+  );
+}
+
+// ── Page component ─────────────────────────────────────────────────────────────
+
+interface ComparePageProps {
+  rival: string;
+  brand?: string;
+}
+
+export default function ComparePage({ rival, brand = 'Console' }: ComparePageProps) {
+  const rivalCap = rival.charAt(0).toUpperCase() + rival.slice(1);
+  const rows = buildRows();
+  const related: RelatedCard[] = [
+    { type: 'Compare', title: `${brand} vs scraped feeds` },
+    { type: 'Compare', title: `${brand} vs spreadsheet exports` },
+    { type: 'Guide',   title: 'Migrating a backtest off restated data' },
+  ];
+
+  return (
+    <div style={{ background: 'var(--paper)', minHeight: '100vh' }}>
+      <div style={{ maxWidth: 920, margin: '0 auto', padding: '0 32px' }}>
+
+        {/* ── Header / lede ─────────────────────────────────────────────── */}
+        <section style={{ padding: '34px 0 26px', borderBottom: '0.5px solid var(--hairline)' }}>
+          {/* Breadcrumb */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: TERT }}>
+            <a href="#" style={{ color: SEC, textDecoration: 'none' }}>Compare</a>
+            <span>/</span>
+            <span style={{ color: 'var(--ink)' }}>{brand} vs {rivalCap}</span>
+          </div>
+
+          {/* Eyebrow */}
+          <div style={{
+            display: 'inline-flex', alignItems: 'center', gap: 8,
+            fontSize: 12, fontWeight: 600, letterSpacing: '.04em',
+            textTransform: 'uppercase', color: 'var(--accent)',
+            marginTop: 18,
+          }}>
+            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }} />
+            Comparison
+          </div>
+
+          {/* H1 */}
+          <h1 style={{
+            fontFamily: 'var(--mono)', fontSize: 34, fontWeight: 600,
+            letterSpacing: '-.02em', marginTop: 12, lineHeight: 1.12,
+          }}>
+            {brand} vs {rivalCap}
+          </h1>
+
+          {/* Verdict lede */}
+          <p style={{ fontSize: 18, color: 'var(--ink)', lineHeight: 1.6, marginTop: 14 }}>
+            <b style={{ fontWeight: 600 }}>
+              For programmatic, reproducible market data, {brand} wins on provenance, price, and time-to-first-call.
+            </b>{' '}
+            A {rival.toLowerCase()} still leads if you need a manned terminal with news, chat, and execution in one seat.
+          </p>
+
+          {/* Last-reviewed note */}
+          <div style={{ fontSize: 13, color: TERT, marginTop: 14 }}>
+            Last reviewed Jun 2026 · we update this page when either product ships material changes.
+          </div>
+        </section>
+
+        {/* ── Positioning cards (side-by-side — short data cards) ───────── */}
+        <section style={{ padding: '28px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignItems: 'stretch' }}>
+
+            {/* Console card */}
+            <div style={{
+              background: 'var(--surface)',
+              border: '0.5px solid var(--accent)',
+              borderTop: '3px solid var(--accent)',
+              borderRadius: 8,
+              padding: '20px 22px',
+              display: 'flex', flexDirection: 'column', gap: 12,
+            }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <span style={{ fontFamily: 'var(--mono)', fontSize: 16, fontWeight: 600 }}>{brand}</span>
+                <span style={{
+                  fontSize: 11, fontWeight: 600, color: '#fff',
+                  background: 'var(--accent)', borderRadius: 999, padding: '3px 11px',
+                }}>
+                  Best for builders
+                </span>
+              </div>
+              <div style={{ fontSize: 14, color: SEC, lineHeight: 1.5 }}>
+                A programmatic data API. Point-in-time by default, every value sourced, public pricing.
+              </div>
+              <div style={{ fontSize: 13, color: TERT }}>
+                From <span style={{ color: 'var(--ink)', fontWeight: 500 }}>$0</span> · free tier, no card
+              </div>
+              <a href="#" style={{
+                marginTop: 'auto',
+                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
+                fontSize: 14, fontWeight: 500,
+                padding: '9px 15px',
+                borderRadius: 4,
+                border: '0.5px solid transparent',
+                background: 'var(--accent)',
+                color: '#fff',
+                textDecoration: 'none',
+              }}>
+                Get API key
+              </a>
+            </div>
+
+            {/* Rival card */}
+            <div style={{
+              background: 'var(--surface)',
+              border: '0.5px solid var(--hairline-2)',
+              borderTop: '3px solid var(--hairline-2)',
+              borderRadius: 8,
+              padding: '20px 22px',
+              display: 'flex', flexDirection: 'column', gap: 12,
+            }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <span style={{ fontFamily: 'var(--mono)', fontSize: 16, fontWeight: 600 }}>{rivalCap}</span>
+                <span style={{ fontSize: 12, color: TERT }}>Incumbent</span>
+              </div>
+              <div style={{ fontSize: 14, color: SEC, lineHeight: 1.5 }}>
+                A manned terminal: data plus news, messaging, and execution in a single desktop seat.
+              </div>
+              <div style={{ fontSize: 13, color: TERT }}>
+                From <span style={{ color: 'var(--ink)', fontWeight: 500 }}>quote-based</span> · annual seat license
+              </div>
+              <a href="#" style={{
+                marginTop: 'auto',
+                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
+                fontSize: 14, fontWeight: 500,
+                padding: '9px 15px',
+                borderRadius: 4,
+                border: '0.5px solid var(--hairline-2)',
+                background: 'var(--surface)',
+                color: 'var(--ink)',
+                textDecoration: 'none',
+              }}>
+                Visit site <ExtIcon />
+              </a>
+            </div>
+
+          </div>
+        </section>
+
+        {/* ── Feature table ──────────────────────────────────────────────── */}
+        <section style={{ padding: '30px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <h2 style={{
+            fontFamily: 'var(--mono)', fontSize: 20, fontWeight: 600,
+            letterSpacing: '-.01em', marginBottom: 16,
+          }}>
+            Feature by feature
+          </h2>
+
+          <div style={{
+            background: 'var(--surface)',
+            border: '0.5px solid var(--hairline-2)',
+            borderRadius: 8,
+            overflow: 'hidden',
+          }}>
+            {/* Tinted header row */}
+            <div style={{
+              display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr',
+              alignItems: 'center', gap: 16,
+              padding: '11px 20px',
+              borderBottom: '0.5px solid var(--hairline-2)',
+              background: '#F4F4F1',
+            }}>
+              <span style={{ fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: TERT }}>
+                Capability
+              </span>
+              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--accent)' }}>{brand}</span>
+              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>{rivalCap}</span>
+            </div>
+
+            {/* Data rows — horizontal hairlines, no zebra */}
+            {rows.map((r) => (
+              <div key={r.feat} style={{
+                display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr',
+                alignItems: 'center', gap: 16,
+                padding: '13px 20px',
+                borderBottom: '0.5px solid var(--hairline)',
+                fontSize: 14,
+              }}>
+                <span style={{ color: 'var(--ink)' }}>{r.feat}</span>
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, color: r.aColor }}>{r.aText}</span>
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, color: r.bColor }}>{r.bText}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── "Where each wins" prose — stacked vertically (no side-by-side) */}
+        <section style={{ padding: '30px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {/* Console wins */}
+            <div style={{ paddingBottom: 22, borderBottom: '0.5px solid var(--hairline)' }}>
+              <h3 style={{
+                fontFamily: 'var(--mono)', fontSize: 16, fontWeight: 600,
+                letterSpacing: '-.01em', marginBottom: 8,
+              }}>
+                Where {brand} wins
+              </h3>
+              <p style={{ fontSize: 16, color: '#3A3D44', lineHeight: 1.65 }}>
+                If your data flows into code — backtests, pipelines, dashboards — {brand} fits the way you already work.
+                Point-in-time history is default, every value names its source, and you can start free in minutes
+                with public, per-call pricing.
+              </p>
+            </div>
+
+            {/* Rival leads */}
+            <div style={{ paddingTop: 22 }}>
+              <h3 style={{
+                fontFamily: 'var(--mono)', fontSize: 16, fontWeight: 600,
+                letterSpacing: '-.01em', marginBottom: 8,
+              }}>
+                Where {rival.toLowerCase()} leads
+              </h3>
+              <p style={{ fontSize: 16, color: '#3A3D44', lineHeight: 1.65 }}>
+                If you need a person at a desk with breaking news, dealer chat, and order execution beside the numbers,
+                a terminal still does more in one seat. {brand} is data infrastructure, not a trading cockpit.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* ── Final verdict ──────────────────────────────────────────────── */}
+        <section style={{ padding: '30px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <div style={{
+            background: 'var(--surface)',
+            border: '0.5px solid var(--hairline-2)',
+            borderRadius: 8,
+            padding: '20px 22px',
+          }}>
+            <div style={{
+              fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
+              letterSpacing: '.07em', color: TERT, marginBottom: 8,
+            }}>
+              Verdict
+            </div>
+            <p style={{ fontSize: 16, color: 'var(--ink)', lineHeight: 1.6 }}>
+              Choose <b style={{ fontWeight: 600 }}>{brand}</b> when reproducibility, automation, and cost matter
+              more than a manned interface. Keep <b style={{ fontWeight: 600 }}>{rival.toLowerCase()}</b> for the desk that needs
+              news, chat, and execution together. Many teams run both — {brand} feeds the models, the terminal
+              sits with the trader.
+            </p>
+          </div>
+        </section>
+
+        {/* ── Related comparisons ────────────────────────────────────────── */}
+        <section style={{ padding: '30px 0 8px' }}>
+          <h2 style={{
+            fontFamily: 'var(--mono)', fontSize: 20, fontWeight: 600,
+            letterSpacing: '-.01em', marginBottom: 16,
+          }}>
+            Related comparisons
+          </h2>
+
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+            gap: 14,
+          }}>
+            {related.map((card) => (
+              <a key={card.title} href="#" style={{
+                display: 'flex', flexDirection: 'column', gap: 8,
+                background: 'var(--surface)',
+                border: '0.5px solid var(--hairline-2)',
+                borderRadius: 8,
+                padding: '18px 20px',
+                color: 'inherit',
+                textDecoration: 'none',
+                minHeight: 104,
+              }}>
+                <span style={{
+                  fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
+                  letterSpacing: '.07em', color: 'var(--accent)',
+                }}>
+                  {card.type}
+                </span>
+                <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)', lineHeight: 1.4 }}>
+                  {card.title}
+                </span>
+                <span style={{
+                  marginTop: 'auto',
+                  display: 'inline-flex', alignItems: 'center', gap: 6,
+                  fontSize: 13, fontWeight: 500, color: 'var(--accent)',
+                }}>
+                  Read <ArrowRight />
+                </span>
+              </a>
+            ))}
+          </div>
+        </section>
+
+      </div>
+    </div>
+  );
+}