rspace-online/modules/rchats/landing.ts

151 lines
6.9 KiB
TypeScript

/**
* rChats landing page — rich content for rspace.online/rchats
*/
export function renderLanding(): string {
return `
<!-- Hero -->
<div class="rl-hero">
<span class="rl-tagline">rChats</span>
<h1 class="rl-heading">Your conversations, your infrastructure.</h1>
<p class="rl-subtitle">Encrypted Community Messaging</p>
<p class="rl-subtext">
Real-time community chat with channels &amp; threads, end-to-end encrypted
by default. Local-first, works offline, and scoped to each rSpace community.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rchats" class="rl-cta-primary">Try the Demo</a>
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
</div>
</div>
<!-- Native Encrypted Chat -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Native Encrypted Chat</h2>
<p class="rl-subtext" style="text-align:center">Community messaging built from the ground up for privacy, speed, and self-hosting.</p>
<div class="rl-grid-4">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128172;</div>
<h3>Channels &amp; Threads</h3>
<p>Organize conversations by topic with channels. Dive deeper with threaded replies without cluttering the main feed.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128274;</div>
<h3>End-to-End Encrypted</h3>
<p>Messages encrypted with EncryptID passkeys. The server never sees plaintext &mdash; only community members can read messages.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128247;</div>
<h3>Local-First (CRDT)</h3>
<p>Built on Automerge CRDTs. Send messages offline, sync seamlessly when reconnected. Your data lives on your device first.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127968;</div>
<h3>Space-Scoped</h3>
<p>Each rSpace community gets its own isolated chat instance. Channels, members, and history &mdash; all contained within your space.</p>
</div>
</div>
</div>
</section>
<!-- Connect Your Chats -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Connect Your Chats</h2>
<p class="rl-subtext" style="text-align:center">Already using Slack, Discord, or Matrix? Bridge them into rSpace for a unified community view.</p>
<div class="rl-grid-4">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128279;</div>
<h3>Multi-Platform Bridge</h3>
<p>Aggregate channels from Slack, Discord, Matrix, Telegram, and Mattermost into a single interface.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128229;</div>
<h3>Unified Inbox</h3>
<p>Read and reply to messages across all connected platforms from one place. Similar pattern to rInbox's multi-IMAP aggregation.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128259;</div>
<h3>Two-Way Sync</h3>
<p>Messages flow both directions. Reply from rChats and it appears in the original platform. No context lost.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127758;</div>
<h3>Community-Wide View</h3>
<p>Bridge external channels into rSpace channels for a single community view, regardless of where members actually chat.</p>
</div>
</div>
</div>
</section>
<!-- Data Ecosystem -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Part of a Self-Hosted Data Ecosystem</h2>
<p class="rl-subtext" style="text-align:center">rChats isn't a standalone tool &mdash; it's one node in a wider network of self-hosted services that keep your data under your control.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128197;</div>
<h3>Meeting Integration</h3>
<p>Start a rMeets video call from any channel. Meeting notes, recordings, and summaries flow back into the chat thread.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128196;</div>
<h3>Tasks &amp; Notes</h3>
<p>Turn chat messages into rTasks action items or rNotes documents. Keep conversations and decisions linked.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128272;</div>
<h3>EncryptID SSO</h3>
<p>One identity across the entire rSpace ecosystem. Passkey-based authentication, no passwords to manage.</p>
</div>
</div>
</div>
</section>
<!-- Roadmap -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">On the Horizon</h2>
<p class="rl-subtext" style="text-align:center">Features in development for the rChats roadmap.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#129302;</div>
<h3>AI Summaries</h3>
<span class="rl-badge">Coming Soon</span>
<p>Catch up on long threads with AI-generated summaries. Run locally or via your own LLM endpoint &mdash; no data sent externally.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128268;</div>
<h3>Webhooks &amp; Bots</h3>
<span class="rl-badge">Coming Soon</span>
<p>Build custom integrations with incoming and outgoing webhooks. Connect CI/CD, monitoring, and other services to channels.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127908;</div>
<h3>Voice Channels</h3>
<span class="rl-badge">Coming Soon</span>
<p>Drop into voice channels powered by Jitsi. Persistent rooms for your community &mdash; always on, always private.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="rl-section rl-section--alt">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">Your conversations belong to you.</h2>
<p class="rl-subtext">Start chatting on infrastructure you control, or create a space for your community.</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rchats" class="rl-cta-primary">Try the Demo</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>`;
}