feat(rspace): add rich landing page for the canvas module
Replace the generic "🎨 rSpace — Real-time collaborative canvas" fallback
with a full landing page following the rl-* CSS system used by other rApps.
Sections: hero, principles (local-first/interoperable/AI-native/multiplayer),
canvas features, 16-shape library grid, AI capabilities, how it works steps,
ecosystem integrations, open source stack, data protection, and final CTA.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
34a7a4e37e
commit
7234a8db38
|
|
@ -0,0 +1,413 @@
|
||||||
|
/**
|
||||||
|
* 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 — 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 — 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 — no account needed →
|
||||||
|
</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">♾</span>
|
||||||
|
</div>
|
||||||
|
<h3>Local-First</h3>
|
||||||
|
<p>Your data lives on your device first. Automerge CRDTs sync when you’re online and work when you’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">🔗</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">🤖</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 — 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">👥</span>
|
||||||
|
</div>
|
||||||
|
<h3>Multiplayer</h3>
|
||||||
|
<p>Real-time cursors, live presence, and conflict-free collaboration. See who’s on the canvas and what they’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">🔌</div>
|
||||||
|
<h3>Infinite Pan & Zoom</h3>
|
||||||
|
<p>Scroll to zoom, drag to pan, pinch on mobile. The canvas is boundless — 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">🔁</div>
|
||||||
|
<h3>Feed Mode</h3>
|
||||||
|
<p>Toggle between freeform canvas and a curated scroll feed. Feed mode shows shapes as a timeline — sorted by recent, alphabetical, or type.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card">
|
||||||
|
<div style="font-size:1.75rem;margin-bottom:1rem">📌</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">🔄</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">📅</div>
|
||||||
|
<h3>Shape Scheduling</h3>
|
||||||
|
<p>Tag any shape to a calendar date. Drag shapes onto the mini-calendar or click the schedule icon — reminders sync to rSchedule with email notifications.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card">
|
||||||
|
<div style="font-size:1.75rem;margin-bottom:1rem">🔒</div>
|
||||||
|
<h3>Lock & 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">📝</div>
|
||||||
|
<h3>Markdown</h3>
|
||||||
|
<p style="font-size:0.8rem">Rich text with TipTap — 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">🤖</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">🎨</div>
|
||||||
|
<h3>Image Gen</h3>
|
||||||
|
<p style="font-size:0.8rem">Generate images with Flux Pro via fal.ai or Gemini — 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">🎥</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">🗺</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">📅</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">💬</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">🌐</div>
|
||||||
|
<h3>Embed</h3>
|
||||||
|
<p style="font-size:0.8rem">Embed any URL — videos, documents, dashboards, web apps — 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">📸</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">🔖</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">🗳</div>
|
||||||
|
<h3>Vote & 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">📚</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">🎬</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">💰</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">🎤</div>
|
||||||
|
<h3>Transcription</h3>
|
||||||
|
<p style="font-size:0.8rem">Live voice transcription and audio file processing — 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">✍</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’t a sidebar — it’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">🧩</div>
|
||||||
|
<h3>Tool Use — Shapes from Chat</h3>
|
||||||
|
<p>Toggle Tools mode and ask the AI to “show me Tokyo on a map and find flights.” 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">🎨</div>
|
||||||
|
<h3>Image & 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">📚</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">💻</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 & 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 — 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">📝</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">📅</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">🗺</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">🗳</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">💰</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">✈</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 — 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">🔒</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">🕵</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">🏠</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="/">← Back to rSpace</a>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
@ -12,6 +12,7 @@ import { renderShell } from "../../server/shell";
|
||||||
import { getModuleInfoList } from "../../shared/module";
|
import { getModuleInfoList } from "../../shared/module";
|
||||||
import type { RSpaceModule } from "../../shared/module";
|
import type { RSpaceModule } from "../../shared/module";
|
||||||
import { loadCommunity, getDocumentData } from "../../server/community-store";
|
import { loadCommunity, getDocumentData } from "../../server/community-store";
|
||||||
|
import { renderLanding } from "./landing";
|
||||||
|
|
||||||
const DIST_DIR = resolve(import.meta.dir, "../../dist");
|
const DIST_DIR = resolve(import.meta.dir, "../../dist");
|
||||||
|
|
||||||
|
|
@ -125,6 +126,7 @@ export const canvasModule: RSpaceModule = {
|
||||||
icon: "🎨",
|
icon: "🎨",
|
||||||
description: "Real-time collaborative canvas",
|
description: "Real-time collaborative canvas",
|
||||||
scoping: { defaultScope: 'space', userConfigurable: false },
|
scoping: { defaultScope: 'space', userConfigurable: false },
|
||||||
|
landingPage: renderLanding,
|
||||||
routes,
|
routes,
|
||||||
feeds: [
|
feeds: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue