tabler/preview/pages/onboarding.astro

---
// Port of preview/pages/onboarding.html (layout: base).
// NOTE: the Liquid source passes `current=2` to ui/progress-steps.html, but that
// include reads `active` (not `current`) — so the arg is a no-op and only the
// first step is active. The reference reflects this (Step 1 = bg-primary).
import BaseLayout from '@shared/layouts/BaseLayout.astro';
import NavbarLogo from '@shared/components/NavbarLogo.astro';
import ProgressSteps from '@shared/components/ui/ProgressSteps.astro';
import Button from '@shared/components/Button.astro';
---

<BaseLayout title="Onboarding">
	<nav class="navbar">
		<div class="container">
			<div class="row w-100 align-items-center">
				<div class="col me-auto">
					<NavbarLogo class="logo-gray" />
				</div>
				<div class="col-2">
					<ProgressSteps count={5} />
				</div>
				<div class="col text-end">
					<a href="." class="btn btn-ghost">Skip<span class="d-none d-md-inline">&nbsp;to dashboard</span></a>
				</div>
			</div>
		</div>
	</nav>

	<main class="py-5">
		<div class="container container-tight">
			<div class="page-header">
				<h1 class="page-title"> Let's set up your account </h1>
			</div>
			<div class="card mt-5">
				<div class="card-body space-y-4">
					<div>
						<label class="form-label">Full name</label>
						<input type="text" class="form-control" placeholder="Enter your full name" />
					</div>
					<div>
						<label class="form-label">Company name</label>
						<input type="text" class="form-control" placeholder="Enter your company name" />
					</div>
					<div>
						<label class="form-label">Role</label>
						<select class="form-select">
							<option value="">Select your role</option>
							<option value="developer">Developer</option>
							<option value="designer">Designer</option>
							<option value="manager">Manager</option>
							<option value="founder">Founder</option>
							<option value="other">Other</option>
						</select>
					</div>
					<div>
						<label class="form-label">Team size</label>
						<div class="form-selectgroup">
							<label class="form-selectgroup-item">
								<input type="radio" name="team-size" value="1" class="form-selectgroup-input" checked />
								<span class="form-selectgroup-label">Just me</span>
							</label>
							<label class="form-selectgroup-item">
								<input type="radio" name="team-size" value="2-10" class="form-selectgroup-input" />
								<span class="form-selectgroup-label">2-10 people</span>
							</label>
							<label class="form-selectgroup-item">
								<input type="radio" name="team-size" value="11-50" class="form-selectgroup-input" />
								<span class="form-selectgroup-label">11-50 people</span>
							</label>
							<label class="form-selectgroup-item">
								<input type="radio" name="team-size" value="50+" class="form-selectgroup-input" />
								<span class="form-selectgroup-label">50+ people</span>
							</label>
						</div>
					</div>
					<div>
						<label class="form-label">What are you planning to use this for?</label>
						<div class="form-check">
							<input class="form-check-input" type="radio" value="personal" id="use-personal" checked />
							<label class="form-check-label" for="use-personal"> Personal projects </label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="radio" value="business" id="use-business" />
							<label class="form-check-label" for="use-business"> Business applications </label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="radio" value="client" id="use-client" />
							<label class="form-check-label" for="use-client"> Client work </label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="radio" value="learning" id="use-learning" />
							<label class="form-check-label" for="use-learning"> Learning and experimentation </label>
						</div>
					</div>
					<div>
						<label class="form-label">How did you hear about us?</label>
						<div class="form-check">
							<input class="form-check-input" type="checkbox" name="referral" value="search" id="ref-search" />
							<label class="form-check-label" for="ref-search"> Search engine </label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="checkbox" name="referral" value="social" id="ref-social" />
							<label class="form-check-label" for="ref-social"> Social media </label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="checkbox" name="referral" value="friend" id="ref-friend" />
							<label class="form-check-label" for="ref-friend"> Friend or colleague </label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="checkbox" name="referral" value="blog" id="ref-blog" />
							<label class="form-check-label" for="ref-blog"> Blog or article </label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="checkbox" name="referral" value="other" id="ref-other" />
							<label class="form-check-label" for="ref-other"> Other </label>
						</div>
					</div>
					<div>
						<div class="form-check form-switch">
							<input class="form-check-input" type="checkbox" id="notifications" checked />
							<label class="form-check-label" for="notifications"> Send me product updates and tips via email </label>
						</div>
					</div>
				</div>
			</div>

			<div class="btn-list justify-content-between mt-4">
				<Button text="Back" color="link link-secondary" />
				<Button text="Continue" color="primary" />
			</div>
		</div>
	</main>
</BaseLayout>