176 lines
7.1 KiB
TypeScript
176 lines
7.1 KiB
TypeScript
/**
|
|
* rCart landing page — group shopping, together.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rCart</span>
|
|
<h1 class="rl-heading">(You)rCart, your market.</h1>
|
|
<p class="rl-subtitle">Group Shopping, Together</p>
|
|
<p class="rl-subtext">
|
|
A shared shopping cart for communities. Pool orders, unlock bulk pricing,
|
|
and fulfill locally through the cosmolocal provider network.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rcart" class="rl-cta-primary" id="ml-primary">Start Shopping</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What rCart Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🛒</div>
|
|
<h3>Group Purchasing</h3>
|
|
<p>One cart shared across your space. Members pool orders and hit bulk thresholds together.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🌐</div>
|
|
<h3>Cosmolocal Fulfillment</h3>
|
|
<p>Every order is matched to the nearest capable provider. Design global, manufacture local.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📋</div>
|
|
<h3>Provider Registry</h3>
|
|
<p>A network of local providers with capabilities, locations, and pricing. Automatic matching by proximity.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">💰</div>
|
|
<h3>Revenue Splits</h3>
|
|
<p>Creator, community, and provider shares calculated automatically via rFunds. Transparent by default.</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 Space</h3>
|
|
<p>Your space is your shared shopping context. Members see the same catalog and cart.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">2</span>
|
|
<h3>Add Products</h3>
|
|
<p>List print-ready artifacts from rPubs, or browse what others have published.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">3</span>
|
|
<h3>Pay Together</h3>
|
|
<p>Pool orders to hit bulk pricing tiers. Pay with crypto or card. Revenue splits automatically.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cosmolocal Fulfillment -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div class="rl-grid-2">
|
|
<div>
|
|
<h2 class="rl-heading">Cosmolocal fulfillment</h2>
|
|
<p class="rl-subtext" style="margin-bottom:1.5rem">
|
|
Every order is matched to the nearest capable provider. Design is global, manufacturing is local.
|
|
</p>
|
|
<ul class="rl-check-list">
|
|
<li><strong>Provider matching</strong> — automatic routing by capability, location, and cost</li>
|
|
<li><strong>Revenue splits</strong> — creator, community, and provider shares via rFunds</li>
|
|
<li><strong>Order tracking</strong> — real-time status from accepted to delivered</li>
|
|
<li><strong>Volume pricing</strong> — automatic tier detection from pooled orders</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">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
|
|
</div>
|
|
<h3>Nearest Provider Wins</h3>
|
|
<p>Less shipping, lower emissions,<br>faster delivery, local jobs.</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 rCart.</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">💳</div>
|
|
<h3>x402 Protocol</h3>
|
|
<p>Open payment protocol for instant crypto payments. Card payments supported alongside.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">💰</div>
|
|
<h3>Flow Service</h3>
|
|
<p>Automated revenue splits between creator, community, and provider. Transparent by design.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🗃</div>
|
|
<h3>PostgreSQL</h3>
|
|
<p>Rock-solid relational database for catalog, orders, providers, and transaction history.</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, edge-ready, and built for speed.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rCart keeps your information safe.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔒</div>
|
|
<h3>End-to-End Encryption</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>All content encrypted before it leaves your device. Not even the server can read it.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🕵</div>
|
|
<h3>Zero-Knowledge Architecture</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏠</div>
|
|
<h3>Self-Hosted</h3>
|
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">(You)rCart, your market.</h2>
|
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rcart" class="rl-cta-primary">Start Shopping</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>`;
|
|
}
|