{{template "main.html" .}}

{{define "title"}}Congo — Go Framework{{end}}

{{define "content"}}
<style>
    .cloud-wrap {
        position: relative;
        overflow: hidden;
    }
    .cloud-layer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 120%;
        pointer-events: none;
        overflow: visible;
        z-index: 0;
    }
    .cloud-layer-back  { z-index: 0; }
    .cloud-layer-front { z-index: 1; }
    .cloud-layer ~ section { position: relative; z-index: 10; }
    .cloud {
        position: absolute;
        will-change: transform;
        filter: drop-shadow(0 4px 12px rgba(79,142,247,0.18)) drop-shadow(0 1px 2px rgba(79,142,247,0.12));
    }
    @keyframes drift {
        from { transform: translateX(-120%); }
        to { transform: translateX(calc(100vw + 120%)); }
    }

    /* Feature cards: gentle floating + soft underglow */
    .feature-float {
        animation: float-bob 6s ease-in-out infinite;
        box-shadow: 0 4px 16px rgba(79,142,247,0.08), 0 1px 4px rgba(79,142,247,0.05);
    }
    .feature-float:hover {
        animation-play-state: paused;
        box-shadow: 0 8px 28px rgba(79,142,247,0.18), 0 2px 8px rgba(79,142,247,0.1);
    }
    @keyframes float-bob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
    }
    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 4px 16px rgba(79,142,247,0.08), 0 1px 4px rgba(79,142,247,0.05); }
        50% { box-shadow: 0 6px 24px rgba(79,142,247,0.14), 0 2px 8px rgba(79,142,247,0.08); }
    }
</style>
<div class="cloud-wrap">
<div class="cloud-layer cloud-layer-back" id="clouds-behind"></div>
<div class="cloud-layer cloud-layer-front" id="clouds-front"></div>

<!-- Hero -->
<section class="relative min-h-[70vh] flex items-center justify-center px-6">
    <div class="hero-glow"></div>
    <div class="relative text-center max-w-xl mx-auto">
        <h1 class="text-5xl md:text-6xl font-bold tracking-tight leading-[1.1] mb-5">
            Build fast.<br><span class="shimmer text-accent">Ship faster.</span>
        </h1>
        <p class="text-body text-base leading-relaxed mb-8 max-w-md mx-auto">
            One binary. Routing, database, templates, deployment — all included.
            Source code vendored into your project. Read it, modify it, own it.
        </p>
        <div class="flex gap-3 justify-center mb-6" hx-boost="true">
            <a href="/source" class="btn-glow"><span class="font-mono text-xs mr-1">&lt;/&gt;</span> View Source</a>
            <a href="/framework" class="btn-glow btn-glow-primary">Get Started</a>
        </div>
    </div>
</section>

<!-- Three Steps -->
<section class="py-20 px-6">
    <div class="max-w-3xl mx-auto">
        <h2 class="text-2xl font-bold text-center mb-3 tracking-tight">Three commands, running app</h2>
        <p class="text-muted text-sm text-center mb-14">Requires <a href="https://go.dev/dl/" class="text-accent hover:text-bright transition-colors" target="_blank" rel="noopener">Go 1.25+</a></p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="text-accent text-xs font-mono mb-3">01</div>
                <div class="code-block mb-3">
                    <pre><code class="language-bash">congo init myapp</code></pre>
                </div>
                <p class="text-body text-sm leading-relaxed">Scaffolds a project with the full framework vendored inside.</p>
            </div>
            <div class="text-center">
                <div class="text-accent text-xs font-mono mb-3">02</div>
                <div class="code-block mb-3">
                    <pre><code class="language-bash">congo dev</code></pre>
                </div>
                <p class="text-body text-sm leading-relaxed">Dev server with hot reload at <code class="text-accent">localhost:5000</code>. Change a file, server restarts.</p>
            </div>
            <div class="text-center">
                <div class="text-accent text-xs font-mono mb-3">03</div>
                <div class="code-block mb-3">
                    <pre><code class="language-bash">congo launch</code></pre>
                </div>
                <p class="text-body text-sm leading-relaxed">Builds, ships, and deploys with health checks and rollback.</p>
            </div>
        </div>
    </div>
