212 lines
9.8 KiB
TypeScript
212 lines
9.8 KiB
TypeScript
/**
|
|
* rFunds — rich landing page body.
|
|
* Ported from rfunds-online/app/page.tsx (Next.js/Tailwind).
|
|
* 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" 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>
|
|
<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>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rfunds" class="rl-cta-secondary" id="ml-primary">Try the Demo</a>
|
|
<a href="/create-space" class="rl-cta-primary">Create Your Own</a>
|
|
</div>
|
|
</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-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>
|
|
|
|
<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>
|
|
|
|
<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 & 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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>
|
|
|
|
</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 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 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">
|
|
<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 rl-section--alt">
|
|
<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>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rfunds" class="rl-cta-primary">Try the Demo</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create Your Own</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|