186 lines
8.6 KiB
TypeScript
186 lines
8.6 KiB
TypeScript
/**
|
|
* rVote landing page — democratic backlog prioritization.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rVote</span>
|
|
<h1 class="rl-heading">Democratic Backlog<br>Prioritization</h1>
|
|
<p class="rl-subtext">
|
|
Quadratic conviction voting with time-decay. Surface the ideas your community actually cares about —
|
|
not just the loudest voices.
|
|
(You)rVote, your voice.
|
|
</p>
|
|
<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="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ELI5 -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Three ideas, one system</h2>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<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>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>
|
|
</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"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
</div>
|
|
<h3>Vote Decay</h3>
|
|
<p>Votes lose weight over 30–60 days. Stale support fades automatically — no need to manually close polls.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What is QPR -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<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-card">
|
|
<h3 style="color:#f87171">The Problem</h3>
|
|
<p>Traditional voting (1 person = 1 vote) lets small, passionate groups dominate.
|
|
Token-weighted voting lets whales decide everything. Neither reflects genuine community preference.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3 style="color:#14b8a6">The Solution</h3>
|
|
<p>Quadratic voting makes strong preferences expensive. You <em>can</em> signal that you care a lot —
|
|
but it costs quadratically more. This balances intensity of preference with breadth of support.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Vote Cost Calculator -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<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>
|
|
<div class="rl-card" style="max-width:500px;margin:2rem auto 0">
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0.5rem;text-align:center">
|
|
<div>
|
|
<div style="font-size:1.5rem;font-weight:700;color:#14b8a6">1</div>
|
|
<div style="font-size:0.7rem;color:#64748b">vote</div>
|
|
<div style="font-size:0.85rem;font-weight:600;color:#e2e8f0;margin-top:0.25rem">1 credit</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:1.5rem;font-weight:700;color:#14b8a6">2</div>
|
|
<div style="font-size:0.7rem;color:#64748b">votes</div>
|
|
<div style="font-size:0.85rem;font-weight:600;color:#e2e8f0;margin-top:0.25rem">4 credits</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:1.5rem;font-weight:700;color:#14b8a6">3</div>
|
|
<div style="font-size:0.7rem;color:#64748b">votes</div>
|
|
<div style="font-size:0.85rem;font-weight:600;color:#e2e8f0;margin-top:0.25rem">9 credits</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:1.5rem;font-weight:700;color:#14b8a6">4</div>
|
|
<div style="font-size:0.7rem;color:#64748b">votes</div>
|
|
<div style="font-size:0.85rem;font-weight:600;color:#e2e8f0;margin-top:0.25rem">16 credits</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:1.5rem;font-weight:700;color:#14b8a6">5</div>
|
|
<div style="font-size:0.7rem;color:#64748b">votes</div>
|
|
<div style="font-size:0.85rem;font-weight:600;color:#e2e8f0;margin-top:0.25rem">25 credits</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How it works: 3 stages -->
|
|
<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">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built for real governance</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="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
</div>
|
|
<h3>Earn Credits Daily</h3>
|
|
<p>Every verified member receives a daily credit allowance. No pay-to-play.</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="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
</div>
|
|
<h3>Vote Decay</h3>
|
|
<p>Votes decay linearly from day 30 to day 60. Stale support fades, keeping rankings fresh.</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>Sybil Resistant</h3>
|
|
<p>Passkey authentication via EncryptID. One person, one identity, one credit stream.</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="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
|
|
</div>
|
|
<h3>Auto Promotion</h3>
|
|
<p>Proposals that hit the threshold automatically move to a final pass/fail vote. No admin bottleneck.</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 prioritize democratically?</h2>
|
|
<p class="rl-subtext">
|
|
Create a governance space, submit proposals, and let your community decide what matters most.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rvote" class="rl-cta-primary" id="ml-primary">Open rVote</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>`;
|
|
}
|