</section>

<!-- Features -->
<section class="py-20 px-6">
    <div class="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="glow-card feature-float p-6" style="animation: float-bob 5s ease-in-out -0.5s infinite, pulse-glow 3s ease-in-out -0.5s infinite;">
            <h3 class="text-bright font-semibold text-sm mb-2">Vendored Source</h3>
            <p class="text-body text-sm leading-relaxed">The full framework is copied into your project as regular Go files. Read every line, modify anything, no hidden magic.</p>
        </div>
        <div class="glow-card feature-float p-6" style="animation: float-bob 5.5s ease-in-out -2s infinite, pulse-glow 3.5s ease-in-out -1s infinite;">
            <h3 class="text-bright font-semibold text-sm mb-2">HTMX + DaisyUI</h3>
            <p class="text-body text-sm leading-relaxed">Server-rendered HTML with HTMX interactivity and DaisyUI components. Most pages need zero JavaScript.</p>
        </div>
        <div class="glow-card feature-float p-6" style="animation: float-bob 4.8s ease-in-out -3.5s infinite, pulse-glow 3.2s ease-in-out -2s infinite;">
            <h3 class="text-bright font-semibold text-sm mb-2">SQLite ORM</h3>
            <p class="text-body text-sm leading-relaxed">Auto-migrating database with type-safe collections. Define a struct, get CRUD. <a href="https://turso.tech/libsql" class="text-accent hover:text-bright transition-colors" target="_blank" rel="noopener">LibSQL</a> for production replicas.</p>
        </div>
        <div class="glow-card feature-float p-6" style="animation: float-bob 5.2s ease-in-out -1s infinite, pulse-glow 3.8s ease-in-out -2.5s infinite;">
            <h3 class="text-bright font-semibold text-sm mb-2">React Islands</h3>
            <p class="text-body text-sm leading-relaxed">Optional React components for complex UI. Auto-mounted on page load and HTMX swaps. HMR in development.</p>
        </div>
        <div class="glow-card feature-float p-6" style="animation: float-bob 5.8s ease-in-out -4s infinite, pulse-glow 3s ease-in-out -1.5s infinite;">
            <h3 class="text-bright font-semibold text-sm mb-2">AI-Ready</h3>
            <p class="text-body text-sm leading-relaxed"><code class="text-accent">congo claude</code> launches Claude Code with full framework context. AI knows your patterns.</p>
        </div>
        <div class="glow-card feature-float p-6" style="animation: float-bob 4.5s ease-in-out -2.5s infinite, pulse-glow 3.4s ease-in-out -0.8s infinite;">
            <h3 class="text-bright font-semibold text-sm mb-2">One Binary</h3>
            <p class="text-body text-sm leading-relaxed">Web server, CLI, database, and deployment tooling compile into a single executable. No runtime dependencies.</p>
        </div>
    </div>
</section>

<!-- Congo Dev -->
<section class="section-divide py-20 px-6">
    <div class="max-w-3xl mx-auto">
        <h2 class="text-2xl font-bold text-center mb-3 tracking-tight">Congo Workspace</h2>
        <p class="text-muted text-sm text-center mb-10">Your development workspace. Ships with Congo. Deploy it on any server and get a browser IDE, Docker hosting, and an AI agent that works while you sleep.</p>
        <div class="glow-card p-6 mb-4">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #4f8ef7, #7c3aed);">
                    <span class="text-white text-sm font-bold">D</span>
                </div>
                <div>
                    <h3 class="text-bright font-semibold text-sm mb-2">One server. Everything you need.</h3>
                    <p class="text-body text-sm leading-relaxed mb-3">Browser IDE, Docker container management, automatic TLS, AI agent, and a persistent workspace. Install with one command, start building immediately.</p>
                    <div class="flex gap-3" hx-boost="true">
                        <a href="/workspace" class="text-accent text-sm font-medium" style="text-decoration: none;">Learn more &rarr;</a>
                        <a href="/workspace#setup" class="text-muted text-sm" style="text-decoration: none;">Get started</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- What we've built -->
