rfunds-online/components/landing-content.ts

export const LANDING_HTML = `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline" style="color:#22c55e;background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.2)">
    Threshold-Based Flow Funding
  </span>
  <h1 class="rl-heading" style="background:linear-gradient(135deg,#22c55e,#10b981,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
    (You)rFunds, your flows designed.
  </h1>
  <p class="rl-subtitle" style="background:linear-gradient(135deg,#22c55e,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
    Design Continuous Funding Flows
  </p>
  <p class="rl-subtext">
    Design, simulate, and share <span style="color:#22c55e;font-weight:600">continuous funding flows</span>
    with threshold-based mechanisms. Create interconnected funding funnels
    with overflow routing and outcome tracking.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rfunds" class="rl-cta-primary" id="ml-primary"
       style="background:linear-gradient(135deg,#22c55e,#10b981)">
      Open Designer
    </a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- Three Core Actions -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">How It Works</h2>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(34,197,94,0.12)">&#127978;</div>
        <h3>Create Funnels</h3>
        <p>Design funding pools with three threshold zones: <span style="color:#22c55e">overflow</span> (above MAX),
           <span style="color:#fbbf24">healthy</span> (between thresholds), and
           <span style="color:#ef4444">critical</span> (below MIN).</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(16,185,129,0.12)">&#128260;</div>
        <h3>Connect Flows</h3>
        <p>Link funnels with overflow edges for automatic fund routing and spending edges for outcome tracking. Funds flow where they&rsquo;re needed.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(20,184,166,0.12)">&#9654;</div>
        <h3>Simulate &amp; Share</h3>
        <p>Run simulations and watch edge widths scale proportionally to flow volume. Share designs via link for community review.</p>
      </div>
    </div>
  </div>
</section>

<!-- Funnel Zones -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Threshold Zones</h2>
    <p class="rl-subtext" style="text-align:center">
      Each funnel has three zones that determine how funds flow through the system.
    </p>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-card" style="border-color:rgba(34,197,94,0.3)">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:12px;height:12px;border-radius:50%;background:#22c55e"></div>
          <h3 style="margin-bottom:0;color:#22c55e">Overflow Zone</h3>
        </div>
        <p>Above MAX threshold. Excess funds automatically route to connected funnels via overflow edges.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(251,191,36,0.3)">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:12px;height:12px;border-radius:50%;background:#fbbf24"></div>
          <h3 style="margin-bottom:0;color:#fbbf24">Healthy Zone</h3>
        </div>
        <p>Between MIN and MAX thresholds. Funds are available for spending edges and planned allocations.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(239,68,68,0.3)">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:12px;height:12px;border-radius:50%;background:#ef4444"></div>
          <h3 style="margin-bottom:0;color:#ef4444">Critical Zone</h3>
        </div>
        <p>Below MIN threshold. Spending edges are paused. The funnel receives priority from connected overflow sources.</p>
      </div>
    </div>
  </div>
</section>

<!-- Use Cases -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Use Cases</h2>
    <div class="rl-grid-2" style="margin-top:2rem">
      <div class="rl-card">
        <h3 style="color:#22c55e">Community Treasuries</h3>
        <p>Model how your DAO or cooperative&rsquo;s treasury flows between operations, grants, and reserves with automatic overflow routing.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#10b981">Grant Programs</h3>
        <p>Design funding rounds where excess contributions overflow to the next round or to complementary projects.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#14b8a6">Mutual Aid Networks</h3>
        <p>Create interconnected aid funnels that automatically redistribute when one pool is overfunded and another is critical.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#0d9488">Budget Simulation</h3>
        <p>Simulate different funding scenarios before committing real capital. See how changes cascade through your flow network.</p>
      </div>
    </div>
  </div>
</section>

<!-- Ecosystem -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Ecosystem Integration</h2>
    <div class="rl-grid-2" style="margin-top:2rem">
      <div class="rl-integration" style="border-color:rgba(34,197,94,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128176;</span></div>
        <div>
          <h3>rWallet</h3>
          <p>Overlay fund flow designs on your actual Safe multisig treasury balances for real-time comparison.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(34,197,94,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#9745;</span></div>
        <div>
          <h3>rVote</h3>
          <p>Link governance proposals to specific funding flows. Community votes determine allocation changes.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading" style="background:linear-gradient(135deg,#22c55e,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
      Design your funding flows.
    </h2>
    <p class="rl-subtext">Try the demo or create a space to get started.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rfunds" class="rl-cta-primary"
         style="background:linear-gradient(135deg,#22c55e,#10b981)">
        Open Designer
      </a>
      <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
    </div>
  </div>
</section>

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