{{ define "main" }}
<div class="pt-2 {{ .Params.bgColor }}">
    <style>
        .gradient-bg {
            background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 25%, white), white);
        }
    </style>
    <div class="absolute inset-x-0 top-0 h-full gradient-bg opacity-75"></div>
    <div class="container mx-auto px-4 py-6">
        <main>
            <article>
                <div class="relative isolate overflow-hidden">

                    <div class="text-center mb-16">
                        <h1 class="text-4xl md:text-5xl font-bold mb-6">{{ .Params.title }}</h1>
                        <p class="text-xl text-gray-600 mb-16">{{ .Params.description }}</p>
                        <div class="max-w-3xl mx-auto border rounded-xl shadow-sm p-8">
                            <p class="text-xl text-gray-600 text-left font-normal">
                                {{ .Params.card | markdownify }}
                            </p>
                        </div>
                    </div>

                    {{ .Content }}
                </div>
            </article>
        </main>
    </div>
</div>
{{ end }}