Decouple admin from public max-w-7xl via (site) route group.

Public chrome and width live only under (site). /admin and /client inherit the root layout alone, so housekeeping width is no longer tied to the public template.

Co-authored-by: Cursor <[email protected]>

src/app/(site)/badges/page.tsx

@@ -0,0 +1,70 @@
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState } from "@/components/public/ui";
+import { prisma } from "@/lib/prisma";
+
+export const revalidate = 300;
+
+export const metadata = { title: "Badges" };
+
+// Canonical Habbo badge image CDN. A badge_key (e.g. "ADM") maps to a .gif here.
+const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
+
+export default async function BadgesPage() {
+	const t = await getTranslations("pages.badges");
+
+	const badges = await prisma.websiteBadges
+		.findMany({
+			orderBy: { badgeName: "asc" },
+		})
+		.catch(() => []);
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard icon="🏅" title={t("title")} subtitle={t("subtitle")} />
+
+			<ContentCard padded={badges.length === 0}>
+				{badges.length === 0 ? (
+					<EmptyState icon="🏅">{t("noBadges")}</EmptyState>
+				) : (
+					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+						{badges.map((badge) => (
+							<div
+								key={String(badge.id)}
+								className="card hover"
+								style={{
+									display: "flex",
+									gap: "0.9rem",
+									alignItems: "flex-start",
+								}}
+							>
+								{/* eslint-disable-next-line @next/next/no-img-element */}
+								<img
+									src={`${BADGE_IMG_BASE}/${badge.badgeKey}.gif`}
+									alt={badge.badgeName}
+									title={badge.badgeKey}
+									width={40}
+									height={40}
+									style={{ flexShrink: 0 }}
+								/>
+								<div style={{ minWidth: 0 }}>
+									<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
+										{badge.badgeName}
+									</h3>
+									<p
+										className="muted"
+										style={{ margin: "0 0 0.35rem", fontFamily: "monospace" }}
+									>
+										{badge.badgeKey}
+									</p>
+									<p style={{ margin: 0, fontSize: "0.9rem" }}>
+										{badge.badgeDescription}
+									</p>
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+			</ContentCard>
+		</main>
+	);
+}