204 lines
9.2 KiB
TypeScript
204 lines
9.2 KiB
TypeScript
/**
|
|
* Inbox module landing page — static HTML, no React.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rInbox</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(135deg,#67e8f9,#93c5fd,#c4b5fd);-webkit-background-clip:text;background-clip:text">(You)rInbox, your team's voice.</h1>
|
|
<p class="rl-subtitle" style="background:linear-gradient(135deg,#67e8f9,#93c5fd,#c4b5fd);-webkit-background-clip:text;background-clip:text">Collaborative Multi-Sig Inbox</p>
|
|
<p class="rl-subtext">
|
|
A shared email client where teams read, discuss, and approve messages
|
|
together — with cryptographic multi-signature workflows before anything gets sent.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rinbox" class="rl-cta-primary" id="ml-primary">Open Inbox</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What rInbox Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📧</div>
|
|
<h3>Shared Team Email</h3>
|
|
<p>Your team shares one real email address. Every member sees every thread in real time — no forwarding, no BCC chains.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">✅</div>
|
|
<h3>Multi-Signature Approval</h3>
|
|
<p>Outbound emails require M-of-N cryptographic signatures before sending. Every approval is auditable — no rogue replies.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">💬</div>
|
|
<h3>Threaded Discussions</h3>
|
|
<p>Comment on any thread privately before replying. Tag members, discuss strategy, and reach consensus alongside the original message.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔑</div>
|
|
<h3>Cryptographic Signing</h3>
|
|
<p>Every outbound message is cryptographically signed. Full audit trail of approvals, rejections, and edits.</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>Connect a Mailbox</h3>
|
|
<p>Your team shares one real email address. Every member sees every thread in real time — no forwarding, no lost context.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Discuss Messages as a Team</h3>
|
|
<p>Comment on any thread privately before replying. Tag members, discuss strategy, and reach consensus alongside the original message.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Approve and Send with Multi-Sig</h3>
|
|
<p>Outbound emails require M-of-N cryptographic signatures before sending. Every approval is auditable — no rogue replies.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Collaboration Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Collaboration Features</h2>
|
|
<p class="rl-subtext" style="text-align:center">Built for collective intelligence, not individual productivity.</p>
|
|
<div class="rl-grid-2" style="margin-top:2rem">
|
|
<div class="rl-card">
|
|
<h3 style="color:#06b6d4;margin-bottom:0.75rem">Real-Time Collaboration</h3>
|
|
<ul class="rl-check-list">
|
|
<li><strong>Threaded Comments</strong> — discuss any email privately before replying</li>
|
|
<li><strong>Draft Reviews</strong> — collaborative draft editing with inline suggestions</li>
|
|
<li><strong>Forwarding Rules</strong> — route incoming messages by sender, subject, or tag</li>
|
|
<li><strong>Inline Signatures</strong> — per-mailbox signature templates with merge fields</li>
|
|
<li><strong>Read Receipts</strong> — see who has read each thread and when</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3 style="color:#8b5cf6;margin-bottom:0.75rem">Approval Workflows</h3>
|
|
<ul class="rl-check-list">
|
|
<li><strong>Multi-sig sending</strong> — outbound emails require M-of-N approval</li>
|
|
<li><strong>Configurable thresholds</strong> — set approval requirements per mailbox</li>
|
|
<li><strong>Audit trail</strong> — every approval, rejection, and edit is logged</li>
|
|
<li><strong>Role-based access</strong> — Admin, Reviewer, Approver, Viewer, Bot</li>
|
|
<li><strong>Deadline alerts</strong> — notifications when approvals are waiting</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Roles -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Team Roles</h2>
|
|
<p class="rl-subtext" style="text-align:center">Fine-grained access control for every team member.</p>
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0.75rem;margin-top:2rem">
|
|
<div class="rl-card rl-card--center" style="padding:1.25rem">
|
|
<p style="font-size:0.875rem;font-weight:600;color:#06b6d4">Admin</p>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Full control, manage members</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center" style="padding:1.25rem">
|
|
<p style="font-size:0.875rem;font-weight:600;color:#3b82f6">Reviewer</p>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Read, comment, suggest edits</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center" style="padding:1.25rem">
|
|
<p style="font-size:0.875rem;font-weight:600;color:#8b5cf6">Approver</p>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Sign outbound emails</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center" style="padding:1.25rem">
|
|
<p style="font-size:0.875rem;font-weight:600;color:#94a3b8">Viewer</p>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Read-only access</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center" style="padding:1.25rem">
|
|
<p style="font-size:0.875rem;font-weight:600;color:#94a3b8">Bot</p>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Automated integrations</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rInbox.</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<h3>ImapFlow</h3>
|
|
<p>High-performance IMAP client for real-time email synchronization.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>Mailparser</h3>
|
|
<p>Email parsing and MIME handling for reliable message processing.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>Gnosis Safe</h3>
|
|
<p>Multisig approval protocol adapted for email signing workflows.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>PostgreSQL</h3>
|
|
<p>Threads, approvals, and audit trails stored in a reliable relational database.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rInbox keeps your information safe.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔒</div>
|
|
<h3>End-to-End Encryption</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>All content encrypted before it leaves your device. Not even the server can read it.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🕵</div>
|
|
<h3>Zero-Knowledge Architecture</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏠</div>
|
|
<h3>Self-Hosted</h3>
|
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">(You)rInbox, your team's voice.</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="/">← Back to rSpace</a>
|
|
</div>
|
|
`;
|
|
}
|