121 lines
4.5 KiB
TypeScript
121 lines
4.5 KiB
TypeScript
/**
|
|
* rChoices — rich landing page body.
|
|
* Returned by landingPage() in the module export;
|
|
* the shell wraps it with header, CSS, and analytics.
|
|
*/
|
|
export function renderLanding(): string {
|
|
const demo = "https://demo.rspace.online/rchoices";
|
|
|
|
return `
|
|
<!-- Hero -->
|
|
<section class="rl-hero">
|
|
<span class="rl-tagline">rChoices</span>
|
|
<h1 class="rl-heading">Decide Together, Fairly</h1>
|
|
<p class="rl-subtext">
|
|
Quadratic voting, ranked choice, and multi-criteria scoring — all as
|
|
interactive shapes on your canvas. Drop a choice, let members vote,
|
|
watch results emerge in real time.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="${demo}" class="rl-cta-primary" id="ml-primary">Make Better Decisions</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Create a Choice Shape</h3>
|
|
<p>Pick a voting method, name it, and add options. The shape appears on the canvas.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Members Vote</h3>
|
|
<p>Space members interact with the shape to cast votes, rank preferences, or score criteria.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Results Emerge</h3>
|
|
<p>Live tallies update as votes arrive. View charts, rankings, and spider diagrams in real time.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Voting Methods -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Voting Methods</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
Three powerful mechanisms, each designed for different decision contexts.
|
|
</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">⚖</div>
|
|
<h3>Quadratic Voting</h3>
|
|
<p>Express intensity of preference. The cost of additional votes on one option grows exponentially, balancing passion with fairness.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📋</div>
|
|
<h3>Ranked Choice</h3>
|
|
<p>Order your preferences from first to last. Instant-runoff tabulation finds the option with the broadest support.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🕸</div>
|
|
<h3>Multi-Criteria Scoring</h3>
|
|
<p>Score options across weighted attributes. Spider diagrams reveal trade-offs at a glance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🎨</div>
|
|
<h3>Canvas Integration</h3>
|
|
<p>Choice shapes live on the canvas alongside notes, images, and other shapes — full spatial context.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">⚡</div>
|
|
<h3>Real-time Results</h3>
|
|
<p>Tallies, rankings, and spider charts update live as members vote via Automerge CRDT sync.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔧</div>
|
|
<h3>Configurable Parameters</h3>
|
|
<p>Set vote budgets, deadlines, anonymity, and quorum thresholds per choice shape.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">☑</div>
|
|
<h3>rVote Integration</h3>
|
|
<p>Connect to <a href="/rvote" style="color:#14b8a6">rVote</a> for formal governance proposals backed by on-canvas choices.</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">Better Decisions Start Here</h2>
|
|
<p class="rl-subtext">
|
|
Drop a choice shape on your canvas and let your community weigh in.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="${demo}" class="rl-cta-primary">Make Better Decisions</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>`;
|
|
}
|