117 lines
4.6 KiB
TypeScript
117 lines
4.6 KiB
TypeScript
/**
|
|
* rVote demo page — server-rendered HTML body.
|
|
*
|
|
* Embeds the full <folk-vote-dashboard space="demo"> component for
|
|
* real interactivity (browse spaces, create proposals, cast conviction
|
|
* votes, binary final votes) plus showcase sections explaining the rVote vision.
|
|
*/
|
|
|
|
const FEATURES = [
|
|
{
|
|
icon: "\u{1F4CA}",
|
|
title: "Conviction Voting",
|
|
desc: "Stake credits on proposals you support. Weight costs credits quadratically (weight\u00B2), preventing plutocratic capture while rewarding conviction.",
|
|
},
|
|
{
|
|
icon: "\u{1F3AF}",
|
|
title: "Promotion Threshold",
|
|
desc: "Proposals accumulate conviction score. When they hit the threshold, they auto-promote to a binary YES/NO/ABSTAIN final vote.",
|
|
},
|
|
{
|
|
icon: "\u23F3",
|
|
title: "Vote Decay",
|
|
desc: "Conviction decays after 30 days. This ensures ongoing relevance — stale votes fade, keeping governance dynamic and current.",
|
|
},
|
|
{
|
|
icon: "\u{1F3DB}\uFE0F",
|
|
title: "Governance Spaces",
|
|
desc: "Each community gets its own voting space with configurable thresholds, credit budgets, and voting periods.",
|
|
},
|
|
];
|
|
|
|
const INTEGRATIONS = [
|
|
{ icon: "\u{1F30A}", name: "rFunds", desc: "Passed proposals trigger funding flows. Vote on budget allocations and threshold adjustments." },
|
|
{ icon: "\u{1F4DD}", name: "rNotes", desc: "Link supporting research, discussion threads, and rationale documents to proposals." },
|
|
{ icon: "\u{1F4C5}", name: "rCal", desc: "Voting deadlines, governance meetings, and proposal review periods on the calendar." },
|
|
{ icon: "\u{1F465}", name: "rNetwork", desc: "Delegate voting power to trusted network members. Liquid democracy across communities." },
|
|
{ icon: "\u{1F6D2}", name: "rCart", desc: "Vote on merchandise decisions, provider selection, and catalog curation." },
|
|
{ icon: "\u2615\uFE0F", name: "rSpace", desc: "Each space has its own governance layer. Nest voting across spaces for multi-community decisions." },
|
|
];
|
|
|
|
export function renderDemo(): string {
|
|
return `
|
|
<div class="rd-root" style="--rd-accent-from:#f97316; --rd-accent-to:#fb923c;">
|
|
|
|
<!-- Hero -->
|
|
<section class="rd-hero">
|
|
<div style="display:inline-block;padding:0.375rem 1rem;background:rgba(249,115,22,0.1);border:1px solid rgba(249,115,22,0.2);border-radius:9999px;font-size:0.875rem;color:#fdba74;font-weight:500;margin-bottom:1.5rem;">
|
|
Conviction Voting Engine
|
|
</div>
|
|
<h1>rVote Demo</h1>
|
|
<p class="rd-subtitle">Credit-weighted conviction voting for collaborative governance decisions</p>
|
|
<div class="rd-meta">
|
|
<span>\u{1F4CA} Conviction Voting</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u{1F3AF} Thresholds</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u23F3 Vote Decay</span>
|
|
<span style="color:#475569">|</span>
|
|
<span>\u{1F3DB}\uFE0F Governance</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Vote Dashboard -->
|
|
<section class="rd-section rd-section--narrow">
|
|
<div class="rd-card" style="padding:0;overflow:hidden;">
|
|
<folk-vote-dashboard space="demo"></folk-vote-dashboard>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Core Concepts -->
|
|
<section class="rd-section">
|
|
<div class="rd-grid rd-grid--2">
|
|
${FEATURES.map(
|
|
(f) => `
|
|
<div class="rd-card" style="padding:1.5rem;">
|
|
<div style="font-size:1.75rem;margin-bottom:0.75rem;">${f.icon}</div>
|
|
<h3 style="font-size:1rem;font-weight:600;color:#e2e8f0;margin:0 0 0.5rem;">${f.title}</h3>
|
|
<p style="font-size:0.875rem;color:#94a3b8;margin:0;line-height:1.5;">${f.desc}</p>
|
|
</div>`,
|
|
).join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ecosystem Integrations -->
|
|
<section class="rd-section">
|
|
<h2 style="text-align:center;font-size:1.25rem;font-weight:700;color:#f1f5f9;margin:0 0 1.5rem;">
|
|
r* Ecosystem Integrations
|
|
</h2>
|
|
<div class="rd-grid rd-grid--3">
|
|
${INTEGRATIONS.map(
|
|
(i) => `
|
|
<div class="rd-card" style="padding:1.25rem;">
|
|
<div style="font-size:1.5rem;margin-bottom:0.5rem;">${i.icon}</div>
|
|
<h3 style="font-size:0.875rem;font-weight:600;color:#e2e8f0;margin:0 0 0.375rem;">${i.name}</h3>
|
|
<p style="font-size:0.8rem;color:#94a3b8;margin:0;line-height:1.4;">${i.desc}</p>
|
|
</div>`,
|
|
).join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rd-section rd-section--narrow">
|
|
<div class="rd-cta">
|
|
<h2>Govern Together</h2>
|
|
<p>
|
|
rVote brings conviction-weighted governance to your community.
|
|
Proposals rise through collective conviction, not majority rule.
|
|
</p>
|
|
<a href="/create-space" style="background:linear-gradient(135deg,#f97316,#fb923c);box-shadow:0 8px 24px rgba(249,115,22,0.25);">
|
|
Create Your Space
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>`;
|
|
}
|