{{template "main.html" .}}

{{define "title"}}Tutorial — Congo{{end}}
{{define "description"}}Make your first website in 15 minutes. No experience required. Step-by-step instructions anyone can follow.{{end}}

{{define "content"}}
<div class="max-w-3xl mx-auto px-6 py-16">
    <h1 class="text-3xl md:text-4xl font-bold tracking-tight mb-3">Make a Website</h1>
    <p class="text-body text-base mb-4">15 minutes. No experience needed.</p>
    <p class="text-body text-sm leading-relaxed mb-16">
        This tutorial walks you through making a real website from scratch and putting it on the internet.
        If you can type and follow instructions, you can do this.
    </p>

    <div class="space-y-16">

        <!-- Step 1: Install Go -->
        <section>
            <div class="text-accent text-sm font-mono mb-4">Step 1</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Install Go</h2>
            <p class="text-body leading-relaxed mb-5">
                Go is the programming language Congo uses. You need it installed on your computer.
            </p>
            <p class="text-body leading-relaxed mb-5">
                Go to <a href="https://go.dev/dl/" class="text-accent hover:text-bright transition-colors" target="_blank" rel="noopener">go.dev/dl</a> and click the big download button for your computer (Mac, Windows, or Linux). Run the installer like any other app.
            </p>
            <p class="text-body leading-relaxed mb-5">
                When it's done, open your <strong>terminal</strong>:
            </p>
            <ul class="text-body text-sm leading-relaxed mb-5 space-y-2 ml-4">
                <li><strong>Mac</strong> — open Spotlight (Cmd + Space), type <code>Terminal</code>, press Enter</li>
                <li><strong>Windows</strong> — press the Windows key, type <code>PowerShell</code>, press Enter</li>
                <li><strong>Linux</strong> — you probably already know where your terminal is</li>
            </ul>
            <p class="text-body leading-relaxed mb-5">
                Type this and press Enter:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-bash">go version</code></pre>
            </div>
            <p class="text-body leading-relaxed">
                You should see something like <code>go version go1.25.0</code>. If you see "command not found", close the terminal and open a new one — sometimes it needs a restart.
            </p>
        </section>

        <!-- Step 2: Install Congo -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">Step 2</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Install Congo</h2>
            <p class="text-body leading-relaxed mb-5">
                Go to the <a href="/download" class="text-accent hover:text-bright transition-colors" hx-boost="true">download page</a> and grab the file for your computer. Then in your terminal:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-bash"># Mac / Linux — unpack and move it to your PATH
tar -xzf congo-*.tar.gz
sudo mv congo /usr/local/bin/</code></pre>
            </div>
            <div class="code-block mb-5">
                <pre><code class="language-bash"># Windows — unzip the file and move congo.exe
# somewhere in your PATH, or run it from the folder</code></pre>
            </div>
            <p class="text-body leading-relaxed mb-5">
                Check it works:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-bash">congo version</code></pre>
            </div>
            <p class="text-body leading-relaxed">
                If you see a version number, you're ready.
            </p>
        </section>

        <!-- Step 3: Create your project -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">Step 3</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Create Your Project</h2>
            <p class="text-body leading-relaxed mb-5">
                Pick a name for your website. We'll use <code>mysite</code> here, but use whatever you want. Type this:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-bash">congo init mysite</code></pre>
            </div>
            <p class="text-body leading-relaxed mb-5">
                This creates a folder called <code>mysite</code> with everything you need inside it.
                Now go into that folder:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-bash">cd mysite</code></pre>
            </div>
        </section>

        <!-- Step 4: Run it -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">Step 4</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Run It</h2>
            <div class="code-block mb-5">
                <pre><code class="language-bash">congo dev</code></pre>
            </div>
            <p class="text-body leading-relaxed mb-5">
                Open your browser and go to:
            </p>
            <div class="code-block mb-5">
                <pre><code>localhost:5000</code></pre>
            </div>
            <p class="text-body leading-relaxed">
                You should see a welcome page. That's your website, running on your computer right now.
                Leave this terminal open — it's running your site.
            </p>
        </section>

        <!-- Step 5: Change the page -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">Step 5</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Change the Page</h2>
            <p class="text-body leading-relaxed mb-5">
                Open the project folder in any text editor.
                If you don't have one, download <a href="https://code.visualstudio.com/" class="text-accent hover:text-bright transition-colors" target="_blank" rel="noopener">VS Code</a> — it's free.
            </p>
            <p class="text-body leading-relaxed mb-5">
                Open the file <code>web/views/index.html</code>. You'll see HTML that looks something like this:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-xml">{{"{{"}}template "main.html" .{{"}}"}}

{{"{{"}}define "content"{{"}}"}}
&lt;div class="container mx-auto p-8"&gt;
    &lt;h1 class="text-3xl font-bold"&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;Your app is running.&lt;/p&gt;
&lt;/div&gt;
{{"{{"}}end{{"}}"}}</code></pre>
            </div>
            <p class="text-body leading-relaxed mb-5">
                Change the text inside the <code>&lt;h1&gt;</code> tag to whatever you want. For example:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-xml">&lt;h1 class="text-3xl font-bold"&gt;Hello World&lt;/h1&gt;
&lt;p&gt;This is my first website!&lt;/p&gt;</code></pre>
            </div>
            <p class="text-body leading-relaxed">
                Save the file. Go back to your browser and refresh the page. You'll see your changes.
            </p>
        </section>

        <!-- Step 6: Make it look good -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">Step 6</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Make It Look Good</h2>
            <p class="text-body leading-relaxed mb-5">
                Congo comes with <a href="https://daisyui.com/components/" class="text-accent hover:text-bright transition-colors" target="_blank" rel="noopener">DaisyUI</a>,
                a library of ready-made components. You just add class names to your HTML and things look nice automatically.
            </p>
            <p class="text-body leading-relaxed mb-5">
                Try replacing your page content with this:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-xml">{{"{{"}}template "main.html" .{{"}}"}}

{{"{{"}}define "content"{{"}}"}}
&lt;div class="container mx-auto px-8 py-16 max-w-2xl"&gt;
    &lt;h1 class="text-4xl font-bold mb-4"&gt;My Website&lt;/h1&gt;
    &lt;p class="text-lg mb-8"&gt;Welcome to my corner of the internet.&lt;/p&gt;

    &lt;div class="card bg-base-100 shadow-lg p-6 mb-4"&gt;
        &lt;h2 class="text-xl font-bold mb-2"&gt;About Me&lt;/h2&gt;
        &lt;p&gt;Write anything you want here.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card bg-base-100 shadow-lg p-6"&gt;
        &lt;h2 class="text-xl font-bold mb-2"&gt;My Interests&lt;/h2&gt;
        &lt;ul class="list-disc ml-4 space-y-1"&gt;
            &lt;li&gt;Making websites&lt;/li&gt;
            &lt;li&gt;Learning new things&lt;/li&gt;
            &lt;li&gt;Whatever you like&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
{{"{{"}}end{{"}}"}}</code></pre>
            </div>
            <p class="text-body leading-relaxed">
                Save and refresh. You've got a nice-looking page with cards and spacing — no CSS needed.
                Browse the <a href="https://daisyui.com/components/" class="text-accent hover:text-bright transition-colors" target="_blank" rel="noopener">DaisyUI docs</a> for buttons, forms, navbars, and more.
            </p>
        </section>

        <!-- Step 7: Add a second page -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">Step 7</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Add a Second Page</h2>
            <p class="text-body leading-relaxed mb-5">
                Create a new file at <code>web/views/about.html</code> with this content:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-xml">{{"{{"}}template "main.html" .{{"}}"}}

{{"{{"}}define "content"{{"}}"}}
&lt;div class="container mx-auto px-8 py-16 max-w-2xl"&gt;
    &lt;h1 class="text-4xl font-bold mb-4"&gt;About&lt;/h1&gt;
    &lt;p class="text-lg"&gt;This page is about me.&lt;/p&gt;
    &lt;a href="/" class="btn btn-primary mt-4"&gt;Back Home&lt;/a&gt;
