{{ partial "header.html" . }}

<section class="w-full min-h-screen bg-hero-llama bg-cover flex items-center justify-center flex-col text-white font-title font-bold text-center pb-8">
	<div class="mt-48 mb-32">
		{{ if .Params.heading }}
			{{ if .Params.heading.heading }}
				<h1 class="text-5xl mb-4">{{.Params.heading.heading | markdownify}}</h1>
			{{end}}
			{{ if .Params.heading.content }}
				<h3 class="text-3xl mb-6">{{.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 py-4 space-x-2 justify-center">
			<a href="https://try.vikunja.io"
			   class="px-4 py-2 border border-transparent shadow text-xl font-medium rounded-md text-white bg-primary hover:bg-primary-darker cursor-pointer">
				Try it
			</a>
			<a href="/features"
			   class="px-4 py-2 border border-transparent shadow text-xl font-medium rounded-md text-white bg-primary hover:bg-primary-darker cursor-pointer">
				Features
			</a>
		</div>
	</div>

	<div class="max-w-screen-xl rounded-sm overflow-hidden shadow-lg">
		<picture class="object-contain object-top w-full">
			<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>

{{ partial "footer.html" . }}