feat: add onboarding page with user setup form

preview/pages/onboarding.html

@@ -0,0 +1,149 @@
+---
+layout: base
+title: Onboarding
+permalink: onboarding.html
+---
+
+<nav class="navbar">
+	<div class="container">
+		<div class="row w-100 align-items-center">
+			<div class="col me-auto">
+				{% include "layout/navbar-logo.html" class="logo-gray" %}
+			</div>
+			<div class="col-2">
+				{% include "ui/progress-steps.html" count=5 current=2 %}
+			</div>
+			<div class="col text-end">
+				<a href="{{ page.url | relative }}" 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">
+			{% include "ui/button.html" text="Back" color="link link-secondary" %}
+			{% include "ui/button.html" text="Continue" color="primary" %}
+		</div>
+	</div>
+</main>
+