386 lines
22 KiB
TypeScript
386 lines
22 KiB
TypeScript
/**
|
|
* rGov landing page — modular governance decision circuits.
|
|
* GovMods: do-ocratic circuit components for multiplayer collaboration.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline" style="color:#818cf8;background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.2)">
|
|
Modular Governance for rSpace
|
|
</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(to right,#7c3aed,#1d4ed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem">
|
|
GovMods
|
|
</h1>
|
|
<p class="rl-subtitle" style="max-width:640px">
|
|
<strong style="color:#e2e8f0">Do-ocratic circuit components</strong> for multiplayer collaboration
|
|
around shared goals. Wire together governance primitives on a shared canvas — thresholds,
|
|
signoffs, tunable knobs, and amendable circuits. Decisions happen by <em>doing</em>,
|
|
not debating.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rgov" class="rl-cta-primary"
|
|
style="background:linear-gradient(to right,#7c3aed,#1d4ed8);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>
|
|
</div>
|
|
|
|
<!-- What is Modular Governance? -->
|
|
<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">MODULAR GOVERNANCE</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 are GovMods?
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:680px;margin:0.5rem auto 0">
|
|
GovMods are <strong style="color:#818cf8">do-ocratic governance primitives</strong> —
|
|
drag-and-drop circuit components where decisions happen through <strong style="color:#60a5fa">action</strong>,
|
|
not deliberation. Contribute hours, pledge funds, sign off on requirements. When all gates
|
|
in a circuit are satisfied, the decision is made. No meetings required.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<!-- Binary Gates -->
|
|
<div class="rl-card" style="border:2px solid rgba(124,58,237,0.35);background:linear-gradient(to bottom right,rgba(124,58,237,0.08),rgba(124,58,237,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:#7c3aed;display:flex;align-items:center;justify-content:center">
|
|
<span style="color:white;font-weight:700;font-size:0.9rem">✓</span>
|
|
</div>
|
|
<h3 style="color:#a78bfa;font-size:1.05rem;margin-bottom:0">Signoff Gate</h3>
|
|
</div>
|
|
<p>
|
|
The simplest GovMod. A binary yes/no checkpoint — assign someone to approve,
|
|
or leave it open for anyone who steps up. Green glow when satisfied.
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Do-ocracy: whoever shows up, decides.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Thresholds -->
|
|
<div class="rl-card" style="border:2px solid rgba(8,145,178,0.35);background:linear-gradient(to bottom right,rgba(8,145,178,0.08),rgba(8,145,178,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:#0891b2;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"><rect x="3" y="12" width="4" height="9" rx="1"/><rect x="10" y="7" width="4" height="14" rx="1"/><rect x="17" y="3" width="4" height="18" rx="1"/></svg>
|
|
</div>
|
|
<h3 style="color:#22d3ee;font-size:1.05rem;margin-bottom:0">Threshold Gate</h3>
|
|
</div>
|
|
<p>
|
|
Accumulate contributions toward a target: hours, dollars, signatures, materials.
|
|
Progress bar fills as people contribute. Gate opens when the community has collectively
|
|
<em>done enough</em>.
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Decisions backed by real resources.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Knobs -->
|
|
<div class="rl-card" style="border:2px solid rgba(180,83,9,0.35);background:linear-gradient(to bottom right,rgba(180,83,9,0.08),rgba(180,83,9,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:#b45309;display:flex;align-items:center;justify-content:center">
|
|
<span style="color:white;font-size:1rem">🎛️</span>
|
|
</div>
|
|
<h3 style="color:#f59e0b;font-size:1.05rem;margin-bottom:0">Tunable Knob</h3>
|
|
</div>
|
|
<p>
|
|
Adjustable parameters that wire into other GovMods. Set a budget cap, quorum
|
|
percentage, or time limit. Optional <strong style="color:#fbbf24">temporal viscosity</strong>:
|
|
a cooldown that prevents rapid parameter flipping.
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Governance that adapts, but deliberately.</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Do-ocracy in Action -->
|
|
<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:#818cf8;background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.2)">
|
|
Do-ocracy in Action
|
|
</span>
|
|
<h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
Design → Wire → Do
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0 auto">
|
|
Three steps from blank canvas to living governance. No proposals, no quorum calls —
|
|
just wire up the conditions and let people act.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<!-- Step 1 -->
|
|
<div class="rl-card" style="border-color:rgba(124,58,237,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,#7c3aed,rgba(124,58,237,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(124,58,237,0.1);color:#a78bfa;margin-bottom:0.25rem">Design</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Place GovMods</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Drag governance components onto the canvas: signoff gates, resource thresholds,
|
|
tunable knobs. Or tell MI: <strong style="color:#e2e8f0">"create a governance circuit
|
|
for building a climbing wall"</strong> and watch the GovMods appear.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="rl-card" style="border-color:rgba(29,78,216,0.25);background:linear-gradient(to bottom right,rgba(29,78,216,0.05),rgba(124,58,237,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,#1d4ed8,#7c3aed);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(29,78,216,0.15);color:#60a5fa;margin-bottom:0.25rem">Wire</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Connect the Circuit</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Draw arrows from GovMod outputs to a <strong style="color:#e2e8f0">Project aggregator</strong>.
|
|
Wire a knob's value to a threshold's target for dynamic parameters.
|
|
The circuit shows data flow and gate conditions in real time.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="rl-card" style="border-color:rgba(34,197,94,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,#22c55e,#16a34a);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(34,197,94,0.1);color:#22c55e;margin-bottom:0.25rem">Do</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Contribute & Complete</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Community members <em>do the work</em>: contribute resources, sign off, adjust parameters.
|
|
The Project tracks <strong style="color:#22c55e">"X of Y gates satisfied"</strong>
|
|
and auto-completes when all conditions are met through collective action.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Example: Climbing Wall -->
|
|
<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">
|
|
Example: Build a Climbing Wall
|
|
</h2>
|
|
<p style="color:#94a3b8;max-width:640px;margin:0 auto">
|
|
A community wants to build a climbing wall. Here's how GovMods make it happen
|
|
through do-ocratic action:
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Simplified circuit diagram -->
|
|
<div style="display:flex;justify-content:center;margin-bottom:2rem">
|
|
<svg width="560" height="200" viewBox="0 0 560 200" style="max-width:100%">
|
|
<!-- Binary gate -->
|
|
<rect x="10" y="20" width="120" height="60" rx="8" fill="rgba(124,58,237,0.15)" stroke="#7c3aed" stroke-width="1.5"/>
|
|
<text x="70" y="44" text-anchor="middle" fill="#a78bfa" font-size="10" font-weight="600">Proprietor</text>
|
|
<text x="70" y="58" text-anchor="middle" fill="#a78bfa" font-size="10">Signoff</text>
|
|
<circle cx="70" cy="72" r="4" fill="#7c3aed"/>
|
|
|
|
<!-- Threshold 1: Labor -->
|
|
<rect x="10" y="110" width="120" height="70" rx="8" fill="rgba(8,145,178,0.15)" stroke="#0891b2" stroke-width="1.5"/>
|
|
<text x="70" y="134" text-anchor="middle" fill="#22d3ee" font-size="10" font-weight="600">Labor</text>
|
|
<text x="70" y="148" text-anchor="middle" fill="#22d3ee" font-size="10">50 hours</text>
|
|
<rect x="22" y="158" width="96" height="8" rx="4" fill="rgba(255,255,255,0.1)"/>
|
|
<rect x="22" y="158" width="60" height="8" rx="4" fill="#0891b2"/>
|
|
<text x="70" y="175" text-anchor="middle" fill="#94a3b8" font-size="8">30/50 hrs</text>
|
|
|
|
<!-- Threshold 2: Capital -->
|
|
<rect x="170" y="110" width="120" height="70" rx="8" fill="rgba(8,145,178,0.15)" stroke="#0891b2" stroke-width="1.5"/>
|
|
<text x="230" y="134" text-anchor="middle" fill="#22d3ee" font-size="10" font-weight="600">Capital</text>
|
|
<text x="230" y="148" text-anchor="middle" fill="#22d3ee" font-size="10">$3,000</text>
|
|
<rect x="182" y="158" width="96" height="8" rx="4" fill="rgba(255,255,255,0.1)"/>
|
|
<rect x="182" y="158" width="86" height="8" rx="4" fill="#22c55e"/>
|
|
<text x="230" y="175" text-anchor="middle" fill="#94a3b8" font-size="8">$2,700/$3,000</text>
|
|
|
|
<!-- Arrows to project -->
|
|
<line x1="130" y1="50" x2="400" y2="80" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.6"/>
|
|
<line x1="130" y1="145" x2="400" y2="100" stroke="#0891b2" stroke-width="1.5" opacity="0.8"/>
|
|
<line x1="290" y1="145" x2="400" y2="110" stroke="#22c55e" stroke-width="1.5"/>
|
|
|
|
<!-- Project aggregator -->
|
|
<rect x="400" y="50" width="150" height="100" rx="10" fill="rgba(29,78,216,0.15)" stroke="#1d4ed8" stroke-width="2"/>
|
|
<text x="475" y="74" text-anchor="middle" fill="#60a5fa" font-size="11" font-weight="700">Build Climbing Wall</text>
|
|
<text x="475" y="92" text-anchor="middle" fill="#94a3b8" font-size="10">1 of 3 gates satisfied</text>
|
|
<rect x="420" y="102" width="110" height="6" rx="3" fill="rgba(255,255,255,0.1)"/>
|
|
<rect x="420" y="102" width="37" height="6" rx="3" fill="#1d4ed8"/>
|
|
<text x="475" y="122" text-anchor="middle" fill="#60a5fa" font-size="9">33%</text>
|
|
|
|
<!-- Knob wired to threshold -->
|
|
<rect x="170" y="20" width="100" height="60" rx="8" fill="rgba(180,83,9,0.15)" stroke="#b45309" stroke-width="1.5"/>
|
|
<text x="220" y="44" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="600">Budget Cap</text>
|
|
<text x="220" y="58" text-anchor="middle" fill="#f59e0b" font-size="10">$3,000</text>
|
|
<line x1="220" y1="80" x2="230" y2="110" stroke="#b45309" stroke-width="1" stroke-dasharray="3 2" opacity="0.5"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="rl-grid-2" style="max-width:900px;margin:0 auto">
|
|
<div class="rl-card" style="border-color:rgba(124,58,237,0.15)">
|
|
<h3 style="margin-bottom:0.35rem;color:#e2e8f0">The GovMod Circuit</h3>
|
|
<ul style="list-style:disc;padding-left:1.25rem;margin:0;font-size:0.85rem;color:#94a3b8;line-height:1.8">
|
|
<li><strong style="color:#a78bfa">Signoff:</strong> Proprietor approval</li>
|
|
<li><strong style="color:#22d3ee">Threshold:</strong> 50 hours labor (people pledge hours)</li>
|
|
<li><strong style="color:#22d3ee">Threshold:</strong> $3,000 capital (people contribute funds)</li>
|
|
<li><strong style="color:#f59e0b">Knob:</strong> Budget Cap → wires to capital target</li>
|
|
<li><strong style="color:#60a5fa">Project:</strong> aggregates all gates, tracks completion</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rl-card" style="border-color:rgba(190,24,93,0.15)">
|
|
<h3 style="margin-bottom:0.35rem;color:#e2e8f0">The Amendment</h3>
|
|
<p style="font-size:0.85rem;color:#94a3b8;line-height:1.8">
|
|
Someone offers to donate climbing grips. They create an <strong style="color:#f472b6">amendment GovMod</strong>
|
|
proposing to replace the $3,000 threshold with a simple signoff
|
|
("Grips donated?"). The community votes on the amendment, and on approval the circuit
|
|
rewires automatically — all arrows stay connected. The governance system evolved
|
|
<em>because someone did something</em>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Modular Governance -->
|
|
<section class="rl-section rl-section--alt">
|
|
<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 Modular Governance?
|
|
</h2>
|
|
<p style="color:#94a3b8;max-width:640px;margin:0 auto">
|
|
Traditional governance is monolithic: one system fits all. GovMods let each
|
|
community wire exactly the decision process they need.
|
|
</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">Monolithic Governance</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">One-size-fits-all voting — everything needs a meeting</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Decisions bottleneck on the few people who attend</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Resource requirements invisible until someone asks</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Governance structure is fixed — can't adapt to the situation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- The Solution -->
|
|
<div class="rl-card" style="border:2px solid rgba(124,58,237,0.25);background:linear-gradient(to bottom right,rgba(124,58,237,0.05),rgba(29,78,216,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="#7c3aed" 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">GovMod Circuits</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">Each decision gets exactly the governance it needs</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Do-ocratic: contribute resources, don't just vote on them</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Progress visible to everyone on a shared canvas</li>
|
|
<li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Amendments let governance evolve mid-process</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Feature Grid -->
|
|
<section class="rl-section">
|
|
<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 Do-ocratic Communities
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(124,58,237,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#7c3aed,#6d28d9);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">🔌</span>
|
|
</div>
|
|
<h3>Modular</h3>
|
|
<p>Mix and match GovMods to model any decision. Compose simple primitives into complex governance.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(29,78,216,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#1d4ed8,#1e40af);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">👥</span>
|
|
</div>
|
|
<h3>Multiplayer</h3>
|
|
<p>Real-time CRDT sync. Multiple people contribute, sign off, and adjust knobs simultaneously.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(180,83,9,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#b45309,#92400e);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">🎛️</span>
|
|
</div>
|
|
<h3>Temporal Viscosity</h3>
|
|
<p>Knob cooldowns prevent rapid parameter gaming. Change happens deliberately, not reactively.</p>
|
|
</div>
|
|
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(190,24,93,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#be185d,#9d174d);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">📝</span>
|
|
</div>
|
|
<h3>Amendable</h3>
|
|
<p>Governance that evolves. Propose circuit changes, vote inline, and the wiring adapts in place.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<div class="rl-card" style="border:2px solid rgba(124,58,237,0.25);background:linear-gradient(to bottom right,rgba(124,58,237,0.08),rgba(29,78,216,0.04));text-align:center;padding:3rem 2rem;position:relative;overflow:hidden">
|
|
<span class="rl-badge" style="background:rgba(124,58,237,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 wire your community's governance?
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:560px;margin:0 auto 2rem;line-height:1.6">
|
|
Create a Space and start building GovMod circuits. Drag gates onto the canvas,
|
|
wire them together, and let your community decide through action —
|
|
visually, collaboratively, and do-ocratically.
|
|
</p>
|
|
<div class="rl-cta-row" style="margin-top:0">
|
|
<a href="/create-space" class="rl-cta-primary"
|
|
style="background:linear-gradient(to right,#7c3aed,#1d4ed8);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/rgov" 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>`;
|
|
}
|