508 lines
27 KiB
TypeScript
508 lines
27 KiB
TypeScript
/**
|
|
* rFlows — 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 `
|
|
<style>
|
|
/* ── Landing animations ── */
|
|
@keyframes rf-flow-particle {
|
|
0% { offset-distance: 0%; opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { offset-distance: 100%; opacity: 0; }
|
|
}
|
|
@keyframes rf-fill-cycle {
|
|
0% { height: 15%; }
|
|
25% { height: 85%; }
|
|
50% { height: 60%; }
|
|
75% { height: 30%; }
|
|
100% { height: 15%; }
|
|
}
|
|
@keyframes rf-pulse {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 1; }
|
|
}
|
|
@keyframes rf-river-flow {
|
|
0% { stroke-dashoffset: 40; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
@keyframes rf-glow {
|
|
0%, 100% { filter: drop-shadow(0 0 4px rgba(251,191,36,0.3)); }
|
|
50% { filter: drop-shadow(0 0 12px rgba(251,191,36,0.6)); }
|
|
}
|
|
@keyframes rf-edge-flow {
|
|
0% { stroke-dashoffset: 20; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
@keyframes rf-hero-float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
.rf-anim-wrap {
|
|
max-width: 700px;
|
|
margin: 2rem auto 0;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(51,65,85,0.3);
|
|
background: rgba(15,23,42,0.4);
|
|
}
|
|
.rf-anim-wrap svg { display: block; width: 100%; height: auto; }
|
|
|
|
/* Responsive: hide animations on very small screens */
|
|
@media (max-width: 480px) {
|
|
.rf-anim-wrap { display: none; }
|
|
}
|
|
</style>
|
|
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rFlows</span>
|
|
<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">
|
|
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> — then save it to your space.
|
|
</p>
|
|
|
|
<!-- Animated hero diagram: 3 funnels with flowing particles -->
|
|
<div class="rf-anim-wrap" style="animation: rf-hero-float 6s ease-in-out infinite;border:1px solid rgba(251,191,36,0.15);background:rgba(15,23,42,0.6)">
|
|
<svg viewBox="0 0 700 260" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<!-- Funnel gradients -->
|
|
<linearGradient id="rf-g-amber" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#fbbf24" stop-opacity="0.3"/>
|
|
<stop offset="100%" stop-color="#f59e0b" stop-opacity="0.08"/>
|
|
</linearGradient>
|
|
<linearGradient id="rf-g-green" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#34d399" stop-opacity="0.3"/>
|
|
<stop offset="100%" stop-color="#10b981" stop-opacity="0.08"/>
|
|
</linearGradient>
|
|
<linearGradient id="rf-g-blue" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#60a5fa" stop-opacity="0.3"/>
|
|
<stop offset="100%" stop-color="#3b82f6" stop-opacity="0.08"/>
|
|
</linearGradient>
|
|
<!-- Flow paths for particles -->
|
|
<path id="rf-path1" d="M 230 100 C 280 100, 300 100, 330 100" fill="none"/>
|
|
<path id="rf-path2" d="M 470 100 C 520 100, 540 130, 560 160" fill="none"/>
|
|
<path id="rf-path3" d="M 230 140 C 260 160, 280 190, 300 210" fill="none"/>
|
|
</defs>
|
|
|
|
<!-- Source funnel -->
|
|
<g>
|
|
<rect x="80" y="40" width="150" height="180" rx="12" fill="url(#rf-g-amber)" stroke="#fbbf2440" stroke-width="1"/>
|
|
<!-- Threshold lines -->
|
|
<line x1="90" y1="80" x2="220" y2="80" stroke="#fbbf24" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
|
|
<line x1="90" y1="160" x2="220" y2="160" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
|
|
<!-- Animated fill -->
|
|
<rect x="88" y="60" width="134" height="152" rx="8" fill="#fbbf24" opacity="0.12">
|
|
<animate attributeName="y" values="60;100;60;140;60" dur="8s" repeatCount="indefinite"/>
|
|
<animate attributeName="height" values="152;112;152;72;152" dur="8s" repeatCount="indefinite"/>
|
|
</rect>
|
|
<text x="155" y="35" text-anchor="middle" fill="#fbbf24" font-size="11" font-weight="600" font-family="system-ui">Source Pool</text>
|
|
<text x="155" y="135" text-anchor="middle" fill="#fbbf24" font-size="22" opacity="0.7">🌊</text>
|
|
</g>
|
|
|
|
<!-- Middle funnel -->
|
|
<g>
|
|
<rect x="320" y="40" width="150" height="180" rx="12" fill="url(#rf-g-green)" stroke="#34d39940" stroke-width="1"/>
|
|
<line x1="330" y1="80" x2="460" y2="80" stroke="#34d399" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
|
|
<line x1="330" y1="160" x2="460" y2="160" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
|
|
<rect x="328" y="90" width="134" height="122" rx="8" fill="#34d399" opacity="0.12">
|
|
<animate attributeName="y" values="90;70;90;110;90" dur="8s" begin="1s" repeatCount="indefinite"/>
|
|
<animate attributeName="height" values="122;142;122;102;122" dur="8s" begin="1s" repeatCount="indefinite"/>
|
|
</rect>
|
|
<text x="395" y="35" text-anchor="middle" fill="#34d399" font-size="11" font-weight="600" font-family="system-ui">Operations</text>
|
|
<text x="395" y="135" text-anchor="middle" fill="#34d399" font-size="22" opacity="0.7">⚙️</text>
|
|
</g>
|
|
|
|
<!-- Outcome funnel -->
|
|
<g>
|
|
<rect x="500" y="120" width="130" height="120" rx="12" fill="url(#rf-g-blue)" stroke="#60a5fa40" stroke-width="1"/>
|
|
<rect x="508" y="140" width="114" height="92" rx="8" fill="#60a5fa" opacity="0.12">
|
|
<animate attributeName="y" values="170;140;170;190;170" dur="8s" begin="2s" repeatCount="indefinite"/>
|
|
<animate attributeName="height" values="62;92;62;42;62" dur="8s" begin="2s" repeatCount="indefinite"/>
|
|
</rect>
|
|
<text x="565" y="115" text-anchor="middle" fill="#60a5fa" font-size="11" font-weight="600" font-family="system-ui">Outcomes</text>
|
|
<text x="565" y="185" text-anchor="middle" fill="#60a5fa" font-size="20" opacity="0.7">🎯</text>
|
|
</g>
|
|
|
|
<!-- Overflow edge: Source → Operations -->
|
|
<path d="M 230 90 C 265 90, 290 90, 320 90" fill="none" stroke="#fbbf24" stroke-width="3" opacity="0.35" stroke-dasharray="6 4">
|
|
<animate attributeName="stroke-dashoffset" values="20;0" dur="1.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<text x="275" y="82" text-anchor="middle" fill="#fbbf24" font-size="9" font-weight="600" opacity="0.7">40%</text>
|
|
<!-- Particles -->
|
|
<circle r="3" fill="#fbbf24" opacity="0">
|
|
<animateMotion dur="2s" repeatCount="indefinite" begin="0s"><mpath href="#rf-path1"/></animateMotion>
|
|
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="0s"/>
|
|
</circle>
|
|
<circle r="2.5" fill="#fbbf24" opacity="0">
|
|
<animateMotion dur="2s" repeatCount="indefinite" begin="0.7s"><mpath href="#rf-path1"/></animateMotion>
|
|
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="0.7s"/>
|
|
</circle>
|
|
|
|
<!-- Spending edge: Operations → Outcomes -->
|
|
<path d="M 470 130 C 490 140, 500 155, 510 170" fill="none" stroke="#34d399" stroke-width="2.5" opacity="0.35" stroke-dasharray="5 4">
|
|
<animate attributeName="stroke-dashoffset" values="18;0" dur="1.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<text x="500" y="140" text-anchor="middle" fill="#34d399" font-size="9" font-weight="600" opacity="0.7">60%</text>
|
|
<circle r="2.5" fill="#34d399" opacity="0">
|
|
<animateMotion dur="2.5s" repeatCount="indefinite" begin="0.3s"><mpath href="#rf-path2"/></animateMotion>
|
|
<animate attributeName="opacity" values="0;1;1;0" dur="2.5s" repeatCount="indefinite" begin="0.3s"/>
|
|
</circle>
|
|
|
|
<!-- Spending edge: Source → (bottom) -->
|
|
<path d="M 180 220 L 180 250" fill="none" stroke="#f59e0b" stroke-width="2" opacity="0.25" stroke-dasharray="4 3">
|
|
<animate attributeName="stroke-dashoffset" values="14;0" dur="1.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
<text x="195" y="245" fill="#f59e0b" font-size="8" opacity="0.5">spending</text>
|
|
|
|
<!-- Labels -->
|
|
<text x="76" y="82" text-anchor="end" fill="#fbbf24" font-size="8" opacity="0.5">max</text>
|
|
<text x="76" y="162" text-anchor="end" fill="#ef4444" font-size="8" opacity="0.5">min</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="rl-cta-row" style="margin-top:2rem">
|
|
<a href="https://demo.rspace.online/rflows" class="rl-cta-primary" id="ml-primary">
|
|
Try the Demo →
|
|
</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>
|
|
|
|
<!-- 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))">🌊</div>
|
|
<h3>Funnel Budgets</h3>
|
|
<p>Each funding pool is a funnel with three zones — overflow, healthy, and critical — 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))">🔄</div>
|
|
<h3>Overflow Routing</h3>
|
|
<p>When a funnel exceeds its max threshold, excess funds automatically redistribute to connected pools — 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))">📈</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))">🌎</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-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-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 & 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>
|
|
|
|
<!-- Animated river visualization -->
|
|
<div class="rf-anim-wrap" style="margin-top:2.5rem;border-color:rgba(52,211,153,0.15)">
|
|
<svg viewBox="0 0 700 180" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="rf-river-g1" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#fbbf24" stop-opacity="0.6"/>
|
|
<stop offset="100%" stop-color="#34d399" stop-opacity="0.6"/>
|
|
</linearGradient>
|
|
<linearGradient id="rf-river-g2" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#34d399" stop-opacity="0.5"/>
|
|
<stop offset="100%" stop-color="#60a5fa" stop-opacity="0.5"/>
|
|
</linearGradient>
|
|
<linearGradient id="rf-river-g3" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#34d399" stop-opacity="0.4"/>
|
|
<stop offset="100%" stop-color="#a78bfa" stop-opacity="0.4"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Source labels -->
|
|
<text x="30" y="55" fill="#fbbf24" font-size="10" font-weight="600" font-family="system-ui">Revenue</text>
|
|
<text x="30" y="115" fill="#34d399" font-size="10" font-weight="600" font-family="system-ui">Grants</text>
|
|
|
|
<!-- Destination labels -->
|
|
<text x="620" y="40" fill="#60a5fa" font-size="10" font-weight="600" font-family="system-ui">Team A</text>
|
|
<text x="620" y="95" fill="#a78bfa" font-size="10" font-weight="600" font-family="system-ui">Team B</text>
|
|
<text x="620" y="150" fill="#34d399" font-size="10" font-weight="600" font-family="system-ui">Reserve</text>
|
|
|
|
<!-- River bands — wide flowing Bezier paths with dashed animation -->
|
|
<!-- Revenue → Team A (wide band) -->
|
|
<path d="M 90 45 C 250 45, 400 30, 610 35" fill="none" stroke="url(#rf-river-g2)" stroke-width="18" stroke-linecap="round" opacity="0.5" stroke-dasharray="8 12">
|
|
<animate attributeName="stroke-dashoffset" values="40;0" dur="3s" repeatCount="indefinite"/>
|
|
</path>
|
|
|
|
<!-- Revenue → Team B (medium band) -->
|
|
<path d="M 90 55 C 250 60, 400 80, 610 90" fill="none" stroke="url(#rf-river-g3)" stroke-width="10" stroke-linecap="round" opacity="0.4" stroke-dasharray="6 10">
|
|
<animate attributeName="stroke-dashoffset" values="32;0" dur="3.5s" repeatCount="indefinite"/>
|
|
</path>
|
|
|
|
<!-- Grants → Team B -->
|
|
<path d="M 90 110 C 250 108, 400 95, 610 92" fill="none" stroke="url(#rf-river-g3)" stroke-width="8" stroke-linecap="round" opacity="0.35" stroke-dasharray="5 8">
|
|
<animate attributeName="stroke-dashoffset" values="26;0" dur="4s" repeatCount="indefinite"/>
|
|
</path>
|
|
|
|
<!-- Grants → Reserve -->
|
|
<path d="M 90 118 C 250 125, 400 140, 610 145" fill="none" stroke="#34d399" stroke-width="14" stroke-linecap="round" opacity="0.3" stroke-dasharray="7 10">
|
|
<animate attributeName="stroke-dashoffset" values="34;0" dur="3.2s" repeatCount="indefinite"/>
|
|
</path>
|
|
|
|
<!-- Flow particles along revenue path -->
|
|
<circle r="3" fill="#fbbf24" opacity="0.8">
|
|
<animate attributeName="cx" values="90;610" dur="4s" repeatCount="indefinite"/>
|
|
<animate attributeName="cy" values="45;35" dur="4s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0;0.9;0.9;0" dur="4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="2.5" fill="#34d399" opacity="0.7">
|
|
<animate attributeName="cx" values="90;610" dur="5s" begin="1s" repeatCount="indefinite"/>
|
|
<animate attributeName="cy" values="118;145" dur="5s" begin="1s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0;0.8;0.8;0" dur="5s" begin="1s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Subtle grid lines -->
|
|
<line x1="90" y1="10" x2="90" y2="170" stroke="#334155" stroke-width="0.5" opacity="0.3"/>
|
|
<line x1="610" y1="10" x2="610" y2="170" stroke="#334155" stroke-width="0.5" opacity="0.3"/>
|
|
|
|
<!-- Title -->
|
|
<text x="350" y="174" text-anchor="middle" fill="#64748b" font-size="9" font-family="system-ui">River view — all flows from source to outcome</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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 — 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>
|
|
</section>
|
|
|
|
<!-- The Funnel Metaphor -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<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="display:flex;gap:2rem;align-items:flex-start;justify-content:center;flex-wrap:wrap;margin-top:2rem">
|
|
<!-- Animated funnel SVG -->
|
|
<div class="rf-anim-wrap" style="max-width:280px;flex:0 0 auto;border-color:rgba(251,191,36,0.15)">
|
|
<svg viewBox="0 0 200 280" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Funnel body -->
|
|
<rect x="30" y="20" width="140" height="240" rx="14" fill="none" stroke="#334155" stroke-width="1.5"/>
|
|
|
|
<!-- Zone backgrounds -->
|
|
<rect x="32" y="22" width="136" height="70" rx="12" fill="#fbbf24" opacity="0.06"/>
|
|
<rect x="32" y="92" width="136" height="90" fill="#34d399" opacity="0.06"/>
|
|
<rect x="32" y="182" width="136" height="76" rx="12" fill="#475569" opacity="0.08"/>
|
|
|
|
<!-- Animated water fill -->
|
|
<clipPath id="rf-funnel-clip"><rect x="32" y="22" width="136" height="236" rx="12"/></clipPath>
|
|
<g clip-path="url(#rf-funnel-clip)">
|
|
<!-- Water body -->
|
|
<rect x="32" width="136" height="200" fill="#3b82f6" opacity="0.15">
|
|
<animate attributeName="y" values="120;40;80;160;120" dur="10s" repeatCount="indefinite"/>
|
|
</rect>
|
|
<!-- Water surface shimmer -->
|
|
<rect x="32" width="136" height="4" fill="#60a5fa" opacity="0.3">
|
|
<animate attributeName="y" values="120;40;80;160;120" dur="10s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</g>
|
|
|
|
<!-- Threshold lines -->
|
|
<line x1="28" y1="92" x2="172" y2="92" stroke="#fbbf24" stroke-width="2" stroke-dasharray="6 4"/>
|
|
<line x1="28" y1="182" x2="172" y2="182" stroke="#ef4444" stroke-width="2" stroke-dasharray="6 4"/>
|
|
|
|
<!-- Zone labels -->
|
|
<text x="100" y="58" text-anchor="middle" fill="#fbbf24" font-size="11" font-weight="700" font-family="system-ui">OVERFLOW</text>
|
|
<text x="100" y="72" text-anchor="middle" fill="#fbbf24" font-size="8" opacity="0.6" font-family="system-ui">excess redistributes</text>
|
|
|
|
<text x="100" y="138" text-anchor="middle" fill="#34d399" font-size="11" font-weight="700" font-family="system-ui">HEALTHY</text>
|
|
<text x="100" y="152" text-anchor="middle" fill="#34d399" font-size="8" opacity="0.6" font-family="system-ui">normal flow rate</text>
|
|
|
|
<text x="100" y="218" text-anchor="middle" fill="#f87171" font-size="11" font-weight="700" font-family="system-ui">CRITICAL</text>
|
|
<text x="100" y="232" text-anchor="middle" fill="#f87171" font-size="8" opacity="0.6" font-family="system-ui">outflow restricted</text>
|
|
|
|
<!-- Threshold labels -->
|
|
<text x="180" y="96" fill="#fbbf24" font-size="9" font-weight="600" font-family="system-ui">MAX</text>
|
|
<text x="180" y="186" fill="#ef4444" font-size="9" font-weight="600" font-family="system-ui">MIN</text>
|
|
|
|
<!-- Overflow arrow (appears when high) -->
|
|
<g opacity="0">
|
|
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
|
|
<path d="M 170 55 L 195 55" stroke="#fbbf24" stroke-width="2" fill="none" marker-end="none"/>
|
|
<polygon points="192,50 200,55 192,60" fill="#fbbf24"/>
|
|
<text x="172" y="48" fill="#fbbf24" font-size="7" font-family="system-ui">overflow</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Text description alongside -->
|
|
<div style="max-width:22rem;flex:1 1 18rem;padding-top:0.5rem">
|
|
<div style="margin-bottom:1.5rem">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
|
|
<span style="width:12px;height:12px;border-radius:3px;background:#fbbf24;display:inline-block"></span>
|
|
<strong style="color:#fbbf24;font-size:0.95rem">Overflow Zone</strong>
|
|
</div>
|
|
<p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
|
|
When funds exceed the max threshold, the excess automatically redistributes to connected funnels via overflow edges.
|
|
</p>
|
|
</div>
|
|
<div style="margin-bottom:1.5rem">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
|
|
<span style="width:12px;height:12px;border-radius:3px;background:#34d399;display:inline-block"></span>
|
|
<strong style="color:#34d399;font-size:0.95rem">Healthy Zone</strong>
|
|
</div>
|
|
<p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
|
|
Between min and max, the funnel operates normally. All outflow edges run at their configured allocation rates.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
|
|
<span style="width:12px;height:12px;border-radius:3px;background:#f87171;display:inline-block"></span>
|
|
<strong style="color:#f87171;font-size:0.95rem">Critical Zone</strong>
|
|
</div>
|
|
<p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
|
|
Below the min threshold, outflow is restricted to protect essential reserves. The funnel enters conservation mode.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ecosystem -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Connects to Your Stack</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
rFlows plugs into other rSpace modules for end-to-end treasury governance.
|
|
</p>
|
|
<div class="rl-grid-3" style="max-width:900px;margin:0 auto">
|
|
<div class="rl-integration">
|
|
<div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">💰</div>
|
|
<div>
|
|
<h3><a href="/rwallet" style="color:#14b8a6;text-decoration:none">rWallet</a></h3>
|
|
<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" style="background:linear-gradient(135deg,#8b5cf6,rgba(139,92,246,0.6))">🗳</div>
|
|
<div>
|
|
<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))">📊</div>
|
|
<div>
|
|
<h3><a href="/rdata" style="color:#0891b2;text-decoration:none">rData</a></h3>
|
|
<p>Analytics dashboards pull from flow events — track deposits, withdrawals, and allocation history.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Under the Hood -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<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" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">🌊</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" style="background:linear-gradient(135deg,#6366f1,rgba(99,102,241,0.6))">🔒</div>
|
|
<h3>EncryptID</h3>
|
|
<p>Passkey-based auth — 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" style="background:linear-gradient(135deg,#22c55e,#059669)">🔄</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" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">🌐</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">
|
|
<div class="rl-container" style="text-align:center">
|
|
<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">Open the Demo →</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|