package hero

templ Title(title string, subtitle string) {
	<div class="flex flex-col items-center justify-center h-full w-full gap-2.5">
		<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold">
			{ title }
		</h1>
		<p class="text-md md:text-lg lg:text-xl font-medium text-gray-500">
			{ subtitle }
		</p>
	</div>
}

templ Start() {
	<div class="pt-1.5 mb-3 flex flex-col items-center justify-center h-full">
		<sl-button size="large" hx-target="#container" hx-get="/register" hx-push-url="/register/start" type="button">
			<sl-icon slot="prefix" library="sonr" name="sonr"></sl-icon>
			Create Vault
			<sl-icon slot="suffix" library="sonr" name="arrow-right"></sl-icon>
		</sl-button>
	</div>
}

templ Socials() {
	<div class="pt-1.5 flex flex-row items-center justify-center h-full gap-3">
		<sl-button circle outline href="https://sonr.io">
			<sl-icon name="home" library="sonr" label="Home"></sl-icon>
		</sl-button>
		<sl-button circle outline href="https://onsonr.dev">
			<sl-icon name="docs" library="sonr" label="Docs"></sl-icon>
		</sl-button>
		<sl-button circle outline href="https://github.com/onsonr/hway">
			<sl-icon name="social-github" library="sonr" label="Open Source"></sl-icon>
		</sl-button>
	</div>
}