215 lines
8.7 KiB
TypeScript
215 lines
8.7 KiB
TypeScript
/**
|
|
* rSocials — 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">rSocials</span>
|
|
<h1 class="rl-heading">(You)rSocials, your narrative.</h1>
|
|
<p class="rl-subtitle">Social Media Under Your Control</p>
|
|
<p class="rl-subtext">
|
|
Schedule, publish, and analyze across every major platform — all
|
|
from your self-hosted rSpace instance. No per-seat pricing, no
|
|
third-party data mining.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rsocials" class="rl-cta-primary" id="ml-primary">Try Demo</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 rSocials Handles</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📅</div>
|
|
<h3>Cross-Platform Scheduling</h3>
|
|
<p>Draft posts, attach media, pick dates, and queue them up across every channel from a single calendar view.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📤</div>
|
|
<h3>Publishing & Analytics</h3>
|
|
<p>Posts go live on schedule. Track engagement, reach, and growth from a unified dashboard across all platforms.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🌐</div>
|
|
<h3>ActivityPub Federation</h3>
|
|
<p>Native ActivityPub support lets you publish to the fediverse — Mastodon, Threads, and any compatible server.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📶</div>
|
|
<h3>RSS Aggregation</h3>
|
|
<p>Watch any RSS feed and auto-publish new items to selected channels. Stay active without manual effort.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">👥</div>
|
|
<h3>No Per-Seat Pricing</h3>
|
|
<p>Add unlimited team members. Pay only for hosting, not per-user SaaS fees. Invite editors and approvers freely.</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>Connect Your Accounts</h3>
|
|
<p>Link your X/Twitter, LinkedIn, Instagram, TikTok, Mastodon, and more in one place.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Schedule and Publish</h3>
|
|
<p>Draft posts, attach media, pick dates, and queue them up across every channel.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Analyze and Iterate</h3>
|
|
<p>Track engagement, reach, and growth from a single dashboard. Refine your strategy with real data.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Supported Platforms -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Supported Platforms</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
Publish everywhere your audience lives — 16 platforms and counting.
|
|
</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center"><h3>X / Twitter</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>LinkedIn</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Facebook</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Instagram</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>TikTok</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>YouTube</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Pinterest</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Reddit</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Threads</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>BlueSky</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Mastodon</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Dribbble</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Slack</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Discord</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>Telegram</h3></div>
|
|
<div class="rl-card rl-card--center"><h3>RSS</h3></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Extra Features -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Power Features</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📅</div>
|
|
<h3>Calendar View</h3>
|
|
<p>Visual month/week/day planner so you never double-post or miss a slot.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">✍</div>
|
|
<h3>AI Copywriting</h3>
|
|
<p>Generate caption variations, hashtags, and thread hooks with a single click.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🎨</div>
|
|
<h3>Post Designer</h3>
|
|
<p>Resize images, add text overlays, and preview how posts look on each platform.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🛠</div>
|
|
<h3>Per-Platform Optimization</h3>
|
|
<p>Tailor copy, image crops, and hashtags for each network automatically.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📈</div>
|
|
<h3>Analytics Dashboard</h3>
|
|
<p>Unified metrics across all platforms: impressions, clicks, engagement rate.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🌐</div>
|
|
<h3>rSpace Ecosystem</h3>
|
|
<p>Connect to <a href="/rpubs" style="color:#14b8a6">rPubs</a>, <a href="/rforum" style="color:#14b8a6">rForum</a>, and more for seamless cross-posting.</p>
|
|
</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 rSocials.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<h3>ActivityPub</h3>
|
|
<p>Federated social protocol for publishing to the decentralized web.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>RSS</h3>
|
|
<p>Feed aggregation standard for auto-publishing from any content source.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<h3>Hono</h3>
|
|
<p>Ultra-fast, lightweight API framework powering the rSocials backend.</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 rSocials 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)rSocials, your narrative.</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/rsocials" class="rl-cta-primary">Try Demo</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>
|
|
`;
|
|
}
|