rspace-online/modules/pubs/landing.ts

391 lines
23 KiB
TypeScript

/**
* rPubs landing page — community pocket press.
* Ported from the Next.js page.tsx with all unique visual elements preserved.
*/
export function renderLanding(): string {
return `
<!-- Hero -->
<div class="rl-hero">
<span class="rl-tagline">Community Pocket Press</span>
<h1 class="rl-heading">Write it. Press it.<br>Share it.</h1>
<p class="rl-subtext">
Instant local publishing for your writing. Paste in your text, pick a
pocket format, and get a print-ready book in seconds &mdash; then find a
local print shop or bind it yourself.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rpubs" class="rl-cta-primary" id="ml-primary">
<span style="display:inline-flex;align-items:center;gap:0.5rem">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
Start Writing
</span>
</a>
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
</div>
</div>
<!-- How it works -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">From draft to booklet in three steps</h2>
<div class="rl-grid-3">
<div class="rl-step">
<div class="rl-step__num" style="position:relative">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
</div>
<h3>Write or paste</h3>
<p>Type directly, paste your markdown, or drop in a .md file. The editor handles the rest.</p>
</div>
<div class="rl-step">
<div class="rl-step__num" style="position:relative">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<h3>Press it</h3>
<p>Pick a pocket format &mdash; from A7 pocket to digest &mdash; and generate a typeset PDF in seconds.</p>
</div>
<div class="rl-step">
<div class="rl-step__num" style="position:relative">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
</div>
<h3>Print locally</h3>
<p>Find a community print shop nearby, or download an imposition PDF and bind it at home.</p>
</div>
</div>
</div>
</section>
<!-- Four 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 tiny zines that fit in your back pocket to digest-sized readers for longer works.
</p>
<div class="rl-grid-4" style="margin-top:2rem">
<div class="rl-card" style="text-align:left">
<h3 style="margin-bottom:0.15rem">A7 Pocket</h3>
<p style="font-size:0.75rem;color:#14b8a6;margin-bottom:0.5rem">74 &times; 105 mm</p>
<p>Fits in your pocket. Perfect for poems, manifestos, and quick reads.</p>
<p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">8&ndash;32 pages</p>
</div>
<div class="rl-card" style="text-align:left">
<h3 style="margin-bottom:0.15rem">Quarter Letter</h3>
<p style="font-size:0.75rem;color:#14b8a6;margin-bottom:0.5rem">4.25 &times; 5.5&quot;</p>
<p>Classic zine size. Great for essays, short stories, and pamphlets.</p>
<p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">16&ndash;64 pages</p>
</div>
<div class="rl-card" style="text-align:left">
<h3 style="margin-bottom:0.15rem">A6 Booklet</h3>
<p style="font-size:0.75rem;color:#14b8a6;margin-bottom:0.5rem">105 &times; 148 mm</p>
<p>Postcard-sized. Ideal for field guides, chapbooks, and handbooks.</p>
<p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">24&ndash;96 pages</p>
</div>
<div class="rl-card" style="text-align:left">
<h3 style="margin-bottom:0.15rem">Digest</h3>
<p style="font-size:0.75rem;color:#14b8a6;margin-bottom:0.5rem">5.5 &times; 8.5&quot;</p>
<p>Standard indie publishing size. For novellas, collections, and readers.</p>
<p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">32&ndash;200+ pages</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">Bulk orders, better prices</h2>
<p class="rl-subtext" style="text-align:center">
The more copies a community funds together, the cheaper each one gets.
Group buys unlock better binding and lower per-copy costs.
</p>
<!-- Tier cards -->
<div class="rl-grid-3" style="margin-top:2rem">
<div class="rl-card rl-card--center" style="position:relative">
<p style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin-bottom:0.15rem">25+</p>
<p style="font-size:0.9rem;font-weight:600;color:#14b8a6;margin-bottom:0.5rem">Saddle-stitch</p>
<p style="font-size:0.8rem;margin-bottom:1rem">Staple-bound booklet. Quick, lightweight, great for zines and short runs.</p>
<p style="font-size:1.25rem;font-weight:700;color:#e2e8f0">$8<span style="font-size:0.75rem;color:#94a3b8;font-weight:400">/copy</span></p>
</div>
<div class="rl-card rl-card--center" style="position:relative">
<span class="rl-badge" style="position:absolute;top:-0.6rem;right:0.75rem">save 25%</span>
<p style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin-bottom:0.15rem">50+</p>
<p style="font-size:0.9rem;font-weight:600;color:#14b8a6;margin-bottom:0.5rem">Perfect-bind</p>
<p style="font-size:0.8rem;margin-bottom:1rem">Glued spine with cover wrap. Professional feel, sits on a shelf like a real book.</p>
<p style="font-size:1.25rem;font-weight:700;color:#e2e8f0">$6<span style="font-size:0.75rem;color:#94a3b8;font-weight:400">/copy</span></p>
</div>
<div class="rl-card rl-card--center" style="position:relative">
<span class="rl-badge" style="position:absolute;top:-0.6rem;right:0.75rem">save 44%</span>
<p style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin-bottom:0.15rem">100+</p>
<p style="font-size:0.9rem;font-weight:600;color:#14b8a6;margin-bottom:0.5rem">Trade edition</p>
<p style="font-size:0.8rem;margin-bottom:1rem">Full trade paperback. Robust binding, printed cover, retail-ready quality.</p>
<p style="font-size:1.25rem;font-weight:700;color:#e2e8f0">$4.50<span style="font-size:0.75rem;color:#94a3b8;font-weight:400">/copy</span></p>
</div>
</div>
<!-- How collaborative print runs work -->
<div class="rl-card" style="margin-top:2.5rem">
<h3 style="text-align:center;margin-bottom:1.25rem">How collaborative print runs work</h3>
<div class="rl-grid-4" style="text-align:center">
<div>
<div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
<span style="font-size:0.7rem;font-weight:700;color:#14b8a6">1</span>
</div>
<p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
A title gets <a href="https://demo.rspace.online/rpubs" style="color:#14b8a6;text-decoration:none">funded</a> by the community
</p>
</div>
<div>
<div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
<span style="font-size:0.7rem;font-weight:700;color:#14b8a6">2</span>
</div>
<p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
Backers join the group buy as it hits each tier
</p>
</div>
<div>
<div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
<span style="font-size:0.7rem;font-weight:700;color:#14b8a6">3</span>
</div>
<p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
Order is placed with the nearest print shop via <a href="https://rcart.online" style="color:#14b8a6;text-decoration:none">rCart</a>
</p>
</div>
<div>
<div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
<span style="font-size:0.7rem;font-weight:700;color:#14b8a6">4</span>
</div>
<p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
Books are printed locally and distributed to backers
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Cross-title batching -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Bundle across titles, not just within them</h2>
<p class="rl-subtext" style="text-align:center">
Printer discounts are based on <em>total volume at the press</em>, not copies of a single book.
When multiple titles route to the same local printer, everyone benefits from the combined run.
</p>
<!-- Cross-title batching example -->
<div class="rl-card" style="max-width:680px;margin:2rem auto 0">
<p style="font-size:0.7rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem;text-align:center">
How cross-title batching unlocks tiers
</p>
<div class="rl-grid-3" style="margin-bottom:1rem">
<div style="border:1px solid rgba(255,255,255,0.06);border-radius:0.5rem;padding:0.75rem;text-align:center">
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">The Commons</p>
<p style="font-size:0.75rem;color:#94a3b8">J. Emmett</p>
<p style="font-size:0.65rem;color:#64748b;margin-top:0.25rem">governance</p>
<p style="font-size:1.25rem;font-weight:700;color:#14b8a6;margin-top:0.5rem">35</p>
<p style="font-size:0.6rem;color:#94a3b8">pre-committed copies</p>
</div>
<div style="border:1px solid rgba(255,255,255,0.06);border-radius:0.5rem;padding:0.75rem;text-align:center">
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Mycelial Networks</p>
<p style="font-size:0.75rem;color:#94a3b8">M. Stamets</p>
<p style="font-size:0.65rem;color:#64748b;margin-top:0.25rem">ecology</p>
<p style="font-size:1.25rem;font-weight:700;color:#14b8a6;margin-top:0.5rem">40</p>
<p style="font-size:0.6rem;color:#94a3b8">pre-committed copies</p>
</div>
<div style="border:1px solid rgba(255,255,255,0.06);border-radius:0.5rem;padding:0.75rem;text-align:center">
<p style="font-size:0.875rem;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Cosmolocal Reader</p>
<p style="font-size:0.75rem;color:#94a3b8">Collective</p>
<p style="font-size:0.65rem;color:#64748b;margin-top:0.25rem">economics</p>
<p style="font-size:1.25rem;font-weight:700;color:#14b8a6;margin-top:0.5rem">30</p>
<p style="font-size:0.6rem;color:#94a3b8">pre-committed copies</p>
</div>
</div>
<div class="rl-divider"><span>at the same local printer</span></div>
<div style="text-align:center">
<p style="font-size:1.5rem;font-weight:700;color:#e2e8f0">105 copies</p>
<p style="font-size:0.875rem;color:#14b8a6;font-weight:500">
Trade edition tier unlocked &mdash; $4.50/copy for all three titles
</p>
<p style="font-size:0.75rem;color:#94a3b8;margin-top:0.25rem">
No single title hit 100 alone, but together they clear the threshold
</p>
</div>
</div>
<!-- Pre-commitments from rSpace -->
<div class="rl-integration" style="margin-top:2rem;max-width:680px;margin-left:auto;margin-right:auto">
<div style="width:2.5rem;height:2.5rem;border-radius:0.5rem;background:rgba(20,184,166,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
</div>
<div>
<h3>Pre-commitments flow from rSpace</h3>
<p style="margin-bottom:0.75rem">
Every reading group, community, and network keeps a
<span style="color:#e2e8f0;font-weight:500">CRDT ledger</span> in their
<a href="https://rspace.online" style="color:#14b8a6;text-decoration:none">{space}</a>.
When members signal intent to buy, those pre-commitments sync across
clients &mdash; conflict-free, append-only, and auditable.
</p>
<p style="margin-bottom:0.75rem">
As pre-commitments accumulate across titles, genres, and networks that share a
local printer, the combined volume triggers better pricing tiers.
A poetry collective and a tech reading group in the same city don&rsquo;t need to know
each other &mdash; their orders batch automatically at the press.
</p>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem">
<a href="https://demo.rspace.online/rpubs" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:0.5rem;background:#14b8a6;color:white;font-size:0.75rem;font-weight:500;text-decoration:none">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M2 12h20"/></svg>
Fund a print run
</a>
<a href="https://rspace.online" style="display:inline-block;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:0.75rem;font-weight:500;text-decoration:none">
Learn about {space} ledgers
</a>
</div>
</div>
</div>
<!-- Signal / Aggregate / Release -->
<div class="rl-grid-3" style="margin-top:2rem;text-align:center">
<div>
<div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
<span style="font-size:0.7rem;font-weight:700;color:#14b8a6">1</span>
</div>
<p style="font-size:0.8rem;font-weight:600;color:#e2e8f0;margin-bottom:0.15rem">Signal</p>
<p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
Communities pre-commit in their {space} CRDT ledger &mdash; &ldquo;I want 3 copies&rdquo;
</p>
</div>
<div>
<div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
<span style="font-size:0.7rem;font-weight:700;color:#14b8a6">2</span>
</div>
<p style="font-size:0.8rem;font-weight:600;color:#e2e8f0;margin-bottom:0.15rem">Aggregate</p>
<p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
Pre-commitments across titles and networks
<a href="https://demo.rspace.online/rpubs" style="color:#14b8a6;text-decoration:none">flow into the fund</a>,
batched by printer region
</p>
</div>
<div>
<div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
<span style="font-size:0.7rem;font-weight:700;color:#14b8a6">3</span>
</div>
<p style="font-size:0.8rem;font-weight:600;color:#e2e8f0;margin-bottom:0.15rem">Release</p>
<p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
When volume hits a tier threshold, the print run triggers &mdash; everyone gets the bulk rate
</p>
</div>
</div>
</div>
</section>
<!-- rCart integration -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<div class="rl-grid-2">
<div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
<span style="width:1.75rem;height:1.75rem;border-radius:0.375rem;background:#fdba74;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:900;color:#0f172a;line-height:1">rCt</span>
<span style="font-size:0.875rem;font-weight:600;color:#e2e8f0">rCart</span>
<span style="font-size:0.75rem;color:#94a3b8">&times;</span>
<span style="width:1.75rem;height:1.75rem;border-radius:0.375rem;background:#fda4af;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:900;color:#0f172a;line-height:1">rP</span>
<span style="font-size:0.875rem;font-weight:600;color:#e2e8f0">rPubs</span>
</div>
<h2 class="rl-heading">Group purchasing, built in</h2>
<p style="color:#94a3b8;line-height:1.65;margin-bottom:1rem;font-size:0.95rem">
rCart handles the commerce side of group buys &mdash; collecting orders,
splitting payments, and coordinating delivery. When a title hits its
funding goal, rCart automatically batches the order to the best local
print shop.
</p>
<ul class="rl-check-list">
<li><strong>Shared carts</strong> &mdash; friends, reading groups, or whole communities pool orders for better rates</li>
<li><strong>Automatic tier unlock</strong> &mdash; as more copies are ordered, the price drops for everyone</li>
<li><strong>Local fulfillment</strong> &mdash; orders route to the nearest registered print shop, not a distant warehouse</li>
<li><strong>Transparent pricing</strong> &mdash; 30% to the author, 10% to the community, 60% to print and delivery</li>
</ul>
</div>
<div class="rl-card" style="padding:1.5rem">
<p style="font-size:0.7rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem">Example group buy</p>
<!-- Mini order summary -->
<div style="margin-bottom:1rem">
<div style="display:flex;align-items:center;justify-content:space-between;font-size:0.875rem;margin-bottom:0.75rem">
<span style="font-weight:500;color:#e2e8f0">The Commons</span>
<span style="color:#94a3b8">by J. Emmett</span>
</div>
<div class="rl-progress">
<div class="rl-progress__fill" style="width:72%"></div>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;font-size:0.75rem;color:#94a3b8;margin-top:0.5rem">
<span>36 of 50 copies ordered</span>
<span style="color:#14b8a6;font-weight:500">72%</span>
</div>
</div>
<!-- Tier indicator -->
<div class="rl-tier">
<div class="rl-tier__item rl-tier__item--active">
<p><strong>25+</strong></p>
<p style="opacity:0.7">$8/copy</p>
</div>
<div class="rl-tier__item rl-tier__item--active">
<p><strong>50+</strong></p>
<p style="opacity:0.7">$6/copy</p>
</div>
<div class="rl-tier__item">
<p><strong style="color:#64748b">100+</strong></p>
<p style="color:#64748b">$4.50</p>
</div>
</div>
<div style="font-size:0.75rem;color:#94a3b8;line-height:1.55;margin-top:1rem">
<p style="margin-bottom:0.25rem"><span style="font-weight:500;color:#e2e8f0">Current tier:</span> Saddle-stitch at $8/copy</p>
<p><span style="font-weight:500;color:#e2e8f0">14 more copies</span> to unlock perfect-bind at $6/copy &mdash; everyone saves.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Cosmolocal -->
<section class="rl-section">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">Design global, manufacture local</h2>
<p class="rl-subtext">
rPubs connects you to a cosmolocal network of independent print shops.
Your writing is typeset in the cloud and printed close to where it&rsquo;s
needed &mdash; reducing shipping, supporting local makers, and keeping
publishing accessible.
</p>
<div style="display:flex;align-items:center;justify-content:center;gap:0.75rem;flex-wrap:wrap">
<a href="https://demo.rspace.online/rpubs" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(20,184,166,0.3);color:#14b8a6;font-size:0.875rem;font-weight:500;text-decoration:none">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
Register Your Print Shop
</a>
<a href="https://demo.rspace.online/rpubs" style="display:inline-block;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:0.875rem;font-weight:500;text-decoration:none">
Fund a Title
</a>
<a href="https://rcart.online" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:0.875rem;font-weight:500;text-decoration:none">
<svg width="14" height="14" 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 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
Browse on rCart
</a>
</div>
</div>
</section>
<!-- CTA -->
<section class="rl-section rl-section--alt">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">Write it. Press it. Share it.</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">Start Writing</a>
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
</div>
</div>
</section>
<div class="rl-back">
<a href="/">&larr; Back to rSpace</a>
</div>`;
}