rspace-online/modules/rinbox/landing.ts

/**
 * rInbox landing page — collaborative email with multisig approval.
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rInbox</span>
  <h1 class="rl-heading">Collaborative Email<br>
    <span style="background:linear-gradient(135deg,#6366f1,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent">with Multi-Sig Approval</span>
  </h1>
  <p class="rl-subtext">
    Shared mailboxes for your team with <strong style="color:#e2e8f0">threaded comments</strong>,
    <strong style="color:#e2e8f0">M-of-N approval workflows</strong>, and
    <strong style="color:#e2e8f0">IMAP sync</strong> &mdash; all powered by EncryptID passkeys.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rinbox" class="rl-cta-primary" id="ml-primary">
      Try the Demo &rarr;
    </a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- What rInbox Does -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What rInbox Does</h2>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#6366f1,rgba(99,102,241,0.6))">&#128232;</div>
        <h3>Shared Mailboxes</h3>
        <p>Create team and project mailboxes that multiple members can read, triage, and respond to. Role-based access controls who sees what.</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))">&#128172;</div>
        <h3>Threaded Comments</h3>
        <p>Discuss emails internally before replying. @mention teammates, leave notes on threads, and coordinate responses as a team.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">&#9989;</div>
        <h3>Multi-Sig Approval</h3>
        <p>Outgoing emails require M-of-N signatures before sending. Board votes, treasury approvals, and governance decisions built into email.</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>Create a Mailbox</h3>
        <p>Set up a shared mailbox (e.g. <code style="color:#818cf8">team@yourspace.rspace.online</code>) and invite your team members with the roles they need.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Triage &amp; Discuss</h3>
        <p>Incoming emails sync via IMAP. Team members triage threads, leave internal comments, star important messages, and assign owners.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Approve &amp; Send</h3>
        <p>Draft a reply, then collect the required number of signatures. Once the threshold is met, the email sends automatically.</p>
      </div>
    </div>
  </div>
</section>

<!-- Use Cases -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What Can You Do With a Multi-Sig Inbox?</h2>
    <p class="rl-subtext" style="text-align:center">When outbound email requires collective approval, new coordination patterns become possible.</p>
    <div class="rl-grid-3">
      <div class="rl-card">
        <h3 style="color:#22d3ee">Governance &amp; Resolutions</h3>
        <p>Board decisions require 3-of-5 signers before the email sends. The message is the vote &mdash; no separate tooling needed.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#a78bfa">Escrow &amp; Conditional Release</h3>
        <p>Hold sensitive documents in an inbox that only unlocks when N parties agree. Mediation where neither side can act alone.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#4ade80">Treasury &amp; Payments</h3>
        <p>Invoice arrives, 2-of-3 finance team co-sign the reply authorizing payment. Bridges email to on-chain wallets via Gnosis Safe.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#fbbf24">Tamper-Proof Audit Trails</h3>
        <p>Every email read and sent is co-signed. Cryptographic proof of who approved what, when. Built for compliance.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#f87171">Whistleblower Coordination</h3>
        <p>Evidence requires M-of-N co-signers before release. Nobody goes first alone.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#60a5fa">Social Key Recovery</h3>
        <p>Lost access? 3-of-5 trusted contacts co-sign your restoration. No phone number, no backup email &mdash; a trust network.</p>
      </div>
    </div>
  </div>
</section>

<!-- Technical Features -->
<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,#6366f1,rgba(99,102,241,0.6))">&#128274;</div>
        <h3>EncryptID Auth</h3>
        <p>Passkey-based authentication. No passwords, no seed phrases. Hardware-backed biometric login.</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))">&#128260;</div>
        <h3>IMAP Sync</h3>
        <p>Connect any IMAP mailbox. Server-side polling syncs emails every 30 seconds with UID tracking.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">&#128279;</div>
        <h3>Gnosis Safe</h3>
        <p>Approval workflows can tie to on-chain Gnosis Safe transactions for verifiable multi-sig.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f97316,#d97706)">&#127760;</div>
        <h3>Local-First</h3>
        <p>Automerge CRDT sync keeps mailbox state available offline. Changes merge automatically.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Email, reimagined for teams.</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/rinbox" class="rl-cta-primary">Open Inbox</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>`;
}