189 lines
11 KiB
TypeScript
189 lines
11 KiB
TypeScript
/**
|
|
* rInbox (rChats) landing page — encrypted community chat.
|
|
* Ported from rchats-online Next.js page.tsx (shadcn/ui + Lucide).
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">Part of the rSpace Ecosystem</span>
|
|
<h1 class="rl-heading">Encrypted<br>
|
|
<span style="background:linear-gradient(135deg,#3b82f6,#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent">Community Chat</span>
|
|
</h1>
|
|
<p class="rl-subtext">
|
|
Secure messaging powered by <strong style="color:#e2e8f0">EncryptID passkeys</strong>.
|
|
No passwords, no seed phrases — just <strong style="color:#e2e8f0">hardware-backed encryption</strong> and
|
|
full data ownership for your community.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rinbox" class="rl-cta-primary" id="ml-primary">
|
|
Try the Demo →
|
|
</a>
|
|
<a href="https://demo.rspace.online/rinbox" class="rl-cta-secondary">Get Started</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:1.5rem">
|
|
<span class="rl-badge">How It Works</span>
|
|
<h2 class="rl-heading" style="margin-top:0.75rem">Secure Chat in 30 Seconds</h2>
|
|
<p class="rl-subtext">
|
|
<strong style="color:#3b82f6">Create a passkey</strong> on your device,
|
|
<strong style="color:#14b8a6">join a community</strong>, and
|
|
<strong style="color:#e2e8f0">chat with end-to-end encryption</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card" style="border:2px solid rgba(59,130,246,0.4);background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.05))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="height:2rem;width:2rem;border-radius:50%;background:#3b82f6;display:flex;align-items:center;justify-content:center">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10V4a2 2 0 00-4 0v6"/><path d="M18 11a6 6 0 00-12 0v3"/><rect x="3" y="14" width="18" height="8" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
|
|
</div>
|
|
<h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">1. Create a Passkey</h3>
|
|
</div>
|
|
<p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
|
|
Register with EncryptID using your device's biometrics or security key.
|
|
No passwords to remember or leak.
|
|
<strong style="color:#e2e8f0;display:block;margin-top:0.5rem">Your keys never leave your device.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card" style="border:2px solid rgba(20,184,166,0.4);background:linear-gradient(135deg,rgba(20,184,166,0.1),rgba(20,184,166,0.05))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="height:2rem;width:2rem;border-radius:50%;background:#14b8a6;display:flex;align-items:center;justify-content:center">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4-4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
|
|
</div>
|
|
<h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">2. Join a Community</h3>
|
|
</div>
|
|
<p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
|
|
Create or join a community chat space. Invite members with role-based
|
|
access: viewers, participants, moderators, and admins.
|
|
<strong style="color:#e2e8f0;display:block;margin-top:0.5rem">One identity across all r* apps.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card" style="border:2px solid rgba(100,116,139,0.4);background:linear-gradient(135deg,rgba(100,116,139,0.1),rgba(100,116,139,0.05))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="height:2rem;width:2rem;border-radius:50%;background:#64748b;display:flex;align-items:center;justify-content:center">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><rect x="9" y="9" width="6" height="1" rx="0.5"/></svg>
|
|
</div>
|
|
<h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">3. Chat Securely</h3>
|
|
</div>
|
|
<p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
|
|
Messages are encrypted with keys derived from your passkey.
|
|
Only community members can read them.
|
|
<strong style="color:#e2e8f0;display:block;margin-top:0.5rem">True end-to-end encryption.</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Row 1 -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built on Self-Sovereign Identity</h2>
|
|
<p class="rl-subtext" style="text-align:center">Security without compromise, powered by EncryptID</p>
|
|
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#3b82f6,rgba(59,130,246,0.6))">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
|
|
</div>
|
|
<h3>End-to-End Encryption</h3>
|
|
<p>AES-256-GCM encryption with keys derived from your passkey. Messages are unreadable to the server.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10V4a2 2 0 00-4 0v6"/><path d="M18 11a6 6 0 00-12 0v3"/><rect x="3" y="14" width="18" height="8" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
|
|
</div>
|
|
<h3>Passkey Authentication</h3>
|
|
<p>WebAuthn passkeys backed by biometrics or hardware security keys. Phishing-resistant by design.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4-4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
|
|
</div>
|
|
<h3>Community Spaces</h3>
|
|
<p>Create isolated chat spaces with role-based access. Viewer, participant, moderator, and admin roles.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#f97316,#d97706)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
|
|
</div>
|
|
<h3>Cross-App SSO</h3>
|
|
<p>One identity across rSpace, rVote, rMaps, rWork, and the full r* ecosystem via EncryptID.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Row 2 -->
|
|
<div class="rl-grid-4" style="margin-top:1rem">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#a855f7,#7c3aed)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.42 4.58a5.4 5.4 0 00-7.65 0l-.77.78-.77-.78a5.4 5.4 0 00-7.65 7.65l.78.77L12 20.64l7.64-7.64.78-.77a5.4 5.4 0 000-7.65z"/><path d="M12 5.36V12"/><path d="M8.5 8.5L12 12l3.5-3.5"/></svg>
|
|
</div>
|
|
<h3>Social Recovery</h3>
|
|
<p>No seed phrases. Designate trusted guardians who can help you recover access to your account.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#3b82f6,#0891b2)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
|
|
</div>
|
|
<h3>No Passwords</h3>
|
|
<p>Passkeys replace passwords entirely. Nothing to leak, nothing to forget, nothing to phish.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#f43f5e,#ec4899)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3>Self-Sovereign</h3>
|
|
<p>You own your identity and encryption keys. No platform lock-in, no central authority.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,#0891b2)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><rect x="9" y="9" width="6" height="1" rx="0.5"/></svg>
|
|
</div>
|
|
<h3>rSpace Ecosystem</h3>
|
|
<p>Chat integrates with rSpace canvas, rVote governance, rFunds treasury, and more.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<div class="rl-card" style="border:2px solid rgba(59,130,246,0.3);background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(20,184,166,0.05),rgba(100,116,139,0.1));text-align:center;padding:3rem 1.5rem;position:relative;overflow:hidden">
|
|
<div style="position:absolute;top:0;right:0;width:16rem;height:16rem;background:rgba(59,130,246,0.1);border-radius:50%;filter:blur(48px)"></div>
|
|
<div style="position:absolute;bottom:0;left:0;width:16rem;height:16rem;background:rgba(20,184,166,0.1);border-radius:50%;filter:blur(48px)"></div>
|
|
<div style="position:relative">
|
|
<span class="rl-badge">Try EncryptID</span>
|
|
<h2 class="rl-heading" style="margin-top:1rem">See it in action</h2>
|
|
<p class="rl-subtext" style="max-width:36rem;margin:0.5rem auto 0">
|
|
Try the interactive EncryptID demo — register a passkey, derive encryption keys,
|
|
and test signing and encryption right in your browser. No account needed.
|
|
</p>
|
|
<div class="rl-cta-row" style="margin-top:1.5rem">
|
|
<a href="https://demo.rspace.online/rinbox" class="rl-cta-primary">
|
|
Launch Demo →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|