247 lines
13 KiB
TypeScript
247 lines
13 KiB
TypeScript
/**
|
|
* rForum landing page — Discourse forum provisioning.
|
|
* Ported from /opt/apps/rforum-online/src/app/page.tsx
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rForum</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#d8b4fe);-webkit-background-clip:text;background-clip:text">(You)rForum, your community.</h1>
|
|
<p class="rl-subtitle" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#d8b4fe);-webkit-background-clip:text;background-clip:text">Deploy Your Own Discourse Forum in Minutes</p>
|
|
<p class="rl-subtext">
|
|
Automated cloud provisioning for self-hosted Discourse.
|
|
No DevOps required. Choose your region, configure your settings, and go live.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rforum" class="rl-cta-primary" id="ml-primary">Get Started</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(99,102,241,0.15)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
</div>
|
|
<h3>1. Configure</h3>
|
|
<p>Choose your subdomain, server region, and instance size.
|
|
Add SMTP credentials for email delivery. Set your admin email.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(139,92,246,0.15)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</div>
|
|
<h3>2. Provision</h3>
|
|
<p>We create a cloud server on Hetzner, install Discourse,
|
|
configure SSL via Let's Encrypt, and set up DNS. Takes about 10-15 minutes.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(168,85,247,0.15)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#c084fc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
</div>
|
|
<h3>3. Go Live</h3>
|
|
<p>Your forum is ready. Log in as admin, customize your community,
|
|
invite members, and start conversations. Full SSH access included.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing -->
|
|
<section class="rl-section rl-section--alt" id="pricing">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Transparent Pricing</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
Pay only for the cloud server. Hetzner pricing passed through directly — no markup.
|
|
</p>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<!-- Starter -->
|
|
<div class="rl-card">
|
|
<h3>Starter</h3>
|
|
<p style="font-size:0.82rem;color:#94a3b8;margin-bottom:1rem">Small communities</p>
|
|
<div style="font-size:2rem;font-weight:700;color:#e2e8f0;margin-bottom:0.25rem">
|
|
€3.79<span style="font-size:0.875rem;font-weight:400;color:#94a3b8">/mo</span>
|
|
</div>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-bottom:1.25rem">Hetzner CX22</p>
|
|
<ul class="rl-check-list">
|
|
<li>2 vCPU cores</li>
|
|
<li>4 GB RAM</li>
|
|
<li>40 GB NVMe SSD</li>
|
|
<li>Up to ~500 users</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Standard -->
|
|
<div class="rl-card" style="border-color:rgba(99,102,241,0.5)">
|
|
<span class="rl-badge" style="background:#6366f1;margin-bottom:0.5rem">RECOMMENDED</span>
|
|
<h3>Standard</h3>
|
|
<p style="font-size:0.82rem;color:#94a3b8;margin-bottom:1rem">Growing communities</p>
|
|
<div style="font-size:2rem;font-weight:700;color:#e2e8f0;margin-bottom:0.25rem">
|
|
€6.80<span style="font-size:0.875rem;font-weight:400;color:#94a3b8">/mo</span>
|
|
</div>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-bottom:1.25rem">Hetzner CX32</p>
|
|
<ul class="rl-check-list">
|
|
<li>4 vCPU cores</li>
|
|
<li>8 GB RAM</li>
|
|
<li>80 GB NVMe SSD</li>
|
|
<li>Up to ~2,000 users</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Performance -->
|
|
<div class="rl-card">
|
|
<h3>Performance</h3>
|
|
<p style="font-size:0.82rem;color:#94a3b8;margin-bottom:1rem">Large communities</p>
|
|
<div style="font-size:2rem;font-weight:700;color:#e2e8f0;margin-bottom:0.25rem">
|
|
€13.80<span style="font-size:0.875rem;font-weight:400;color:#94a3b8">/mo</span>
|
|
</div>
|
|
<p style="font-size:0.75rem;color:#64748b;margin-bottom:1.25rem">Hetzner CX42</p>
|
|
<ul class="rl-check-list">
|
|
<li>8 vCPU cores</li>
|
|
<li>16 GB RAM</li>
|
|
<li>160 GB NVMe SSD</li>
|
|
<li>Up to ~10,000 users</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What You Get -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What You Get</h2>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3>Automated SSL</h3>
|
|
<p>Let's Encrypt certificates provisioned automatically during setup.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
|
|
</div>
|
|
<h3>Multiple Regions</h3>
|
|
<p>Deploy in Germany, Finland, or the US East/West Coast.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 15l3-3 3 3"/><path d="M8 8h.01M12 8h.01"/></svg>
|
|
</div>
|
|
<h3>Full SSH Access</h3>
|
|
<p>Your server, your rules. SSH in anytime for custom configuration.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
|
|
</div>
|
|
<h3>One-Click Updates</h3>
|
|
<p>Discourse's built-in admin panel handles version upgrades.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"/></svg>
|
|
</div>
|
|
<h3>DNS Management</h3>
|
|
<p>Automatic DNS setup for *.rforum.online subdomains.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
</div>
|
|
<h3>Real-Time Logs</h3>
|
|
<p>Watch your forum provision step-by-step in the dashboard.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section rl-section--alt">
|
|
<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 rForum.</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
|
</div>
|
|
<h3>Discourse</h3>
|
|
<p>The world's most popular open-source forum platform.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
|
|
</div>
|
|
<h3>Hetzner Cloud API</h3>
|
|
<p>Automated VPS provisioning in multiple regions.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3>Cloudflare API</h3>
|
|
<p>DNS management and SSL termination.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12)">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
</div>
|
|
<h3>Hono</h3>
|
|
<p>Ultra-fast, lightweight API framework powering the backend.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rForum 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 rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Ready to launch your community?</h2>
|
|
<p class="rl-subtext">Deploy a production Discourse forum in under 15 minutes. No DevOps experience needed.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rforum" class="rl-cta-primary">Launch Your Forum</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>`;
|
|
}
|