{{ define "main" }}
	<section
		class="flex min-h-screen w-full flex-col items-center justify-center bg-hero-llama bg-cover pb-8 text-center font-title font-bold text-white"
	>
		<div class="mt-48 mb-32">
			{{ if .Params.heading }}
				{{ if .Params.heading.heading }}
					<h1 class="mb-4 text-5xl">
						{{ .Params.heading.heading | markdownify }}
					</h1>
				{{ end }}
				{{ if .Params.heading.content }}
					<h3 class="mb-6 text-3xl">
						{{ .Params.heading.content | markdownify }}
					</h3>
				{{ end }}
				{{ if .Params.heading.subtitle }}
					<h4 class="text-xl">
						{{ .Params.heading.subtitle | markdownify }}
					</h4>
				{{ end }}
				{{ if .Params.heading.subsubtitle }}
					<h4 class="text-lg">
						{{ .Params.heading.subsubtitle | markdownify }}
					</h4>
				{{ end }}

			{{ end }}


			<div class="flex justify-center space-x-2 py-4">
				<a
					href="https://try.vikunja.io"
					class="cursor-pointer rounded-md border border-transparent bg-primary px-4 py-2 text-xl font-medium text-white shadow hover:bg-primary-darker"
				>
					Try it
				</a>
				<a
					href="/features"
					class="cursor-pointer rounded-md border border-transparent bg-primary px-4 py-2 text-xl font-medium text-white shadow hover:bg-primary-darker"
				>
					Features
				</a>
			</div>
		</div>

		<div class="max-w-screen-xl overflow-hidden rounded-sm shadow-lg">
			<picture class="w-full object-contain object-top">
				<source srcset="/images/vikunja-task-overview.webp" type="image/webp" />
				<source srcset="/images/vikunja-task-overview.png" type="image/png" />
				<img src="/images/vikunja-task-overview.png" alt="" />
			</picture>
		</div>
	</section>
{{ end }}