128 lines
5.8 KiB
TypeScript
128 lines
5.8 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">Group Shopping, Together</h1>
|
|
<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">Browse the Shop</a>
|
|
<a href="/rpubs" class="rl-cta-secondary">Create with rPubs</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How it works -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How it works</h2>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<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>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
|
<div class="rl-grid-4" style="margin-top:2rem">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg>
|
|
</div>
|
|
<h3>Universal Cart</h3>
|
|
<p>One cart shared across your space. Members add items, pool orders, and hit bulk thresholds together.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">
|
|
<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="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
|
|
</div>
|
|
<h3>Crypto + Card</h3>
|
|
<p>Pay with credit card or cryptocurrency. x402 protocol support for instant crypto payments.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
|
|
</div>
|
|
<h3>Real-time Updates</h3>
|
|
<p>Order status updates in real time — from placement through production to delivery.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3>Passkey Login</h3>
|
|
<p>Passwordless authentication with EncryptID passkeys. One tap to sign in across all r* apps.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Ready to shop together?</h2>
|
|
<p class="rl-subtext">
|
|
Browse the catalog, pool orders with your community, and support local providers.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rcart" class="rl-cta-primary" id="ml-primary">Open rCart</a>
|
|
<a href="/rpubs" class="rl-cta-secondary">Create with rPubs</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|