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

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

preview/pages/users.astro

@@ -0,0 +1,70 @@
+---
+// Port of preview/pages/users.html (layout: default)
+// Note: the Liquid template assigns `progress` and `online_counter` per person
+// but never renders them — omitted here.
+// Note: the avatar include passes `rounded=true`, which ui/avatar.html ignores
+// (no such param) — omitted; Avatar.astro has no `rounded` prop.
+import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
+import Avatar from '@shared/components/ui/Avatar.astro';
+import Icon from '@shared/components/Icon.astro';
+import Pagination from '@shared/components/ui/Pagination.astro';
+import people from '@data/people.json';
+
+interface Person {
+	full_name?: string;
+	job_title?: string;
+	photo?: string;
+	[key: string]: unknown;
+}
+
+const users = (people as Person[]).slice(0, 18);
+---
+
+<DefaultLayout
+	title="Users list"
+	pageHeader="Users"
+	actions="users"
+	description="1-18 of 413 people"
+	pageMenu="extra.users"
+>
+	<div class="row row-cards">
+		{
+			users.map((person, idx) => {
+				const index = idx + 1;
+				return (
+					<div class="col-md-6 col-lg-3">
+						<div class="card">
+							<div class="card-body p-4 text-center">
+								<Avatar size="xl" person={person} class="mb-3" />
+								<h3 class="m-0 mb-1">
+									<a href="#">{person.full_name}</a>
+								</h3>
+								<div class="text-secondary">{person.job_title}</div>
+
+								<div class="mt-3">
+									{index === 1 ? (
+										<span class="badge bg-purple-lt">Owner</span>
+									) : index < 5 ? (
+										<span class="badge bg-green-lt">Admin</span>
+									) : null}
+								</div>
+							</div>
+							<div class="d-flex">
+								<a href="#" class="card-btn">
+									<Icon name="mail" color="muted" class="me-2" /> Email
+								</a>
+								<a href="#" class="card-btn">
+									<Icon name="phone" color="muted" class="me-2" /> Call
+								</a>
+							</div>
+						</div>
+					</div>
+				);
+			})
+		}
+	</div>
+
+	<div class="d-flex mt-4">
+		<Pagination class="ms-auto" />
+	</div>
+</DefaultLayout>