jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: rewrite rFlows landing page with compelling format + save-to-space CTA 

Replaces the technical-heavy landing with an approachable informational page:
- Hero with "Design Funding Flows That Respond to Reality" headline
- 4-card "What rFlows Does" feature grid with gradient icon boxes
- Numbered "How It Works" steps (Define → Wire → Simulate & Save)
- 6-card use cases section (DAOs, grants, revenue sharing, etc.)
- Cleaned up funnel model visual
- Expanded ecosystem (rWallet, rVote, rData)
- "Under the Hood" tech section (Flow Engine, EncryptID, CRDT, local-first)
- "Save Flow to Space" CTA pattern throughout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-04 17:00:38 -08:00
parent 707d83525b
commit aab0f42ef5
1 changed files with 154 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
modules/rflows/landing.ts
View File

@ -1,6 +1,5 @@
/**
* rFlows — rich landing page body.
* Ported from rflows-online/app/page.tsx (Next.js/Tailwind).
* Returned by landingPage() in the module export;
* the shell wraps it with header, CSS, and analytics.
*/
@ -9,58 +8,107 @@ export function renderLanding(): string {
<!-- Hero -->
<div class="rl-hero">
<span class="rl-tagline">rFlows</span>
<h1 class="rl-heading" style="background:linear-gradient(to right,#fcd34d,#6ee7b7,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Threshold-Based Flow Funding
<h1 class="rl-heading">Design Funding Flows<br>
<span style="background:linear-gradient(135deg,#fbbf24,#34d399,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent">That Respond to Reality</span>
</h1>
<p class="rl-subtext" style="font-size:1.25rem;max-width:48rem;margin:0 auto 2rem">
Design continuous funding flows that respond dynamically to threshold conditions.
Connect funnels, set overflow rules, and track outcomes in real-time.
<p class="rl-subtext">
Model how money moves through your organization with <strong style="color:#e2e8f0">threshold-based funnels</strong>,
<strong style="color:#e2e8f0">automatic overflow routing</strong>, and
<strong style="color:#e2e8f0">proportional flow visualization</strong> &mdash; then save it to your space.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rflows" class="rl-cta-secondary" id="ml-primary">Try the Demo</a>
<a href="/create-space" class="rl-cta-primary">Create Your Own</a>
<a href="https://demo.rspace.online/rflows" class="rl-cta-primary" id="ml-primary">
Try the Demo &rarr;
</a>
<a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
</div>
<p style="font-size:0.8rem;color:var(--rs-text-muted,#64748b);margin-top:0.75rem">
Build your flow in the demo, then sign in to save it to your own space.
</p>
</div>
<!-- How It Works -->
<!-- What rFlows Does -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">What rFlows Does</h2>
<div class="rl-grid-4">
<div class="rl-card rl-card--center">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">&#127754;</div>
<h3>Funnel Budgets</h3>
<p>Each funding pool is a funnel with three zones &mdash; overflow, healthy, and critical &mdash; defined by min/max thresholds you set by dragging.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#34d399,rgba(16,185,129,0.6))">&#128260;</div>
<h3>Overflow Routing</h3>
<p>When a funnel exceeds its max threshold, excess funds automatically redistribute to connected pools &mdash; no manual intervention needed.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#60a5fa,rgba(59,130,246,0.6))">&#128200;</div>
<h3>Proportional Edges</h3>
<p>Flow edges scale in width proportionally to their allocation percentage. See at a glance where the most capital is moving.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#a78bfa,rgba(139,92,246,0.6))">&#127758;</div>
<h3>River View</h3>
<p>Switch to the Sankey river visualization to see how all funds flow through your system from source to outcome in one view.</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-card rl-card--center">
<div style="width:3rem;height:3rem;background:rgba(245,158,11,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
<svg style="width:1.5rem;height:1.5rem;color:#fbbf24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
</div>
<h3>Create Funnels</h3>
<p>Each funnel represents a funding pool with three zones: overflow (above max),
healthy (between thresholds), and critical (below min). Set thresholds by
dragging handles.</p>
<div class="rl-step">
<div class="rl-step__num">1</div>
<h3>Define Funnels</h3>
<p>Create funding pools and set their min/max thresholds. Drag the threshold handles to define when a funnel is healthy, overflowing, or critically low.</p>
</div>
<div class="rl-card rl-card--center">
<div style="width:3rem;height:3rem;background:rgba(16,185,129,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
<svg style="width:1.5rem;height:1.5rem;color:#34d399" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
<h3>Connect Flows</h3>
<p>Connect funnels with overflow edges (sideways) so excess funds automatically
route to other pools. Add spending edges (downward) to fund outcomes and
deliverables.</p>
<div class="rl-step">
<div class="rl-step__num">2</div>
<h3>Wire Connections</h3>
<p>Connect funnels with overflow edges (sideways) so excess funds route to other pools. Add spending edges (downward) to fund outcomes and deliverables.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">3</div>
<h3>Simulate &amp; Save</h3>
<p>Watch funds flow through your system in real-time. Adjust allocations with +/- controls on each edge. Save the flow to your space when you're happy with it.</p>
</div>
</div>
</div>
</section>
<div class="rl-card rl-card--center">
<div style="width:3rem;height:3rem;background:rgba(59,130,246,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
<svg style="width:1.5rem;height:1.5rem;color:#60a5fa" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3>Simulate &amp; Share</h3>
<p>Run simulations to see how funds flow through your system. Watch edge widths
scale proportionally. Save your space locally and share it with a link.</p>
<!-- Use Cases -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Who Uses Flow-Based Funding?</h2>
<p class="rl-subtext" style="text-align:center">When budgets need to respond dynamically to changing conditions, threshold-based flows replace static spreadsheets.</p>
<div class="rl-grid-3">
<div class="rl-card">
<h3 style="color:#fbbf24">DAO Treasuries</h3>
<p>Multi-pool treasuries where governance votes set thresholds and overflow routes funds between working groups automatically.</p>
</div>
<div class="rl-card">
<h3 style="color:#34d399">Grant Programs</h3>
<p>Funding rounds where excess from one grant pool overflows to the next priority &mdash; no capital sits idle when other pools need it.</p>
</div>
<div class="rl-card">
<h3 style="color:#60a5fa">Revenue Sharing</h3>
<p>Revenue enters a source funnel and splits proportionally to downstream recipients. Adjust percentages and see the river update live.</p>
</div>
<div class="rl-card">
<h3 style="color:#a78bfa">Community Funds</h3>
<p>Public goods funding where contributions flow through conviction-based allocation curves. Min thresholds protect critical infrastructure.</p>
</div>
<div class="rl-card">
<h3 style="color:#f87171">Emergency Reserves</h3>
<p>Critical-zone protection: when a pool drops below its minimum, outflow is automatically restricted to preserve essential reserves.</p>
</div>
<div class="rl-card">
<h3 style="color:#22d3ee">Budget Modeling</h3>
<p>Prototype budget structures visually before committing capital. Simulate deposit/withdrawal scenarios and see cascading effects.</p>
</div>
</div>
</div>
@ -69,138 +117,112 @@ export function renderLanding(): string {
<!-- The Funnel Metaphor -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<div style="background:rgba(30,41,59,0.3);border-radius:1rem;border:1px solid rgba(51,65,85,0.5);padding:2rem">
<h2 class="rl-heading" style="text-align:center;margin-bottom:2rem">The Funnel Metaphor</h2>
<div style="max-width:28rem;margin:0 auto;font-family:monospace;font-size:0.875rem;text-align:center">
<!-- Overflow Zone -->
<div style="color:#fbbf24">
<div style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:0.75rem 0.75rem 0 0;padding:0.75rem 2rem">
<div style="font-weight:600">OVERFLOW ZONE</div>
<div style="font-size:0.75rem;color:#fcd34d">Above MAX threshold</div>
<div style="font-size:0.75rem;color:rgba(252,211,77,0.7)">Excess funds redistribute to other funnels</div>
</div>
</div>
<!-- Max Threshold Line -->
<div style="font-size:0.75rem;color:#f59e0b;font-weight:700;border-bottom:2px dashed rgba(245,158,11,0.5);padding:0.25rem 0;background:rgba(245,158,11,0.05)">
-- MAX THRESHOLD --
</div>
<!-- Healthy Zone -->
<div style="color:#34d399">
<div style="background:rgba(16,185,129,0.1);border-left:1px solid rgba(16,185,129,0.3);border-right:1px solid rgba(16,185,129,0.3);padding:1rem 2rem">
<div style="font-weight:600">HEALTHY ZONE</div>
<div style="font-size:0.75rem;color:#6ee7b7">Normal operations</div>
<div style="font-size:0.75rem;color:rgba(110,231,183,0.7)">Full flow rate, balanced funding</div>
</div>
</div>
<!-- Min Threshold Line -->
<div style="font-size:0.75rem;color:#ef4444;font-weight:700;border-bottom:2px dashed rgba(239,68,68,0.5);padding:0.25rem 0;background:rgba(239,68,68,0.05)">
-- MIN THRESHOLD --
</div>
<!-- Critical Zone -->
<div style="color:#94a3b8">
<div style="background:rgba(51,65,85,0.3);border:1px solid rgba(71,85,105,0.3);border-radius:0 0 0.75rem 0.75rem;padding:0.75rem 2rem">
<div style="font-weight:600;color:#f87171">CRITICAL ZONE</div>
<div style="font-size:0.75rem;color:#fca5a5">Below MIN threshold</div>
<div style="font-size:0.75rem;color:#64748b">Outflow restricted, conservation mode</div>
</div>
</div>
<h2 class="rl-heading" style="text-align:center">The Funnel Model</h2>
<p class="rl-subtext" style="text-align:center">Every funding pool is a funnel with three zones. Thresholds trigger automatic behavior.</p>
<div style="max-width:32rem;margin:2rem auto 0;display:grid;gap:0;font-size:0.875rem;text-align:center">
<!-- Overflow -->
<div style="background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);border-radius:0.75rem 0.75rem 0 0;padding:1rem 1.5rem">
<div style="font-weight:700;color:#fbbf24;font-size:0.95rem">OVERFLOW</div>
<div style="font-size:0.78rem;color:#fcd34d;margin-top:0.25rem">Above max &mdash; excess redistributes to connected funnels</div>
</div>
<!-- Max line -->
<div style="border-bottom:2px dashed rgba(245,158,11,0.4);padding:0.2rem 0;font-size:0.7rem;font-weight:700;color:#f59e0b;background:rgba(245,158,11,0.04)">
MAX THRESHOLD
</div>
<!-- Healthy -->
<div style="background:rgba(16,185,129,0.08);border-left:1px solid rgba(16,185,129,0.25);border-right:1px solid rgba(16,185,129,0.25);padding:1.25rem 1.5rem">
<div style="font-weight:700;color:#34d399;font-size:0.95rem">HEALTHY</div>
<div style="font-size:0.78rem;color:#6ee7b7;margin-top:0.25rem">Full flow rate &mdash; balanced operations, normal outflow</div>
</div>
<!-- Min line -->
<div style="border-bottom:2px dashed rgba(239,68,68,0.4);padding:0.2rem 0;font-size:0.7rem;font-weight:700;color:#ef4444;background:rgba(239,68,68,0.04)">
MIN THRESHOLD
</div>
<!-- Critical -->
<div style="background:rgba(51,65,85,0.2);border:1px solid rgba(71,85,105,0.25);border-radius:0 0 0.75rem 0.75rem;padding:1rem 1.5rem">
<div style="font-weight:700;color:#f87171;font-size:0.95rem">CRITICAL</div>
<div style="font-size:0.78rem;color:#fca5a5;margin-top:0.25rem">Below min &mdash; outflow restricted, conservation mode</div>
</div>
</div>
</div>
</section>
<!-- Ecosystem Integration -->
<!-- Ecosystem -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Ecosystem Integration</h2>
<h2 class="rl-heading" style="text-align:center">Connects to Your Stack</h2>
<p class="rl-subtext" style="text-align:center">
rFlows connects to other rSpace modules for end-to-end treasury governance.
rFlows plugs into other rSpace modules for end-to-end treasury governance.
</p>
<div class="rl-grid-2" style="max-width:700px;margin:0 auto">
<div class="rl-grid-3" style="max-width:900px;margin:0 auto">
<div class="rl-integration">
<div class="rl-icon-box">&#128176;</div>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">&#128176;</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>
<p>On-chain balances feed into funnels as real-time deposits. Multi-sig wallets as funding sources.</p>
</div>
</div>
<div class="rl-integration">
<div class="rl-icon-box">&#128499;</div>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#8b5cf6,rgba(139,92,246,0.6))">&#128499;</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>
<h3><a href="/rvote" style="color:#8b5cf6;text-decoration:none">rVote</a></h3>
<p>Governance decisions set flow thresholds and allocation percentages through formal proposals.</p>
</div>
</div>
<div class="rl-integration">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">&#128202;</div>
<div>
<h3><a href="/rdata" style="color:#0891b2;text-decoration:none">rData</a></h3>
<p>Analytics dashboards pull from flow events &mdash; track deposits, withdrawals, and allocation history.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Built on Open Source -->
<!-- Under the Hood -->
<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 rFlows.</p>
<div class="rl-grid-3">
<h2 class="rl-heading" style="text-align:center">Under the Hood</h2>
<div class="rl-grid-4">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127754;</div>
<h3>Flow Service</h3>
<p>Custom budget flow engine powering the river visualization and conviction-based allocation logic.</p>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">&#127754;</div>
<h3>Flow Engine</h3>
<p>Custom allocation engine computes overflow cascades, spending splits, and threshold responses in real-time.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128451;</div>
<h3>PostgreSQL</h3>
<p>Reliable relational storage for space-flow associations, transaction history, and pool balances.</p>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#6366f1,rgba(99,102,241,0.6))">&#128274;</div>
<h3>EncryptID</h3>
<p>Passkey-based auth &mdash; no passwords, no seed phrases. Sign in with biometrics to save flows to your space.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#9889;</div>
<h3>Hono</h3>
<p>Ultrafast web framework for the API layer &mdash; lightweight, typed, and edge-ready.</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 rFlows keeps your information safe.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128274;</div>
<h3>End-to-End Encryption</h3>
<span class="rl-badge">Coming Soon</span>
<p>All content encrypted before it leaves your device. Not even the server can read it.</p>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">&#128260;</div>
<h3>Automerge CRDT</h3>
<p>Real-time sync across collaborators. Multiple people can edit flows simultaneously with automatic conflict resolution.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128373;</div>
<h3>Zero-Knowledge Architecture</h3>
<span class="rl-badge">Coming Soon</span>
<p>The server 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">&#127968;</div>
<h3>Self-Hosted</h3>
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">&#127760;</div>
<h3>Local-First</h3>
<p>Works offline. Changes sync when you reconnect. Your data lives on your device first, server second.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="rl-section rl-section--alt">
<section class="rl-section">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">Ready to design your funding flows?</h2>
<p class="rl-subtext">Start with the interactive demo or create your own space with custom funnels and connections.</p>
<h2 class="rl-heading">Ready to model your funding flows?</h2>
<p class="rl-subtext">Build a flow in the demo, then save it to your own space with one click.</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rflows" class="rl-cta-primary">Try the Demo</a>
<a href="/create-space" class="rl-cta-secondary">Create Your Own</a>
<a href="https://demo.rspace.online/rflows" class="rl-cta-primary">Open the Demo &rarr;</a>
<a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
</div>
</div>
</section>