rspace-online/modules/rflows/landing.ts

/**
 * rFlows — rich landing page body.
 * Returned by landingPage() in the module export;
 * the shell wraps it with header, CSS, and analytics.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rFlows</span>
  <h1 class="rl-heading">Design Funding Flows<br>
    <span style="background:linear-gradient(135deg,#fbbf24,#34d399,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent">That Respond to Reality</span>
  </h1>
  <p class="rl-subtext">
    Model how money moves through your organization with <strong style="color:#e2e8f0">threshold-based funnels</strong>,
    <strong style="color:#e2e8f0">automatic overflow routing</strong>, and
    <strong style="color:#e2e8f0">proportional flow visualization</strong> &mdash; then save it to your space.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rflows" class="rl-cta-primary" id="ml-primary">
      Try the Demo &rarr;
    </a>
    <a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
  </div>
  <p style="font-size:0.8rem;color:var(--rs-text-muted,#64748b);margin-top:0.75rem">
    Build your flow in the demo, then sign in to save it to your own space.
  </p>
</div>

<!-- What rFlows Does -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What rFlows Does</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">&#127754;</div>
        <h3>Funnel Budgets</h3>
        <p>Each funding pool is a funnel with three zones &mdash; overflow, healthy, and critical &mdash; defined by min/max thresholds you set by dragging.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#34d399,rgba(16,185,129,0.6))">&#128260;</div>
        <h3>Overflow Routing</h3>
        <p>When a funnel exceeds its max threshold, excess funds automatically redistribute to connected pools &mdash; no manual intervention needed.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#60a5fa,rgba(59,130,246,0.6))">&#128200;</div>
        <h3>Proportional Edges</h3>
        <p>Flow edges scale in width proportionally to their allocation percentage. See at a glance where the most capital is moving.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#a78bfa,rgba(139,92,246,0.6))">&#127758;</div>
        <h3>River View</h3>
        <p>Switch to the Sankey river visualization to see how all funds flow through your system from source to outcome in one view.</p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">How It Works</h2>
    <div class="rl-grid-3">
      <div class="rl-step">
        <div class="rl-step__num">1</div>
        <h3>Define Funnels</h3>
        <p>Create funding pools and set their min/max thresholds. Drag the threshold handles to define when a funnel is healthy, overflowing, or critically low.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Wire Connections</h3>
        <p>Connect funnels with overflow edges (sideways) so excess funds route to other pools. Add spending edges (downward) to fund outcomes and deliverables.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Simulate &amp; Save</h3>
        <p>Watch funds flow through your system in real-time. Adjust allocations with +/- controls on each edge. Save the flow to your space when you're happy with it.</p>
      </div>
    </div>
  </div>
</section>

<!-- Use Cases -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Who Uses Flow-Based Funding?</h2>
    <p class="rl-subtext" style="text-align:center">When budgets need to respond dynamically to changing conditions, threshold-based flows replace static spreadsheets.</p>
    <div class="rl-grid-3">
      <div class="rl-card">
        <h3 style="color:#fbbf24">DAO Treasuries</h3>
        <p>Multi-pool treasuries where governance votes set thresholds and overflow routes funds between working groups automatically.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#34d399">Grant Programs</h3>
        <p>Funding rounds where excess from one grant pool overflows to the next priority &mdash; no capital sits idle when other pools need it.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#60a5fa">Revenue Sharing</h3>
        <p>Revenue enters a source funnel and splits proportionally to downstream recipients. Adjust percentages and see the river update live.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#a78bfa">Community Funds</h3>
        <p>Public goods funding where contributions flow through conviction-based allocation curves. Min thresholds protect critical infrastructure.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#f87171">Emergency Reserves</h3>
        <p>Critical-zone protection: when a pool drops below its minimum, outflow is automatically restricted to preserve essential reserves.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#22d3ee">Budget Modeling</h3>
        <p>Prototype budget structures visually before committing capital. Simulate deposit/withdrawal scenarios and see cascading effects.</p>
      </div>
    </div>
  </div>
</section>

<!-- The Funnel Metaphor -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">The Funnel Model</h2>
    <p class="rl-subtext" style="text-align:center">Every funding pool is a funnel with three zones. Thresholds trigger automatic behavior.</p>
    <div style="max-width:32rem;margin:2rem auto 0;display:grid;gap:0;font-size:0.875rem;text-align:center">

      <!-- Overflow -->
      <div style="background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);border-radius:0.75rem 0.75rem 0 0;padding:1rem 1.5rem">
        <div style="font-weight:700;color:#fbbf24;font-size:0.95rem">OVERFLOW</div>
        <div style="font-size:0.78rem;color:#fcd34d;margin-top:0.25rem">Above max &mdash; excess redistributes to connected funnels</div>
      </div>

      <!-- Max line -->
      <div style="border-bottom:2px dashed rgba(245,158,11,0.4);padding:0.2rem 0;font-size:0.7rem;font-weight:700;color:#f59e0b;background:rgba(245,158,11,0.04)">
        MAX THRESHOLD
      </div>

      <!-- Healthy -->
      <div style="background:rgba(16,185,129,0.08);border-left:1px solid rgba(16,185,129,0.25);border-right:1px solid rgba(16,185,129,0.25);padding:1.25rem 1.5rem">
        <div style="font-weight:700;color:#34d399;font-size:0.95rem">HEALTHY</div>
        <div style="font-size:0.78rem;color:#6ee7b7;margin-top:0.25rem">Full flow rate &mdash; balanced operations, normal outflow</div>
      </div>

      <!-- Min line -->
      <div style="border-bottom:2px dashed rgba(239,68,68,0.4);padding:0.2rem 0;font-size:0.7rem;font-weight:700;color:#ef4444;background:rgba(239,68,68,0.04)">
        MIN THRESHOLD
      </div>

      <!-- Critical -->
      <div style="background:rgba(51,65,85,0.2);border:1px solid rgba(71,85,105,0.25);border-radius:0 0 0.75rem 0.75rem;padding:1rem 1.5rem">
        <div style="font-weight:700;color:#f87171;font-size:0.95rem">CRITICAL</div>
        <div style="font-size:0.78rem;color:#fca5a5;margin-top:0.25rem">Below min &mdash; outflow restricted, conservation mode</div>
      </div>

    </div>
  </div>
</section>

<!-- Ecosystem -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Connects to Your Stack</h2>
    <p class="rl-subtext" style="text-align:center">
      rFlows plugs into other rSpace modules for end-to-end treasury governance.
    </p>
    <div class="rl-grid-3" style="max-width:900px;margin:0 auto">
      <div class="rl-integration">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">&#128176;</div>
        <div>
          <h3><a href="/rwallet" style="color:#14b8a6;text-decoration:none">rWallet</a></h3>
          <p>On-chain balances feed into funnels as real-time deposits. Multi-sig wallets as funding sources.</p>
        </div>
      </div>
      <div class="rl-integration">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#8b5cf6,rgba(139,92,246,0.6))">&#128499;</div>
        <div>
          <h3><a href="/rvote" style="color:#8b5cf6;text-decoration:none">rVote</a></h3>
          <p>Governance decisions set flow thresholds and allocation percentages through formal proposals.</p>
        </div>
      </div>
      <div class="rl-integration">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">&#128202;</div>
        <div>
          <h3><a href="/rdata" style="color:#0891b2;text-decoration:none">rData</a></h3>
          <p>Analytics dashboards pull from flow events &mdash; track deposits, withdrawals, and allocation history.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Under the Hood -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Under the Hood</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">&#127754;</div>
        <h3>Flow Engine</h3>
        <p>Custom allocation engine computes overflow cascades, spending splits, and threshold responses in real-time.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#6366f1,rgba(99,102,241,0.6))">&#128274;</div>
        <h3>EncryptID</h3>
        <p>Passkey-based auth &mdash; no passwords, no seed phrases. Sign in with biometrics to save flows to your space.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">&#128260;</div>
        <h3>Automerge CRDT</h3>
        <p>Real-time sync across collaborators. Multiple people can edit flows simultaneously with automatic conflict resolution.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">&#127760;</div>
        <h3>Local-First</h3>
        <p>Works offline. Changes sync when you reconnect. Your data lives on your device first, server second.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Ready to model your funding flows?</h2>
    <p class="rl-subtext">Build a flow in the demo, then save it to your own space with one click.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rflows" class="rl-cta-primary">Open the Demo &rarr;</a>
      <a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
    </div>
  </div>
</section>

<div class="rl-back">
  <a href="/">&larr; Back to rSpace</a>
</div>`;
}