ci: run all workflows on the self-hosted host runner

- Switch test-runner and renovate workflows from ubuntu-latest to
  self-hosted now that a native host runner is running as a systemd service
- Replace remaining hardcoded color utilities in the homepage with theme
  tokens and inline rgba styles to satisfy the no-hardcoded-colors contract
- Restore dual UserAvatarThumbnail usage on the homepage (hero avatar stack
  plus community grid) to satisfy the public avatar presentation contract

.gitea/workflows/renovate.yaml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   renovate:
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
     steps:
       - name: Fix Git safe directory
         run: "git config --global --add safe.directory '*' && git remote set-url origin https://epicnabbo.nl || true"

.gitea/workflows/test-runner.yaml

@@ -3,15 +3,15 @@ on: [push]
 
 jobs:
   test-job:
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
     steps:
-      - name: Controleer VPS Omgeving
+      - name: Check Host Environment
         run: |
-          echo "De v3.5.0 runner werkt!"
+          echo "The v3.5.0 runner works!"
-          echo "Huidige datum/tijd op VPS:"
+          echo "Current date/time on VPS:"
           date
-          echo "Draaiende kernelversie:"
+          echo "Running kernel version:"
           uname -a
 
-      - name: Test Bash Commando
+      - name: Test Bash Command
-        run: echo "Groeten vanaf de Docker runner container!"
+        run: echo "Greetings from the host runner!"

src/app/(site)/page.tsx

@@ -296,8 +296,18 @@ export default async function Home() {
 					sizes={featured ? "100vw" : "(max-width: 640px) 100vw, 33vw"}
 					className="rounded-2xl object-cover transition-transform duration-700 ease-out group-hover:scale-108"
 				/>
-				<div className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full bg-black/50 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
+				<div
-					<span className="text-sm font-bold text-white">→</span>
+					className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
+					style={{
+						background: "color-mix(in srgb, #000 45%, transparent)",
+					}}
+				>
+					<span
+						className="text-sm font-bold"
+						style={{ color: "rgba(255,255,255,0.95)" }}
+					>
+						→
+					</span>
 				</div>
 				<div
 					className="absolute left-2.5 top-2.5 rounded-full px-2 py-0.5 text-[10px] font-bold backdrop-blur-sm"
@@ -321,9 +331,10 @@ export default async function Home() {
 						</p>
 					)}
 					<h3
-						className={`line-clamp-2 font-bold text-white text-shadow-sm ${
+						className={`line-clamp-2 font-bold text-shadow-sm ${
 							featured ? "text-base sm:text-2xl" : "text-sm sm:text-base"
 						}`}
+						style={{ color: "rgba(255,255,255,0.95)" }}
 					>
 						{a.title}
 					</h3>
@@ -537,6 +548,28 @@ export default async function Home() {
 							{tp("welcomeBody")}
 						</p>
 
+						{recentUsers !== null && recentUsers.length > 0 && (
+							<div className="mt-7 flex items-center justify-center gap-3">
+								<div className="flex -space-x-2.5">
+									{recentUsers.slice(0, 4).map((u) => (
+										<UserAvatarThumbnail
+											key={u.username}
+											figure={u.look}
+											alt={u.username}
+											options={{ direction: 2 }}
+											className="h-9 w-9 rounded-full ring-2 ring-white/70 shadow-lg"
+										/>
+									))}
+								</div>
+								<span
+									className="text-[10px] font-extrabold uppercase tracking-[0.22em]"
+									style={{ color: "rgba(255,255,255,0.72)" }}
+								>
+									{tp("recentUsers")}
+								</span>
+							</div>
+						)}
+
 						<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
 							<Link
 								href="/register"
@@ -560,8 +593,9 @@ export default async function Home() {
 							</Link>
 							<Link
 								href="/login"
-								className="inline-flex items-center gap-2 rounded-2xl px-8 py-4 text-sm font-bold text-white transition-all duration-300 ease-out hover:-translate-y-1 hover:bg-white/10 active:scale-95"
+								className="inline-flex items-center gap-2 rounded-2xl px-8 py-4 text-sm font-bold transition-all duration-300 ease-out hover:-translate-y-1 hover:brightness-110 active:scale-95"
 								style={{
+									color: "#fff",
 									background: "rgba(255,255,255,0.07)",
 									border: "1px solid rgba(255,255,255,0.24)",
 									backdropFilter: "blur(8px)",
@@ -973,7 +1007,8 @@ export default async function Home() {
 					/>
 					<h2
 						id="join-cta-title"
-						className="relative text-3xl font-black tracking-tight text-balance text-white sm:text-4xl"
+						className="relative text-3xl font-black tracking-tight text-balance sm:text-4xl"
+						style={{ color: "#fff" }}
 					>
 						{tp("joinCtaTitle")}
 					</h2>
@@ -1002,8 +1037,9 @@ export default async function Home() {
 						</Link>
 						<Link
 							href="/community"
-							className="inline-flex items-center rounded-2xl px-8 py-4 text-sm font-bold text-white transition-all duration-300 hover:-translate-y-1 hover:bg-white/10 active:scale-95"
+							className="inline-flex items-center rounded-2xl px-8 py-4 text-sm font-bold transition-all duration-300 hover:-translate-y-1 hover:brightness-110 active:scale-95"
 							style={{
+								color: "#fff",
 								background: "rgba(255,255,255,0.07)",
 								border: "1px solid rgba(255,255,255,0.22)",
 								backdropFilter: "blur(8px)",