18.0 KB
about.html
{{template "main.html" .}}
{{define "title"}}About - ReadySite{{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 — Why We Built ReadySite
============================================ -->
<section class="relative min-h-[70vh] 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">
Why We Built<br>
<span class="gradient-text">ReadySite</span>
</h1>
<p class="text-lg sm:text-xl text-[#888] mb-12 leading-relaxed max-w-2xl mx-auto reveal" data-delay="100">
WordPress powers 43% of the web. It also gives you 800ms page loads, plugin conflicts, and decades of technical debt. The web deserves a modern alternative.
</p>
<div class="reveal" data-delay="200">
<img src="/static/gophers/soldering.svg" alt="Go gopher soldering" class="gopher gopher-md mx-auto">
</div>
</div>
</section>
<!-- ============================================
SECTION 2: What is ReadySite
============================================ -->
<section class="py-24 px-6 border-t border-white/5">
<div class="max-w-6xl mx-auto">
<div class="flex flex-col lg:flex-row gap-12 lg:gap-20">
<!-- Left: Story -->
<div class="flex-1 space-y-6">
<h2 class="hero-headline text-3xl sm:text-4xl font-bold text-white reveal">What is ReadySite?</h2>
<p class="text-[#888] text-lg leading-relaxed reveal" data-delay="100">
ReadySite is an <strong class="text-white">AI-native CMS</strong> —
the WordPress alternative built for a world where AI can create what you need on the fly.
Describe what you want, and AI builds it for you — pages, content, collections, all of it.
</p>
<p class="text-[#888] text-lg leading-relaxed reveal" data-delay="200">
No plugin hell. No legacy stack. No MySQL configuration. Just tell ReadySite what
you're building — a portfolio, a restaurant site, a blog, an online
store — and watch it come together. And if you want to write code,
ReadySite has a powerful built-in editor with first-class syntax support.
</p>
<p class="text-[#888] text-lg leading-relaxed reveal" data-delay="300">
Every site comes with a built-in database and file hosting. Define typed
collections for your data — products, events, team members —
like custom post types, but actually good. Your site becomes
a living dashboard for everything your business runs on.
</p>
<p class="text-[#888] text-lg leading-relaxed reveal" data-delay="400">
The freedom WordPress promised, without the baggage.
Open source (MIT), self-hostable, no lock-in — your site,
your data, your rules.
</p>
</div>
<!-- Right: Stat cards -->
<div class="lg:w-80 flex flex-col gap-5">
<div class="bento-card reveal" data-delay="100">
<div class="bento-card-accent bg-violet-500"></div>
<div class="text-4xl font-bold text-white mb-1">39</div>
<div class="text-[#888] text-sm">AI tools built in</div>
<div class="text-[#555] text-xs mt-1">Build pages, write copy, edit content</div>
</div>
<div class="bento-card reveal" data-delay="200">
<div class="bento-card-accent bg-cyan-500"></div>
<div class="text-4xl font-bold text-white mb-1">~100ms</div>
<div class="text-[#888] text-sm">Average response time</div>
<div class="text-[#555] text-xs mt-1">Go + SQLite, uncached</div>
</div>
<div class="bento-card reveal" data-delay="300">
<div class="bento-card-accent bg-emerald-500"></div>
<div class="text-4xl font-bold text-white mb-1">MIT</div>
<div class="text-[#888] text-sm">Open source, always</div>
<div class="text-[#555] text-xs mt-1">Your site, your data, no lock-in</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
SECTION 3: Platform Overview — Three Pillars
============================================ -->
<section class="py-24 px-6 border-t border-white/5">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16 reveal">
<h2 class="hero-headline text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">Three pillars, one platform</h2>
<p class="text-[#888] text-lg max-w-xl mx-auto">Everything you need to build, manage, and deploy.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
<!-- CMS -->
<div class="bento-card reveal" data-delay="0">
<div class="bento-card-accent bg-violet-500"></div>
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-xl bg-violet-500/10 flex items-center justify-center text-violet-400 flex-shrink-0">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">ReadySite CMS</h3>
<p class="text-[#888] text-sm leading-relaxed">
AI-native content management. Pages, collections, documents —
with a chat interface that builds your site for you. 39 AI tools,
version history, undo/redo.
</p>
</div>
<!-- Hosting -->
<div class="bento-card reveal" data-delay="100">
<div class="bento-card-accent bg-cyan-500"></div>
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-400 flex-shrink-0">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">ReadySite Hosting</h3>
<p class="text-[#888] text-sm leading-relaxed">
Your CMS runs out of the box — sign up, name your site, and
you're live. Need custom services? Connect APIs and databases
as your project grows.
</p>
</div>
<!-- Framework -->
<div class="bento-card reveal" data-delay="200">
<div class="bento-card-accent bg-emerald-500"></div>
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 flex-shrink-0">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">ReadySite Framework</h3>
<p class="text-[#888] text-sm leading-relaxed">
For the builders who want full control. An open-source framework
you can extend, customize, and make entirely your own.
</p>
</div>
</div>
</div>
</section>
<!-- ============================================
SECTION 4: Built for Speed
============================================ -->
<section class="py-24 px-6 border-t border-white/5">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-16 reveal">
<h2 class="hero-headline text-3xl sm:text-4xl font-bold text-white mb-4">Built for speed</h2>
<p class="text-[#888] text-lg">Your site loads fast. Really fast.</p>
</div>
<div class="bento-card reveal" data-delay="100">
<div class="bento-card-accent bg-violet-500"></div>
<div class="space-y-6">
<!-- ReadySite -->
<div>
<div class="flex items-center justify-between mb-2">
<span class="text-white font-medium text-sm">ReadySite</span>
<span class="text-violet-400 font-mono text-sm font-semibold">~100ms</span>
</div>
<div class="h-8 rounded-lg overflow-hidden bg-white/5">
<div class="speed-bar h-full rounded-lg" style="width: 100%; background: linear-gradient(90deg, var(--color-violet), var(--color-cyan));"></div>
</div>
</div>
<!-- Ghost -->
<div>
<div class="flex items-center justify-between mb-2">
<span class="text-[#888] text-sm">Ghost</span>
<span class="text-[#666] font-mono text-sm">~300ms</span>
</div>
<div class="h-8 rounded-lg overflow-hidden bg-white/5">
<div class="speed-bar h-full rounded-lg bg-[#333]" style="width: 37.5%;"></div>
</div>
</div>
<!-- Drupal -->
<div>
<div class="flex items-center justify-between mb-2">
<span class="text-[#888] text-sm">Drupal</span>
<span class="text-[#666] font-mono text-sm">~600ms</span>
</div>
<div class="h-8 rounded-lg overflow-hidden bg-white/5">
<div class="speed-bar h-full rounded-lg bg-[#2a2a2a]" style="width: 18.75%;"></div>
</div>
</div>
<!-- WordPress -->
<div>
<div class="flex items-center justify-between mb-2">
<span class="text-[#888] text-sm">WordPress</span>
<span class="text-[#666] font-mono text-sm">~800ms</span>
</div>
<div class="h-8 rounded-lg overflow-hidden bg-white/5">
<div class="speed-bar h-full rounded-lg bg-[#222]" style="width: 12.5%;"></div>
</div>
</div>
</div>
<p class="text-[#555] text-sm mt-8 text-center">
Uncached page load, typical configuration. Go + SQLite vs PHP + MySQL.
</p>
</div>
</div>
</section>
<!-- ============================================
SECTION 5: Open Source, Always
============================================ -->
<section class="relative py-32 px-6 overflow-hidden border-t border-white/5">
<div class="hero-glow" style="top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.08;"></div>
<div class="relative z-10 max-w-3xl mx-auto text-center">
<div class="mb-8 reveal">
<img src="/static/gophers/power-to-the-masses.svg" alt="Go gopher sharing power" class="gopher gopher-sm mx-auto gopher-float">
</div>
<h2 class="hero-headline text-4xl sm:text-5xl font-bold text-white mb-6 reveal" data-delay="100">
Open Source, <span class="gradient-text">Always</span>
</h2>
<p class="text-[#888] text-lg mb-10 max-w-xl mx-auto reveal" data-delay="200">
MIT licensed. Your site, your data, your rules. Deploy on our cloud or
run it on your own infrastructure. ReadySite will never lock you in.
</p>
<div class="reveal" data-delay="300">
<a href="https://github.com/readysite/readysite" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-8 py-3.5 border border-white/15 text-white font-medium rounded-lg hover:bg-white/5 hover:border-white/25 transition-all text-base">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
View Source Code →
</a>
</div>
</div>
</section>
<!-- ============================================
SECTION 6: Our Mission
============================================ -->
<section class="py-24 px-6 border-t border-white/5">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-12 reveal">
<h2 class="hero-headline text-3xl sm:text-4xl font-bold text-white mb-4">Our Mission</h2>
</div>
<div class="space-y-6 text-[#888] text-lg leading-relaxed reveal" data-delay="100">
<p>
AI is making it possible for anyone to create software. The remaining barrier isn't building — it's shipping. Servers, containers, DNS, SSL, databases — the gap between "it works on my machine" and "it's live on the internet" is still too wide.
</p>
<p>
<span class="text-white font-medium">ReadySite closes that gap.</span> Describe what you want, and AI builds it. Click deploy, and it's live. No DevOps, no infrastructure knowledge, no friction between idea and running website.
</p>
<p>
ReadySite is open source because the tools people use to publish on the web should belong to everyone. MIT licensed, self-hostable, no lock-in — your site, your data, your rules.
</p>
</div>
<div class="mt-10 text-center reveal" data-delay="200">
<a href="https://github.com/readysite/readysite" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-6 py-3 border border-white/15 text-[#888] font-medium rounded-lg hover:bg-white/5 hover:border-white/25 hover:text-white transition-all text-sm">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
View on GitHub
</a>
</div>
</div>
</section>
<!-- ============================================
SECTION 7: 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 something?</h2>
<p class="text-[#888] text-lg mb-10 reveal" data-delay="200">
Free to start, yours to grow.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 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>
<a href="/docs/docker" class="inline-block px-8 py-4 border border-white/15 text-[#888] font-medium rounded-xl hover:bg-white/5 hover:border-white/25 hover:text-white transition-all text-base">
Or self-host it →
</a>
</div>
</div>
</section>
{{end}}