rspace-online/modules/books/landing.ts

170 lines
6.5 KiB
TypeScript

/**
* rBooks — rich landing page body.
* Returned by landingPage() in the module export;
* the shell wraps it with header, CSS, and analytics.
*/
export function renderLanding(): string {
return `
<!-- Hero -->
<div class="rl-hero">
<span class="rl-tagline">rBooks</span>
<h1 class="rl-heading">(You)rBooks, your library.</h1>
<p class="rl-subtitle">Your Community's Library</p>
<p class="rl-subtext">
Upload, share, and read PDFs together. A beautiful flipbook reader,
searchable catalog, and community contributions &mdash; all self-hosted.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rbooks" class="rl-cta-primary" id="ml-primary">Browse Library</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 rBooks Handles</h2>
<div class="rl-grid-4">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128218;</div>
<h3>PDF Library Management</h3>
<p>Upload, catalog, and organize your community's PDF collection with rich metadata, tags, and search.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128214;</div>
<h3>Flipbook Reader</h3>
<p>Realistic page-turn animations, zoom, and full-screen mode for a natural reading experience.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128101;</div>
<h3>Community Contributions</h3>
<p>Members upload and share books. View counts and download stats track engagement.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128269;</div>
<h3>Book Catalog</h3>
<p>Search by title, author, or tag. Featured books rise to the top of each space's collection.</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">
<div class="rl-step__num">1</div>
<h3>Upload a PDF</h3>
<p>Drag-and-drop any PDF. Add title, author, tags, and a license &mdash; it is processed instantly.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">2</div>
<h3>Browse in the Flipbook Reader</h3>
<p>Open any book in the interactive flipbook reader. Turn pages, zoom in, and bookmark your place.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">3</div>
<h3>Share with Your Community</h3>
<p>Your library is available to all space members. Featured books and search make discovery easy.</p>
</div>
</div>
</div>
</section>
<!-- Ecosystem Integration -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Works With the Ecosystem</h2>
<p class="rl-subtext" style="text-align:center">
rBooks connects to other rSpace modules to extend your library.
</p>
<div class="rl-grid-2">
<div class="rl-integration">
<div class="rl-icon-box">&#128220;</div>
<div>
<h3><a href="/rpubs" style="color:#14b8a6;text-decoration:none">rPubs</a></h3>
<p>Write and publish your own books with the collaborative editor, then list them in rBooks.</p>
</div>
</div>
<div class="rl-integration">
<div class="rl-icon-box">&#128722;</div>
<div>
<h3><a href="/rcart" style="color:#14b8a6;text-decoration:none">rCart</a></h3>
<p>Sell premium PDFs through your community storefront with integrated checkout.</p>
</div>
</div>
</div>
</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 rBooks.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128196;</div>
<h3>PDF.js</h3>
<p>Mozilla's open-source PDF rendering engine brings full-fidelity PDF viewing directly to the browser.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128451;</div>
<h3>PostgreSQL</h3>
<p>Rock-solid relational database powering the book catalog, metadata, and search indexes.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#9889;</div>
<h3>Hono</h3>
<p>Ultrafast web framework for the API layer &mdash; lightweight, typed, and edge-ready.</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 rBooks keeps your information safe.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128274;</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">&#128373;</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">&#127968;</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)rBooks, your library.</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/rbooks" class="rl-cta-primary">Browse Library</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>`;
}