312 lines
14 KiB
TypeScript
312 lines
14 KiB
TypeScript
/**
|
|
* rPubs landing page — community pocket press.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rPubs</span>
|
|
<h1 class="rl-heading">(You)rPubs, your press.</h1>
|
|
<p class="rl-subtitle">Write it. Press it. Share it.</p>
|
|
<p class="rl-subtext">
|
|
Drop in a markdown document, pick a pocket format, and get a print-ready PDF in seconds.
|
|
Group up with other authors to unlock bulk pricing through collaborative print runs.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rpubs" class="rl-cta-primary" id="ml-primary">Try the Press</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 rPubs Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📄</div>
|
|
<h3>Markdown → PDF</h3>
|
|
<p>Drop in markdown or rich text. rPubs typesets it with Typst and produces a print-ready PDF in seconds.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📖</div>
|
|
<h3>4 Pocket Formats</h3>
|
|
<p>A7 Pocket, Quarter Letter, A6 Booklet, and Digest. All print-ready at 300 dpi with bleeds.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🤝</div>
|
|
<h3>Collaborative Print Runs</h3>
|
|
<p>Pool orders across titles and authors. The more copies in a run, the cheaper each one gets.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🛒</div>
|
|
<h3>rCart Integration</h3>
|
|
<p>Publish your artifact to the rCart catalog with one click. Group carts, revenue splits, and fulfillment built in.</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>Write / paste</h3>
|
|
<p>Drop in markdown or rich text. Headings, images, footnotes — it all just works.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">2</span>
|
|
<h3>Press it</h3>
|
|
<p>Pick a pocket format. rPubs typesets your document with Typst and generates a print-ready PDF.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">3</span>
|
|
<h3>Print locally</h3>
|
|
<p>Print at home, at a local shop, or list it on rCart for cosmolocal fulfillment.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pocket Formats -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Four pocket formats</h2>
|
|
<p class="rl-subtext" style="text-align:center">From palm-sized zines to digest readers. All print-ready at 300 dpi with bleeds.</p>
|
|
<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"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
|
</div>
|
|
<h3>A7 Pocket</h3>
|
|
<p>74 × 105 mm — fits in a shirt pocket. Perfect for poems, manifestos, tiny zines.</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="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
|
</div>
|
|
<h3>Quarter Letter</h3>
|
|
<p>4.25 × 5.5" — half a half-sheet. Great for chapbooks and field guides.</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="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
|
</div>
|
|
<h3>A6 Booklet</h3>
|
|
<p>105 × 148 mm — postcard size. The workhorse format for essays and readers.</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="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
|
</div>
|
|
<h3>Digest</h3>
|
|
<p>5.5 × 8.5" — half-letter. Standard trade paperback for longer works.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Group Buys -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Group buys — better together</h2>
|
|
<p class="rl-subtext" style="text-align:center">Pool orders across titles. The more copies in a run, the cheaper each one gets.</p>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-card rl-card--center">
|
|
<h3>25+ copies</h3>
|
|
<p>Saddle-stitch binding</p>
|
|
<p style="font-size:1.5rem;font-weight:700;color:#14b8a6;margin:0.5rem 0">$8</p>
|
|
<p style="font-size:0.75rem;color:#64748b">per copy</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>50+ copies</h3>
|
|
<p>Perfect-bind</p>
|
|
<p style="font-size:1.5rem;font-weight:700;color:#14b8a6;margin:0.5rem 0">$6</p>
|
|
<span class="rl-badge">Save 25%</span>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">per copy</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>100+ copies</h3>
|
|
<p>Trade edition</p>
|
|
<p style="font-size:1.5rem;font-weight:700;color:#14b8a6;margin:0.5rem 0">$4.50</p>
|
|
<span class="rl-badge">Save 44%</span>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">per copy</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How collaborative print runs work -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How collaborative print runs work</h2>
|
|
<div class="rl-grid-4" style="margin-top:2rem">
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">1</span>
|
|
<h3>Authors list titles</h3>
|
|
<p>Publish your print-ready artifact to the rCart catalog.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">2</span>
|
|
<h3>Readers pre-order</h3>
|
|
<p>Buyers add copies to a shared cart. Orders accumulate toward tier thresholds.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">3</span>
|
|
<h3>Threshold met</h3>
|
|
<p>When the combined order hits a tier, the print run triggers automatically.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<span class="rl-step__num">4</span>
|
|
<h3>Local fulfillment</h3>
|
|
<p>The nearest cosmolocal provider prints and ships. Revenue splits to creator, community, and provider.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cross-title batching -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Cross-title batching</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
Orders from <em>different</em> titles count toward the same tier. A community reading list
|
|
can hit trade-edition pricing even if no single title has 100 orders.
|
|
</p>
|
|
<div class="rl-card" style="max-width:640px;margin:2rem auto 0">
|
|
<h3 style="margin-bottom:1rem">Example batch</h3>
|
|
<div style="display:flex;flex-direction:column;gap:0.5rem">
|
|
<div style="display:flex;justify-content:space-between;font-size:0.875rem">
|
|
<span style="color:#e2e8f0">The Commons</span><span style="color:#14b8a6;font-weight:600">35 copies</span>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;font-size:0.875rem">
|
|
<span style="color:#e2e8f0">Mycelial Networks</span><span style="color:#14b8a6;font-weight:600">40 copies</span>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;font-size:0.875rem">
|
|
<span style="color:#e2e8f0">Cosmolocal Reader</span><span style="color:#14b8a6;font-weight:600">30 copies</span>
|
|
</div>
|
|
</div>
|
|
<div class="rl-divider"><span>combined</span></div>
|
|
<div style="text-align:center">
|
|
<span style="font-size:1.5rem;font-weight:700;color:#14b8a6">105 copies</span>
|
|
<span style="display:block;font-size:0.8rem;color:#64748b;margin-top:0.25rem">= Trade edition @ $4.50/copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- rCart integration -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div class="rl-grid-2">
|
|
<div>
|
|
<h2 class="rl-heading">rCart integration</h2>
|
|
<p class="rl-subtext" style="margin-bottom:1.5rem">
|
|
Group purchasing is built right into the shop. Every rPubs artifact can be listed,
|
|
batched, and fulfilled through rCart.
|
|
</p>
|
|
<ul class="rl-check-list">
|
|
<li><strong>One-click listing</strong> — publish to the rCart catalog straight from the press</li>
|
|
<li><strong>Group carts</strong> — space members pool orders automatically</li>
|
|
<li><strong>Revenue splits</strong> — creator, community, and provider shares via <a href="/rfunds" style="color:#14b8a6">rFunds</a></li>
|
|
<li><strong>Cosmolocal fulfillment</strong> — nearest provider prints and ships</li>
|
|
<li><strong>Order tracking</strong> — real-time status from press to doorstep</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"><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>Shop + Press</h3>
|
|
<p>rPubs creates the artifact.<br>rCart sells and fulfills it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cosmolocal -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<span class="rl-tagline">rPubs × Cosmolocal</span>
|
|
<h2 class="rl-heading">Design global, manufacture local</h2>
|
|
<p class="rl-subtext">
|
|
Every print run is routed to the nearest capable provider. Reduce shipping emissions,
|
|
support local economies, and still benefit from shared design and pooled demand.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section">
|
|
<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 rPubs.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">⚙</div>
|
|
<h3>Typst</h3>
|
|
<p>Document compilation engine. Transforms markdown into beautifully typeset, print-ready PDFs.</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 class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🗃</div>
|
|
<h3>PostgreSQL</h3>
|
|
<p>Rock-solid relational database for catalog storage, orders, and artifact metadata.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rPubs 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">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">(You)rPubs, your press.</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/rpubs" class="rl-cta-primary">Try the Press</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>`;
|
|
}
|