about.html
{{template "main.html" .}}
{{define "title"}}About - 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 — The Story Behind 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">
The Story Behind<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">
We built ReadySite because anyone with an idea deserves a website that just works.
</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-powered website builder</strong>
that turns your ideas into real websites. Describe what you want, and AI builds
it for you — pages, content, layout, all of it.
</p>
<p class="text-[#888] text-lg leading-relaxed reveal" data-delay="200">
No code required. No templates to wrestle with. 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 do 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 file hosting and a built-in database. Connect your
automation tools and external services to write data in real time —
then surface it instantly on your website through views. 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">
And it's all open source. No lock-in, no surprises — 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">21</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">0</div>
<div class="text-[#888] text-sm">Lines of code needed</div>
<div class="text-[#555] text-xs mt-1">Describe it, ReadySite builds it</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. 21 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">
Fast sites keep visitors around. Slow sites lose them.
</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://readysite.org/git" target="_blank" rel="noopener" class="inline-block 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">
View Source Code →
</a>
</div>
</div>
</section>
<!-- ============================================
SECTION 6: 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}}