pricing.html
{{template "main.html" .}}
{{define "title"}}Pricing - ReadySite Hosting{{end}}
{{define "head_extra"}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<style>
.hero-headline { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
</style>
{{end}}
{{define "body_scripts"}}
<script src="/static/js/home.js"></script>
{{end}}
{{define "content"}}
<!-- ============================================
SECTION 1: Hero
============================================ -->
<section class="relative min-h-[60vh] flex items-center overflow-hidden dot-grid pt-24">
<div class="hero-glow" style="top: -200px; left: 50%; transform: translateX(-50%);"></div>
<div class="max-w-4xl mx-auto px-6 py-24 w-full text-center">
<h1 class="hero-headline text-5xl sm:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-6 leading-[1.1] reveal">
Simple, <span class="gradient-text">honest</span><br>pricing
</h1>
<p class="text-lg sm:text-xl text-[#888] mb-6 leading-relaxed max-w-2xl mx-auto reveal" data-delay="100">
Start free on shared resources. Upgrade to a persistent database when you're ready.
</p>
</div>
</section>
<!-- ============================================
SECTION 2: Pricing Cards
============================================ -->
<section class="py-12 px-6">
<div class="max-w-4xl mx-auto">
<div class="grid md:grid-cols-2 gap-8 reveal">
<!-- Free Tier -->
<div class="p-8 rounded-2xl border border-white/10 bg-white/[0.02] hover:border-white/20 hover:shadow-xl transition-all duration-300">
<h3 class="text-white font-semibold text-lg mb-2">Free</h3>
<div class="flex items-baseline gap-1 mb-1">
<span class="text-4xl font-bold text-white">$0</span>
</div>
<div class="text-[#666] text-sm mb-8">forever</div>
<ul class="space-y-3.5 text-sm text-[#999] mb-10">
<li class="flex items-start gap-3">
<span class="text-emerald-500 mt-0.5 flex-shrink-0">✓</span>
<span>Shared resources, in-memory database</span>
</li>
<li class="flex items-start gap-3">
<span class="text-emerald-500 mt-0.5 flex-shrink-0">✓</span>
<span>Unlimited preview sites</span>
</li>
<li class="flex items-start gap-3">
<span class="text-emerald-500 mt-0.5 flex-shrink-0">✓</span>
<span>readysite.app subdomain</span>
</li>
<li class="flex items-start gap-3">
<span class="text-emerald-500 mt-0.5 flex-shrink-0">✓</span>
<span>AI-powered site builder</span>
</li>
<li class="flex items-start gap-3">
<span class="text-emerald-500 mt-0.5 flex-shrink-0">✓</span>
<span>Built-in code editor</span>
</li>
<li class="flex items-start gap-3">
<span class="text-emerald-500 mt-0.5 flex-shrink-0">✓</span>
<span>Export your data anytime</span>
</li>
<li class="flex items-start gap-3">
<span class="text-emerald-500 mt-0.5 flex-shrink-0">✓</span>
<span>Community support</span>
</li>
</ul>
<a href="/signup" class="block w-full text-center px-6 py-3 border border-white/15 text-white font-medium rounded-lg hover:bg-white/5 hover:border-white/25 transition-all">
Get Started →
</a>
</div>
<!-- Pro Tier -->
<div class="p-8 rounded-2xl border-2 border-violet-500/50 bg-violet-500/[0.03] hover:border-violet-500/70 hover:shadow-xl hover:shadow-violet-500/5 transition-all duration-300 relative">
<div class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-0.5 bg-violet-500 text-white text-xs font-semibold rounded-full tracking-wide">Popular</div>
<h3 class="text-white font-semibold text-lg mb-2">Pro</h3>
<div class="flex items-baseline gap-1 mb-1">
<span class="text-4xl font-bold text-white">$0</span>
</div>
<div class="text-[#666] text-sm mb-8">forever</div>
<ul class="space-y-3.5 text-sm text-[#999] mb-10">
<li class="flex items-start gap-3">
<span class="text-violet-400 mt-0.5 flex-shrink-0">✓</span>
<span>Persistent SQLite database</span>
</li>
<li class="flex items-start gap-3">
<span class="text-violet-400 mt-0.5 flex-shrink-0">✓</span>
<span>Custom domain + free SSL</span>
</li>
<li class="flex items-start gap-3">
<span class="text-violet-400 mt-0.5 flex-shrink-0">✓</span>
<span>Daily backups</span>
</li>
<li class="flex items-start gap-3">
<span class="text-violet-400 mt-0.5 flex-shrink-0">✓</span>
<span>Priority support</span>
</li>
</ul>
<a href="/signup" class="block w-full text-center px-6 py-3 bg-white text-black font-semibold rounded-lg hover:bg-[#e5e5e5] transition-colors">
Start Building →
</a>
</div>
</div>
<!-- Need more? -->
<p class="text-center text-[#666] text-sm mt-10 reveal" data-delay="100">
Need more? Custom infrastructure, SLAs, and volume pricing —
<a href="mailto:hello@readysite.app" class="text-violet-400 hover:text-violet-300 transition-colors">contact us</a>.
</p>
</div>
</section>
<!-- ============================================
SECTION 3: What's Included — Feature Comparison
============================================ -->
<section class="py-24 px-6 border-t border-white/5">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12 reveal">
<h2 class="hero-headline text-3xl sm:text-4xl font-bold text-white mb-4">What's included</h2>
<p class="text-[#888] text-lg">Everything at a glance.</p>
</div>
<div class="bento-card reveal" data-delay="100">
<div class="bento-card-accent bg-violet-500"></div>
<div class="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-white/10">
<th class="text-left text-[#888] font-medium py-3 pr-4">Feature</th>
<th class="text-center text-[#888] font-medium py-3 px-4 w-28">Free</th>
<th class="text-center text-violet-400 font-medium py-3 pl-4 w-28">Pro</th>
</tr>
</thead>
<tbody class="text-[#999]">
<tr class="border-b border-white/5">
<td class="py-3 pr-4">AI site builder</td>
<td class="text-center py-3 px-4 text-emerald-500">✓</td>
<td class="text-center py-3 pl-4 text-emerald-500">✓</td>
</tr>
<tr class="border-b border-white/5">
<td class="py-3 pr-4">Code editor</td>
<td class="text-center py-3 px-4 text-emerald-500">✓</td>
<td class="text-center py-3 pl-4 text-emerald-500">✓</td>
</tr>
<tr class="border-b border-white/5">
<td class="py-3 pr-4">Preview sites</td>
<td class="text-center py-3 px-4 text-white">Unlimited</td>
<td class="text-center py-3 pl-4 text-white">Unlimited</td>
</tr>
<tr class="border-b border-white/5">
<td class="py-3 pr-4">Database</td>
<td class="text-center py-3 px-4 text-[#666]">In-memory</td>
<td class="text-center py-3 pl-4 text-white">Persistent</td>
</tr>
<tr class="border-b border-white/5">
<td class="py-3 pr-4">Custom domain</td>
<td class="text-center py-3 px-4 text-[#444]">—</td>
<td class="text-center py-3 pl-4 text-emerald-500">✓</td>
</tr>
<tr class="border-b border-white/5">
<td class="py-3 pr-4">Backups</td>
<td class="text-center py-3 px-4 text-[#444]">—</td>
<td class="text-center py-3 pl-4 text-white">Daily</td>
</tr>
<tr class="border-b border-white/5">
<td class="py-3 pr-4">Data export</td>
<td class="text-center py-3 px-4 text-emerald-500">✓</td>
<td class="text-center py-3 pl-4 text-emerald-500">✓</td>
</tr>
<tr>
<td class="py-3 pr-4">Support</td>
<td class="text-center py-3 px-4 text-[#666]">Community</td>
<td class="text-center py-3 pl-4 text-white">Priority</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ============================================
SECTION 4: Bottom CTA
============================================ -->
<section class="relative py-32 px-6 overflow-hidden border-t border-white/5">
<div class="cta-glow" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
<div class="relative z-10 max-w-2xl mx-auto text-center">
<div class="mb-8 reveal">
<img src="/static/gophers/superhero.svg" alt="Go gopher superhero" class="gopher gopher-md mx-auto">
</div>
<h2 class="hero-headline text-4xl sm:text-5xl font-bold text-white mb-6 reveal" data-delay="100">Ready to build?</h2>
<p class="text-[#888] text-lg mb-10 reveal" data-delay="200">
Free to start, yours to grow.
</p>
<div class="reveal" data-delay="300">
<a href="/signup" class="inline-block px-10 py-4 bg-white text-black font-semibold rounded-lg hover:bg-[#e5e5e5] transition-colors text-lg">
Start for Free →
</a>
</div>
</div>
</section>
{{end}}