<section class="py-16 px-6">
    <div class="max-w-3xl mx-auto">
        <h2 class="text-2xl font-bold text-center mb-3 tracking-tight">What we've built with Congo</h2>
        <p class="text-muted text-sm text-center mb-10">Every service below is a Congo app — built with the framework, deployed with Congo Dev, running on one server. This is what the framework makes possible.</p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <a href="https://host.congo.gg" class="glow-card p-4 no-underline" target="_blank">
                <h3 class="text-bright font-semibold text-sm mb-1"><span class="live-dot"></span>Host</h3>
                <p class="text-muted text-xs leading-relaxed">VPS hosting with Congo Dev pre-installed.</p>
            </a>
            <a href="https://domains.congo.gg" class="glow-card p-4 no-underline" target="_blank">
                <h3 class="text-bright font-semibold text-sm mb-1"><span class="live-dot"></span>Domains</h3>
                <p class="text-muted text-xs leading-relaxed">Domain registration and DNS management.</p>
            </a>
            <a href="https://mail.congo.gg" class="glow-card p-4 no-underline" target="_blank">
                <h3 class="text-bright font-semibold text-sm mb-1"><span class="live-dot"></span>Mail</h3>
                <p class="text-muted text-xs leading-relaxed">Transactional email via simple API.</p>
            </a>
            <a href="https://ping.congo.gg" class="glow-card p-4 no-underline" target="_blank">
                <h3 class="text-bright font-semibold text-sm mb-1"><span class="live-dot"></span>Ping</h3>
                <p class="text-muted text-xs leading-relaxed">Real-time messaging with push notifications.</p>
            </a>
            <a href="https://news.congo.gg" class="glow-card p-4 no-underline" target="_blank">
                <h3 class="text-bright font-semibold text-sm mb-1"><span class="live-dot"></span>News</h3>
                <p class="text-muted text-xs leading-relaxed">What we're building. Follow along.</p>
            </a>
            <a href="https://feedback.congo.gg" class="glow-card p-4 no-underline" target="_blank">
                <h3 class="text-bright font-semibold text-sm mb-1"><span class="live-dot"></span>Feedback</h3>
                <p class="text-muted text-xs leading-relaxed">Report bugs, share ideas, vote.</p>
            </a>
        </div>
    </div>
</section>

<!-- Dogfooding -->
<section class="py-20 px-6">
    <div class="max-w-3xl mx-auto text-center">
        <p class="text-body text-sm leading-relaxed mb-6">
            This website is a Congo app. Five controllers, two models, thirteen templates.
            <a href="/source/web" class="text-accent hover:text-bright transition-colors" hx-boost="true">Browse its source</a> to see how it's built.
        </p>
        <div class="flex gap-3 justify-center" hx-boost="true">
            <a href="/philosophy" class="btn-glow">Why These Choices</a>
            <a href="/framework" class="btn-glow btn-glow-primary">Learn the Framework</a>
        </div>
    </div>
</section>

<!-- Mailing List -->
<section class="py-12 px-6">
    <div class="max-w-md mx-auto">
        {{template "mailing-list.html" .}}
    </div>
</section>
</div><!-- /cloud-wrap -->

