index.html
{{template "main.html" .}}
{{define "title"}}ReadySite Hosting - Deploy Your Site in Seconds{{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-[90vh] flex items-center overflow-hidden dot-grid pt-24">
<!-- Background glow -->
<div class="hero-glow" style="top: -200px; left: 50%; transform: translateX(-50%);"></div>
<div class="max-w-6xl mx-auto px-6 py-24 w-full">
<div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
<!-- Text -->
<div class="flex-1 text-center lg:text-left">
<div class="status-pill mb-8 inline-flex">
<span class="status-dot"></span>
<span>Open Source</span>
</div>
<h1 class="hero-headline text-5xl sm:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-6 leading-[1.1]">
Ready, Site,<br>
<span class="gradient-text">Go.</span>
</h1>
<p class="text-lg sm:text-xl text-[#888] mb-10 leading-relaxed max-w-lg mx-auto lg:mx-0">
The AI-powered website builder.<br class="hidden sm:block">
Describe your idea, get a live site.
</p>
<div class="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start">
<a href="https://readysite.org/git" target="_blank" rel="noopener" class="w-full sm:w-auto 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 order-2 sm:order-1">
View Source Code →
</a>
<a href="/signup" class="w-full sm:w-auto px-8 py-3.5 bg-white text-black font-semibold rounded-lg hover:bg-[#e5e5e5] transition-colors text-base order-1 sm:order-2">
Start for Free →
</a>
</div>
</div>
<!-- Rocket Gopher -->
<div class="flex-shrink-0">
<img src="/static/gophers/rocket.svg" alt="Go gopher launching a rocket" class="gopher gopher-float w-64 lg:w-80">
</div>
</div>
</div>
</section>
<!-- ============================================
SECTION 2: Features — Bento Grid
============================================ -->
<section class="py-24 px-6">
<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">Everything you need to launch</h2>
<p class="text-[#888] text-lg max-w-xl mx-auto">From first idea to live website. No technical skills required.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<!-- Card 1: Powerful CMS (tall, spans 2 rows) -->
<div class="bento-card md:row-span-2 reveal" data-delay="0">
<div class="bento-card-accent bg-violet-500"></div>
<div class="flex flex-col h-full">
<div class="mb-6">
<img src="/static/gophers/jet-pack.svg" alt="Go gopher with jet pack" class="gopher gopher-sm mx-auto md:mx-0 mb-4">
</div>
<h3 class="text-xl font-semibold text-white mb-3">Powerful CMS</h3>
<p class="text-[#888] text-sm leading-relaxed mb-6">Everything you love about WordPress — pages, collections, media — but faster and powered by AI. Describe what you want, and your site builds itself.</p>
<p class="text-[#888] text-sm leading-relaxed mt-auto">Ready to integrate with all your other tools and services as you grow.</p>
</div>
</div>
<!-- Card 2: Visual Manager -->
<a href="#architecture" class="bento-card bento-card-link 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="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4z"/><path stroke-linecap="round" stroke-width="2" d="M10 7h4M7 11v4"/></svg>
</div>
</div>
<h3 class="text-lg font-semibold text-white mb-2">Visual Manager</h3>
<p class="text-[#888] text-sm leading-relaxed">Drag-and-drop canvas to connect services, databases, and domains. See everything your site runs on at a glance.</p>
</a>
<!-- Card 3: Custom Domains -->
<a href="#how-it-works" class="bento-card bento-card-link 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
</div>
</div>
<h3 class="text-lg font-semibold text-white mb-2">Custom Domains</h3>
<p class="text-[#888] text-sm leading-relaxed mb-4">Free SSL, automatic HTTPS. Point your domain and you're live.</p>
<div class="mini-terminal">
<span class="text-emerald-400">🔒</span> <span class="text-[#e5e5e5]">my-app.example.com</span>
</div>
</a>
<!-- Card 4: Open Source (wide, spans 2 cols) -->
<a href="https://readysite.org" target="_blank" rel="noopener" class="bento-card bento-card-link lg:col-span-2 reveal" data-delay="300">
<div class="bento-card-accent bg-violet-500" style="background: linear-gradient(135deg, #8b5cf6, #22d3ee);"></div>
<div class="flex flex-col sm:flex-row items-center gap-6">
<img src="/static/gophers/power-to-the-masses.svg" alt="Go gopher sharing power" class="gopher gopher-xs flex-shrink-0">
<div>
<h3 class="text-xl font-semibold text-white mb-2">Built in the Open</h3>
<p class="text-[#888] text-sm leading-relaxed">Your site, your data, your rules. ReadySite is open-source — use our cloud or run it yourself. No lock-in, no surprises.</p>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- ============================================
SECTION 4: How It Works
============================================ -->
<section id="how-it-works" class="py-24 px-6 border-t border-white/5">
<div class="max-w-4xl mx-auto">
<h2 class="hero-headline text-3xl sm:text-4xl font-bold text-white mb-16 text-center reveal">Three steps to launch</h2>
<div class="steps-container reveal">
<div class="steps-line hidden md:block"></div>
<div class="step-item reveal" data-delay="0">
<div class="step-number text-white bg-violet-500">1</div>
<div class="step-text">
<h3 class="text-white font-semibold mb-1 text-lg">Sign up</h3>
<p class="text-[#888] text-sm">Magic link — no passwords. Enter your email and click.</p>
</div>
</div>
<div class="step-item reveal" data-delay="200">
<div class="step-number text-white bg-cyan-500">2</div>
<div class="step-text">
<h3 class="text-white font-semibold mb-1 text-lg">Create a site</h3>
<p class="text-[#888] text-sm">Name it, get an instant preview URL. Start building.</p>
</div>
</div>
<div class="step-item reveal" data-delay="400">
<div class="step-number text-white bg-emerald-500">3</div>
<div class="step-text">
<h3 class="text-white font-semibold mb-1 text-lg">Go live</h3>
<p class="text-[#888] text-sm">Add your domain, attach services. Scale when you're ready.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
SECTION 5: Canvas Mockup — Bring Your Data
============================================ -->
<section id="architecture" class="relative py-24 px-6 border-t border-white/5">
<div class="max-w-5xl mx-auto">
<h2 class="hero-headline text-3xl sm:text-4xl font-bold text-white mb-10 text-center reveal">Bring your data <span class="gradient-text">with you</span></h2>
<div class="canvas-mockup reveal">
<!-- Nodes — Salesforce on left, arrow, Website+Database on right -->
<div class="relative z-10 flex flex-col md:flex-row items-center justify-center gap-0">
<!-- Salesforce Integration — accent on left side, particles converging inward -->
<div class="canvas-node particle-emitter md:self-end" id="salesforce-node">
<div class="canvas-node-accent bg-emerald-500"></div>
<div class="canvas-node-icon bg-emerald-500/15 text-emerald-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
</div>
<div>
<div class="canvas-node-label">Salesforce</div>
<div class="canvas-node-sublabel">API Integration</div>
</div>
</div>
<!-- Animated connecting line: Salesforce → Website -->
<div class="hidden md:flex flex-col items-center self-end">
<div class="flex-1"></div>
<div class="flex items-center w-36 relative" style="margin-bottom: 34px;">
<div class="h-[3px] w-full" style="background: linear-gradient(90deg, rgba(16,185,129,0.25), rgba(139,92,246,0.35));"></div>
<div class="dataflow-track">
<div class="dataflow-dot"></div>
</div>
</div>
</div>
<!-- Mobile: vertical arrow -->
<div class="flex md:hidden items-center justify-center h-28 relative">
<div class="w-[3px] h-full" style="background: linear-gradient(180deg, rgba(16,185,129,0.25), rgba(139,92,246,0.15));"></div>
<div class="dataflow-track-v">
<div class="dataflow-dot-v"></div>
</div>
</div>
<!-- Website column: Database stacked above Website -->
<div class="flex flex-col items-center">
<!-- Database (small, muted — mounted on top) -->
<div class="canvas-node canvas-node-compact canvas-node-db" style="background: #0d0d0d; min-width: auto;">
<div class="canvas-node-accent bg-cyan-500/40"></div>
<div class="canvas-node-icon bg-cyan-500/10 text-cyan-400/70" style="width: 28px; height: 28px; border-radius: 6px;">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3" stroke-width="2"/><path stroke-width="2" d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path stroke-width="2" d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
</div>
<div>
<div class="text-xs font-medium text-[#999]">Database</div>
<div class="text-[10px] text-[#555]">LibSQL · 2 GB</div>
</div>
</div>
<!-- Website (prominent keystone) with particle emitter — accent on right -->
<div class="canvas-node canvas-node-hero canvas-node-right-accent particle-emitter" id="website-node">
<div class="canvas-node-accent-right bg-violet-500"></div>
<div class="canvas-node-icon bg-violet-500/20 text-violet-400" style="width: 42px; height: 42px;">
<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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9m-9 9a9 9 0 019-9"/></svg>
</div>
<div>
<div class="text-base font-semibold text-white">ReadySite Website</div>
<div class="canvas-node-sublabel">my-app.readysite.app</div>
</div>
</div>
</div>
</div>
</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}}