Migrate preview and docs packages from Eleventy to Astro (#2694)

Co-authored-by: Bartek <xbartoszdobija@gmail.com>

preview/pages/wizard.astro

@@ -0,0 +1,61 @@
+---
+import SingleLayout from '@shared/layouts/SingleLayout.astro';
+import Button from '@shared/components/Button.astro';
+import HrText from '@shared/components/HrText.astro';
+import InputGroup from '@shared/components/InputGroup.astro';
+import Illustration from '@shared/components/ui/Illustration.astro';
+import Progress from '@shared/components/ui/Progress.astro';
+import { site } from '@shared/lib/site';
+import timezones from '@data/timezones.json';
+
+// TODO: front matter `page-menu: extra.wizard` is not ported — it is only read
+// by layout/navbar-menu.html, which the `single` layout does not include.
+---
+
+<SingleLayout title="Wizard">
+	<div class="card card-md">
+		<div class="card-body text-center py-4 p-sm-5">
+			<Illustration image="boy-girl.svg" height={200} class="mb-n2" />
+			<h1 class="mt-5">Welcome to Tabler!</h1>
+			<p class="text-secondary">{site.description}</p>
+		</div>
+
+		<HrText text="your data" position="center" class="hr-text-spaceless" />
+
+		<div class="card-body">
+			<div class="mb-3">
+				<label class="form-label">Create your Tabler URL</label>
+				<InputGroup prepend="https://tabler.io/" inputClass="ps-1" flat />
+				<div class="form-hint">
+					Choose a URL that describes you or your business in a concise way. Make it short and easy
+					to remember so you can share links with ease.
+				</div>
+			</div>
+
+			<div>
+				<label class="form-label">Timezone</label>
+				<select class="form-select mb-0">
+					{
+						timezones.map((timezone) => (
+							<option value={timezone.abbr} selected={timezone.abbr === 'CEDT'}>
+								{timezone.text}
+							</option>
+						))
+					}
+				</select>
+			</div>
+		</div>
+	</div>
+
+	<div class="row align-items-center mt-3">
+		<div class="col-4">
+			<Progress value={25} />
+		</div>
+		<div class="col">
+			<div class="btn-list justify-content-end">
+				<Button text="Set up later" color="link link-secondary" />
+				<Button text="Continue" color="primary" />
+			</div>
+		</div>
+	</div>
+</SingleLayout>