240 lines
13 KiB
TypeScript
240 lines
13 KiB
TypeScript
/**
|
|
* rExchange landing page — P2P crypto/fiat exchange within communities.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline" style="color:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2)">
|
|
Part of the rSpace Ecosystem
|
|
</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(to right,#f59e0b,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem">
|
|
Community<br>Exchange
|
|
</h1>
|
|
<p class="rl-subtitle">
|
|
A <strong style="color:#e2e8f0">peer-to-peer on/off-ramp</strong> where community members
|
|
act as exchange nodes for each other. Buy and sell cUSDC, $MYCO, and fUSDC against
|
|
local fiat currencies — with escrow, reputation, and intent matching.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rexchange" class="rl-cta-primary"
|
|
style="background:linear-gradient(to right,#f59e0b,#10b981);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>
|
|
|
|
<!-- ELI5 -->
|
|
<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 P2P Exchange?
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
|
|
Think <strong style="color:#f59e0b">LocalBitcoins</strong> inside your rSpace community.
|
|
Members post buy/sell intents, the solver finds matches, and escrow handles trustless settlement.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<!-- Post Intent -->
|
|
<div class="rl-card" style="border:2px solid rgba(245,158,11,0.35);background:linear-gradient(to bottom right,rgba(245,158,11,0.08),rgba(245,158,11,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:#f59e0b;display:flex;align-items:center;justify-content:center">
|
|
<span style="color:white;font-weight:700;font-size:0.9rem">$</span>
|
|
</div>
|
|
<h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">Post Intents</h3>
|
|
</div>
|
|
<p>
|
|
Buy or sell cUSDC, $MYCO, or fUSDC. Set your price, amount range, and accepted payment
|
|
methods (SEPA, Revolut, PIX, M-Pesa, Cash).
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Standing orders let you be a liquidity provider.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Automatic Matching -->
|
|
<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.5" 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.24"/></svg>
|
|
</div>
|
|
<h3 style="color:#34d399;font-size:1.05rem;margin-bottom:0">Solver Matching</h3>
|
|
</div>
|
|
<p>
|
|
The matching engine runs every 60s, finding compatible buy/sell pairs by token, currency,
|
|
rate overlap, and reputation. Scored and ranked automatically.
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Auto-accept for hands-free trading.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Escrow Settlement -->
|
|
<div class="rl-card" style="border:2px solid rgba(59,130,246,0.35);background:linear-gradient(to bottom right,rgba(59,130,246,0.08),rgba(59,130,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:#3b82f6;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"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
|
</div>
|
|
<h3 style="color:#60a5fa;font-size:1.05rem;margin-bottom:0">Escrow & Trust</h3>
|
|
</div>
|
|
<p>
|
|
Seller's tokens are locked in CRDT escrow. Buyer sends fiat off-chain, seller confirms
|
|
receipt, tokens release. 24h timeout auto-reverses.
|
|
<strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Disputes resolved by space admins.</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<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:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,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">
|
|
Intent → Match → Settle
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card" style="border-color:rgba(245,158,11,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,#f59e0b,rgba(245,158,11,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(245,158,11,0.1);color:#fbbf24;margin-bottom:0.25rem">Step 1</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Post Intent</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
"I want to buy 100 cUSDC for EUR at market rate via SEPA" — or sell, at a fixed
|
|
price, with any payment method. Set reputation thresholds and amount ranges.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card" style="border-color:rgba(16,185,129,0.25);background:linear-gradient(to bottom right,rgba(16,185,129,0.05),rgba(245,158,11,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,#10b981,#f59e0b);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(16,185,129,0.15);color:#34d399;margin-bottom:0.25rem">Step 2</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Match & Escrow</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Solver finds your counterparty. Both accept the match. Seller's tokens lock in escrow.
|
|
In-trade chat for coordinating fiat payment details.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card" style="border-color:rgba(59,130,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,#3b82f6,#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(59,130,246,0.1);color:#60a5fa;margin-bottom:0.25rem">Step 3</span>
|
|
<h3 style="margin-bottom:0;font-size:1rem">Settle & Build Rep</h3>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Buyer sends fiat, seller confirms receipt, tokens release instantly. Both parties earn
|
|
reputation score. Standing orders re-activate for continuous liquidity.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<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 Global Communities
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center" style="border-color:rgba(245,158,11,0.15)">
|
|
<div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#f59e0b,#d97706);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
|
|
<span style="font-size:1.25rem">🌍</span>
|
|
</div>
|
|
<h3>8 Fiat Currencies</h3>
|
|
<p>EUR, USD, GBP, BRL, MXN, INR, NGN, ARS with CoinGecko live rates.</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>CRDT Escrow</h3>
|
|
<p>Trustless token escrow with 24h timeout. Net supply neutral settlement.</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>Reputation</h3>
|
|
<p>Score based on completion rate, dispute history, and confirmation speed. Badges earned.</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>Auto-Matching</h3>
|
|
<p>Intent solver runs every 60s. Auto-accept for hands-free LP trading.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div class="rl-card" style="border:2px solid rgba(245,158,11,0.25);background:linear-gradient(to bottom right,rgba(245,158,11,0.08),rgba(16,185,129,0.04));text-align:center;padding:3rem 2rem;position:relative;overflow:hidden">
|
|
<span class="rl-badge" style="background:rgba(245,158,11,0.1);color:#fbbf24;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 exchange with your community?
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:560px;margin:0 auto 2rem;line-height:1.6">
|
|
Create a Space and become a liquidity node. Post standing orders to provide exchange
|
|
access for your community — earn reputation and enable financial inclusion.
|
|
</p>
|
|
<div class="rl-cta-row" style="margin-top:0">
|
|
<a href="/create-space" class="rl-cta-primary"
|
|
style="background:linear-gradient(to right,#f59e0b,#10b981);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/rexchange" 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>`;
|
|
}
|