119 lines
4.3 KiB
TypeScript
119 lines
4.3 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 {
|
|
const demo = "https://demo.rspace.online/rbooks";
|
|
|
|
return `
|
|
<!-- Hero -->
|
|
<section class="rl-hero">
|
|
<span class="rl-tagline">rBooks</span>
|
|
<h1 class="rl-heading">Your Community's Library</h1>
|
|
<p class="rl-subtext">
|
|
Upload, share, and read PDFs together. A beautiful flipbook reader,
|
|
searchable catalog, and community contributions — all self-hosted.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="${demo}" class="rl-cta-primary" id="ml-primary">Start Your Library</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Upload PDFs</h3>
|
|
<p>Drag-and-drop any PDF. Add title, author, tags, and a license — it is processed instantly.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Browse the Library</h3>
|
|
<p>Search by title, author, or tag. Featured books rise to the top.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Read with Flipbook</h3>
|
|
<p>Open any book in the interactive flipbook reader. Turn pages, zoom in, and bookmark your place.</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">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📖</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">⚙</div>
|
|
<h3>PDF Processing</h3>
|
|
<p>Automatic page counting, metadata extraction, and optimized delivery to the reader.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📚</div>
|
|
<h3>Space Libraries</h3>
|
|
<p>Each community space gets its own curated collection with search and tagging.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">👥</div>
|
|
<h3>Community Contributions</h3>
|
|
<p>Members upload and share. View counts and download stats track engagement.</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">📜</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">🛒</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>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Ready to Build Your Library?</h2>
|
|
<p class="rl-subtext">
|
|
Upload your first PDF and let your community start reading.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="${demo}" class="rl-cta-primary">Start Your Library</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>`;
|
|
}
|