rspace-online/modules/rspace/landing.ts

414 lines
21 KiB
TypeScript

/**
* rSpace Canvas landing page — the infinite collaborative canvas.
*/
export function renderLanding(): string {
return `
<!-- Hero -->
<div class="rl-hero">
<span class="rl-tagline" style="color:#06b6d4;background:rgba(6,182,212,0.1);border-color:rgba(6,182,212,0.2)">
Infinite Collaborative Canvas
</span>
<h1 class="rl-heading" style="background:linear-gradient(135deg,#06b6d4,#8b5cf6);-webkit-background-clip:text;background-clip:text">(You)rSpace, your commons made visible.</h1>
<p class="rl-subtitle" style="background:linear-gradient(135deg,#06b6d4,#8b5cf6);-webkit-background-clip:text;background-clip:text">25+ Interoperable Tools on an Infinite Canvas &mdash; Real-Time, Local-First, AI-Native</p>
<p class="rl-subtext">
rSpace is a collaborative infinite canvas where notes, maps, calendars, AI prompts, votes,
budgets, and two dozen other tools live side by side &mdash; connected by arrows, synced in real time,
and owned by the people who use them. No cloud lock-in. No passwords. No middlemen.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rspace" class="rl-cta-primary" id="ml-primary">Open the Canvas</a>
<a href="#shapes" class="rl-cta-secondary">See All Shapes</a>
<a href="#ai" class="rl-cta-secondary">AI Features</a>
</div>
<p style="font-size:0.82rem;margin-top:0.5rem">
<a href="https://demo.rspace.online/rspace" style="color:var(--rs-primary,#06b6d4);text-decoration:none">
Try the demo &mdash; no account needed &rarr;
</a>
</p>
</div>
<!-- Principles -->
<section class="rl-section" style="border-top:none">
<div class="rl-container">
<div class="rl-grid-4">
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(6,182,212,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#9854;</span>
</div>
<h3>Local-First</h3>
<p>Your data lives on your device first. Automerge CRDTs sync when you&rsquo;re online and work when you&rsquo;re not. No server dependency.</p>
</div>
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#128279;</span>
</div>
<h3>Interoperable</h3>
<p>Shapes connect with arrows, share data through ports, and compose into workflows. Every tool talks to every other tool.</p>
</div>
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(34,211,238,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#129302;</span>
</div>
<h3>AI-Native</h3>
<p>AI prompts that create shapes on the canvas. Image generation, video generation, zine layout, and multi-model chat &mdash; built in.</p>
</div>
<div class="rl-card rl-card--center" style="padding:2rem">
<div class="rl-icon-box" style="background:rgba(52,211,153,0.12);font-size:1.5rem">
<span style="font-size:1.5rem">&#128101;</span>
</div>
<h3>Multiplayer</h3>
<p>Real-time cursors, live presence, and conflict-free collaboration. See who&rsquo;s on the canvas and what they&rsquo;re working on.</p>
</div>
</div>
</div>
</section>
<!-- What Makes rSpace Different -->
<section id="features" class="rl-section rl-section--alt">
<div class="rl-container">
<span class="rl-tagline" style="color:#06b6d4;background:rgba(6,182,212,0.1);border-color:rgba(6,182,212,0.2)">
Canvas Features
</span>
<h2 class="rl-heading" style="background:linear-gradient(135deg,#06b6d4,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Not a whiteboard. A living workspace.
</h2>
<p class="rl-subtext" style="margin-bottom:2.5rem">
Most canvas tools give you sticky notes and arrows. rSpace gives you a full operating environment
where 25+ specialized tools compose, connect, and collaborate in real time.
</p>
<div class="rl-grid-3">
<div class="rl-card">
<div style="font-size:1.75rem;margin-bottom:1rem">&#128268;</div>
<h3>Infinite Pan &amp; Zoom</h3>
<p>Scroll to zoom, drag to pan, pinch on mobile. The canvas is boundless &mdash; lay out as much as you need with snap guides for alignment.</p>
</div>
<div class="rl-card">
<div style="font-size:1.75rem;margin-bottom:1rem">&#128257;</div>
<h3>Feed Mode</h3>
<p>Toggle between freeform canvas and a curated scroll feed. Feed mode shows shapes as a timeline &mdash; sorted by recent, alphabetical, or type.</p>
</div>
<div class="rl-card">
<div style="font-size:1.75rem;margin-bottom:1rem">&#128204;</div>
<h3>Comment Pins</h3>
<p>Figma-style comment pins anywhere on the canvas. Click to drop a pin, type a note, and link it to a full rNotes card for threaded discussion.</p>
</div>
<div class="rl-card">
<div style="font-size:1.75rem;margin-bottom:1rem">&#128260;</div>
<h3>Arrow Connections</h3>
<p>Connect any two shapes with arrows. Add governance gates, data transforms, and labels to build visual workflows and dependency graphs.</p>
</div>
<div class="rl-card">
<div style="font-size:1.75rem;margin-bottom:1rem">&#128197;</div>
<h3>Shape Scheduling</h3>
<p>Tag any shape to a calendar date. Drag shapes onto the mini-calendar or click the schedule icon &mdash; reminders sync to rSchedule with email notifications.</p>
</div>
<div class="rl-card">
<div style="font-size:1.75rem;margin-bottom:1rem">&#128274;</div>
<h3>Lock &amp; Protect</h3>
<p>Lock shapes in place to prevent accidental moves. Locked shapes show a persistent badge and resist drag, resize, and deletion.</p>
</div>
</div>
</div>
</section>
<!-- Canvas Shapes -->
<section id="shapes" class="rl-section">
<div class="rl-container">
<span class="rl-tagline" style="color:#8b5cf6;background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.2)">
Shape Library
</span>
<h2 class="rl-heading" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
25+ shapes, one canvas
</h2>
<p class="rl-subtext">
Every shape is a full application. Drop it on the canvas, connect it to others, and watch your workspace come alive.
</p>
<div class="rl-grid-4" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:2rem">
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128221;</div>
<h3>Markdown</h3>
<p style="font-size:0.8rem">Rich text with TipTap &mdash; formatting, checklists, code blocks, and live collaboration.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#129302;</div>
<h3>AI Prompt</h3>
<p style="font-size:0.8rem">Chat with Gemini or Ollama models. Tool mode spawns maps, notes, and embeds on the canvas.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#127912;</div>
<h3>Image Gen</h3>
<p style="font-size:0.8rem">Generate images with Flux Pro via fal.ai or Gemini &mdash; drag results onto the canvas.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#127909;</div>
<h3>Video Gen</h3>
<p style="font-size:0.8rem">Text-to-video and image-to-video with Kling and WAN 2.1 via fal.ai.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128506;</div>
<h3>Map</h3>
<p style="font-size:0.8rem">Interactive OpenStreetMap with routing, privacy controls, meeting points, and GPS sharing.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128197;</div>
<h3>Calendar</h3>
<p style="font-size:0.8rem">Spatiotemporal calendar with lunar overlays, multi-source sync, and ten zoom levels.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128172;</div>
<h3>Chat</h3>
<p style="font-size:0.8rem">Real-time group chat with presence, typing indicators, and message history.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#127760;</div>
<h3>Embed</h3>
<p style="font-size:0.8rem">Embed any URL &mdash; videos, documents, dashboards, web apps &mdash; live inside the canvas.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128248;</div>
<h3>Image</h3>
<p style="font-size:0.8rem">Drag-and-drop images with zoom, caption, and full-size preview.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128278;</div>
<h3>Bookmark</h3>
<p style="font-size:0.8rem">Rich link previews with auto-fetched title, description, and favicon.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128499;</div>
<h3>Vote &amp; Rank</h3>
<p style="font-size:0.8rem">Polls, ranked choice, conviction voting, and spider diagrams for group decisions.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128218;</div>
<h3>Zine Gen</h3>
<p style="font-size:0.8rem">AI-generated 8-page zines with editable text, per-section regeneration, and PDF export.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#127916;</div>
<h3>Slides</h3>
<p style="font-size:0.8rem">Presentation slides with themes, transitions, and fullscreen mode.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#128176;</div>
<h3>Wallet</h3>
<p style="font-size:0.8rem">CRDT token ledger, Gnosis Safe integration, and cUSDC balance viewer.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#127908;</div>
<h3>Transcription</h3>
<p style="font-size:0.8rem">Live voice transcription and audio file processing &mdash; entirely in-browser.</p>
</div>
<div class="rl-card rl-card--center" style="padding:1.25rem">
<div style="font-size:1.5rem;margin-bottom:0.5rem">&#9997;</div>
<h3>Drawfast</h3>
<p style="font-size:0.8rem">Freehand drawing with AI sketch-to-image generation via tldraw.</p>
</div>
</div>
<p style="text-align:center;margin-top:1.25rem;font-size:0.85rem;color:#64748b">
Plus: Social Posts, 3D Splat Viewer, Blender Viewer, Video Chat, Obs Notes, Workflow Blocks, Wrappers, and more.
</p>
</div>
</section>
<!-- AI Capabilities -->
<section id="ai" class="rl-section rl-section--alt">
<div class="rl-container">
<span class="rl-tagline" style="color:#a855f7;background:rgba(168,85,247,0.1);border-color:rgba(168,85,247,0.2)">
AI-Native Canvas
</span>
<h2 class="rl-heading" style="background:linear-gradient(135deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
AI that creates, not just chats
</h2>
<p class="rl-subtext" style="margin-bottom:2.5rem">
AI in rSpace isn&rsquo;t a sidebar &mdash; it&rsquo;s a first-class canvas citizen. Prompts spawn shapes,
generate images and videos, and compose entire visual layouts.
</p>
<div class="rl-grid-2">
<div class="rl-card" style="border-color:rgba(168,85,247,0.15)">
<div style="font-size:1.75rem;margin-bottom:1rem">&#129513;</div>
<h3>Tool Use &mdash; Shapes from Chat</h3>
<p>Toggle Tools mode and ask the AI to &ldquo;show me Tokyo on a map and find flights.&rdquo; Gemini calls <code style="font-size:0.8rem;color:rgba(168,85,247,0.8)">create_map</code>, <code style="font-size:0.8rem;color:rgba(168,85,247,0.8)">create_embed</code>, and other tools to spawn shapes directly on the canvas.</p>
</div>
<div class="rl-card" style="border-color:rgba(168,85,247,0.15)">
<div style="font-size:1.75rem;margin-bottom:1rem">&#127912;</div>
<h3>Image &amp; Video Generation</h3>
<p>Flux Pro, Kling 2.1, and WAN 2.1 via fal.ai. Gemini Imagen for text-to-image. Generated media drops onto the canvas as draggable, connectable shapes.</p>
</div>
<div class="rl-card" style="border-color:rgba(168,85,247,0.15)">
<div style="font-size:1.75rem;margin-bottom:1rem">&#128218;</div>
<h3>MycroZine Generator</h3>
<p>Describe a topic and get an AI-generated 8-page zine with custom illustrations, editable text, per-section regeneration, and PDF/flipbook export.</p>
</div>
<div class="rl-card" style="border-color:rgba(168,85,247,0.15)">
<div style="font-size:1.75rem;margin-bottom:1rem">&#128187;</div>
<h3>Multi-Model Support</h3>
<p>Switch between Gemini Flash, Gemini Pro, and local Ollama models (Llama, Mistral, Qwen) per prompt. Run AI fully offline with self-hosted models.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
<div class="rl-grid-4" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem">
<div class="rl-step">
<div class="rl-step__num">1</div>
<h3>Create a Space</h3>
<p>Sign in with a passkey (no passwords) and create a space for your group, project, or community.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">2</div>
<h3>Drop Shapes</h3>
<p>Add notes, maps, calendars, AI prompts, embeds, and more from the toolbar. Drag to position, resize to fit.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">3</div>
<h3>Connect &amp; Compose</h3>
<p>Draw arrows between shapes to build flows. Add governance gates and data transforms. Everything is linked.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">4</div>
<h3>Collaborate Live</h3>
<p>Share the space URL. Collaborators see real-time cursors, live edits, and shape changes &mdash; no refresh needed.</p>
</div>
</div>
</div>
</section>
<!-- Ecosystem -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<span class="rl-tagline" style="color:#34d399;background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.2)">
Ecosystem
</span>
<h2 class="rl-heading" style="background:linear-gradient(135deg,#34d399,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Every rApp, one canvas
</h2>
<p class="rl-subtext">
The canvas is the hub. Each of 25+ rApps can be dropped as a shape, embedded, or connected through the shared context API.
</p>
<div class="rl-grid-3" style="margin-top:2rem">
<div class="rl-integration" style="border-color:rgba(52,211,153,0.15)">
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128221;</span></div>
<div>
<h3>rNotes</h3>
<p>Rich text notes with voice transcription, tagging, and Logseq-compatible memory cards.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(52,211,153,0.15)">
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128197;</span></div>
<div>
<h3>rCal</h3>
<p>Spatiotemporal calendar with lunar phases, multi-source sync, and canvas shape scheduling.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(52,211,153,0.15)">
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128506;</span></div>
<div>
<h3>rMaps</h3>
<p>Interactive maps with routing, privacy controls, meeting points, and real-time GPS sharing.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(52,211,153,0.15)">
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128499;</span></div>
<div>
<h3>rVote</h3>
<p>Polls, ranked choice, conviction voting, and multi-criteria spider diagrams.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(52,211,153,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>CRDT token ledger, Gnosis Safe smart wallets, and x402 micropayments.</p>
</div>
</div>
<div class="rl-integration" style="border-color:rgba(52,211,153,0.15)">
<div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#9992;</span></div>
<div>
<h3>rTrips</h3>
<p>Collaborative trip planning with itineraries, destinations, budgets, and packing lists.</p>
</div>
</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 protocols that power rSpace.</p>
<div class="rl-grid-4" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem">
<div class="rl-card rl-card--center">
<h3>Automerge</h3>
<p>Local-first CRDT for conflict-free real-time sync. Your canvas works offline and merges seamlessly when you reconnect.</p>
</div>
<div class="rl-card rl-card--center">
<h3>Hono</h3>
<p>Ultra-fast web framework on Bun runtime. API routes, SSR, and WebSocket sync in under 50ms.</p>
</div>
<div class="rl-card rl-card--center">
<h3>Web Components</h3>
<p>Every shape is a native custom element with shadow DOM. No framework lock-in &mdash; standard HTML all the way down.</p>
</div>
<div class="rl-card rl-card--center">
<h3>WebAuthn</h3>
<p>Passwordless authentication via passkeys and the FIDO2 standard. Your identity is a cryptographic key, not a password.</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 rSpace keeps your workspace safe.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128274;</div>
<h3>End-to-End Encryption</h3>
<span class="rl-badge">Coming Soon</span>
<p>Per-document encryption before data leaves your device. Not even the server can read your canvas.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128373;</div>
<h3>Zero-Knowledge Architecture</h3>
<span class="rl-badge">Coming Soon</span>
<p>The server syncs encrypted blobs without ever seeing your content in the clear.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127968;</div>
<h3>Self-Hosted</h3>
<p>Docker Compose, Traefik, and your own domain. 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" style="background:linear-gradient(135deg,#06b6d4,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Your commons, made visible.
</h2>
<p class="rl-subtext">
Try the collaborative canvas with 25+ tools, AI generation, real-time sync, and local-first architecture.
No account needed for the demo.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rspace" class="rl-cta-primary">Open the Canvas</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>`;
}