feat: restructure all 22 landing pages with standardized template
- (You)r* becomes the h1 heading, old titles preserved as subtitles - Standardized section order: Features → How It Works → Built on Open Source → Your Data Protected → CTA - Each module lists its open source dependencies (Typst, Immich, MapLibre, Discourse, etc.) - New "Your Data, Protected" section with E2E encryption + zero-knowledge (coming soon) - Added .rl-subtitle CSS class for subtitle styling - Module-specific sections preserved between How It Works and Built on Open Source Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
bc5c9e608e
commit
32ee5a5ed0
|
|
@ -4,72 +4,70 @@
|
||||||
* the shell wraps it with header, CSS, and analytics.
|
* the shell wraps it with header, CSS, and analytics.
|
||||||
*/
|
*/
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
const demo = "https://demo.rspace.online/rbooks";
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<section class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rBooks</span>
|
<span class="rl-tagline">rBooks</span>
|
||||||
<h1 class="rl-heading">Your Community's Library</h1>
|
<h1 class="rl-heading">(You)rBooks, your library.</h1>
|
||||||
|
<p class="rl-subtitle">Your Community's Library</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Upload, share, and read PDFs together. A beautiful flipbook reader,
|
Upload, share, and read PDFs together. A beautiful flipbook reader,
|
||||||
searchable catalog, and community contributions — all self-hosted.
|
searchable catalog, and community contributions — all self-hosted.
|
||||||
(You)rBooks, your library.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary" id="ml-primary">Start Your Library</a>
|
<a href="https://demo.rspace.online/rbooks" class="rl-cta-primary" id="ml-primary">Browse Library</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<!-- 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-3">
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">1</div>
|
|
||||||
<h3>Upload PDFs</h3>
|
|
||||||
<p>Drag-and-drop any PDF. Add title, author, tags, and a license — it is processed instantly.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">2</div>
|
|
||||||
<h3>Browse the Library</h3>
|
|
||||||
<p>Search by title, author, or tag. Featured books rise to the top.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">3</div>
|
|
||||||
<h3>Read with Flipbook</h3>
|
|
||||||
<p>Open any book in the interactive flipbook reader. Turn pages, zoom in, and bookmark your place.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Features -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">What rBooks Handles</h2>
|
||||||
<div class="rl-grid-4">
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📚</div>
|
||||||
|
<h3>PDF Library Management</h3>
|
||||||
|
<p>Upload, catalog, and organize your community's PDF collection with rich metadata, tags, and search.</p>
|
||||||
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">📖</div>
|
<div class="rl-icon-box">📖</div>
|
||||||
<h3>Flipbook Reader</h3>
|
<h3>Flipbook Reader</h3>
|
||||||
<p>Realistic page-turn animations, zoom, and full-screen mode for a natural reading experience.</p>
|
<p>Realistic page-turn animations, zoom, and full-screen mode for a natural reading experience.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">⚙</div>
|
|
||||||
<h3>PDF Processing</h3>
|
|
||||||
<p>Automatic page counting, metadata extraction, and optimized delivery to the reader.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">📚</div>
|
|
||||||
<h3>Space Libraries</h3>
|
|
||||||
<p>Each community space gets its own curated collection with search and tagging.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">👥</div>
|
<div class="rl-icon-box">👥</div>
|
||||||
<h3>Community Contributions</h3>
|
<h3>Community Contributions</h3>
|
||||||
<p>Members upload and share. View counts and download stats track engagement.</p>
|
<p>Members upload and share books. View counts and download stats track engagement.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔍</div>
|
||||||
|
<h3>Book Catalog</h3>
|
||||||
|
<p>Search by title, author, or tag. Featured books rise to the top of each space's collection.</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>Upload a PDF</h3>
|
||||||
|
<p>Drag-and-drop any PDF. Add title, author, tags, and a license — it is processed instantly.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>Browse in the Flipbook Reader</h3>
|
||||||
|
<p>Open any book in the interactive flipbook reader. Turn pages, zoom in, and bookmark your place.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Share with Your Community</h3>
|
||||||
|
<p>Your library is available to all space members. Featured books and search make discovery easy.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -101,19 +99,71 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- 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 rBooks.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📄</div>
|
||||||
|
<h3>PDF.js</h3>
|
||||||
|
<p>Mozilla's open-source PDF rendering engine brings full-fidelity PDF viewing directly to the browser.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Rock-solid relational database powering the book catalog, metadata, and search indexes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">⚡</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer — lightweight, typed, and edge-ready.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Ready to Build Your Library?</h2>
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">How rBooks keeps your information safe.</p>
|
||||||
Upload your first PDF and let your community start reading.
|
<div class="rl-grid-3">
|
||||||
</p>
|
<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)rBooks, your library.</h2>
|
||||||
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary">Start Your Library</a>
|
<a href="https://demo.rspace.online/rbooks" class="rl-cta-primary">Browse Library</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>`;
|
<div class="rl-back">
|
||||||
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,75 +6,66 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rCal</span>
|
<span class="rl-tagline">rCal</span>
|
||||||
<h1 class="rl-heading">Time is shared.<br>Your calendar should be too.</h1>
|
<h1 class="rl-heading">(You)rCal, your rhythm.</h1>
|
||||||
|
<p class="rl-subtitle">Time is shared. Your calendar should be too.</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
A spatiotemporal calendar that couples where and when, supports natural cycles,
|
A spatiotemporal calendar that couples where and when, supports natural cycles,
|
||||||
and zooms from 30-second moments to geological epochs.
|
and zooms from 30-second moments to geological epochs.
|
||||||
(You)rCal, your rhythm.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rcal" class="rl-cta-primary" id="ml-primary">Try the Demo</a>
|
<a href="https://demo.rspace.online/rcal" class="rl-cta-primary" id="ml-primary">Open Calendar</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Principles -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Design principles</h2>
|
<h2 class="rl-heading" style="text-align:center">What rCal Handles</h2>
|
||||||
<div class="rl-grid-4" style="margin-top:2rem">
|
<div class="rl-grid-4">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box"><span style="font-size:1.25rem">🤝</span></div>
|
<div class="rl-icon-box">🔭</div>
|
||||||
<h3>Shared by Default</h3>
|
<h3>Temporal Zoom</h3>
|
||||||
<p>Calendars belong to spaces, not individuals. Everyone sees the same schedule.</p>
|
<p>Ten zoom levels from 30-second moments to cosmic time. Year, month, week, day — and beyond.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box"><span style="font-size:1.25rem">🗺</span></div>
|
<div class="rl-icon-box">📅</div>
|
||||||
<h3>Spatiotemporal</h3>
|
<h3>Shared Events</h3>
|
||||||
<p>Events have places, not just times. Where and when are coupled at every zoom level.</p>
|
<p>Calendars belong to spaces, not individuals. Everyone sees the same schedule by default.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box"><span style="font-size:1.25rem">🌙</span></div>
|
<div class="rl-icon-box">🌙</div>
|
||||||
<h3>Natural Cycles</h3>
|
<h3>Lunar Phases</h3>
|
||||||
<p>Lunar phases, solstices, and seasonal rhythms overlaid on the Gregorian grid.</p>
|
<p>Moon phases, solstices, and seasonal rhythms overlaid on the Gregorian grid. Plan with natural cycles.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box"><span style="font-size:1.25rem">🔭</span></div>
|
<div class="rl-icon-box">🗺</div>
|
||||||
<h3>Multi-Scale Zoom</h3>
|
<h3>Location-Aware</h3>
|
||||||
<p>Ten zoom levels from 30-second moments to cosmic time. One unified timeline.</p>
|
<p>Events have places, not just times. Spatial and temporal zoom are coupled at every level.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Why rCal -->
|
<!-- How It Works -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Why rCal</h2>
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-card">
|
<div class="rl-step">
|
||||||
<h3>Where + When</h3>
|
<span class="rl-step__num">1</span>
|
||||||
<p>Every event carries location context. Zoom into a city and see only what happens there.</p>
|
<h3>Create events</h3>
|
||||||
|
<p>Add events with time, location, and source context. Pull from ICS feeds, CalDAV, or other r* modules.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card">
|
<div class="rl-step">
|
||||||
<h3>Coupled Zoom</h3>
|
<span class="rl-step__num">2</span>
|
||||||
<p>Temporal and spatial zoom are linked. Zoom out in time and the map zooms out too.</p>
|
<h3>Zoom and explore</h3>
|
||||||
|
<p>Navigate across ten temporal zoom levels. Spatial and temporal zoom are coupled — zoom out in time and the map zooms out too.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card">
|
<div class="rl-step">
|
||||||
<h3>Multi-Source Sync</h3>
|
<span class="rl-step__num">3</span>
|
||||||
<p>Pull events from ICS feeds, CalDAV servers, and other r* modules into one view.</p>
|
<h3>Share with your space</h3>
|
||||||
</div>
|
<p>Space members see the same calendar. rWork sprints, rVote deadlines, rTrips itineraries — all in one view.</p>
|
||||||
<div class="rl-card">
|
|
||||||
<h3>Lunar Overlay</h3>
|
|
||||||
<p>Moon phases computed and displayed alongside events. Plan by natural cycles.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card">
|
|
||||||
<h3>r* Ecosystem Embeds</h3>
|
|
||||||
<p>rVote deadlines, rWork sprints, rFunds milestones — all surface as calendar events.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card">
|
|
||||||
<h3>Self-Hosted</h3>
|
|
||||||
<p>Your data lives on your infrastructure. No vendor lock-in, no surveillance calendars.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -247,15 +238,65 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Built on Open Source -->
|
||||||
|
<section class="rl-section rl-section--alt">
|
||||||
|
<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 rCal.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Rock-solid relational database for events, sources, locations, and calendar metadata.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🚗</div>
|
||||||
|
<h3>OSRM</h3>
|
||||||
|
<p>Open-source routing engine for location-based scheduling, travel times, and spatial queries.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔥</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
|
<p class="rl-subtext">How rCal 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 -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">See time differently</h2>
|
<h2 class="rl-heading">(You)rCal, your rhythm.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
A calendar that understands place, cycles, and community. Try the demo or create your own space.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rcal" class="rl-cta-primary" id="ml-primary">Open rCal</a>
|
<a href="https://demo.rspace.online/rcal" class="rl-cta-primary">Open Calendar</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,23 +6,52 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rCart</span>
|
<span class="rl-tagline">rCart</span>
|
||||||
<h1 class="rl-heading">Group Shopping, Together</h1>
|
<h1 class="rl-heading">(You)rCart, your market.</h1>
|
||||||
|
<p class="rl-subtitle">Group Shopping, Together</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
A shared shopping cart for communities. Pool orders, unlock bulk pricing,
|
A shared shopping cart for communities. Pool orders, unlock bulk pricing,
|
||||||
and fulfill locally through the cosmolocal provider network.
|
and fulfill locally through the cosmolocal provider network.
|
||||||
(You)rCart, your market.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rcart" class="rl-cta-primary" id="ml-primary">Browse the Shop</a>
|
<a href="https://demo.rspace.online/rcart" class="rl-cta-primary" id="ml-primary">Start Shopping</a>
|
||||||
<a href="/rpubs" class="rl-cta-secondary">Create with rPubs</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">How it works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rCart Handles</h2>
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🛒</div>
|
||||||
|
<h3>Group Purchasing</h3>
|
||||||
|
<p>One cart shared across your space. Members pool orders and hit bulk thresholds together.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🌐</div>
|
||||||
|
<h3>Cosmolocal Fulfillment</h3>
|
||||||
|
<p>Every order is matched to the nearest capable provider. Design global, manufacture local.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📋</div>
|
||||||
|
<h3>Provider Registry</h3>
|
||||||
|
<p>A network of local providers with capabilities, locations, and pricing. Automatic matching by proximity.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">💰</div>
|
||||||
|
<h3>Revenue Splits</h3>
|
||||||
|
<p>Creator, community, and provider shares calculated automatically via rFunds. Transparent by default.</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">
|
||||||
<span class="rl-step__num">1</span>
|
<span class="rl-step__num">1</span>
|
||||||
<h3>Create a Space</h3>
|
<h3>Create a Space</h3>
|
||||||
|
|
@ -42,44 +71,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Cosmolocal Fulfillment -->
|
||||||
<section class="rl-section rl-section--alt">
|
|
||||||
<div class="rl-container">
|
|
||||||
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
|
||||||
<div class="rl-grid-4" style="margin-top:2rem">
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3>Universal Cart</h3>
|
|
||||||
<p>One cart shared across your space. Members add items, pool orders, and hit bulk thresholds together.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3>Crypto + Card</h3>
|
|
||||||
<p>Pay with credit card or cryptocurrency. x402 protocol support for instant crypto payments.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3>Real-time Updates</h3>
|
|
||||||
<p>Order status updates in real time — from placement through production to delivery.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>Passkey Login</h3>
|
|
||||||
<p>Passwordless authentication with EncryptID passkeys. One tap to sign in across all r* apps.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Fulfillment -->
|
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<div class="rl-grid-2">
|
<div class="rl-grid-2">
|
||||||
|
|
@ -108,16 +100,71 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Built on Open Source -->
|
||||||
|
<section class="rl-section rl-section--alt">
|
||||||
|
<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 rCart.</p>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">💳</div>
|
||||||
|
<h3>x402 Protocol</h3>
|
||||||
|
<p>Open payment protocol for instant crypto payments. Card payments supported alongside.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">💰</div>
|
||||||
|
<h3>Flow Service</h3>
|
||||||
|
<p>Automated revenue splits between creator, community, and provider. Transparent by design.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Rock-solid relational database for catalog, orders, providers, and transaction history.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔥</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
|
<p class="rl-subtext">How rCart 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 -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Ready to shop together?</h2>
|
<h2 class="rl-heading">(You)rCart, your market.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Browse the catalog, pool orders with your community, and support local providers.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rcart" class="rl-cta-primary" id="ml-primary">Open rCart</a>
|
<a href="https://demo.rspace.online/rcart" class="rl-cta-primary">Start Shopping</a>
|
||||||
<a href="/rpubs" class="rl-cta-secondary">Create with rPubs</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -4,51 +4,78 @@
|
||||||
* the shell wraps it with header, CSS, and analytics.
|
* the shell wraps it with header, CSS, and analytics.
|
||||||
*/
|
*/
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
const demo = "https://demo.rspace.online/rchoices";
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<section class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rChoices</span>
|
<span class="rl-tagline">rChoices</span>
|
||||||
<h1 class="rl-heading">Decide Together, Fairly</h1>
|
<h1 class="rl-heading">(You)rChoices, your voice.</h1>
|
||||||
|
<p class="rl-subtitle">Decide Together, Fairly</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Quadratic voting, ranked choice, and multi-criteria scoring — all as
|
Quadratic voting, ranked choice, and multi-criteria scoring — all as
|
||||||
interactive shapes on your canvas. Drop a choice, let members vote,
|
interactive shapes on your canvas. Drop a choice, let members vote,
|
||||||
watch results emerge in real time.
|
watch results emerge in real time.
|
||||||
(You)rChoices, your voice.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary" id="ml-primary">Make Better Decisions</a>
|
<a href="https://demo.rspace.online/rchoices" class="rl-cta-primary" id="ml-primary">Start Deciding</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container">
|
||||||
|
<h2 class="rl-heading" style="text-align:center">What rChoices Handles</h2>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">⚖</div>
|
||||||
|
<h3>Quadratic Voting</h3>
|
||||||
|
<p>Express intensity of preference. The cost of additional votes grows exponentially, balancing passion with fairness.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📋</div>
|
||||||
|
<h3>Ranked Choice Voting</h3>
|
||||||
|
<p>Order preferences from first to last. Instant-runoff tabulation finds the option with the broadest support.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔄</div>
|
||||||
|
<h3>CRDT-Based Shared State</h3>
|
||||||
|
<p>Automerge CRDTs keep all participants in sync — no conflicts, no lost votes, even offline.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">⚡</div>
|
||||||
|
<h3>Real-Time Collaboration</h3>
|
||||||
|
<p>Tallies, rankings, and spider charts update live as members vote. Results emerge instantly.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- How It Works -->
|
<!-- How It Works -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
||||||
<div class="rl-grid-3">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">1</div>
|
<div class="rl-step__num">1</div>
|
||||||
<h3>Create a Choice Shape</h3>
|
<h3>Create a Decision</h3>
|
||||||
<p>Pick a voting method, name it, and add options. The shape appears on the canvas.</p>
|
<p>Pick a voting method, name it, and add options. The choice shape appears on the canvas.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">2</div>
|
<div class="rl-step__num">2</div>
|
||||||
<h3>Members Vote</h3>
|
<h3>Add Options & Invite Voters</h3>
|
||||||
<p>Space members interact with the shape to cast votes, rank preferences, or score criteria.</p>
|
<p>Space members interact with the shape to cast votes, rank preferences, or score criteria.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">3</div>
|
<div class="rl-step__num">3</div>
|
||||||
<h3>Results Emerge</h3>
|
<h3>Results Calculated Fairly in Real Time</h3>
|
||||||
<p>Live tallies update as votes arrive. View charts, rankings, and spider diagrams in real time.</p>
|
<p>Live tallies update as votes arrive. View charts, rankings, and spider diagrams instantly.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Voting Methods -->
|
<!-- Voting Methods -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Voting Methods</h2>
|
<h2 class="rl-heading" style="text-align:center">Voting Methods</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">
|
<p class="rl-subtext" style="text-align:center">
|
||||||
|
|
@ -74,48 +101,71 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Built on Open Source -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
||||||
<div class="rl-grid-4">
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rChoices.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🎨</div>
|
<div class="rl-icon-box">🔄</div>
|
||||||
<h3>Canvas Integration</h3>
|
<h3>Automerge</h3>
|
||||||
<p>Choice shapes live on the canvas alongside notes, images, and other shapes — full spatial context.</p>
|
<p>Conflict-free replicated data types for shared state — real-time sync without merge conflicts.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Reliable relational storage for decisions, vote records, and result history.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">⚡</div>
|
<div class="rl-icon-box">⚡</div>
|
||||||
<h3>Real-time Results</h3>
|
<h3>Hono</h3>
|
||||||
<p>Tallies, rankings, and spider charts update live as members vote via Automerge CRDT sync.</p>
|
<p>Ultrafast web framework for the API layer — lightweight, typed, and edge-ready.</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 rChoices 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>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🔧</div>
|
<div class="rl-icon-box">🕵</div>
|
||||||
<h3>Configurable Parameters</h3>
|
<h3>Zero-Knowledge Architecture</h3>
|
||||||
<p>Set vote budgets, deadlines, anonymity, and quorum thresholds per choice shape.</p>
|
<span class="rl-badge">Coming Soon</span>
|
||||||
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">☑</div>
|
<div class="rl-icon-box">🏠</div>
|
||||||
<h3>rVote Integration</h3>
|
<h3>Self-Hosted</h3>
|
||||||
<p>Connect to <a href="/rvote" style="color:#14b8a6">rVote</a> for formal governance proposals backed by on-canvas choices.</p>
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Better Decisions Start Here</h2>
|
<h2 class="rl-heading">(You)rChoices, your voice.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Drop a choice shape on your canvas and let your community weigh in.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary">Make Better Decisions</a>
|
<a href="https://demo.rspace.online/rchoices" class="rl-cta-primary">Start Deciding</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>`;
|
<div class="rl-back">
|
||||||
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,58 +4,37 @@
|
||||||
* the shell wraps it with header, CSS, and analytics.
|
* the shell wraps it with header, CSS, and analytics.
|
||||||
*/
|
*/
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
const demo = "https://demo.rspace.online/rdata";
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<section class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rData</span>
|
<span class="rl-tagline">rData</span>
|
||||||
<h1 class="rl-heading">Privacy-First Analytics</h1>
|
<h1 class="rl-heading">(You)rData, your signal.</h1>
|
||||||
|
<p class="rl-subtitle">Privacy-First Analytics</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
See how your community engages without tracking individuals.
|
See how your community engages without tracking individuals.
|
||||||
No cookies, no consent banners, no third-party data — just
|
No cookies, no consent banners, no third-party data — just
|
||||||
clean, real-time metrics from your own server.
|
clean, real-time metrics from your own server.
|
||||||
(You)rData, your signal.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary" id="ml-primary">View Analytics</a>
|
<a href="https://demo.rspace.online/rdata" class="rl-cta-primary" id="ml-primary">View Dashboard</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<!-- 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-3">
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">1</div>
|
|
||||||
<h3>Auto-Instrumented</h3>
|
|
||||||
<p>Every rSpace module is automatically tracked — no code changes, no tag managers.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">2</div>
|
|
||||||
<h3>View Dashboard</h3>
|
|
||||||
<p>Open rData to see page views, active visitors, referrers, and top content in real time.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">3</div>
|
|
||||||
<h3>Share Insights</h3>
|
|
||||||
<p>Export stats or embed dashboard widgets in your canvas to keep the community informed.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Features -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">What rData Handles</h2>
|
||||||
<div class="rl-grid-4">
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📊</div>
|
||||||
|
<h3>Privacy-First Dashboard</h3>
|
||||||
|
<p>Active visitors, page views, bounce rate, and session duration — all without tracking individuals.</p>
|
||||||
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🔒</div>
|
<div class="rl-icon-box">🔒</div>
|
||||||
<h3>No Cookies Required</h3>
|
<h3>No Cookies</h3>
|
||||||
<p>Umami uses a privacy-friendly fingerprinting method. Zero cookies, zero local storage.</p>
|
<p>Umami uses a privacy-friendly fingerprinting method. Zero cookies, zero local storage, zero consent banners.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">✅</div>
|
<div class="rl-icon-box">✅</div>
|
||||||
|
|
@ -63,14 +42,33 @@ export function renderLanding(): string {
|
||||||
<p>No personal data collected. No consent banner needed. Compliant out of the box.</p>
|
<p>No personal data collected. No consent banner needed. Compliant out of the box.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">⚡</div>
|
<div class="rl-icon-box">🏠</div>
|
||||||
<h3>Real-Time Dashboard</h3>
|
<h3>Self-Hosted Metrics</h3>
|
||||||
<p>Active visitors, page views, bounce rate, and session duration update live.</p>
|
<p>Your visitor metrics never leave your server. No ad networks, no data brokers, no surprises.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
</div>
|
||||||
<div class="rl-icon-box">🦾</div>
|
</div>
|
||||||
<h3>Lightweight Script</h3>
|
</section>
|
||||||
<p>Under 2 KB tracker script. No impact on page load performance.</p>
|
|
||||||
|
<!-- 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>Add a Tracking Snippet</h3>
|
||||||
|
<p>Every rSpace module is automatically tracked — no code changes, no tag managers required.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>Collect Anonymized Pageviews</h3>
|
||||||
|
<p>A sub-2 KB script collects anonymized pageviews with no impact on page load performance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Analyze in a Clean Dashboard</h3>
|
||||||
|
<p>Open rData to see page views, active visitors, referrers, and top content in real time.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,19 +101,71 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- 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 rData.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📈</div>
|
||||||
|
<h3>Umami</h3>
|
||||||
|
<p>Open-source, privacy-first analytics platform — the ethical alternative to Google Analytics.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Reliable relational storage for all analytics data, event logs, and aggregation queries.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">⚡</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework powering the API proxy layer between your modules and the analytics backend.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Analytics Without the Guilt</h2>
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">How rData keeps your information safe.</p>
|
||||||
Respect your visitors. Understand your community. Keep your data.
|
<div class="rl-grid-3">
|
||||||
</p>
|
<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)rData, your signal.</h2>
|
||||||
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary">View Analytics</a>
|
<a href="https://demo.rspace.online/rdata" class="rl-cta-primary">View Dashboard</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>`;
|
<div class="rl-back">
|
||||||
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,148 @@
|
||||||
/**
|
/**
|
||||||
* Files module landing page — rich content for rspace.online/rfiles
|
* rFiles — rich landing page body.
|
||||||
|
* Returned by landingPage() in the module export;
|
||||||
|
* the shell wraps it with header, CSS, and analytics.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rFiles</span>
|
<span class="rl-tagline">rFiles</span>
|
||||||
<h1 class="rl-heading">Share Files, Your Way</h1>
|
<h1 class="rl-heading">(You)rFiles, your way.</h1>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtitle">Share Files, Your Way</p>
|
||||||
Upload, organize, and share with public links and memory cards.
|
<p class="rl-subtext">
|
||||||
Built for communities who want control over their shared files.
|
Upload, organize, and share with public links and memory cards.
|
||||||
(You)rFiles, your way.
|
Built for communities who want control over their shared files.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="rl-cta-row">
|
||||||
|
<a href="https://demo.rspace.online/rfiles" class="rl-cta-primary" id="ml-primary">Start Sharing</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 rFiles Handles</h2>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📤</div>
|
||||||
|
<h3>File Upload & Sharing</h3>
|
||||||
|
<p>Drag and drop any file type. Images, documents, archives — everything is welcome.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔗</div>
|
||||||
|
<h3>Public Share Links</h3>
|
||||||
|
<p>Create expiring, password-protected, download-limited share links for any file.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📄</div>
|
||||||
|
<h3>Memory Cards</h3>
|
||||||
|
<p>Attach structured metadata cards to files — notes, context, and tags that travel with the content.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📁</div>
|
||||||
|
<h3>Folder Organization</h3>
|
||||||
|
<p>Nest files in folders, tag freely, and search by name, type, or metadata across your library.</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>Upload Files</h3>
|
||||||
|
<p>Drag and drop any file type. Images, documents, archives — everything is welcome.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>Organize in Folders</h3>
|
||||||
|
<p>Group files by project, topic, or team. Tag and search across your whole library.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Share with Links</h3>
|
||||||
|
<p>Generate public share links with optional expiration, download limits, and password protection.</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 rFiles.</p>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📷</div>
|
||||||
|
<h3>Sharp</h3>
|
||||||
|
<p>High-performance server-side image processing for thumbnails, resizing, and format conversion.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Reliable relational storage for file metadata, sharing records, and folder structure.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">⚡</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer — lightweight, typed, and edge-ready.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">✉</div>
|
||||||
|
<h3>Nodemailer</h3>
|
||||||
|
<p>Battle-tested email delivery for share notifications and file access alerts.</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 rFiles 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)rFiles, your way.</h2>
|
||||||
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rfiles" class="rl-cta-primary" id="ml-primary">Start Sharing</a>
|
<a href="https://demo.rspace.online/rfiles" class="rl-cta-primary">Start Sharing</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- How it works -->
|
<div class="rl-back">
|
||||||
<section class="rl-section">
|
<a href="/">← Back to rSpace</a>
|
||||||
<div class="rl-container">
|
</div>`;
|
||||||
<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>Upload Files</h3>
|
|
||||||
<p>Drag and drop any file type. Images, documents, archives -- everything is welcome.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">2</div>
|
|
||||||
<h3>Organize in Folders</h3>
|
|
||||||
<p>Group files by project, topic, or team. Tag and search across your whole library.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">3</div>
|
|
||||||
<h3>Share with Links</h3>
|
|
||||||
<p>Generate public share links with optional expiration, download limits, and password protection.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section class="rl-section rl-section--alt">
|
|
||||||
<div class="rl-container">
|
|
||||||
<h2 class="rl-heading" style="text-align:center;">Features</h2>
|
|
||||||
<p class="rl-subtext" style="text-align:center;">
|
|
||||||
Everything you need for community file management, without the surveillance.
|
|
||||||
</p>
|
|
||||||
<div class="rl-grid-4">
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🔗</div>
|
|
||||||
<h3>Public Share Links</h3>
|
|
||||||
<p>Create expiring, password-protected, download-limited share links for any file.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">📄</div>
|
|
||||||
<h3>Memory Cards</h3>
|
|
||||||
<p>Attach structured metadata cards to files -- notes, context, and tags that travel with the content.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">📁</div>
|
|
||||||
<h3>Folder Organization</h3>
|
|
||||||
<p>Nest files in folders, tag freely, and search by name, type, or metadata across your library.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🌐</div>
|
|
||||||
<h3>Multi-Space Storage</h3>
|
|
||||||
<p>Each community space gets its own file library. Share across spaces or keep things private.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="rl-section">
|
|
||||||
<div class="rl-container" style="text-align:center;">
|
|
||||||
<h2 class="rl-heading">Ready to share?</h2>
|
|
||||||
<p class="rl-subtext">
|
|
||||||
Try the demo or create your own space to start uploading.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
|
||||||
<a href="https://demo.rspace.online/rfiles" class="rl-cta-primary">Start Sharing</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>`;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,76 +5,76 @@ export function renderLanding(): string {
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline" style="color:#818cf8;background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.2)">rForum</span>
|
<span class="rl-tagline">rForum</span>
|
||||||
<h1 class="rl-heading" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#d8b4fe);-webkit-background-clip:text;background-clip:text">
|
<h1 class="rl-heading" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#d8b4fe);-webkit-background-clip:text;background-clip:text">(You)rForum, your community.</h1>
|
||||||
Deploy Your Own Discourse Forum in Minutes
|
<p class="rl-subtitle" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#d8b4fe);-webkit-background-clip:text;background-clip:text">Deploy Your Own Discourse Forum in Minutes</p>
|
||||||
</h1>
|
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Automated cloud provisioning for self-hosted Discourse.
|
Automated cloud provisioning for self-hosted Discourse.
|
||||||
No DevOps required. Choose your region, configure your settings, and go live.
|
No DevOps required. Choose your region, configure your settings, and go live.
|
||||||
(You)rForum, your community.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rforum" class="rl-cta-primary" id="ml-primary"
|
<a href="https://demo.rspace.online/rforum" class="rl-cta-primary" id="ml-primary">Get Started</a>
|
||||||
style="background:linear-gradient(135deg,#4f46e5,#6d28d9)">Get Started</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
<a href="#pricing" class="rl-cta-secondary">View Pricing</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it Works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rForum Handles</h2>
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-4">
|
||||||
<div class="rl-card">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12);color:#818cf8">
|
<div class="rl-icon-box">⚙</div>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<h3>Automated Provisioning</h3>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
<p>One-click Discourse deployment. Server creation, installation, and configuration handled automatically.</p>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>1. Configure</h3>
|
|
||||||
<p>
|
|
||||||
Choose your subdomain, server region, and instance size.
|
|
||||||
Add SMTP credentials for email delivery. Set your admin email.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-card">
|
<div class="rl-icon-box">☁</div>
|
||||||
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12);color:#a78bfa">
|
<h3>Cloud VPS Deployment</h3>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<p>Deploy on Hetzner Cloud in Germany, Finland, or the US. Transparent pricing with no markup.</p>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>2. Provision</h3>
|
|
||||||
<p>
|
|
||||||
We create a cloud server on Hetzner, install Discourse,
|
|
||||||
configure SSL via Let's Encrypt, and set up DNS. Takes about 10-15 minutes.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🌐</div>
|
||||||
|
<h3>DNS Integration</h3>
|
||||||
|
<p>Automatic DNS setup for your subdomain via Cloudflare. SSL certificates provisioned with Let's Encrypt.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🛠</div>
|
||||||
|
<h3>No DevOps Required</h3>
|
||||||
|
<p>No command line, no SSH — just fill in your settings and watch your forum come online.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="rl-card">
|
<!-- How It Works -->
|
||||||
<div class="rl-icon-box" style="background:rgba(168,85,247,0.12);color:#c084fc">
|
<section class="rl-section rl-section--alt">
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<div class="rl-container">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
||||||
</svg>
|
<div class="rl-grid-3">
|
||||||
</div>
|
<div class="rl-step">
|
||||||
<h3>3. Go Live</h3>
|
<div class="rl-step__num">1</div>
|
||||||
<p>
|
<h3>Configure</h3>
|
||||||
Your forum is ready. Log in as admin, customize your community,
|
<p>Choose your subdomain, server region, and instance size. Add SMTP credentials for email delivery. Set your admin email.</p>
|
||||||
invite members, and start conversations. Full SSH access included.
|
</div>
|
||||||
</p>
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>Provision</h3>
|
||||||
|
<p>We create a cloud server on Hetzner, install Discourse, configure SSL via Let's Encrypt, and set up DNS. Takes about 10-15 minutes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Go Live</h3>
|
||||||
|
<p>Your forum is ready. Log in as admin, customize your community, invite members, and start conversations. Full SSH access included.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Pricing -->
|
<!-- Pricing -->
|
||||||
<section class="rl-section rl-section--alt" id="pricing">
|
<section class="rl-section" id="pricing">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text">
|
<h2 class="rl-heading" style="text-align:center">Transparent Pricing</h2>
|
||||||
Transparent Pricing
|
|
||||||
</h2>
|
|
||||||
<p class="rl-subtext" style="text-align:center">
|
<p class="rl-subtext" style="text-align:center">
|
||||||
Pay only for the cloud server. Hetzner pricing passed through directly — no markup.
|
Pay only for the cloud server. Hetzner pricing passed through directly — no markup.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -131,34 +131,32 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- What You Get -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text">
|
<h2 class="rl-heading" style="text-align:center">What You Get</h2>
|
||||||
What You Get
|
|
||||||
</h2>
|
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-3" style="margin-top:2rem">
|
||||||
<div class="rl-card">
|
<div class="rl-card rl-card--center">
|
||||||
<h3>Automated SSL</h3>
|
<h3>Automated SSL</h3>
|
||||||
<p>Let's Encrypt certificates provisioned automatically during setup.</p>
|
<p>Let's Encrypt certificates provisioned automatically during setup.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card">
|
<div class="rl-card rl-card--center">
|
||||||
<h3>Multiple Regions</h3>
|
<h3>Multiple Regions</h3>
|
||||||
<p>Deploy in Germany, Finland, or the US East/West Coast.</p>
|
<p>Deploy in Germany, Finland, or the US East/West Coast.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card">
|
<div class="rl-card rl-card--center">
|
||||||
<h3>Full SSH Access</h3>
|
<h3>Full SSH Access</h3>
|
||||||
<p>Your server, your rules. SSH in anytime for custom configuration.</p>
|
<p>Your server, your rules. SSH in anytime for custom configuration.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card">
|
<div class="rl-card rl-card--center">
|
||||||
<h3>One-Click Updates</h3>
|
<h3>One-Click Updates</h3>
|
||||||
<p>Discourse's built-in admin panel handles version upgrades.</p>
|
<p>Discourse's built-in admin panel handles version upgrades.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card">
|
<div class="rl-card rl-card--center">
|
||||||
<h3>DNS Management</h3>
|
<h3>DNS Management</h3>
|
||||||
<p>Automatic DNS setup for *.rforum.online subdomains.</p>
|
<p>Automatic DNS setup for *.rforum.online subdomains.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card">
|
<div class="rl-card rl-card--center">
|
||||||
<h3>Real-Time Logs</h3>
|
<h3>Real-Time Logs</h3>
|
||||||
<p>Watch your forum provision step-by-step in the dashboard.</p>
|
<p>Watch your forum provision step-by-step in the dashboard.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -166,22 +164,73 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- Built on Open Source -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text">
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
||||||
Ready to launch your community?
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rForum.</p>
|
||||||
</h2>
|
<div class="rl-grid-4">
|
||||||
<p class="rl-subtext">
|
<div class="rl-card rl-card--center">
|
||||||
Deploy a production Discourse forum in under 15 minutes. No DevOps experience needed.
|
<h3>Discourse</h3>
|
||||||
</p>
|
<p>The world's most popular open-source forum platform.</p>
|
||||||
<div class="rl-cta-row">
|
</div>
|
||||||
<a href="https://demo.rspace.online/rforum" class="rl-cta-primary"
|
<div class="rl-card rl-card--center">
|
||||||
style="background:linear-gradient(135deg,#4f46e5,#6d28d9)">Launch Your Forum</a>
|
<h3>Hetzner Cloud API</h3>
|
||||||
|
<p>Automated VPS provisioning in multiple regions.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>Cloudflare API</h3>
|
||||||
|
<p>DNS management and SSL termination.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultra-fast, lightweight API framework powering the backend.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>
|
<!-- 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 rForum 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)rForum, your community.</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/rforum" class="rl-cta-primary">Get Started</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>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,118 +1,169 @@
|
||||||
/**
|
/**
|
||||||
* Funds module landing page — rich content for rspace.online/rfunds
|
* rFunds — rich landing page body.
|
||||||
|
* Returned by landingPage() in the module export;
|
||||||
|
* the shell wraps it with header, CSS, and analytics.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rFunds</span>
|
<span class="rl-tagline">rFunds</span>
|
||||||
<h1 class="rl-heading">Visualize Your Community's Money</h1>
|
<h1 class="rl-heading">(You)rFunds, your flow.</h1>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtitle">Visualize Your Community's Money</p>
|
||||||
Budget flows, river visualization, and conviction funding.
|
<p class="rl-subtext">
|
||||||
Watch resources move through your community in real time.
|
Budget flows, river visualization, and conviction funding.
|
||||||
(You)rFunds, your flow.
|
Watch resources move through your community in real time.
|
||||||
|
</p>
|
||||||
|
<div class="rl-cta-row">
|
||||||
|
<a href="https://demo.rspace.online/rfunds" class="rl-cta-primary" id="ml-primary">View Flows</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 rFunds Handles</h2>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🌊</div>
|
||||||
|
<h3>Budget Flow Visualization</h3>
|
||||||
|
<p>Animated flow diagram showing how funds move between pools, funnels, and outcomes in real time.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📊</div>
|
||||||
|
<h3>Treasury Dashboards</h3>
|
||||||
|
<p>Full overview of balances, inflows, outflows, and historical transaction data for your community.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">💡</div>
|
||||||
|
<h3>Conviction-Based Funding</h3>
|
||||||
|
<p>Continuous signaling lets community members express preferences that compound over time.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">💨</div>
|
||||||
|
<h3>River Metaphor</h3>
|
||||||
|
<p>Named budget streams between funding pools with configurable rates, thresholds, and activation rules.</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 Your Treasury</h3>
|
||||||
|
<p>Link funding pools and define budget streams with rates, thresholds, and allocation rules.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>Map Budget Flows Visually</h3>
|
||||||
|
<p>The river visualization animates budget movement in real time — deposits, withdrawals, and funnels.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Decide Funding with Conviction</h3>
|
||||||
|
<p>Community members signal preferences through conviction funding. Resources flow where attention goes.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Ecosystem Integration -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container">
|
||||||
|
<h2 class="rl-heading" style="text-align:center">Ecosystem Integration</h2>
|
||||||
|
<p class="rl-subtext" style="text-align:center">
|
||||||
|
rFunds connects to other rSpace modules for end-to-end treasury governance.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="rl-grid-2" style="max-width:700px;margin:0 auto">
|
||||||
|
<div class="rl-integration">
|
||||||
|
<div class="rl-icon-box">💰</div>
|
||||||
|
<div>
|
||||||
|
<h3><a href="/rwallet" style="color:#14b8a6;text-decoration:none">rWallet</a></h3>
|
||||||
|
<p>On-chain balances and wallet-based treasury tracking for decentralized communities.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rl-integration">
|
||||||
|
<div class="rl-icon-box">🗳</div>
|
||||||
|
<div>
|
||||||
|
<h3><a href="/rvote" style="color:#14b8a6;text-decoration:none">rVote</a></h3>
|
||||||
|
<p>Governance decisions that direct fund allocation through formal proposal workflows.</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 tools that power rFunds.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🌊</div>
|
||||||
|
<h3>Flow Service</h3>
|
||||||
|
<p>Custom budget flow engine powering the river visualization and conviction-based allocation logic.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Reliable relational storage for space-flow associations, transaction history, and pool balances.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">⚡</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer — lightweight, typed, and edge-ready.</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 rFunds 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)rFunds, your flow.</h2>
|
||||||
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rfunds" class="rl-cta-primary" id="ml-primary">See Your Funds Flow</a>
|
<a href="https://demo.rspace.online/rfunds" class="rl-cta-primary">View Flows</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- How it works -->
|
<div class="rl-back">
|
||||||
<section class="rl-section">
|
<a href="/">← Back to rSpace</a>
|
||||||
<div class="rl-container">
|
</div>`;
|
||||||
<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>Define Budget Streams</h3>
|
|
||||||
<p>Create named flows between funding pools. Set rates, thresholds, and allocation rules.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">2</div>
|
|
||||||
<h3>Watch Money Flow</h3>
|
|
||||||
<p>The river visualization animates budget movement in real time -- deposits, withdrawals, and funnels.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">3</div>
|
|
||||||
<h3>Govern Allocation</h3>
|
|
||||||
<p>Community members signal preferences through conviction funding. Resources flow where attention goes.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section class="rl-section rl-section--alt">
|
|
||||||
<div class="rl-container">
|
|
||||||
<h2 class="rl-heading" style="text-align:center;">Features</h2>
|
|
||||||
<p class="rl-subtext" style="text-align:center;">
|
|
||||||
Transparent treasury management for communities of any size.
|
|
||||||
</p>
|
|
||||||
<div class="rl-grid-4">
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🌊</div>
|
|
||||||
<h3>River Visualization</h3>
|
|
||||||
<p>Animated flow diagram showing how funds move between pools, funnels, and outcomes in real time.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">💡</div>
|
|
||||||
<h3>Conviction Funding</h3>
|
|
||||||
<p>Continuous signaling lets community members express preferences that compound over time.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">💨</div>
|
|
||||||
<h3>Budget Streams</h3>
|
|
||||||
<p>Named flows between funding pools with configurable rates, thresholds, and activation rules.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">📊</div>
|
|
||||||
<h3>Treasury Dashboard</h3>
|
|
||||||
<p>Full overview of balances, inflows, outflows, and historical transaction data for your community.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Integration -->
|
|
||||||
<section class="rl-section">
|
|
||||||
<div class="rl-container">
|
|
||||||
<h2 class="rl-heading" style="text-align:center;">Ecosystem Integration</h2>
|
|
||||||
<div class="rl-grid-2" style="max-width:700px;margin:0 auto;">
|
|
||||||
<div class="rl-integration">
|
|
||||||
<div class="rl-icon-box">💰</div>
|
|
||||||
<div>
|
|
||||||
<h3>rWallet</h3>
|
|
||||||
<p>Connects to <a href="/rwallet" style="color:#14b8a6;">rWallet</a> for on-chain balances and wallet-based treasury tracking.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rl-integration">
|
|
||||||
<div class="rl-icon-box">🗳</div>
|
|
||||||
<div>
|
|
||||||
<h3>rVote</h3>
|
|
||||||
<p>Pairs with <a href="/rvote" style="color:#14b8a6;">rVote</a> for governance decisions that direct fund allocation.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="rl-section rl-section--alt">
|
|
||||||
<div class="rl-container" style="text-align:center;">
|
|
||||||
<h2 class="rl-heading">See your community's funds in motion</h2>
|
|
||||||
<p class="rl-subtext">
|
|
||||||
Try the demo or create a space to set up your own budget flows.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
|
||||||
<a href="https://demo.rspace.online/rfunds" class="rl-cta-primary">See Your Funds Flow</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>`;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,75 +5,76 @@ export function renderLanding(): string {
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-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)">rInbox</span>
|
<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">
|
<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>
|
||||||
Collaborative Multi-Sig Inbox
|
<p class="rl-subtitle" style="background:linear-gradient(135deg,#67e8f9,#93c5fd,#c4b5fd);-webkit-background-clip:text;background-clip:text">Collaborative Multi-Sig Inbox</p>
|
||||||
</h1>
|
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
A shared email client where teams read, discuss, and approve messages
|
A shared email client where teams read, discuss, and approve messages
|
||||||
together — with cryptographic multi-signature workflows before anything gets sent.
|
together — with cryptographic multi-signature workflows before anything gets sent.
|
||||||
(You)rInbox, your team's voice.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rinbox" class="rl-cta-primary" id="ml-primary"
|
<a href="https://demo.rspace.online/rinbox" class="rl-cta-primary" id="ml-primary">Open Inbox</a>
|
||||||
style="background:linear-gradient(135deg,#0891b2,#0e7490)">Open Inbox</a>
|
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it Works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rInbox Handles</h2>
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-4">
|
||||||
<div class="rl-card">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box" style="background:rgba(6,182,212,0.12);color:#06b6d4">
|
<div class="rl-icon-box">📧</div>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<h3>Shared Team Email</h3>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
<p>Your team shares one real email address. Every member sees every thread in real time — no forwarding, no BCC chains.</p>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>1. Connect Mailbox</h3>
|
|
||||||
<p>
|
|
||||||
Your team shares one real email address. Every member sees every thread
|
|
||||||
in real-time — no forwarding, no BCC chains, no lost context.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-card">
|
<div class="rl-icon-box">✅</div>
|
||||||
<div class="rl-icon-box" style="background:rgba(59,130,246,0.12);color:#3b82f6">
|
<h3>Multi-Signature Approval</h3>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<p>Outbound emails require M-of-N cryptographic signatures before sending. Every approval is auditable — no rogue replies.</p>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>2. Triage Together</h3>
|
|
||||||
<p>
|
|
||||||
Comment on any thread privately before replying. Tag members,
|
|
||||||
discuss strategy, and reach consensus — all alongside the original message.
|
|
||||||
</p>
|
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="rl-card">
|
<!-- How It Works -->
|
||||||
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12);color:#8b5cf6">
|
<section class="rl-section rl-section--alt">
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<div class="rl-container">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
||||||
</svg>
|
<div class="rl-grid-3">
|
||||||
</div>
|
<div class="rl-step">
|
||||||
<h3>3. Approve with Multi-Sig</h3>
|
<div class="rl-step__num">1</div>
|
||||||
<p>
|
<h3>Connect a Mailbox</h3>
|
||||||
Outbound emails require M-of-N cryptographic signatures before sending.
|
<p>Your team shares one real email address. Every member sees every thread in real time — no forwarding, no lost context.</p>
|
||||||
Every approval is auditable — no rogue replies.
|
</div>
|
||||||
</p>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Collaboration Features -->
|
<!-- Collaboration Features -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text">
|
<h2 class="rl-heading" style="text-align:center">Collaboration Features</h2>
|
||||||
Collaboration Features
|
|
||||||
</h2>
|
|
||||||
<p class="rl-subtext" style="text-align:center">Built for collective intelligence, not individual productivity.</p>
|
<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-grid-2" style="margin-top:2rem">
|
||||||
<div class="rl-card">
|
<div class="rl-card">
|
||||||
|
|
@ -101,11 +102,9 @@ export function renderLanding(): string {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Team Roles -->
|
<!-- Team Roles -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text">
|
<h2 class="rl-heading" style="text-align:center">Team Roles</h2>
|
||||||
Team Roles
|
|
||||||
</h2>
|
|
||||||
<p class="rl-subtext" style="text-align:center">Fine-grained access control for every team member.</p>
|
<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 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">
|
<div class="rl-card rl-card--center" style="padding:1.25rem">
|
||||||
|
|
@ -132,23 +131,73 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- 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">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading" style="background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text">
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
Start collaborating on email
|
<p class="rl-subtext">How rInbox keeps your information safe.</p>
|
||||||
</h2>
|
<div class="rl-grid-3">
|
||||||
<p class="rl-subtext">
|
<div class="rl-card rl-card--center">
|
||||||
Sign in with your passkey to join a shared inbox.
|
<div class="rl-icon-box">🔒</div>
|
||||||
</p>
|
<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">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rinbox" class="rl-cta-primary"
|
<a href="https://demo.rspace.online/rinbox" class="rl-cta-primary">Open Inbox</a>
|
||||||
style="background:linear-gradient(135deg,#0891b2,#0e7490)">Open Inbox</a>
|
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>
|
<div class="rl-back">
|
||||||
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,99 +5,79 @@ export function renderLanding(): string {
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline" style="color:#10b981;background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.2)">rMaps</span>
|
<span class="rl-tagline">rMaps</span>
|
||||||
<h1 class="rl-heading" style="background:linear-gradient(135deg,#6ee7b7,#2dd4bf,#67e8f9);-webkit-background-clip:text;background-clip:text">
|
<h1 class="rl-heading" style="background:linear-gradient(135deg,#6ee7b7,#2dd4bf,#67e8f9);-webkit-background-clip:text;background-clip:text">(You)rMaps, your world to explore.</h1>
|
||||||
Real-Time Collaborative Maps
|
<p class="rl-subtitle" style="background:linear-gradient(135deg,#6ee7b7,#2dd4bf,#67e8f9);-webkit-background-clip:text;background-clip:text">Real-Time Collaborative Maps</p>
|
||||||
</h1>
|
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Share live locations, navigate indoor and outdoor spaces, coordinate meetups
|
Share live locations, navigate indoor and outdoor spaces, coordinate meetups
|
||||||
— all from the browser. No app install. No tracking. No data collection.
|
— all from the browser. No app install. No tracking. No data collection.
|
||||||
(You)rMaps, your world to explore.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rmaps" class="rl-cta-primary" id="ml-primary"
|
<a href="https://demo.rspace.online/rmaps" class="rl-cta-primary" id="ml-primary">Open Maps</a>
|
||||||
style="background:linear-gradient(135deg,#059669,#0d9488)">Try the Demo</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Room</a>
|
|
||||||
</div>
|
</div>
|
||||||
<p style="font-size:0.82rem;color:#64748b;margin-top:1rem">No sign-up required to join. Works on any device.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Core Features -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<span class="rl-tagline" style="color:#10b981;background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.2);display:block;text-align:center;margin:0 auto 1rem">Core Features</span>
|
<h2 class="rl-heading" style="text-align:center">What rMaps Handles</h2>
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#6ee7b7,#2dd4bf);-webkit-background-clip:text;background-clip:text">
|
<div class="rl-grid-4">
|
||||||
Everything you need to find your friends
|
<div class="rl-card rl-card--center">
|
||||||
</h2>
|
<div class="rl-icon-box">📍</div>
|
||||||
<div class="rl-grid-4" style="margin-top:2rem">
|
<h3>Live Location Sharing</h3>
|
||||||
<div class="rl-card">
|
<p>Real-time GPS updates via WebSocket. See everyone on the map as they move, with stale detection and high-accuracy fallback.</p>
|
||||||
<div class="rl-icon-box" style="background:rgba(16,185,129,0.12);color:#10b981">
|
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Live GPS Sharing</h3>
|
|
||||||
<p>
|
|
||||||
Real-time location updates via WebSocket. See everyone on the map
|
|
||||||
as they move, with stale detection and high-accuracy fallback.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-card">
|
<div class="rl-icon-box">🏢</div>
|
||||||
<div class="rl-icon-box" style="background:rgba(6,182,212,0.12);color:#06b6d4">
|
<h3>Indoor + Outdoor Navigation</h3>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<p>Turn-by-turn routing via OSRM outdoors, seamless switch to c3nav for indoor venues. Multi-floor, level-aware navigation.</p>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Indoor + Outdoor Nav</h3>
|
|
||||||
<p>
|
|
||||||
Turn-by-turn routing via OSRM outdoors, seamless switch to c3nav
|
|
||||||
for indoor venues. Multi-floor, level-aware navigation.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-card">
|
<div class="rl-icon-box">📌</div>
|
||||||
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12);color:#6366f1">
|
<h3>Meetup Coordination</h3>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<p>Drop waypoints for meetups, events, and points of interest. Search by address, share coordinates, or pin from your location.</p>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Meeting Points</h3>
|
|
||||||
<p>
|
|
||||||
Drop waypoints for meetups, events, and points of interest.
|
|
||||||
Search by address, share coordinates, or pin from your location.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🛡</div>
|
||||||
|
<h3>No Tracking, No Data Collection</h3>
|
||||||
|
<p>Ghost mode, precision levels, one-toggle location sharing. Zero tracking, zero data collection. You control who sees you.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="rl-card">
|
<!-- How It Works -->
|
||||||
<div class="rl-icon-box" style="background:rgba(244,63,94,0.12);color:#f43f5e">
|
<section class="rl-section rl-section--alt">
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<div class="rl-container">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
||||||
</svg>
|
<div class="rl-grid-3">
|
||||||
</div>
|
<div class="rl-step">
|
||||||
<h3>Privacy First</h3>
|
<div class="rl-step__num">1</div>
|
||||||
<p>
|
<h3>Create a Map Room</h3>
|
||||||
Ghost mode, precision levels, one-toggle location sharing.
|
<p>Sign in and name your room. Get a shareable link or a custom slug.</p>
|
||||||
Zero tracking, zero data collection. You control who sees you.
|
</div>
|
||||||
</p>
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>Share with Friends</h3>
|
||||||
|
<p>Send the link or scan the QR code. Friends join from any browser — no app download, no account creation needed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Navigate Together</h3>
|
||||||
|
<p>See everyone in real time. Drop meeting points, get turn-by-turn directions, and ping friends when you need to regroup.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- What Makes rMaps Different -->
|
<!-- What Makes rMaps Different -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<span class="rl-tagline" style="color:#2dd4bf;background:rgba(45,212,191,0.1);border-color:rgba(45,212,191,0.2);display:block;text-align:center;margin:0 auto 1rem">Beyond Google Maps</span>
|
<h2 class="rl-heading" style="text-align:center">What Makes rMaps Different</h2>
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#6ee7b7,#2dd4bf);-webkit-background-clip:text;background-clip:text">
|
|
||||||
What makes rMaps different
|
|
||||||
</h2>
|
|
||||||
<div class="rl-grid-2" style="margin-top:2rem">
|
<div class="rl-grid-2" style="margin-top:2rem">
|
||||||
<div class="rl-integration">
|
<div class="rl-integration">
|
||||||
<div class="rl-icon-box" style="background:rgba(16,185,129,0.12);color:#10b981;font-size:1.25rem;flex-shrink:0">
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">🏕</div>
|
||||||
🏕️
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h3>CCC Event Integration</h3>
|
<h3>CCC Event Integration</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -109,9 +89,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-integration">
|
<div class="rl-integration">
|
||||||
<div class="rl-icon-box" style="background:rgba(6,182,212,0.12);color:#06b6d4;font-size:1.25rem;flex-shrink:0">
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">📡</div>
|
||||||
📡
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h3>Location Pinging</h3>
|
<h3>Location Pinging</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -123,9 +101,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-integration">
|
<div class="rl-integration">
|
||||||
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12);color:#6366f1;font-size:1.25rem;flex-shrink:0">
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">📦</div>
|
||||||
📦
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h3>Google Maps Import</h3>
|
<h3>Google Maps Import</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -137,9 +113,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-integration">
|
<div class="rl-integration">
|
||||||
<div class="rl-icon-box" style="background:rgba(245,158,11,0.12);color:#f59e0b;font-size:1.25rem;flex-shrink:0">
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">📱</div>
|
||||||
📱
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h3>PWA & Offline Mode</h3>
|
<h3>PWA & Offline Mode</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -151,9 +125,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-integration">
|
<div class="rl-integration">
|
||||||
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12);color:#8b5cf6;font-size:1.25rem;flex-shrink:0">
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">🔗</div>
|
||||||
🔗
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h3>Instant Room Sharing</h3>
|
<h3>Instant Room Sharing</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -165,9 +137,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-integration">
|
<div class="rl-integration">
|
||||||
<div class="rl-icon-box" style="background:rgba(244,63,94,0.12);color:#f43f5e;font-size:1.25rem;flex-shrink:0">
|
<div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">🔄</div>
|
||||||
🔄
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h3>Conflict-Free Sync</h3>
|
<h3>Conflict-Free Sync</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -181,51 +151,13 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- How it Works -->
|
|
||||||
<section class="rl-section">
|
|
||||||
<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);display:block;text-align:center;margin:0 auto 1rem">How It Works</span>
|
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#6ee7b7,#2dd4bf);-webkit-background-clip:text;background-clip:text">
|
|
||||||
Three steps to find your crew
|
|
||||||
</h2>
|
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num" style="background:rgba(16,185,129,0.15);color:#10b981">1</div>
|
|
||||||
<h3>Create a Map Room</h3>
|
|
||||||
<p>
|
|
||||||
Sign in and name your room. Get a shareable link or a custom slug.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num" style="background:rgba(6,182,212,0.15);color:#06b6d4">2</div>
|
|
||||||
<h3>Share with Friends</h3>
|
|
||||||
<p>
|
|
||||||
Send the link or scan the QR code. Friends join from any browser
|
|
||||||
— no app download, no account creation needed.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num" style="background:rgba(99,102,241,0.15);color:#6366f1">3</div>
|
|
||||||
<h3>Navigate Together</h3>
|
|
||||||
<p>
|
|
||||||
See everyone in real time. Drop meeting points, get turn-by-turn
|
|
||||||
directions, and ping friends when you need to regroup.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Use Cases -->
|
<!-- Use Cases -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<span class="rl-tagline" style="color:#6366f1;background:rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.2);display:block;text-align:center;margin:0 auto 1rem">Built For</span>
|
<h2 class="rl-heading" style="text-align:center">Maps for Every Gathering</h2>
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#6ee7b7,#2dd4bf);-webkit-background-clip:text;background-clip:text">
|
|
||||||
Maps for every gathering
|
|
||||||
</h2>
|
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-3" style="margin-top:2rem">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div style="font-size:2rem;margin-bottom:0.75rem">🏕️</div>
|
<div class="rl-icon-box">🏕</div>
|
||||||
<h3>Festivals & Camps</h3>
|
<h3>Festivals & Camps</h3>
|
||||||
<p>
|
<p>
|
||||||
Navigate massive venues with indoor maps. Find stages, food courts,
|
Navigate massive venues with indoor maps. Find stages, food courts,
|
||||||
|
|
@ -234,7 +166,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div style="font-size:2rem;margin-bottom:0.75rem">🏙️</div>
|
<div class="rl-icon-box">🏙</div>
|
||||||
<h3>City Exploration</h3>
|
<h3>City Exploration</h3>
|
||||||
<p>
|
<p>
|
||||||
Exploring a new city with friends? Share locations, drop pins at
|
Exploring a new city with friends? Share locations, drop pins at
|
||||||
|
|
@ -243,7 +175,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div style="font-size:2rem;margin-bottom:0.75rem">🤝</div>
|
<div class="rl-icon-box">🤝</div>
|
||||||
<h3>Group Coordination</h3>
|
<h3>Group Coordination</h3>
|
||||||
<p>
|
<p>
|
||||||
Conferences, retreats, team offsites. Set meeting points, ping
|
Conferences, retreats, team offsites. Set meeting points, ping
|
||||||
|
|
@ -257,65 +189,73 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Technical Highlights -->
|
<!-- Built on Open Source -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<span class="rl-tagline" style="color:#94a3b8;background:rgba(100,116,139,0.1);border-color:rgba(100,116,139,0.2);display:block;text-align:center;margin:0 auto 1rem">Under the Hood</span>
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#6ee7b7,#2dd4bf);-webkit-background-clip:text;background-clip:text">
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rMaps.</p>
|
||||||
Built on open standards
|
<div class="rl-grid-4">
|
||||||
</h2>
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-grid-4" style="margin-top:2rem">
|
<h3>MapLibre GL</h3>
|
||||||
<div class="rl-card rl-card--center" style="padding:1rem">
|
<p>Open-source map rendering engine. Beautiful vector maps without vendor lock-in.</p>
|
||||||
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0">MapLibre GL</p>
|
|
||||||
<p style="font-size:0.75rem;color:#64748b;margin-top:0.25rem">Open-source maps</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center" style="padding:1rem">
|
<div class="rl-card rl-card--center">
|
||||||
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0">OSRM</p>
|
<h3>c3nav</h3>
|
||||||
<p style="font-size:0.75rem;color:#64748b;margin-top:0.25rem">Outdoor routing</p>
|
<p>Indoor navigation engine with multi-floor routing and venue bounds detection.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center" style="padding:1rem">
|
<div class="rl-card rl-card--center">
|
||||||
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0">c3nav</p>
|
<h3>OSRM</h3>
|
||||||
<p style="font-size:0.75rem;color:#64748b;margin-top:0.25rem">Indoor navigation</p>
|
<p>Open Source Routing Machine for fast, accurate outdoor turn-by-turn navigation.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center" style="padding:1rem">
|
<div class="rl-card rl-card--center">
|
||||||
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0">Automerge</p>
|
<h3>Web Push API</h3>
|
||||||
<p style="font-size:0.75rem;color:#64748b;margin-top:0.25rem">CRDT sync</p>
|
<p>Browser-native push notifications for location pings and alerts.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center" style="padding:1rem">
|
</div>
|
||||||
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0">Web Push</p>
|
</div>
|
||||||
<p style="font-size:0.75rem;color:#64748b;margin-top:0.25rem">Notifications</p>
|
</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 rMaps 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>
|
||||||
<div class="rl-card rl-card--center" style="padding:1rem">
|
<div class="rl-card rl-card--center">
|
||||||
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0">Service Worker</p>
|
<div class="rl-icon-box">🕵</div>
|
||||||
<p style="font-size:0.75rem;color:#64748b;margin-top:0.25rem">Offline & PWA</p>
|
<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>
|
||||||
<div class="rl-card rl-card--center" style="padding:1rem">
|
<div class="rl-card rl-card--center">
|
||||||
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0">WebSocket</p>
|
<div class="rl-icon-box">🏠</div>
|
||||||
<p style="font-size:0.75rem;color:#64748b;margin-top:0.25rem">Real-time sync</p>
|
<h3>Self-Hosted</h3>
|
||||||
</div>
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
||||||
<div class="rl-card rl-card--center" style="padding:1rem">
|
|
||||||
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0">EncryptID</p>
|
|
||||||
<p style="font-size:0.75rem;color:#64748b;margin-top:0.25rem">Identity & auth</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading" style="background:linear-gradient(135deg,#6ee7b7,#2dd4bf);-webkit-background-clip:text;background-clip:text">
|
<h2 class="rl-heading">(You)rMaps, your world to explore.</h2>
|
||||||
Ready to find your crew?
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
</h2>
|
|
||||||
<p class="rl-subtext">Create a map room and share the link. That's it.</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rmaps" class="rl-cta-primary"
|
<a href="https://demo.rspace.online/rmaps" class="rl-cta-primary">Open Maps</a>
|
||||||
style="background:linear-gradient(135deg,#059669,#0d9488)">Try the Demo</a>
|
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>
|
<div class="rl-back">
|
||||||
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,114 +4,165 @@
|
||||||
* the shell wraps it with header, CSS, and analytics.
|
* the shell wraps it with header, CSS, and analytics.
|
||||||
*/
|
*/
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
const demo = "https://demo.rspace.online/rnetwork";
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<section class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rNetwork</span>
|
<span class="rl-tagline">rNetwork</span>
|
||||||
<h1 class="rl-heading">See the web of trust</h1>
|
<h1 class="rl-heading">(You)rNetwork, your web of trust.</h1>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtitle">See the web of trust</p>
|
||||||
Map the relationships that matter. (You)rNetwork makes the invisible
|
|
||||||
connections visible — people, companies, and opportunities rendered
|
|
||||||
as a living, interactive graph.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
|
||||||
<a href="${demo}" class="rl-cta-primary" id="ml-primary">Explore Your Network</a>
|
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
||||||
</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-3">
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">1</div>
|
|
||||||
<h3>Connect CRM Data</h3>
|
|
||||||
<p>Link your Twenty CRM instance via GraphQL. People, companies, and opportunities sync automatically.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">2</div>
|
|
||||||
<h3>Visualize the Graph</h3>
|
|
||||||
<p>Entities become nodes and relationships become edges in a force-directed layout you can explore in real time.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">3</div>
|
|
||||||
<h3>Explore Relationships</h3>
|
|
||||||
<p>Click, drag, and zoom to discover hidden connections. Filter by entity type, search by name, and trace paths of trust.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section class="rl-section rl-section--alt">
|
|
||||||
<div class="rl-container">
|
|
||||||
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
|
||||||
<div class="rl-grid-4">
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🛰</div>
|
|
||||||
<h3>Force-Directed Layout</h3>
|
|
||||||
<p>Interactive graph with physics simulation. Nodes attract and repel naturally, revealing organic clusters.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🔄</div>
|
|
||||||
<h3>CRM Sync</h3>
|
|
||||||
<p>Twenty CRM integration via GraphQL. People, companies, and opportunities stay up to date automatically.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🧸</div>
|
|
||||||
<h3>Entity Types</h3>
|
|
||||||
<p>People, companies, and opportunities rendered as distinct nodes. Visual encoding makes each type instantly recognizable.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🔗</div>
|
|
||||||
<h3>Trust Feeds</h3>
|
|
||||||
<p>Relationship data flows to other rSpace modules. The trust graph powers governance, funding, and collaboration views.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Use Cases -->
|
|
||||||
<section class="rl-section">
|
|
||||||
<div class="rl-container">
|
|
||||||
<h2 class="rl-heading" style="text-align:center">Use Cases</h2>
|
|
||||||
<div class="rl-grid-3">
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🌐</div>
|
|
||||||
<h3>Community Mapping</h3>
|
|
||||||
<p>See who knows whom across your ecosystem. Identify bridges, hubs, and isolated clusters at a glance.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">📈</div>
|
|
||||||
<h3>Stakeholder Analysis</h3>
|
|
||||||
<p>Trace influence paths between people and organizations. Understand power dynamics before critical decisions.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🎯</div>
|
|
||||||
<h3>Opportunity Tracking</h3>
|
|
||||||
<p>Visualize pipeline deals alongside the people and companies involved. Spot warm introductions and shared connections.</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 Community, Connected</h2>
|
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Stop guessing who knows whom. Start seeing the relationships that shape your community.
|
Map the relationships that matter. rNetwork makes the invisible
|
||||||
|
connections visible — people, companies, and opportunities rendered
|
||||||
|
as a living, interactive graph.
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary">Explore Your Network</a>
|
<a href="https://demo.rspace.online/rnetwork" class="rl-cta-primary" id="ml-primary">Explore Network</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>`;
|
<!-- Features -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container">
|
||||||
|
<h2 class="rl-heading" style="text-align:center">What rNetwork Handles</h2>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔗</div>
|
||||||
|
<h3>Relationship Mapping</h3>
|
||||||
|
<p>Connect people, companies, and opportunities into a unified graph. See who knows whom at a glance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🛰</div>
|
||||||
|
<h3>Force-Directed Graph Visualization</h3>
|
||||||
|
<p>Interactive graph with physics simulation. Nodes attract and repel naturally, revealing organic clusters.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔄</div>
|
||||||
|
<h3>CRM Integration</h3>
|
||||||
|
<p>Twenty CRM integration via GraphQL. People, companies, and opportunities stay up to date automatically.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🧸</div>
|
||||||
|
<h3>Web of Trust</h3>
|
||||||
|
<p>Relationship data flows to other rSpace modules. The trust graph powers governance, funding, and collaboration views.</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 Your Contacts</h3>
|
||||||
|
<p>Link your Twenty CRM instance via GraphQL. People, companies, and opportunities sync automatically.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>Map Relationships Visually</h3>
|
||||||
|
<p>Entities become nodes and relationships become edges in a force-directed layout you can explore in real time.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Discover Hidden Connections</h3>
|
||||||
|
<p>Click, drag, and zoom to find unexpected links. Filter by entity type, search by name, and trace paths of trust.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Use Cases (module-specific) -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container">
|
||||||
|
<h2 class="rl-heading" style="text-align:center">Use Cases</h2>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🌐</div>
|
||||||
|
<h3>Community Mapping</h3>
|
||||||
|
<p>See who knows whom across your ecosystem. Identify bridges, hubs, and isolated clusters at a glance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📈</div>
|
||||||
|
<h3>Stakeholder Analysis</h3>
|
||||||
|
<p>Trace influence paths between people and organizations. Understand power dynamics before critical decisions.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🎯</div>
|
||||||
|
<h3>Opportunity Tracking</h3>
|
||||||
|
<p>Visualize pipeline deals alongside the people and companies involved. Spot warm introductions and shared connections.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Built on Open Source -->
|
||||||
|
<section class="rl-section rl-section--alt">
|
||||||
|
<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 rNetwork.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔄</div>
|
||||||
|
<h3>Twenty CRM</h3>
|
||||||
|
<p>Open-source CRM with a GraphQL API. People, companies, and opportunities as first-class entities.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📊</div>
|
||||||
|
<h3>D3.js</h3>
|
||||||
|
<p>Force-directed graph visualization library. Physics-based layout with interactive drag, zoom, and pan.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔥</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer. Lightweight, type-safe, and runs on any JavaScript runtime.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
|
<p class="rl-subtext">How rNetwork 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 rl-section--alt">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">(You)rNetwork, your web of trust.</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/rnetwork" class="rl-cta-primary">Explore Network</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>`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,58 +5,71 @@ export function renderLanding(): string {
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline" style="color:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2)">rNotes</span>
|
<span class="rl-tagline">rNotes</span>
|
||||||
<h1 class="rl-heading" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">
|
<h1 class="rl-heading" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">(You)rNotes, your thoughts unbound.</h1>
|
||||||
Capture Everything, Find Anything, and Share your Insights
|
<p class="rl-subtitle" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">Capture Everything, Find Anything, and Share your Insights</p>
|
||||||
</h1>
|
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Notes, clips, voice recordings, and live transcription — all in one place.
|
Notes, clips, voice recordings, and live transcription — all in one place.
|
||||||
Speak and watch your words appear in real time, or drop in audio and video files to transcribe offline.
|
Speak and watch your words appear in real time, or drop in audio and video files to transcribe offline.
|
||||||
(You)rNotes, your thoughts unbound.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rnotes" class="rl-cta-primary" id="ml-primary"
|
<a href="https://demo.rspace.online/rnotes" class="rl-cta-primary" id="ml-primary">Open Notebook</a>
|
||||||
style="background:linear-gradient(135deg,#f59e0b,#d97706)">Open Notebook</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
<a href="https://demo.rspace.online/rnotes" class="rl-cta-secondary"
|
|
||||||
style="border-color:rgba(34,197,94,0.3);color:#4ade80">Unlock Article</a>
|
|
||||||
<a href="https://demo.rspace.online/rnotes" class="rl-cta-secondary"
|
|
||||||
style="border-color:rgba(139,92,246,0.3);color:#a78bfa">Transcribe</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rNotes Handles</h2>
|
||||||
<div class="rl-grid-4">
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📝</div>
|
||||||
|
<h3>Rich Text Notes</h3>
|
||||||
|
<p>Write with a full TipTap editor — formatting, code blocks, checklists, and embeds. Dual-format storage keeps Markdown portable.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🎤</div>
|
||||||
|
<h3>Voice & Transcription</h3>
|
||||||
|
<p>Record voice notes with live transcription via Web Speech API. Drop in audio or video files and get full transcripts — all in the browser.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🏷</div>
|
||||||
|
<h3>Tagging & Organization</h3>
|
||||||
|
<p>Tag freely, organize into notebooks, and search everything. Filtered views surface the right cards at the right time.</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">
|
||||||
<div class="rl-step__num" style="background:rgba(245,158,11,0.1);color:#f59e0b">1</div>
|
<div class="rl-step__num">1</div>
|
||||||
<h3>Live Transcribe</h3>
|
<h3>Create a Notebook</h3>
|
||||||
<p>Speak and watch your words appear in real time. WebSocket streaming with live timestamps.</p>
|
<p>Name your notebook and start capturing. Organize by project, topic, or however you think.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num" style="background:rgba(245,158,11,0.1);color:#f59e0b">2</div>
|
<div class="rl-step__num">2</div>
|
||||||
<h3>Audio & Video</h3>
|
<h3>Capture Notes, Voice, or Clips</h3>
|
||||||
<p>Drop in audio or video files and get a full transcript. Powered by NVIDIA Parakeet — runs entirely in your browser.</p>
|
<p>Type rich text, record voice with live transcription, or drop in audio and video files to transcribe offline.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num" style="background:rgba(245,158,11,0.1);color:#f59e0b">3</div>
|
<div class="rl-step__num">3</div>
|
||||||
<h3>Notebooks & Tags</h3>
|
<h3>Search, Tag, and Share</h3>
|
||||||
<p>Organize transcripts into notebooks alongside notes, clips, code, and files. Tag freely, search everything.</p>
|
<p>Find anything instantly with full-text search. Tag and filter your cards, then share notebooks with your team.</p>
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num" style="background:rgba(245,158,11,0.1);color:#f59e0b">4</div>
|
|
||||||
<h3>Private & Offline</h3>
|
|
||||||
<p>Parakeet.js runs entirely in the browser. Your audio never leaves your device — full offline support.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Memory Cards -->
|
<!-- Memory Cards -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">Memory Cards</h2>
|
<h2 class="rl-heading" style="text-align:center">Memory Cards</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">
|
<p class="rl-subtext" style="text-align:center">
|
||||||
Every note is a Memory Card — a typed, structured unit of knowledge with hierarchy,
|
Every note is a Memory Card — a typed, structured unit of knowledge with hierarchy,
|
||||||
properties, and attachments. Designed for round-trip interoperability with Logseq.
|
properties, and attachments. Designed for round-trip interoperability with Logseq.
|
||||||
|
|
@ -64,11 +77,7 @@ export function renderLanding(): string {
|
||||||
<div class="rl-grid-3">
|
<div class="rl-grid-3">
|
||||||
<!-- 7 Card Types -->
|
<!-- 7 Card Types -->
|
||||||
<div class="rl-card">
|
<div class="rl-card">
|
||||||
<div class="rl-icon-box" style="background:rgba(245,158,11,0.12);color:#f59e0b">
|
<div class="rl-icon-box">🏷</div>
|
||||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>7 Card Types</h3>
|
<h3>7 Card Types</h3>
|
||||||
<div style="display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:0.75rem">
|
<div style="display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:0.75rem">
|
||||||
<span class="rl-badge" style="background:rgba(245,158,11,0.2);color:#f59e0b">note</span>
|
<span class="rl-badge" style="background:rgba(245,158,11,0.2);color:#f59e0b">note</span>
|
||||||
|
|
@ -84,11 +93,7 @@ export function renderLanding(): string {
|
||||||
|
|
||||||
<!-- Hierarchy & Properties -->
|
<!-- Hierarchy & Properties -->
|
||||||
<div class="rl-card">
|
<div class="rl-card">
|
||||||
<div class="rl-icon-box" style="background:rgba(245,158,11,0.12);color:#f59e0b">
|
<div class="rl-icon-box">📂</div>
|
||||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Hierarchy & Properties</h3>
|
<h3>Hierarchy & Properties</h3>
|
||||||
<p>
|
<p>
|
||||||
Nest cards under parents to build knowledge trees. Add structured
|
Nest cards under parents to build knowledge trees. Add structured
|
||||||
|
|
@ -104,11 +109,7 @@ export function renderLanding(): string {
|
||||||
|
|
||||||
<!-- Logseq Import/Export -->
|
<!-- Logseq Import/Export -->
|
||||||
<div class="rl-card">
|
<div class="rl-card">
|
||||||
<div class="rl-icon-box" style="background:rgba(245,158,11,0.12);color:#f59e0b">
|
<div class="rl-icon-box">🔄</div>
|
||||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Logseq Import & Export</h3>
|
<h3>Logseq Import & Export</h3>
|
||||||
<p>
|
<p>
|
||||||
Export your notebooks as Logseq-compatible ZIP archives. Import a Logseq graph and keep your pages,
|
Export your notebooks as Logseq-compatible ZIP archives. Import a Logseq graph and keep your pages,
|
||||||
|
|
@ -121,11 +122,7 @@ export function renderLanding(): string {
|
||||||
|
|
||||||
<!-- Dual Format Storage -->
|
<!-- Dual Format Storage -->
|
||||||
<div class="rl-card">
|
<div class="rl-card">
|
||||||
<div class="rl-icon-box" style="background:rgba(245,158,11,0.12);color:#f59e0b">
|
<div class="rl-icon-box">📄</div>
|
||||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Dual Format Storage</h3>
|
<h3>Dual Format Storage</h3>
|
||||||
<p>
|
<p>
|
||||||
Every card stores rich TipTap JSON for editing and portable Markdown for search, export, and interoperability.
|
Every card stores rich TipTap JSON for editing and portable Markdown for search, export, and interoperability.
|
||||||
|
|
@ -135,11 +132,7 @@ export function renderLanding(): string {
|
||||||
|
|
||||||
<!-- Structured Attachments -->
|
<!-- Structured Attachments -->
|
||||||
<div class="rl-card">
|
<div class="rl-card">
|
||||||
<div class="rl-icon-box" style="background:rgba(245,158,11,0.12);color:#f59e0b">
|
<div class="rl-icon-box">📎</div>
|
||||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Structured Attachments</h3>
|
<h3>Structured Attachments</h3>
|
||||||
<p>
|
<p>
|
||||||
Attach images, PDFs, audio, and files to any card with roles (primary, preview, supporting) and captions.
|
Attach images, PDFs, audio, and files to any card with roles (primary, preview, supporting) and captions.
|
||||||
|
|
@ -149,11 +142,7 @@ export function renderLanding(): string {
|
||||||
|
|
||||||
<!-- FUN Model -->
|
<!-- FUN Model -->
|
||||||
<div class="rl-card">
|
<div class="rl-card">
|
||||||
<div class="rl-icon-box" style="background:rgba(245,158,11,0.12);color:#f59e0b">
|
<div class="rl-icon-box">❤</div>
|
||||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>FUN, Not CRUD</h3>
|
<h3>FUN, Not CRUD</h3>
|
||||||
<p>
|
<p>
|
||||||
<span style="color:#f59e0b;font-weight:600">F</span>orget,
|
<span style="color:#f59e0b;font-weight:600">F</span>orget,
|
||||||
|
|
@ -166,19 +155,69 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- Built on Open Source -->
|
||||||
|
<section class="rl-section rl-section--alt">
|
||||||
|
<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 rNotes.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Notebooks, notes, and tags stored in a battle-tested relational database with full-text search.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>Web Speech API</h3>
|
||||||
|
<p>Browser-native live transcription — speak and watch your words appear in real time.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultra-fast, lightweight API framework powering the rNotes backend.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading" style="background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text">Start capturing</h2>
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
<p class="rl-subtext">Notes, voice, clips, and code — all in one notebook.</p>
|
<p class="rl-subtext">How rNotes 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 rl-section--alt">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">(You)rNotes, your thoughts unbound.</h2>
|
||||||
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rnotes" class="rl-cta-primary"
|
<a href="https://demo.rspace.online/rnotes" class="rl-cta-primary">Open Notebook</a>
|
||||||
style="background:linear-gradient(135deg,#f59e0b,#d97706)">Open Notebook</a>
|
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>
|
<div class="rl-back">
|
||||||
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,69 +7,118 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rPhotos</span>
|
<span class="rl-tagline">rPhotos</span>
|
||||||
<h1 class="rl-heading">Community Photo Commons</h1>
|
<h1 class="rl-heading">(You)rPhotos, your moments.</h1>
|
||||||
|
<p class="rl-subtitle">Community Photo Commons</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Share memories with your community, powered by Immich.
|
Share memories with your community, powered by Immich.
|
||||||
Self-hosted, AI-organized, and privacy-first.
|
Self-hosted, AI-organized, and privacy-first.
|
||||||
(You)rPhotos, your moments.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rphotos" class="rl-cta-primary" id="ml-primary">Browse Gallery</a>
|
<a href="https://demo.rspace.online/rphotos" class="rl-cta-primary" id="ml-primary">Browse Photos</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rPhotos Handles</h2>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📷</div>
|
||||||
|
<h3>Photo Gallery & Albums</h3>
|
||||||
|
<p>Browse photos chronologically or by album. Collaborative albums let everyone in the space contribute.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🤖</div>
|
||||||
|
<h3>AI-Powered Search</h3>
|
||||||
|
<p>Immich detects faces, objects, and scenes automatically. Search your library by what's in the photo.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">👥</div>
|
||||||
|
<h3>Shared Community Albums</h3>
|
||||||
|
<p>Create shared albums for events, projects, or teams. Everyone in the space can view and add photos.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>S3-Compatible Storage</h3>
|
||||||
|
<p>Photos stored on any S3-compatible backend. Self-hosted MinIO, Cloudflare R2, or AWS — your choice.</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-grid-3">
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">1</div>
|
<div class="rl-step__num">1</div>
|
||||||
<h3>Upload Photos</h3>
|
<h3>Upload Your Photos</h3>
|
||||||
<p>Drop photos from any device. Bulk upload entire albums or individual shots.</p>
|
<p>Drop photos from any device. Bulk upload entire albums or individual shots.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">2</div>
|
<div class="rl-step__num">2</div>
|
||||||
<h3>Auto-Organize</h3>
|
<h3>Organize into Albums</h3>
|
||||||
<p>Immich's AI detects faces and objects, sorting your photos into smart groups automatically.</p>
|
<p>Immich's AI detects faces and objects, sorting your photos into smart groups automatically.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">3</div>
|
<div class="rl-step__num">3</div>
|
||||||
<h3>Share Albums</h3>
|
<h3>Share with Your Community</h3>
|
||||||
<p>Create shared albums for events, projects, or teams. Everyone in the space can contribute.</p>
|
<p>Create shared albums for events, projects, or teams. Everyone in the space can contribute.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Built on Open Source -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
||||||
<p class="rl-subtext" style="text-align:center;">
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rPhotos.</p>
|
||||||
A full-featured photo platform that respects your community's data.
|
<div class="rl-grid-3">
|
||||||
</p>
|
|
||||||
<div class="rl-grid-4">
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🤖</div>
|
<div class="rl-icon-box">📸</div>
|
||||||
<h3>Immich-Powered</h3>
|
<h3>Immich</h3>
|
||||||
<p>AI-driven face and object detection for automatic organization, search, and discovery.</p>
|
<p>Self-hosted photo & video management with AI-driven face detection, object recognition, and smart search.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">📷</div>
|
<div class="rl-icon-box">🗃</div>
|
||||||
<h3>Shared Albums</h3>
|
<h3>PostgreSQL</h3>
|
||||||
<p>Collaborative photo albums for events, gatherings, and ongoing projects. Everyone can add.</p>
|
<p>Rock-solid relational database for photo metadata, album organization, and user data.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">📅</div>
|
<div class="rl-icon-box">🔥</div>
|
||||||
<h3>Timeline View</h3>
|
<h3>Hono</h3>
|
||||||
<p>Browse photos chronologically. Scroll through your community's visual history day by day.</p>
|
<p>Ultrafast web framework for the API layer. Lightweight, type-safe, and runs on any JavaScript runtime.</p>
|
||||||
</div>
|
</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 rPhotos keeps your information safe.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🔒</div>
|
<div class="rl-icon-box">🔒</div>
|
||||||
<h3>Privacy-First</h3>
|
<h3>End-to-End Encryption</h3>
|
||||||
<p>Self-hosted storage means your photos never leave your infrastructure. No third-party scanning.</p>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -77,13 +126,11 @@ export function renderLanding(): string {
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center;">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Your photos, your community</h2>
|
<h2 class="rl-heading">(You)rPhotos, your moments.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Try the demo gallery or create a space to start your own photo commons.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rphotos" class="rl-cta-primary">Browse Gallery</a>
|
<a href="https://demo.rspace.online/rphotos" class="rl-cta-primary">Browse Photos</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,23 +6,52 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rPubs</span>
|
<span class="rl-tagline">rPubs</span>
|
||||||
<h1 class="rl-heading">Write it. Press it. Share it.</h1>
|
<h1 class="rl-heading">(You)rPubs, your press.</h1>
|
||||||
|
<p class="rl-subtitle">Write it. Press it. Share it.</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Drop in a markdown document, pick a pocket format, and get a print-ready PDF in seconds.
|
Drop in a markdown document, pick a pocket format, and get a print-ready PDF in seconds.
|
||||||
Group up with other authors to unlock bulk pricing through collaborative print runs.
|
Group up with other authors to unlock bulk pricing through collaborative print runs.
|
||||||
(You)rPubs, your press.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rpubs" class="rl-cta-primary" id="ml-primary">Try the Press</a>
|
<a href="https://demo.rspace.online/rpubs" class="rl-cta-primary" id="ml-primary">Try the Press</a>
|
||||||
<a href="/rcart" class="rl-cta-secondary">Browse the Shop</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">How it works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rPubs Handles</h2>
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📄</div>
|
||||||
|
<h3>Markdown → PDF</h3>
|
||||||
|
<p>Drop in markdown or rich text. rPubs typesets it with Typst and produces a print-ready PDF in seconds.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📖</div>
|
||||||
|
<h3>4 Pocket Formats</h3>
|
||||||
|
<p>A7 Pocket, Quarter Letter, A6 Booklet, and Digest. All print-ready at 300 dpi with bleeds.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🤝</div>
|
||||||
|
<h3>Collaborative Print Runs</h3>
|
||||||
|
<p>Pool orders across titles and authors. The more copies in a run, the cheaper each one gets.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🛒</div>
|
||||||
|
<h3>rCart Integration</h3>
|
||||||
|
<p>Publish your artifact to the rCart catalog with one click. Group carts, revenue splits, and fulfillment built in.</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">
|
||||||
<span class="rl-step__num">1</span>
|
<span class="rl-step__num">1</span>
|
||||||
<h3>Write / paste</h3>
|
<h3>Write / paste</h3>
|
||||||
|
|
@ -43,7 +72,7 @@ export function renderLanding(): string {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Pocket Formats -->
|
<!-- Pocket Formats -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Four pocket formats</h2>
|
<h2 class="rl-heading" style="text-align:center">Four pocket formats</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">From palm-sized zines to digest readers. All print-ready at 300 dpi with bleeds.</p>
|
<p class="rl-subtext" style="text-align:center">From palm-sized zines to digest readers. All print-ready at 300 dpi with bleeds.</p>
|
||||||
|
|
@ -81,7 +110,7 @@ export function renderLanding(): string {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Group Buys -->
|
<!-- Group Buys -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Group buys — better together</h2>
|
<h2 class="rl-heading" style="text-align:center">Group buys — better together</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">Pool orders across titles. The more copies in a run, the cheaper each one gets.</p>
|
<p class="rl-subtext" style="text-align:center">Pool orders across titles. The more copies in a run, the cheaper each one gets.</p>
|
||||||
|
|
@ -111,7 +140,7 @@ export function renderLanding(): string {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- How collaborative print runs work -->
|
<!-- How collaborative print runs work -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">How collaborative print runs work</h2>
|
<h2 class="rl-heading" style="text-align:center">How collaborative print runs work</h2>
|
||||||
<div class="rl-grid-4" style="margin-top:2rem">
|
<div class="rl-grid-4" style="margin-top:2rem">
|
||||||
|
|
@ -140,7 +169,7 @@ export function renderLanding(): string {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Cross-title batching -->
|
<!-- Cross-title batching -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Cross-title batching</h2>
|
<h2 class="rl-heading" style="text-align:center">Cross-title batching</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">
|
<p class="rl-subtext" style="text-align:center">
|
||||||
|
|
@ -170,7 +199,7 @@ export function renderLanding(): string {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- rCart integration -->
|
<!-- rCart integration -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<div class="rl-grid-2">
|
<div class="rl-grid-2">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -201,7 +230,7 @@ export function renderLanding(): string {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Cosmolocal -->
|
<!-- Cosmolocal -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<span class="rl-tagline">rPubs × Cosmolocal</span>
|
<span class="rl-tagline">rPubs × Cosmolocal</span>
|
||||||
<h2 class="rl-heading">Design global, manufacture local</h2>
|
<h2 class="rl-heading">Design global, manufacture local</h2>
|
||||||
|
|
@ -209,9 +238,69 @@ export function renderLanding(): string {
|
||||||
Every print run is routed to the nearest capable provider. Reduce shipping emissions,
|
Every print run is routed to the nearest capable provider. Reduce shipping emissions,
|
||||||
support local economies, and still benefit from shared design and pooled demand.
|
support local economies, and still benefit from shared design and pooled demand.
|
||||||
</p>
|
</p>
|
||||||
|
</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 rPubs.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">⚙</div>
|
||||||
|
<h3>Typst</h3>
|
||||||
|
<p>Document compilation engine. Transforms markdown into beautifully typeset, print-ready PDFs.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔥</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Rock-solid relational database for catalog storage, orders, and artifact metadata.</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 rPubs 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)rPubs, your press.</h2>
|
||||||
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rpubs" class="rl-cta-primary" id="ml-primary">Start pressing</a>
|
<a href="https://demo.rspace.online/rpubs" class="rl-cta-primary">Try the Press</a>
|
||||||
<a href="/rcart" class="rl-cta-secondary">Visit the Shop</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -4,51 +4,83 @@
|
||||||
* the shell wraps it with header, CSS, and analytics.
|
* the shell wraps it with header, CSS, and analytics.
|
||||||
*/
|
*/
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
const demo = "https://demo.rspace.online/rsocials";
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<section class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rSocials</span>
|
<span class="rl-tagline">rSocials</span>
|
||||||
<h1 class="rl-heading">Social Media Under Your Control</h1>
|
<h1 class="rl-heading">(You)rSocials, your narrative.</h1>
|
||||||
|
<p class="rl-subtitle">Social Media Under Your Control</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Schedule, publish, and analyze across every major platform — all
|
Schedule, publish, and analyze across every major platform — all
|
||||||
from your self-hosted rSpace instance. No per-seat pricing, no
|
from your self-hosted rSpace instance. No per-seat pricing, no
|
||||||
third-party data mining.
|
third-party data mining.
|
||||||
(You)rSocials, your narrative.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary" id="ml-primary">Try Demo</a>
|
<a href="https://demo.rspace.online/rsocials" class="rl-cta-primary" id="ml-primary">Try Demo</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container">
|
||||||
|
<h2 class="rl-heading" style="text-align:center">What rSocials Handles</h2>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📅</div>
|
||||||
|
<h3>Cross-Platform Scheduling</h3>
|
||||||
|
<p>Draft posts, attach media, pick dates, and queue them up across every channel from a single calendar view.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📤</div>
|
||||||
|
<h3>Publishing & Analytics</h3>
|
||||||
|
<p>Posts go live on schedule. Track engagement, reach, and growth from a unified dashboard across all platforms.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🌐</div>
|
||||||
|
<h3>ActivityPub Federation</h3>
|
||||||
|
<p>Native ActivityPub support lets you publish to the fediverse — Mastodon, Threads, and any compatible server.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📶</div>
|
||||||
|
<h3>RSS Aggregation</h3>
|
||||||
|
<p>Watch any RSS feed and auto-publish new items to selected channels. Stay active without manual effort.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">👥</div>
|
||||||
|
<h3>No Per-Seat Pricing</h3>
|
||||||
|
<p>Add unlimited team members. Pay only for hosting, not per-user SaaS fees. Invite editors and approvers freely.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- How It Works -->
|
<!-- How It Works -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
||||||
<div class="rl-grid-3">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">1</div>
|
<div class="rl-step__num">1</div>
|
||||||
<h3>Connect Platforms</h3>
|
<h3>Connect Your Accounts</h3>
|
||||||
<p>Link your X/Twitter, LinkedIn, Instagram, TikTok, and more in one place.</p>
|
<p>Link your X/Twitter, LinkedIn, Instagram, TikTok, Mastodon, and more in one place.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">2</div>
|
<div class="rl-step__num">2</div>
|
||||||
<h3>Schedule Content</h3>
|
<h3>Schedule and Publish</h3>
|
||||||
<p>Draft posts, attach media, pick dates, and queue them up across every channel.</p>
|
<p>Draft posts, attach media, pick dates, and queue them up across every channel.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">3</div>
|
<div class="rl-step__num">3</div>
|
||||||
<h3>Publish & Analyze</h3>
|
<h3>Analyze and Iterate</h3>
|
||||||
<p>Posts go live on schedule. Track engagement, reach, and growth from a single dashboard.</p>
|
<p>Track engagement, reach, and growth from a single dashboard. Refine your strategy with real data.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Supported Platforms -->
|
<!-- Supported Platforms -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Supported Platforms</h2>
|
<h2 class="rl-heading" style="text-align:center">Supported Platforms</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">
|
<p class="rl-subtext" style="text-align:center">
|
||||||
|
|
@ -75,10 +107,10 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Extra Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">Power Features</h2>
|
||||||
<div class="rl-grid-4">
|
<div class="rl-grid-4">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">📅</div>
|
<div class="rl-icon-box">📅</div>
|
||||||
|
|
@ -95,21 +127,11 @@ export function renderLanding(): string {
|
||||||
<h3>Post Designer</h3>
|
<h3>Post Designer</h3>
|
||||||
<p>Resize images, add text overlays, and preview how posts look on each platform.</p>
|
<p>Resize images, add text overlays, and preview how posts look on each platform.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">👥</div>
|
|
||||||
<h3>Team Collaboration</h3>
|
|
||||||
<p>Invite editors & approvers. Review queues keep quality high.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🛠</div>
|
<div class="rl-icon-box">🛠</div>
|
||||||
<h3>Per-Platform Optimization</h3>
|
<h3>Per-Platform Optimization</h3>
|
||||||
<p>Tailor copy, image crops, and hashtags for each network automatically.</p>
|
<p>Tailor copy, image crops, and hashtags for each network automatically.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">📶</div>
|
|
||||||
<h3>RSS Auto-Post</h3>
|
|
||||||
<p>Watch any RSS feed and auto-publish new items to selected channels.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">📈</div>
|
<div class="rl-icon-box">📈</div>
|
||||||
<h3>Analytics Dashboard</h3>
|
<h3>Analytics Dashboard</h3>
|
||||||
|
|
@ -124,25 +146,50 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Why Self-Hosted -->
|
<!-- Built on Open Source -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Why Self-Hosted?</h2>
|
<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 rSocials.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>ActivityPub</h3>
|
||||||
|
<p>Federated social protocol for publishing to the decentralized web.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>RSS</h3>
|
||||||
|
<p>Feed aggregation standard for auto-publishing from any content source.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultra-fast, lightweight API framework powering the rSocials backend.</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 rSocials keeps your information safe.</p>
|
||||||
<div class="rl-grid-3">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🔒</div>
|
<div class="rl-icon-box">🔒</div>
|
||||||
<h3>Data Sovereignty</h3>
|
<h3>End-to-End Encryption</h3>
|
||||||
<p>API tokens and analytics stay on your server. No third-party vendor sees your audience data.</p>
|
<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>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">💰</div>
|
<div class="rl-icon-box">🕵</div>
|
||||||
<h3>No Per-Seat Pricing</h3>
|
<h3>Zero-Knowledge Architecture</h3>
|
||||||
<p>Add unlimited team members. Pay only for hosting, not per-user SaaS fees.</p>
|
<span class="rl-badge">Coming Soon</span>
|
||||||
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🔌</div>
|
<div class="rl-icon-box">🏠</div>
|
||||||
<h3>Open Source & Extensible</h3>
|
<h3>Self-Hosted</h3>
|
||||||
<p>Fork it, theme it, add custom integrations. Postiz under the hood, rSpace on top.</p>
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -151,16 +198,17 @@ export function renderLanding(): string {
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Ready to Own Your Social Presence?</h2>
|
<h2 class="rl-heading">(You)rSocials, your narrative.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Deploy rSocials in your rSpace and start scheduling in minutes.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary">Try Demo</a>
|
<a href="https://demo.rspace.online/rsocials" class="rl-cta-primary">Try Demo</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>`;
|
<div class="rl-back">
|
||||||
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,69 +7,123 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rSplat</span>
|
<span class="rl-tagline">rSplat</span>
|
||||||
<h1 class="rl-heading">3D Gaussian Splats on the Infinite Canvas</h1>
|
<h1 class="rl-heading">(You)rSplat, your dimension.</h1>
|
||||||
|
<p class="rl-subtitle">3D Gaussian Splats on the Infinite Canvas</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
View, share, and gate 3D scenes captured with Gaussian splatting.
|
View, share, and gate 3D scenes captured with Gaussian splatting.
|
||||||
Three.js-powered viewing with optional x402 micropayment gating.
|
Three.js-powered viewing with optional x402 micropayment gating.
|
||||||
(You)rSplat, your dimension.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rsplat" class="rl-cta-primary" id="ml-primary">Explore Splats</a>
|
<a href="https://demo.rspace.online/rsplat" class="rl-cta-primary" id="ml-primary">Open Canvas</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rSplat Handles</h2>
|
||||||
<div class="rl-grid-3">
|
<div class="rl-grid-4">
|
||||||
<div class="rl-step">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-step__num">1</div>
|
<div class="rl-icon-box">🎨</div>
|
||||||
<h3>Upload .ply/.splat Files</h3>
|
<h3>3D Gaussian Splatting Viewer</h3>
|
||||||
<p>Upload Gaussian splat files captured from real-world scenes or generated from photos and video.</p>
|
<p>Hardware-accelerated WebGL rendering with orbit controls, smooth camera, and full-screen mode.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-step__num">2</div>
|
<div class="rl-icon-box">🖼</div>
|
||||||
<h3>View in Browser</h3>
|
<h3>Infinite Canvas</h3>
|
||||||
<p>Explore 3D scenes directly in the browser with orbit controls, zoom, and pan. No app install needed.</p>
|
<p>Embed splats as spatial elements on the rSpace infinite canvas alongside other module content.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-step__num">3</div>
|
<div class="rl-icon-box">🌐</div>
|
||||||
<h3>Gate with x402 Micropayments</h3>
|
<h3>Spatial Computing</h3>
|
||||||
<p>Optionally gate uploads with HTTP 402 micropayments. Monetize premium 3D content natively.</p>
|
<p>Browse, search, and discover 3D scenes shared by your community. Sorted by recent, popular, or tagged.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">💰</div>
|
||||||
|
<h3>Token-Gated Access</h3>
|
||||||
|
<p>Monetize 3D content with HTTP 402 micropayments. Viewers pay per-view or per-download automatically.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- How It Works -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
||||||
<p class="rl-subtext" style="text-align:center;">
|
<div class="rl-grid-3">
|
||||||
A complete pipeline from capture to community gallery.
|
<div class="rl-step">
|
||||||
</p>
|
<div class="rl-step__num">1</div>
|
||||||
|
<h3>Upload a .ply or .splat File</h3>
|
||||||
|
<p>Upload Gaussian splat files captured from real-world scenes or generated from photos and video.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>View in the 3D Scene Viewer</h3>
|
||||||
|
<p>Explore 3D scenes directly in the browser with orbit controls, zoom, and pan. No app install needed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Embed on the Infinite Canvas</h3>
|
||||||
|
<p>Place your splat on the infinite canvas alongside other modules. Build spatial experiences for your community.</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 rSplat.</p>
|
||||||
<div class="rl-grid-4">
|
<div class="rl-grid-4">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🎨</div>
|
<div class="rl-icon-box">🎲</div>
|
||||||
<h3>Three.js Viewer</h3>
|
<h3>Three.js</h3>
|
||||||
<p>Hardware-accelerated WebGL rendering with orbit controls, smooth camera, and full-screen mode.</p>
|
<p>Industry-standard 3D rendering engine for the web. Powers the WebGL scene viewer and camera controls.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🖼</div>
|
<div class="rl-icon-box">🔮</div>
|
||||||
<h3>Canvas Integration</h3>
|
<h3>GaussianSplats3D</h3>
|
||||||
<p>Embed splats as spatial elements on the rSpace infinite canvas alongside other module content.</p>
|
<p>High-performance Gaussian splatting renderer. Real-time point cloud rendering in the browser.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Rock-solid relational database for splat metadata, scene descriptions, and access control.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">💰</div>
|
<div class="rl-icon-box">💰</div>
|
||||||
<h3>x402 Gating</h3>
|
<h3>x402</h3>
|
||||||
<p>Monetize 3D content with HTTP 402 micropayments. Viewers pay per-view or per-download automatically.</p>
|
<p>Token-gated payment protocol for HTTP 402 micropayments. Monetize premium 3D content natively.</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 rSplat 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>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🌄</div>
|
<div class="rl-icon-box">🕵</div>
|
||||||
<h3>Community Gallery</h3>
|
<h3>Zero-Knowledge Architecture</h3>
|
||||||
<p>Browse, search, and discover 3D scenes shared by your community. Sorted by recent, popular, or tagged.</p>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -77,13 +131,11 @@ export function renderLanding(): string {
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center;">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Step into 3D</h2>
|
<h2 class="rl-heading">(You)rSplat, your dimension.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Explore the demo gallery or upload your own Gaussian splats.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rsplat" class="rl-cta-primary">Explore Splats</a>
|
<a href="https://demo.rspace.online/rsplat" class="rl-cta-primary">Open Canvas</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rSwag</span>
|
<span class="rl-tagline">rSwag</span>
|
||||||
<h1 class="rl-heading">Design Community Merch</h1>
|
<h1 class="rl-heading">(You)rSwag, your brand.</h1>
|
||||||
|
<p class="rl-subtitle">Design Community Merch</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Stickers, posters, and tees from your browser.
|
Stickers, posters, and tees from your browser.
|
||||||
Upload a design, pick a product, and get print-ready files instantly.
|
Upload a design, pick a product, and get print-ready files instantly.
|
||||||
(You)rSwag, your brand.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rswag" class="rl-cta-primary" id="ml-primary">Start Designing</a>
|
<a href="https://demo.rspace.online/rswag" class="rl-cta-primary" id="ml-primary">Start Designing</a>
|
||||||
|
|
@ -19,10 +19,39 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rSwag Handles</h2>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🖨</div>
|
||||||
|
<h3>Print-on-Demand Merch Designer</h3>
|
||||||
|
<p>Upload artwork and generate print-ready files with correct DPI, bleed margins, and color profiles.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🧾</div>
|
||||||
|
<h3>Stickers, Posters, Tees & Patches</h3>
|
||||||
|
<p>Four product types with professional print specs built in. Vinyl stickers, A3 posters, DTG tees, and embroidered patches.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">👁</div>
|
||||||
|
<h3>Live Preview Mockups</h3>
|
||||||
|
<p>See your design on product mockups before committing. Adjust and iterate in real time.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🛒</div>
|
||||||
|
<h3>rCart Integration</h3>
|
||||||
|
<p>Send finished designs directly to <a href="/rcart" style="color:#14b8a6;">rCart</a> for community ordering and fulfillment.</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-grid-3">
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">1</div>
|
<div class="rl-step__num">1</div>
|
||||||
|
|
@ -36,18 +65,18 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">3</div>
|
<div class="rl-step__num">3</div>
|
||||||
<h3>Preview & Order</h3>
|
<h3>Preview and Order</h3>
|
||||||
<p>See a live mockup, download print-ready files, or send directly to rCart for community ordering.</p>
|
<p>See a live mockup, download print-ready files, or send directly to rCart for community ordering.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Products -->
|
<!-- Products (module-specific) -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">Products</h2>
|
<h2 class="rl-heading" style="text-align:center">Products</h2>
|
||||||
<p class="rl-subtext" style="text-align:center;">
|
<p class="rl-subtext" style="text-align:center">
|
||||||
Four product types, each with professional print specs.
|
Four product types, each with professional print specs.
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-grid-4">
|
<div class="rl-grid-4">
|
||||||
|
|
@ -75,30 +104,53 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Built on Open Source -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
||||||
<div class="rl-grid-4">
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rSwag.</p>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-icon-box">👁</div>
|
|
||||||
<h3>Live Preview</h3>
|
|
||||||
<p>See your design on product mockups before committing. Adjust and iterate in real time.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🖨</div>
|
|
||||||
<h3>Print-Ready Export</h3>
|
|
||||||
<p>Download files with correct DPI, bleed margins, and color profiles for professional printing.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">⚡</div>
|
<div class="rl-icon-box">⚡</div>
|
||||||
<h3>Sharp Processing</h3>
|
<h3>Sharp</h3>
|
||||||
<p>Server-side image processing with Sharp. Fast resizing, format conversion, and optimization.</p>
|
<p>Server-side image processing, resizing, and format conversion. Fast and memory-efficient.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🛒</div>
|
<div class="rl-icon-box">🔥</div>
|
||||||
<h3>rCart Integration</h3>
|
<h3>Hono</h3>
|
||||||
<p>Send finished designs directly to <a href="/rcart" style="color:#14b8a6;">rCart</a> for community ordering and fulfillment.</p>
|
<p>Ultrafast web framework for the API layer. Lightweight, type-safe, and runs on any JavaScript runtime.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🐇</div>
|
||||||
|
<h3>Bun</h3>
|
||||||
|
<p>All-in-one JavaScript runtime. Fast startup, built-in bundler, and native TypeScript support.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
|
<p class="rl-subtext">How rSwag 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -106,11 +158,9 @@ export function renderLanding(): string {
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center;">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Make something your community can wear</h2>
|
<h2 class="rl-heading">(You)rSwag, your brand.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Try the designer or create a space to start your merch line.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rswag" class="rl-cta-primary">Start Designing</a>
|
<a href="https://demo.rspace.online/rswag" class="rl-cta-primary">Start Designing</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
|
|
|
||||||
|
|
@ -1,213 +1,142 @@
|
||||||
/**
|
/**
|
||||||
* Trips module landing page — static HTML, no React.
|
* rTrips landing page — group travel planning.
|
||||||
*/
|
*/
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rTrips</span>
|
<span class="rl-tagline">rTrips</span>
|
||||||
<h1 class="rl-heading">Plan Your Trip, Naturally</h1>
|
<h1 class="rl-heading">(You)rTrips, your horizon.</h1>
|
||||||
|
<p class="rl-subtitle">Plan Your Trip, Naturally</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Describe your dream trip in plain language. We'll structure it into
|
Describe your dream trip in plain language. We'll structure it into
|
||||||
itineraries, budgets, and bookings — then give you a collaborative
|
itineraries, budgets, and bookings — then give you a collaborative
|
||||||
canvas to plan together in real-time.
|
canvas to plan together in real-time.
|
||||||
(You)rTrips, your horizon.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rtrips" class="rl-cta-primary" id="ml-primary">Try Demo</a>
|
<a href="https://demo.rspace.online/rtrips" class="rl-cta-primary" id="ml-primary">Plan a Trip</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it Works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rTrips Handles</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">Three steps from dream to departure.</p>
|
<div class="rl-grid-4">
|
||||||
<div class="rl-grid-3">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-step">
|
<div class="rl-icon-box">🗺</div>
|
||||||
<div class="rl-step__num">1</div>
|
<h3>Route Planning</h3>
|
||||||
<h3>Describe It</h3>
|
<p>Visualize your entire trip on rMaps. See routes between destinations and nearby points of interest.</p>
|
||||||
<p>
|
|
||||||
Tell us about your trip in natural language. “Fly from Toronto to Bali
|
|
||||||
for 2 weeks in March, budget $3000.” We parse it into structured data
|
|
||||||
you can refine.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-step__num">2</div>
|
<div class="rl-icon-box">📅</div>
|
||||||
<h3>We Structure It</h3>
|
<h3>Itinerary Building</h3>
|
||||||
<p>
|
<p>Build day-by-day plans together. Add destinations, suggest activities, and rearrange the schedule.</p>
|
||||||
AI extracts destinations, dates, budgets, and bookings into organized views.
|
|
||||||
Edit itineraries, track expenses, manage packing lists — all structured
|
|
||||||
and searchable.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-step__num">3</div>
|
<div class="rl-icon-box">💰</div>
|
||||||
<h3>Collaborate on Canvas</h3>
|
<h3>Expense Splitting</h3>
|
||||||
<p>
|
<p>Split costs and track expenses across the group. Everyone knows exactly where the money goes.</p>
|
||||||
Open the collaborative canvas to plan visually with your travel partners.
|
</div>
|
||||||
Drag destinations, connect itineraries, and brainstorm together in real-time
|
<div class="rl-card rl-card--center">
|
||||||
or async.
|
<div class="rl-icon-box">👥</div>
|
||||||
</p>
|
<h3>Group Coordination</h3>
|
||||||
|
<p>Real-time collaborative canvas for travel partners. Plan visually, brainstorm together, stay in sync.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- How It Works -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Everything You Need to Travel Together</h2>
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">
|
|
||||||
rTrips brings every piece of trip planning into one place — so your group
|
|
||||||
spends less time coordinating and more time exploring.
|
|
||||||
</p>
|
|
||||||
<div class="rl-grid-3">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-card">
|
<div class="rl-step">
|
||||||
<div class="rl-icon-box">
|
<span class="rl-step__num">1</span>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<h3>Create a trip</h3>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
|
<p>Describe your trip in natural language. “Fly from Toronto to Bali for 2 weeks in March, budget $3000.” We parse it into structured data you can refine.</p>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Collaborative Itineraries</h3>
|
|
||||||
<p>
|
|
||||||
Build day-by-day plans together in real-time. Everyone can add destinations,
|
|
||||||
suggest activities, and rearrange the schedule — changes sync instantly.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
<div class="rl-card">
|
<span class="rl-step__num">2</span>
|
||||||
<div class="rl-icon-box">
|
<h3>Plan your route</h3>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<p>AI extracts destinations, dates, budgets, and bookings into organized views. Edit itineraries, track expenses, manage packing lists.</p>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Smart Suggestions</h3>
|
|
||||||
<p>
|
|
||||||
AI-powered recommendations for destinations, restaurants, and activities based
|
|
||||||
on your group's interests, budget, and travel dates.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
<div class="rl-card">
|
<span class="rl-step__num">3</span>
|
||||||
<div class="rl-icon-box">
|
<h3>Split expenses</h3>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<p>Track costs across the group with automatic splitting. Pay your share, see the running total, and keep finances transparent.</p>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Budget Tracking</h3>
|
|
||||||
<p>
|
|
||||||
Split costs, track expenses across the group, and keep a running total so
|
|
||||||
everyone knows exactly where the money goes. No more messy spreadsheets.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rl-card">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Map Integration</h3>
|
|
||||||
<p>
|
|
||||||
Visualize your entire trip on <a href="/rmaps" style="color:#14b8a6">rMaps</a>. See routes between destinations,
|
|
||||||
nearby points of interest, and real-time location sharing during travel days.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rl-card">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Packing Lists</h3>
|
|
||||||
<p>
|
|
||||||
Shared checklists so nothing gets forgotten. Assign items to people, mark
|
|
||||||
off as you pack, and see at a glance what the group still needs.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rl-card">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Offline Access</h3>
|
|
||||||
<p>
|
|
||||||
Download your full itinerary, maps, and booking confirmations for travel
|
|
||||||
without connectivity. Everything you need, even without a signal.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Built for Groups -->
|
<!-- Built on Open Source -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Built for Groups</h2>
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rTrips.</p>
|
||||||
Solo trip planners are everywhere. rTrips is purpose-built for the messy, beautiful
|
|
||||||
reality of traveling with other people.
|
|
||||||
</p>
|
|
||||||
<div class="rl-grid-3">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">🚗</div>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<h3>OSRM</h3>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
<p>Open-source routing engine for route planning, travel time estimates, and turn-by-turn navigation.</p>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Friends & Family</h3>
|
|
||||||
<p>
|
|
||||||
Family reunions, friend getaways, multi-generational trips. Everyone contributes
|
|
||||||
ideas, votes on restaurants, and stays in sync without endless group chats.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">🗃</div>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<h3>PostgreSQL</h3>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" />
|
<p>Rock-solid relational database for trips, itineraries, expenses, and booking data.</p>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3>Teams & Offsites</h3>
|
|
||||||
<p>
|
|
||||||
Company retreats, conference travel, team offsites. Coordinate logistics,
|
|
||||||
share flight details, and manage group bookings from a single shared workspace.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">🔥</div>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<h3>Hono</h3>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 01-1.652.928l-.679-.906a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 00-8.862 12.872M12.75 3.031a9 9 0 016.69 14.036m0 0l-.177-.529A2.25 2.25 0 0017.128 15H16.5l-.324-.324a1.453 1.453 0 00-2.328.377l-.036.073a1.586 1.586 0 01-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438a2.25 2.25 0 01-1.228 2.446L10.5 21l-.652-.174M12.75 3.031l.176.53" />
|
<p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</p>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3>Retreats & Events</h3>
|
</div>
|
||||||
<p>
|
</section>
|
||||||
Yoga retreats, wedding trips, festival crews. Organize large groups with
|
|
||||||
sub-itineraries, optional activities, and shared costs that stay transparent.
|
<!-- Your Data, Protected -->
|
||||||
</p>
|
<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 rTrips 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Ready to plan your next adventure?</h2>
|
<h2 class="rl-heading">(You)rTrips, your horizon.</h2>
|
||||||
<p class="rl-subtext">Just describe where you want to go. We'll handle the rest.</p>
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rtrips" class="rl-cta-primary">Plan a Trip</a>
|
<a href="https://demo.rspace.online/rtrips" class="rl-cta-primary">Plan a Trip</a>
|
||||||
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>
|
<div class="rl-back">
|
||||||
`;
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rTube</span>
|
<span class="rl-tagline">rTube</span>
|
||||||
<h1 class="rl-heading">Community Video Platform</h1>
|
<h1 class="rl-heading">(You)rTube, your channel.</h1>
|
||||||
|
<p class="rl-subtitle">Community Video Platform</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Host, stream, and share video without big tech.
|
Host, stream, and share video without big tech.
|
||||||
Your community's video library with HLS streaming and RTMP ingest.
|
Your community's video library with HLS streaming and RTMP ingest.
|
||||||
(You)rTube, your channel.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rtube" class="rl-cta-primary" id="ml-primary">Start Streaming</a>
|
<a href="https://demo.rspace.online/rtube" class="rl-cta-primary" id="ml-primary">Start Streaming</a>
|
||||||
|
|
@ -19,20 +19,49 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">How It Works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rTube Handles</h2>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📺</div>
|
||||||
|
<h3>Video Hosting</h3>
|
||||||
|
<p>Upload video files in any major format. MP4, WebM, MKV, MOV — they all work.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📡</div>
|
||||||
|
<h3>HLS Adaptive Streaming</h3>
|
||||||
|
<p>Adaptive bitrate streaming ensures smooth playback on any connection speed or device.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📡</div>
|
||||||
|
<h3>RTMP Live Ingest</h3>
|
||||||
|
<p>Go live with OBS, Streamlabs, or any RTMP-compatible streaming software. One URL, instant broadcast.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🎥</div>
|
||||||
|
<h3>R2 Cloud Storage & Community Channels</h3>
|
||||||
|
<p>Videos stored on Cloudflare R2 for fast delivery. Each space gets its own channel.</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-grid-3">
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">1</div>
|
<div class="rl-step__num">1</div>
|
||||||
<h3>Upload Videos</h3>
|
<h3>Upload or Stream Live</h3>
|
||||||
<p>Drop video files in any major format. MP4, WebM, MKV, MOV -- they all work.</p>
|
<p>Drop video files in any format or point OBS at your space's RTMP ingest URL and go live instantly.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">2</div>
|
<div class="rl-step__num">2</div>
|
||||||
<h3>Stream Live</h3>
|
<h3>Automatic HLS Transcoding</h3>
|
||||||
<p>Point OBS or any RTMP-compatible software at your space's ingest URL and go live instantly.</p>
|
<p>FFmpeg transcodes uploads into adaptive bitrate HLS streams for smooth playback on any device.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<div class="rl-step__num">3</div>
|
<div class="rl-step__num">3</div>
|
||||||
|
|
@ -43,42 +72,10 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Technical Details (module-specific) -->
|
||||||
<section class="rl-section rl-section--alt">
|
|
||||||
<div class="rl-container">
|
|
||||||
<h2 class="rl-heading" style="text-align:center;">Features</h2>
|
|
||||||
<p class="rl-subtext" style="text-align:center;">
|
|
||||||
Everything you need to run your own community video platform.
|
|
||||||
</p>
|
|
||||||
<div class="rl-grid-4">
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">📺</div>
|
|
||||||
<h3>HLS Streaming</h3>
|
|
||||||
<p>Adaptive bitrate streaming ensures smooth playback on any connection speed or device.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">📡</div>
|
|
||||||
<h3>RTMP Ingest</h3>
|
|
||||||
<p>Go live with OBS, Streamlabs, or any RTMP-compatible streaming software. One URL, instant broadcast.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">☁</div>
|
|
||||||
<h3>R2 Storage</h3>
|
|
||||||
<p>Videos stored on Cloudflare R2 for fast, globally distributed delivery with no egress fees.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">🎥</div>
|
|
||||||
<h3>Community Channels</h3>
|
|
||||||
<p>Each space gets its own video channel. Organize content by community, project, or topic.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Technical -->
|
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center;">Technical Details</h2>
|
<h2 class="rl-heading" style="text-align:center">Technical Details</h2>
|
||||||
<div class="rl-card" style="max-width:600px;margin:0 auto;">
|
<div class="rl-card" style="max-width:600px;margin:0 auto;">
|
||||||
<ul class="rl-check-list">
|
<ul class="rl-check-list">
|
||||||
<li><strong>H.264 / H.265</strong> hardware-accelerated codec support</li>
|
<li><strong>H.264 / H.265</strong> hardware-accelerated codec support</li>
|
||||||
|
|
@ -91,13 +88,68 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Built on Open Source -->
|
||||||
|
<section class="rl-section rl-section--alt">
|
||||||
|
<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 rTube.</p>
|
||||||
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">☁</div>
|
||||||
|
<h3>AWS S3 SDK</h3>
|
||||||
|
<p>Cloudflare R2 object storage via the S3-compatible API. Fast, globally distributed, no egress fees.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📺</div>
|
||||||
|
<h3>HLS.js</h3>
|
||||||
|
<p>Adaptive bitrate streaming library. Smooth playback with automatic quality switching in the browser.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🎦</div>
|
||||||
|
<h3>FFmpeg</h3>
|
||||||
|
<p>Industry-standard video transcoding. Converts uploads into multi-bitrate HLS streams automatically.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔥</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer. Lightweight, type-safe, and runs on any JavaScript runtime.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
|
<p class="rl-subtext">How rTube 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 -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center;">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Your community's own video platform</h2>
|
<h2 class="rl-heading">(You)rTube, your channel.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Try the demo or create a space to start hosting and streaming.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rtube" class="rl-cta-primary">Start Streaming</a>
|
<a href="https://demo.rspace.online/rtube" class="rl-cta-primary">Start Streaming</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
|
|
|
||||||
|
|
@ -6,50 +6,73 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rVote</span>
|
<span class="rl-tagline">rVote</span>
|
||||||
<h1 class="rl-heading">Democratic Backlog<br>Prioritization</h1>
|
<h1 class="rl-heading">(You)rVote, your voice.</h1>
|
||||||
|
<p class="rl-subtitle">Democratic Backlog Prioritization</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Quadratic conviction voting with time-decay. Surface the ideas your community actually cares about —
|
Quadratic conviction voting with time-decay. Surface the ideas your community actually cares about —
|
||||||
not just the loudest voices.
|
not just the loudest voices.
|
||||||
(You)rVote, your voice.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rvote" class="rl-cta-primary" id="ml-primary">Try the Demo</a>
|
<a href="https://demo.rspace.online/rvote" class="rl-cta-primary" id="ml-primary">Start Voting</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ELI5 -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Three ideas, one system</h2>
|
<h2 class="rl-heading" style="text-align:center">What rVote Handles</h2>
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-4">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box"><span style="font-size:1.25rem;font-weight:700">x²</span></div>
|
||||||
<span style="font-size:1.25rem;font-weight:700">x²</span>
|
<h3>Conviction Voting</h3>
|
||||||
</div>
|
|
||||||
<h3>Quadratic Cost</h3>
|
|
||||||
<p>Each additional vote on the same proposal costs quadratically more credits. One vote = 1 credit, two = 4, three = 9. Prevents plutocratic capture.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3>Reddit-style Ranking</h3>
|
|
||||||
<p>Proposals accumulate conviction score from community votes. The most supported ideas float to the top.</p>
|
<p>Proposals accumulate conviction score from community votes. The most supported ideas float to the top.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">⚖</div>
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
<h3>Quadratic Voting</h3>
|
||||||
</div>
|
<p>Each additional vote costs quadratically more credits. Balances intensity of preference with breadth of support.</p>
|
||||||
<h3>Vote Decay</h3>
|
</div>
|
||||||
<p>Votes lose weight over 30–60 days. Stale support fades automatically — no need to manually close polls.</p>
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🕐</div>
|
||||||
|
<h3>Proposal Lifecycle</h3>
|
||||||
|
<p>From ranking through promotion to final pass/fail vote. Proposals advance automatically when thresholds are met.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🏛</div>
|
||||||
|
<h3>Democratic Governance</h3>
|
||||||
|
<p>Daily credit allowances, vote decay, and sybil resistance. One person, one identity, one voice.</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">
|
||||||
|
<span class="rl-step__num">1</span>
|
||||||
|
<h3>Ranking (QPR)</h3>
|
||||||
|
<p>Community members spend credits to upvote proposals. Conviction score accumulates with quadratic cost.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<span class="rl-step__num">2</span>
|
||||||
|
<h3>Score reaches +100</h3>
|
||||||
|
<p>When a proposal crosses the promotion threshold (default 100), it automatically enters the final vote.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<span class="rl-step__num">3</span>
|
||||||
|
<h3>Pass / Fail Vote</h3>
|
||||||
|
<p>A time-limited binary vote (Yes / No / Abstain) decides the outcome. Simple majority wins.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- What is QPR -->
|
<!-- What is QPR -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">What is Quadratic Priority Ranking?</h2>
|
<h2 class="rl-heading" style="text-align:center">What is Quadratic Priority Ranking?</h2>
|
||||||
<div class="rl-grid-2" style="margin-top:2rem">
|
<div class="rl-grid-2" style="margin-top:2rem">
|
||||||
|
|
@ -68,7 +91,7 @@ export function renderLanding(): string {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Vote Cost Calculator -->
|
<!-- Vote Cost Calculator -->
|
||||||
<section class="rl-section">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Vote cost calculator</h2>
|
<h2 class="rl-heading" style="text-align:center">Vote cost calculator</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">The cost of conviction grows quadratically.</p>
|
<p class="rl-subtext" style="text-align:center">The cost of conviction grows quadratically.</p>
|
||||||
|
|
@ -104,31 +127,7 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- How it works: 3 stages -->
|
<!-- Built for real governance -->
|
||||||
<section class="rl-section rl-section--alt">
|
|
||||||
<div class="rl-container">
|
|
||||||
<h2 class="rl-heading" style="text-align:center">The lifecycle of a proposal</h2>
|
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
|
||||||
<div class="rl-step">
|
|
||||||
<span class="rl-step__num">1</span>
|
|
||||||
<h3>Ranking (QPR)</h3>
|
|
||||||
<p>Community members spend credits to upvote proposals. Conviction score accumulates with quadratic cost.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<span class="rl-step__num">2</span>
|
|
||||||
<h3>Score reaches +100</h3>
|
|
||||||
<p>When a proposal crosses the promotion threshold (default 100), it automatically enters the final vote.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<span class="rl-step__num">3</span>
|
|
||||||
<h3>Pass / Fail Vote</h3>
|
|
||||||
<p>A time-limited binary vote (Yes / No / Abstain) decides the outcome. Simple majority wins.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Built for real governance</h2>
|
<h2 class="rl-heading" style="text-align:center">Built for real governance</h2>
|
||||||
|
|
@ -165,15 +164,65 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Built on Open Source -->
|
||||||
|
<section class="rl-section rl-section--alt">
|
||||||
|
<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 rVote.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🗃</div>
|
||||||
|
<h3>PostgreSQL</h3>
|
||||||
|
<p>Rock-solid relational database for proposals, votes, credit balances, and governance history.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box"><span style="font-size:1.25rem;font-weight:700">x²</span></div>
|
||||||
|
<h3>Conviction Voting Algorithm</h3>
|
||||||
|
<p>Continuous preference signaling with quadratic cost and time-decay. Open-source governance math.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔥</div>
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
|
<p class="rl-subtext">How rVote 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 -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Ready to prioritize democratically?</h2>
|
<h2 class="rl-heading">(You)rVote, your voice.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Create a governance space, submit proposals, and let your community decide what matters most.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rvote" class="rl-cta-primary" id="ml-primary">Open rVote</a>
|
<a href="https://demo.rspace.online/rvote" class="rl-cta-primary">Start Voting</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,58 +4,37 @@
|
||||||
* the shell wraps it with header, CSS, and analytics.
|
* the shell wraps it with header, CSS, and analytics.
|
||||||
*/
|
*/
|
||||||
export function renderLanding(): string {
|
export function renderLanding(): string {
|
||||||
const demo = "https://demo.rspace.online/rwallet";
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<section class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rWallet</span>
|
<span class="rl-tagline">rWallet</span>
|
||||||
<h1 class="rl-heading">Community Treasury, Transparent</h1>
|
<h1 class="rl-heading">(You)rWallet, your treasury laid bare.</h1>
|
||||||
|
<p class="rl-subtitle">Community Treasury, Transparent</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Visualize your Safe multisig across every chain — balances,
|
Visualize your Safe multisig across every chain — balances,
|
||||||
transactions, and governance — all in one client-side dashboard.
|
transactions, and governance — all in one client-side dashboard.
|
||||||
No backend database, no custody risk.
|
No backend database, no custody risk.
|
||||||
(You)rWallet, your treasury laid bare.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary" id="ml-primary">View Your Treasury</a>
|
<a href="https://demo.rspace.online/rwallet" class="rl-cta-primary" id="ml-primary">View Treasury</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<!-- 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-3">
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">1</div>
|
|
||||||
<h3>Connect Your Safe</h3>
|
|
||||||
<p>Paste any Safe address. rWallet auto-detects which chains it lives on.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">2</div>
|
|
||||||
<h3>View Across Chains</h3>
|
|
||||||
<p>See token balances, USD valuations, and transaction history for every chain in one view.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-step">
|
|
||||||
<div class="rl-step__num">3</div>
|
|
||||||
<h3>Govern Together</h3>
|
|
||||||
<p>Review pending multisig transactions and coordinate approvals with your team.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Features -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">What rWallet Handles</h2>
|
||||||
<div class="rl-grid-4">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">⛓</div>
|
<div class="rl-icon-box">⛓</div>
|
||||||
<h3>Multi-Chain Support</h3>
|
<h3>Gnosis Safe Visualization</h3>
|
||||||
<p>Ethereum, Polygon, Base, Gnosis, Arbitrum, Optimism, Celo, Avalanche, BSC, and zkSync.</p>
|
<p>Paste any Safe address and see balances, signers, and thresholds across all detected chains instantly.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">🔗</div>
|
||||||
|
<h3>Multichain Support</h3>
|
||||||
|
<p>Ethereum, Polygon, Base, Gnosis, Arbitrum, Optimism, Celo, Avalanche, BSC, and zkSync in one view.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">📋</div>
|
<div class="rl-icon-box">📋</div>
|
||||||
|
|
@ -64,13 +43,37 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">🔐</div>
|
<div class="rl-icon-box">🔐</div>
|
||||||
<h3>Multisig Governance</h3>
|
<h3>Governance Dashboard</h3>
|
||||||
<p>See signer thresholds, pending confirmations, and execution status at a glance.</p>
|
<p>See signer thresholds, pending confirmations, and execution status at a glance.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">💰</div>
|
<div class="rl-icon-box">🛡</div>
|
||||||
<h3>Token Balances</h3>
|
<h3>No Custody Risk</h3>
|
||||||
<p>ERC-20 and native token balances aggregated across all detected chains.</p>
|
<p>Client-side only. rWallet reads your Safe data but never holds keys or moves funds.</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 Your Safe Address</h3>
|
||||||
|
<p>Paste any Safe address. rWallet auto-detects which chains it lives on.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">2</div>
|
||||||
|
<h3>See Balances Across All Chains</h3>
|
||||||
|
<p>See token balances, USD valuations, and transaction history for every chain in one view.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-step">
|
||||||
|
<div class="rl-step__num">3</div>
|
||||||
|
<h3>Review Transactions and Governance</h3>
|
||||||
|
<p>Review pending multisig transactions and coordinate approvals with your team.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -102,19 +105,69 @@ export function renderLanding(): string {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Built on Open Source -->
|
||||||
|
<section class="rl-section rl-section--alt">
|
||||||
|
<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 rWallet.</p>
|
||||||
|
<div class="rl-grid-3">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>Gnosis Safe API</h3>
|
||||||
|
<p>Multisig wallet data across all supported chains via the Safe transaction service.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>Safe Global SDK</h3>
|
||||||
|
<p>Official SDK for querying Safe balances, transactions, and signer information.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<h3>Hono</h3>
|
||||||
|
<p>Ultra-fast, lightweight API framework powering the rWallet backend.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Your Data, Protected -->
|
||||||
|
<section class="rl-section">
|
||||||
|
<div class="rl-container" style="text-align:center">
|
||||||
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
||||||
|
<p class="rl-subtext">How rWallet 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 -->
|
<!-- CTA -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section rl-section--alt">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Ready to Open Your Treasury?</h2>
|
<h2 class="rl-heading">(You)rWallet, your treasury laid bare.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Paste a Safe address and explore your multichain holdings in seconds.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="${demo}" class="rl-cta-primary">View Your Treasury</a>
|
<a href="https://demo.rspace.online/rwallet" class="rl-cta-primary">View Treasury</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="rl-back"><a href="/">← Back to rSpace</a></div>`;
|
<div class="rl-back">
|
||||||
|
<a href="/">← Back to rSpace</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,103 +6,118 @@ export function renderLanding(): string {
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="rl-hero">
|
<div class="rl-hero">
|
||||||
<span class="rl-tagline">rWork</span>
|
<span class="rl-tagline">rWork</span>
|
||||||
<h1 class="rl-heading">Get things done,<br>together</h1>
|
<h1 class="rl-heading">(You)rWork, your flow.</h1>
|
||||||
|
<p class="rl-subtitle">Get things done, together</p>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">
|
||||||
Kanban boards, team spaces, and real-time collaboration — built for groups
|
Kanban boards, team spaces, and real-time collaboration — built for groups
|
||||||
that share work, not just assign it.
|
that share work, not just assign it.
|
||||||
(You)rWork, your flow.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rwork" class="rl-cta-primary" id="ml-primary">Try the Demo</a>
|
<a href="https://demo.rspace.online/rwork" class="rl-cta-primary" id="ml-primary">Start Working</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- How it works -->
|
<!-- Features -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">How it works</h2>
|
<h2 class="rl-heading" style="text-align:center">What rWork Handles</h2>
|
||||||
<div class="rl-grid-3" style="margin-top:2rem">
|
<div class="rl-grid-4">
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📋</div>
|
||||||
|
<h3>Kanban Boards</h3>
|
||||||
|
<p>Drag-and-drop columns with customizable statuses. See everything at a glance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">☑</div>
|
||||||
|
<h3>Task Management</h3>
|
||||||
|
<p>Create tasks with titles, descriptions, labels, and priorities. Track progress across your team.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">📈</div>
|
||||||
|
<h3>Activity Logging</h3>
|
||||||
|
<p>Every change is tracked. See who moved what, when, and why — full audit trail.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rl-card rl-card--center">
|
||||||
|
<div class="rl-icon-box">👥</div>
|
||||||
|
<h3>Workspace Collaboration</h3>
|
||||||
|
<p>Each workspace is scoped to a space. Members share boards, tasks, and activity in real time.</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">
|
||||||
<span class="rl-step__num">1</span>
|
<span class="rl-step__num">1</span>
|
||||||
<h3>Create a Space</h3>
|
<h3>Create a workspace</h3>
|
||||||
<p>Every workspace lives inside an rSpace — shared by default with your team.</p>
|
<p>Every workspace lives inside an rSpace — shared by default with your team.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<span class="rl-step__num">2</span>
|
<span class="rl-step__num">2</span>
|
||||||
<h3>Add Tasks</h3>
|
<h3>Add tasks and boards</h3>
|
||||||
<p>Create tasks with titles, descriptions, labels, and priorities. Drag them across columns.</p>
|
<p>Create tasks with titles, descriptions, labels, and priorities. Drag them across columns.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-step">
|
<div class="rl-step">
|
||||||
<span class="rl-step__num">3</span>
|
<span class="rl-step__num">3</span>
|
||||||
<h3>Collaborate</h3>
|
<h3>Track progress together</h3>
|
||||||
<p>Assign, comment, and track progress in real time. Everyone sees the same board.</p>
|
<p>Assign, comment, and track progress in real time. Everyone sees the same board.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Built on Open Source -->
|
||||||
<section class="rl-section rl-section--alt">
|
<section class="rl-section">
|
||||||
<div class="rl-container">
|
<div class="rl-container">
|
||||||
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
||||||
<p class="rl-subtext" style="text-align:center">Everything you need for collaborative task management, nothing you don't.</p>
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rWork.</p>
|
||||||
<div class="rl-grid-4" style="margin-top:2rem">
|
<div class="rl-grid-3">
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">🔥</div>
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
<h3>Hono</h3>
|
||||||
</div>
|
<p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</p>
|
||||||
<h3>Kanban Boards</h3>
|
|
||||||
<p>Drag-and-drop columns with customizable statuses. See everything at a glance.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">🗃</div>
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
|
<h3>PostgreSQL</h3>
|
||||||
</div>
|
<p>Rock-solid relational database for task storage, workspaces, boards, and activity logs.</p>
|
||||||
<h3>Team Spaces</h3>
|
|
||||||
<p>Each workspace is scoped to a space. Members share boards, tasks, and activity.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">⚡</div>
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
|
<h3>Bun</h3>
|
||||||
</div>
|
<p>All-in-one JavaScript runtime. Fast startup, native TypeScript, and built-in bundling.</p>
|
||||||
<h3>Real-time Sync</h3>
|
</div>
|
||||||
<p>Changes propagate instantly. No refresh needed — everyone stays in sync.</p>
|
</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 rWork 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>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">🕵</div>
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
<h3>Zero-Knowledge Architecture</h3>
|
||||||
</div>
|
<span class="rl-badge">Coming Soon</span>
|
||||||
<h3>Markdown Native</h3>
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
||||||
<p>Task descriptions support full markdown. Write rich content without leaving the board.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rl-card rl-card--center">
|
<div class="rl-card rl-card--center">
|
||||||
<div class="rl-icon-box">
|
<div class="rl-icon-box">🏠</div>
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
|
<h3>Self-Hosted</h3>
|
||||||
</div>
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
||||||
<h3>Custom Pipelines</h3>
|
|
||||||
<p>Define your own status columns — TODO, In Progress, Review, Done, or whatever fits.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3>Notifications</h3>
|
|
||||||
<p>Get notified when tasks are assigned, moved, or commented on.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3>Acceptance Criteria</h3>
|
|
||||||
<p>Define clear done conditions. Check them off as you go.</p>
|
|
||||||
</div>
|
|
||||||
<div class="rl-card rl-card--center">
|
|
||||||
<div class="rl-icon-box">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>rSpace Ecosystem</h3>
|
|
||||||
<p>Tasks link to rVote proposals, rCal events, rFunds budgets, and more.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -111,12 +126,10 @@ export function renderLanding(): string {
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section class="rl-section">
|
<section class="rl-section">
|
||||||
<div class="rl-container" style="text-align:center">
|
<div class="rl-container" style="text-align:center">
|
||||||
<h2 class="rl-heading">Ready to collaborate?</h2>
|
<h2 class="rl-heading">(You)rWork, your flow.</h2>
|
||||||
<p class="rl-subtext">
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
||||||
Create a workspace, invite your team, and start shipping together.
|
|
||||||
</p>
|
|
||||||
<div class="rl-cta-row">
|
<div class="rl-cta-row">
|
||||||
<a href="https://demo.rspace.online/rwork" class="rl-cta-primary" id="ml-primary">Open rWork</a>
|
<a href="https://demo.rspace.online/rwork" class="rl-cta-primary">Start Working</a>
|
||||||
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -569,6 +569,12 @@ const RICH_LANDING_CSS = `
|
||||||
}
|
}
|
||||||
.rl-hero .rl-heading { font-size: 2.5rem; }
|
.rl-hero .rl-heading { font-size: 2.5rem; }
|
||||||
@media (min-width: 640px) { .rl-hero .rl-heading { font-size: 3rem; } }
|
@media (min-width: 640px) { .rl-hero .rl-heading { font-size: 3rem; } }
|
||||||
|
.rl-subtitle {
|
||||||
|
font-size: 1.25rem; font-weight: 500; color: #cbd5e1;
|
||||||
|
margin-bottom: 1rem; letter-spacing: -0.005em;
|
||||||
|
}
|
||||||
|
.rl-hero .rl-subtitle { font-size: 1.35rem; }
|
||||||
|
@media (min-width: 640px) { .rl-hero .rl-subtitle { font-size: 1.5rem; } }
|
||||||
.rl-subtext {
|
.rl-subtext {
|
||||||
font-size: 1.05rem; color: #94a3b8; line-height: 1.65;
|
font-size: 1.05rem; color: #94a3b8; line-height: 1.65;
|
||||||
max-width: 640px; margin: 0 auto 2rem;
|
max-width: 640px; margin: 0 auto 2rem;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue