{{ define "main" }}
<header class="bg-brand-dark py-16 md:py-20 px-6 md:px-12 lg:px-20">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-white text-4xl md:text-5xl font-extrabold tracking-tight">{{ .Title }}</h1>
        {{ with .Description }}<p class="text-white/60 text-lg mt-4 max-w-2xl">{{ . }}</p>{{ end }}
    </div>
</header>

<section class="bg-white py-16 lg:py-20 px-6 md:px-12 lg:px-20">
    <div class="max-w-4xl mx-auto">
        {{ with .Pages }}
        <div class="grid sm:grid-cols-2 gap-4 mb-12">
            {{ range . }}
            <a href="{{ .RelPermalink }}" class="block border border-zinc-200 rounded-lg p-5 hover:border-brand-purple hover:shadow-sm transition">
                <h3 class="text-base font-bold text-brand-near-black">{{ .Title }}</h3>
                {{ with .Description }}<p class="text-sm text-zinc-500 mt-2 leading-relaxed">{{ . }}</p>{{ end }}
            </a>
            {{ end }}
        </div>
        {{ end }}

        <article class="docs-prose">
            {{ .Content }}
        </article>
    </div>
</section>
{{ end }}