148 lines
6.1 KiB
TypeScript
148 lines
6.1 KiB
TypeScript
/**
|
|
* rPayments landing page — QR payments, subscriptions, on-ramp.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rPayments</span>
|
|
<h1 class="rl-heading">Get paid. Instantly. Anywhere.</h1>
|
|
<p class="rl-subtitle">QR payment requests, subscriptions, and card on-ramp.</p>
|
|
<p class="rl-subtext">
|
|
One link, one QR code. Receive crypto or card payments into your own wallet —
|
|
with optional recurring charges, shareable by email, and a public pay page that just works.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rpayments" class="rl-cta-primary" id="ml-primary">Open Dashboard</a>
|
|
<a href="https://demo.rspace.online/rpayments/request" class="rl-cta-secondary">Create a Payment Request</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What rPayments Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📱</div>
|
|
<h3>QR Payment Requests</h3>
|
|
<p>Generate a QR code and shareable link for any amount. Payers scan, pay, done — in any wallet or with a credit card.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔄</div>
|
|
<h3>Subscriptions</h3>
|
|
<p>Weekly, monthly, yearly recurring charges. Payers approve an allowance once; we pull payments automatically.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">💳</div>
|
|
<h3>Card On-Ramp</h3>
|
|
<p>Payers without crypto can pay by card. MoonPay and Transak are wired in; funds land as USDC in your wallet.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📧</div>
|
|
<h3>Email Everything</h3>
|
|
<p>Send payment requests by email, reminders before subscription renewals, receipts on payment.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section rl-section--alt">
|
|
<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">
|
|
<span class="rl-step__num">1</span>
|
|
<h3>Create a Request</h3>
|
|
<p>Set an amount (or let the payer choose), pick a token and network, choose one-off or recurring.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">2</span>
|
|
<h3>Share the Link or QR</h3>
|
|
<p>Send by email, post the link, or print the QR. The pay page works for anyone — no account needed.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">3</span>
|
|
<h3>Get Paid</h3>
|
|
<p>Funds land in your wallet. The dashboard shows status, payer details, and full payment history.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Payment Types -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div class="rl-grid-2">
|
|
<div>
|
|
<h2 class="rl-heading">Any kind of payment</h2>
|
|
<p class="rl-subtext" style="margin-bottom:1.5rem">
|
|
One primitive, many shapes. rPayments supports every common payment pattern out of the box.
|
|
</p>
|
|
<ul class="rl-check-list">
|
|
<li><strong>One-off invoices</strong> — fixed-amount or “pay what you want”</li>
|
|
<li><strong>Donation jars</strong> — editable amount, unlimited payers, public ledger</li>
|
|
<li><strong>Subscriptions</strong> — allowance-based auto-pulls with email reminders</li>
|
|
<li><strong>Limited drops</strong> — fixed inventory, marked “filled” when sold out</li>
|
|
<li><strong>Tips via card</strong> — MoonPay/Transak fallback for payers without crypto</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rl-card rl-card--center" style="display:flex;align-items:center;justify-content:center">
|
|
<div>
|
|
<div class="rl-icon-box" style="margin:0 auto 1rem">📈</div>
|
|
<h3>Your wallet, your rules</h3>
|
|
<p>Non-custodial by default.<br>Self-hosted, no middlemen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rPayments.</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">⚖</div>
|
|
<h3>x402 & ERC-20</h3>
|
|
<p>Open payment protocols. Approvals, transfers, transferFrom — no proprietary rails.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔑</div>
|
|
<h3>EncryptID</h3>
|
|
<p>Passkey-based identity. Creators sign in with a biometric; payers pay without any account at all.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📡</div>
|
|
<h3>Automerge CRDT</h3>
|
|
<p>Payment state syncs across devices in real time. Dashboards stay live without polling.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔥</div>
|
|
<h3>Hono</h3>
|
|
<p>Ultrafast web framework for the API layer. Lightweight and edge-ready.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Start accepting payments in 30 seconds.</h2>
|
|
<p class="rl-subtext">Create a request, share the link, get paid.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rpayments/request" class="rl-cta-primary">Create a Payment Request</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>`;
|
|
}
|