<script nonce="{{nonce}}">
(function() {
    // Storybook cloud: puffy bumps on top/sides, smooth arch on bottom
    function makeCloud(w) {
        var bumps = Math.floor(4 + (w / 80));
        if (bumps > 7) bumps = 7;
        var h = w * 0.55;
        var cx = w / 2, cy = h * 0.45;
        var pad = w * 0.2;

        // Place bumps only on top half (–π to 0), keeping bottom smooth
        var circles = [];
        for (var i = 0; i < bumps; i++) {
            var angle = -Math.PI + (Math.PI * ((i + 0.5) / bumps)) + (Math.random() - 0.5) * 0.25;
            var r = (w * 0.18) * (0.8 + Math.random() * 0.4);
            var distX = w * 0.3 * (0.85 + Math.random() * 0.3);
            var distY = h * 0.25 * (0.85 + Math.random() * 0.3);
            var bx = cx + Math.cos(angle) * distX;
            var by = cy + Math.sin(angle) * distY;
            circles.push({ cx: bx, cy: by, r: r });
        }

        // Bottom arch: wide flat ellipse spanning the base
        var archCy = h * 0.55;
        var archRx = w * 0.42;
        var archRy = h * 0.22;

        var svg = '<svg viewBox="' + (-pad) + ' ' + (-pad) + ' ' + (w + pad*2) + ' ' + (h + pad*2) + '" xmlns="http://www.w3.org/2000/svg">';
        // Bottom arch ellipse — smooth curved base
        svg += '<ellipse cx="' + cx + '" cy="' + archCy.toFixed(1) +
               '" rx="' + archRx.toFixed(1) + '" ry="' + archRy.toFixed(1) + '" fill="white"/>';
        // Core body
        svg += '<ellipse cx="' + cx + '" cy="' + cy + '" rx="' + (w * 0.3).toFixed(1) +
               '" ry="' + (h * 0.25).toFixed(1) + '" fill="white"/>';
        // Bumps on top and sides
        for (var j = 0; j < circles.length; j++) {
            var c = circles[j];
            svg += '<circle cx="' + c.cx.toFixed(1) + '" cy="' + c.cy.toFixed(1) +
                   '" r="' + c.r.toFixed(1) + '" fill="white"/>';
        }
        svg += '</svg>';
        return { svg: svg, h: h };
    }

    var layers = [
        { id: 'clouds-behind', count: 10, minW: 200, maxW: 380, minDur: 35, maxDur: 120, minOp: 0.75, maxOp: 0.95 },
        { id: 'clouds-front', count: 8, minW: 130, maxW: 280, minDur: 18, maxDur: 70, minOp: 0.85, maxOp: 1.0 }
    ];

    layers.forEach(function(layer) {
        var container = document.getElementById(layer.id);
        if (!container) return;
        for (var i = 0; i < layer.count; i++) {
            var el = document.createElement('div');
            el.className = 'cloud';
            var w = layer.minW + Math.random() * (layer.maxW - layer.minW);
            var cloud = makeCloud(Math.round(w));
            var top = 15 + Math.random() * 70; // Start below nav, not at the very top
            var dur = layer.minDur + Math.random() * (layer.maxDur - layer.minDur);
            var delay = -(Math.random() * dur);
            var op = layer.minOp + Math.random() * (layer.maxOp - layer.minOp);

            el.style.width = w + 'px';
            el.style.top = top + '%';
            el.style.opacity = op.toFixed(2);
            el.style.animation = 'drift ' + dur.toFixed(1) + 's linear ' + delay.toFixed(1) + 's infinite';
            el.innerHTML = cloud.svg;
            container.appendChild(el);
        }
    });

    // Parallax on scroll — back layer drifts slower than front
    var behind = document.getElementById('clouds-behind');
    var front = document.getElementById('clouds-front');
    var ticking = false;
    window.addEventListener('scroll', function() {
        if (!ticking) {
            requestAnimationFrame(function() {
                var y = window.scrollY;
                if (behind) behind.style.transform = 'translateY(' + (-y * 0.15) + 'px)';
                if (front) front.style.transform = 'translateY(' + (-y * 0.4) + 'px)';
                ticking = false;
            });
            ticking = true;
        }
    });
})();
</script>
{{end}}