235 lines
10 KiB
TypeScript
235 lines
10 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">(You)rVote, your voice.</h1>
|
|
<p class="rl-subtitle">Democratic Backlog Prioritization</p>
|
|
<p class="rl-subtext">
|
|
Quadratic conviction voting with time-decay. Surface the ideas your community actually cares about —
|
|
not just the loudest voices.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rvote" class="rl-cta-primary" id="ml-primary">Start Voting</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 rVote Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<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>Conviction Voting</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">⚖</div>
|
|
<h3>Quadratic Voting</h3>
|
|
<p>Each additional vote costs quadratically more credits. Balances intensity of preference with breadth of support.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🕐</div>
|
|
<h3>Proposal Lifecycle</h3>
|
|
<p>From ranking through promotion to final pass/fail vote. Proposals advance automatically when thresholds are met.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏛</div>
|
|
<h3>Democratic Governance</h3>
|
|
<p>Daily credit allowances, vote decay, and sybil resistance. One person, one identity, one voice.</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">
|
|
<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>
|
|
|
|
<!-- What is QPR -->
|
|
<section class="rl-section">
|
|
<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 rl-section--alt">
|
|
<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>
|
|
|
|
<!-- Built for real governance -->
|
|
<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>
|
|
|
|
<!-- 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 rVote.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🗃</div>
|
|
<h3>PostgreSQL</h3>
|
|
<p>Rock-solid relational database for proposals, votes, credit balances, and governance history.</p>
|
|
</div>
|
|
<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>Conviction Voting Algorithm</h3>
|
|
<p>Continuous preference signaling with quadratic cost and time-decay. Open-source governance math.</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, edge-ready, and built for speed.</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 rVote 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">(You)rVote, your voice.</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/rvote" class="rl-cta-primary">Start Voting</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>`;
|
|
}
|