170 lines
6.5 KiB
TypeScript
170 lines
6.5 KiB
TypeScript
/**
|
|
* 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 {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rFunds</span>
|
|
<h1 class="rl-heading">(You)rFunds, your flow.</h1>
|
|
<p class="rl-subtitle">Visualize Your Community's Money</p>
|
|
<p class="rl-subtext">
|
|
Budget flows, river visualization, and conviction funding.
|
|
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>
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|