&lt;/div&gt;
{{"{{"}}end{{"}}"}}</code></pre>
            </div>
            <p class="text-body leading-relaxed mb-5">
                Now tell your app about this page. Open <code>web/controllers/home.go</code> and add one line in the <code>Setup</code> function:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-go">func (c *HomeController) Setup(app *application.App) {
    c.BaseController.Setup(app)
    http.Handle("GET /{$}", app.Serve("index.html", nil))
    http.Handle("GET /about", app.Serve("about.html", nil))  // new!
}</code></pre>
            </div>
            <p class="text-body leading-relaxed mb-5">
                Restart the dev server (press Ctrl+C in the terminal, then run <code>congo dev</code> again).
                Now go to <code>localhost:5000/about</code> in your browser.
            </p>
            <p class="text-body leading-relaxed">
                Add a link on your homepage to connect the pages:
            </p>
            <div class="code-block">
                <pre><code class="language-xml">&lt;a href="/about" class="btn btn-primary"&gt;About Me&lt;/a&gt;</code></pre>
            </div>
        </section>

        <!-- Step 8: Let AI help -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">Step 8</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Let AI Help You Build</h2>
            <p class="text-body leading-relaxed mb-5">
                Don't know how to do something? Congo can launch an AI assistant that understands your project:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-bash">congo claude</code></pre>
            </div>
            <p class="text-body leading-relaxed mb-5">
                This opens <a href="https://claude.ai/code" class="text-accent hover:text-bright transition-colors" target="_blank" rel="noopener">Claude Code</a> with your entire project loaded in.
                You can ask it things like:
            </p>
            <ul class="text-body leading-relaxed mb-5 space-y-2 ml-4">
                <li>"Add a contact form to my about page"</li>
                <li>"Make a page that shows a list of blog posts"</li>
                <li>"Add a dark mode toggle"</li>
                <li>"Change the colors to purple and gold"</li>
            </ul>
            <p class="text-body leading-relaxed">
                It will write the code for you and explain what it did.
            </p>
        </section>

        <!-- Step 9: Put it on the internet -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">Step 9</div>
            <h2 class="text-xl font-bold tracking-tight mb-4">Put It on the Internet</h2>
            <p class="text-body leading-relaxed mb-5">
                Right now your website only works on your computer. To put it on the internet so anyone can see it, you need a server. Congo handles this for you.
            </p>
            <p class="text-body leading-relaxed mb-5">
                First, you need an account with a cloud provider.
                <a href="https://www.digitalocean.com/" class="text-accent hover:text-bright transition-colors" target="_blank" rel="noopener">DigitalOcean</a> is simple and cheap (about $6/month for a small server).
            </p>
            <p class="text-body leading-relaxed mb-5">
                Once you have an API key from your cloud provider, run:
            </p>
            <div class="code-block mb-5">
                <pre><code class="language-bash">congo launch</code></pre>
            </div>
            <p class="text-body leading-relaxed mb-5">
                Congo will ask you a few questions (which provider, what region, etc.), then it will:
            </p>
            <ol class="text-body leading-relaxed mb-5 space-y-2 ml-4 list-decimal">
                <li>Create a server for you</li>
                <li>Build your website into a single file</li>
                <li>Upload it to the server</li>
                <li>Start it up and make sure it's working</li>
            </ol>
            <p class="text-body leading-relaxed">
                When it's done, you'll get an IP address. Type it into any browser and you'll see your website — live on the internet.
            </p>
        </section>

        <!-- What's next -->
        <section class="section-divide pt-16">
            <div class="text-accent text-sm font-mono mb-4">What's Next</div>
            <h2 class="text-xl font-bold tracking-tight mb-5">Keep Going</h2>
            <p class="text-body leading-relaxed mb-5">
                You just built and launched a website. Here's where to go from here:
            </p>
            <div class="space-y-3" hx-boost="true">
                <a href="/guide" class="table-row flex items-center justify-between py-4 px-2">
                    <span class="font-semibold text-sm text-bright">Read the Guide</span>
                    <span class="text-body text-sm">Learn about databases, forms, and more advanced features</span>
                </a>
                <a href="https://daisyui.com/components/" class="table-row flex items-center justify-between py-4 px-2" target="_blank" rel="noopener">
                    <span class="font-semibold text-sm text-bright">Browse DaisyUI</span>
                    <span class="text-body text-sm">Copy-paste beautiful components into your pages</span>
                </a>
                <a href="/source" class="table-row flex items-center justify-between py-4 px-2">
                    <span class="font-semibold text-sm text-bright">Read the Source</span>
                    <span class="text-body text-sm">See how Congo itself is built — it's your code now</span>
                </a>
            </div>
        </section>

    </div>

    <div class="mt-16 max-w-md mx-auto">
        {{template "mailing-list.html" .}}
    </div>
</div>
{{end}}