302 lines
17 KiB
TypeScript
302 lines
17 KiB
TypeScript
/**
|
|
* rTime landing page — community-based timebanking, commitment pooling,
|
|
* and emergent collaboration through shared hour ledgers.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline" style="color:#a78bfa;background:rgba(167,139,250,0.1);border-color:rgba(167,139,250,0.2)">
|
|
Part of the rSpace Ecosystem
|
|
</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(to right,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem">
|
|
Community<br>Timebanking
|
|
</h1>
|
|
<p class="rl-subtitle">
|
|
A <strong style="color:#e2e8f0">community-based ledger</strong> for pooling time commitments
|
|
and weaving them into coordinated action. Every hour pledged becomes a visible,
|
|
connectable resource that your community can match to real needs.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rtime" class="rl-cta-primary"
|
|
style="background:linear-gradient(to right,#8b5cf6,#ec4899);color:white">
|
|
<span style="display:inline-flex;align-items:center;gap:0.5rem">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
|
|
Try the Demo
|
|
</span>
|
|
</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
<p style="font-size:0.82rem;margin-top:0.5rem">
|
|
<a href="#" onclick="document.querySelector('folk-timebank-app')?.startTour?.();window.__rspaceHideInfo?.();return false" style="color:var(--rs-primary,#06b6d4);text-decoration:none">
|
|
Start Guided Tour →
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- ELI5: What is Timebanking? -->
|
|
<section class="rl-section" style="border-top:none">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:2rem">
|
|
<span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">ELI5</span>
|
|
<h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
What is Timebanking?
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
|
|
A <strong style="color:#a78bfa">community-based ledger</strong> where
|
|
<strong style="color:#ec4899">everyone's hour is worth the same</strong>.
|
|
Members pledge time, match skills to needs, and build trust through mutual aid.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<!-- Commitment Pooling -->
|
|
<div class="rl-card" style="border:2px solid rgba(139,92,246,0.35);background:linear-gradient(to bottom right,rgba(139,92,246,0.08),rgba(139,92,246,0.03))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="width:2rem;height:2rem;border-radius:9999px;background:#8b5cf6;display:flex;align-items:center;justify-content:center">
|
|
<span style="color:white;font-weight:700;font-size:0.8rem">1h</span>
|
|
</div>
|
|
<h3 style="color:#a78bfa;font-size:1.05rem;margin-bottom:0">Commitment Pooling</h3>
|
|
</div>
|
|
<p>
|
|
Members pledge hours with a skill category. Each pledge becomes an orb in the pool —
|
|
visible, weighted by hours, colored by skill.
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">See your community's capacity at a glance.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Community Ledger -->
|
|
<div class="rl-card" style="border:2px solid rgba(236,72,153,0.35);background:linear-gradient(to bottom right,rgba(236,72,153,0.08),rgba(236,72,153,0.03))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="width:2rem;height:2rem;border-radius:9999px;background:#ec4899;display:flex;align-items:center;justify-content:center">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
</div>
|
|
<h3 style="color:#f472b6;font-size:1.05rem;margin-bottom:0">Community Ledger</h3>
|
|
</div>
|
|
<p>
|
|
Every hour is equal: one hour of facilitation = one hour of tech work.
|
|
The ledger tracks pledges, fulfillments, and transfers without money.
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Built on CRDTs — works offline, syncs everywhere.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Emergent Collaboration -->
|
|
<div class="rl-card" style="border:2px solid rgba(16,185,129,0.35);background:linear-gradient(to bottom right,rgba(16,185,129,0.08),rgba(16,185,129,0.03))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="width:2rem;height:2rem;border-radius:9999px;background:#10b981;display:flex;align-items:center;justify-content:center">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24"/></svg>
|
|
</div>
|
|
<h3 style="color:#34d399;font-size:1.05rem;margin-bottom:0">Emergent Collaboration</h3>
|
|
</div>
|
|
<p>
|
|
Projects emerge from the pool: when enough skills converge on a task, the team
|
|
self-assembles. No top-down assignment needed.
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Coordination that grows from the bottom up.</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works: Pool → Weave → Execute -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:2.5rem">
|
|
<span class="rl-tagline" style="color:#a78bfa;background:rgba(167,139,250,0.1);border-color:rgba(167,139,250,0.2)">
|
|
How It Works
|
|
</span>
|
|
<h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
Pool → Weave → Execute
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0 auto">
|
|
Three stages turn scattered availability into running projects.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<!-- Stage 1 -->
|
|
<div class="rl-card" style="border-color:rgba(139,92,246,0.2)">
|
|
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
|
|
<div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#8b5cf6,rgba(139,92,246,0.6));display:flex;align-items:center;justify-content:center">
|
|
<span style="color:white;font-weight:700;font-size:1rem">1</span>
|
|
</div>
|
|
<div>
|
|
<span class="rl-badge" style="background:rgba(139,92,246,0.1);color:#a78bfa;margin-bottom:0.25rem">Stage 1</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Commitment Pool</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Members pledge hours with a skill: facilitation, design, tech, outreach, or logistics.
|
|
Each pledge appears as a floating orb in the <strong style="color:#e2e8f0">commitment basket</strong>.
|
|
The pool gives everyone a live dashboard of available community capacity.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Stage 2 -->
|
|
<div class="rl-card" style="border-color:rgba(236,72,153,0.25);background:linear-gradient(to bottom right,rgba(236,72,153,0.05),rgba(139,92,246,0.03))">
|
|
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
|
|
<div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#ec4899,#8b5cf6);display:flex;align-items:center;justify-content:center">
|
|
<span style="color:white;font-weight:700;font-size:1rem">2</span>
|
|
</div>
|
|
<div>
|
|
<span class="rl-badge" style="background:rgba(236,72,153,0.15);color:#f472b6;margin-bottom:0.25rem">Stage 2</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Weaving Dashboard</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Drag commitments onto an SVG canvas alongside task templates. Draw wires from
|
|
commitment ports to task skill slots. The progress bar fills as skills match.
|
|
When all needs are met, the task node <strong style="color:#10b981">glows green</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Stage 3 -->
|
|
<div class="rl-card" style="border-color:rgba(16,185,129,0.2)">
|
|
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
|
|
<div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#10b981,#059669);display:flex;align-items:center;justify-content:center">
|
|
<span style="color:white;font-weight:700;font-size:1rem">3</span>
|
|
</div>
|
|
<div>
|
|
<span class="rl-badge" style="background:rgba(16,185,129,0.1);color:#10b981;margin-bottom:0.25rem">Stage 3</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Execute & Launch</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Click <strong style="color:#e2e8f0">Execute Project</strong> to open a step-by-step
|
|
launch panel: set up space, create comms channels, prep docs, and confirm roles.
|
|
Track progress as your community's woven commitments become reality.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Timebanking? -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:2.5rem">
|
|
<h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
Why Community-Based Ledgers?
|
|
</h2>
|
|
<p style="color:#94a3b8;max-width:640px;margin:0 auto">
|
|
Traditional volunteering is invisible. Timebanking makes every contribution visible,
|
|
valued, and connectable.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-2" style="max-width:900px;margin:0 auto">
|
|
<!-- The Problem -->
|
|
<div class="rl-card" style="border:2px solid rgba(239,68,68,0.2);background:rgba(239,68,68,0.04)">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
|
|
<h3 style="color:#f87171;margin-bottom:0;font-size:1.05rem">Without Timebanking</h3>
|
|
</div>
|
|
<ul style="list-style:disc;padding-left:1.25rem;margin:0">
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Volunteer hours vanish — no record, no recognition</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Same few people carry the load while others can't find where to help</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Projects stall because coordinators can't see available capacity</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Skills go unmatched to needs</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- The Solution -->
|
|
<div class="rl-card" style="border:2px solid rgba(139,92,246,0.25);background:linear-gradient(to bottom right,rgba(139,92,246,0.05),rgba(236,72,153,0.03))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
<h3 style="color:#a78bfa;margin-bottom:0;font-size:1.05rem">With rTime</h3>
|
|
</div>
|
|
<ul style="list-style:disc;padding-left:1.25rem;margin:0">
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Every pledge is visible — orbs in a shared basket</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Skill + hours + name = a connectable resource</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Projects self-assemble when enough capacity converges</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">All data persists locally via CRDT — works offline</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Feature Grid -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:2rem">
|
|
<h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
Built for Real Communities
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(139,92,246,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#8b5cf6,#7c3aed);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">🧺</span>
|
|
</div>
|
|
<h3>Visual Pool</h3>
|
|
<p>Physics-based orbs show your community's available hours at a glance.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(236,72,153,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#ec4899,#db2777);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">🧶</span>
|
|
</div>
|
|
<h3>Wire Editor</h3>
|
|
<p>Drag-and-drop SVG canvas with bezier connections between skills and tasks.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(16,185,129,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#10b981,#059669);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">🔄</span>
|
|
</div>
|
|
<h3>Cyclos Ready</h3>
|
|
<p>Optional integration with Cyclos for real timebank balances and hour transfers.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(59,130,246,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#3b82f6,#2563eb);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">📴</span>
|
|
</div>
|
|
<h3>Offline-First</h3>
|
|
<p>Automerge CRDTs keep your data local and synced. No internet required to pledge.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div class="rl-card" style="border:2px solid rgba(139,92,246,0.25);background:linear-gradient(to bottom right,rgba(139,92,246,0.08),rgba(236,72,153,0.04));text-align:center;padding:3rem 2rem;position:relative;overflow:hidden">
|
|
<span class="rl-badge" style="background:rgba(139,92,246,0.1);color:#a78bfa;font-size:0.7rem;padding:0.25rem 0.75rem">
|
|
Join the rSpace Ecosystem
|
|
</span>
|
|
<h2 style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin:1rem 0">
|
|
Ready to weave your community's time?
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:560px;margin:0 auto 2rem;line-height:1.6">
|
|
Create a Space and invite members to pledge their hours. Match skills to projects
|
|
and launch coordinated community action — all on a community-based ledger
|
|
that values every hour equally.
|
|
</p>
|
|
<div class="rl-cta-row" style="margin-top:0">
|
|
<a href="/create-space" class="rl-cta-primary"
|
|
style="background:linear-gradient(to right,#8b5cf6,#ec4899);color:white">
|
|
<span style="display:inline-flex;align-items:center;gap:0.5rem">
|
|
Create a Space
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
|
</span>
|
|
</a>
|
|
<a href="https://demo.rspace.online/rtime" class="rl-cta-secondary">
|
|
<span style="display:inline-flex;align-items:center;gap:0.5rem">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
|
|
Interactive Demo
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|