187 lines
8.0 KiB
TypeScript
187 lines
8.0 KiB
TypeScript
/**
|
|
* Forum module landing page — static HTML, no React.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline" style="color:#818cf8;background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.2)">rForum</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#d8b4fe);-webkit-background-clip:text;background-clip:text">
|
|
Deploy Your Own Discourse Forum in Minutes
|
|
</h1>
|
|
<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"
|
|
style="background:linear-gradient(135deg,#4f46e5,#6d28d9)">Get Started</a>
|
|
<a href="#pricing" class="rl-cta-secondary">View Pricing</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How it Works -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text">How It Works</h2>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-card">
|
|
<div class="rl-icon-box" style="background:rgba(99,102,241,0.12);color:#818cf8">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" 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" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</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">
|
|
<div class="rl-icon-box" style="background:rgba(139,92,246,0.12);color:#a78bfa">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" 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">
|
|
<div class="rl-icon-box" style="background:rgba(168,85,247,0.12);color:#c084fc">
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" 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;background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text">
|
|
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>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text">
|
|
What You Get
|
|
</h2>
|
|
<div class="rl-grid-3" style="margin-top:2rem">
|
|
<div class="rl-card">
|
|
<h3>Automated SSL</h3>
|
|
<p>Let's Encrypt certificates provisioned automatically during setup.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>Multiple Regions</h3>
|
|
<p>Deploy in Germany, Finland, or the US East/West Coast.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>Full SSH Access</h3>
|
|
<p>Your server, your rules. SSH in anytime for custom configuration.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>One-Click Updates</h3>
|
|
<p>Discourse's built-in admin panel handles version upgrades.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>DNS Management</h3>
|
|
<p>Automatic DNS setup for *.rforum.online subdomains.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<h3>Real-Time Logs</h3>
|
|
<p>Watch your forum provision step-by-step in the dashboard.</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" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text">
|
|
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"
|
|
style="background:linear-gradient(135deg,#4f46e5,#6d28d9)">Launch Your Forum</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back"><a href="/">← Back to rSpace</a></div>
|
|
`;
|
|
}
|