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)/redeem/RedeemForm.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useActionState } from "react";
+import { type RedeemState, redeem } from "@/actions/voucher";
+
+const initialState: RedeemState = null;
+
+/**
+ * Client form for /redeem. Uses useActionState so the redeem() server action's
+ * feedback ({ ok, message }) can be rendered inline without a redirect.
+ */
+export default function RedeemForm() {
+	const [state, formAction, pending] = useActionState(redeem, initialState);
+
+	return (
+		<form
+			action={formAction}
+			style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}
+		>
+			<input
+				name="code"
+				maxLength={255}
+				placeholder="Enter your voucher code"
+				aria-label="Voucher code"
+				autoComplete="off"
+				required
+			/>
+			<div>
+				<button type="submit" className="btn btn-primary" disabled={pending}>
+					{pending ? "Redeeming…" : "Redeem voucher"}
+				</button>
+			</div>
+
+			{state ? (
+				<p
+					role="status"
+					aria-live="polite"
+					style={{
+						margin: "0.25rem 0 0",
+						fontWeight: 700,
+						color: state.ok
+							? "var(--color-secondary-hover)"
+							: "var(--color-danger)",
+					}}
+				>
+					{state.message}
+				</p>
+			) : null}
+		</form>
+	);
+}

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

@@ -0,0 +1,67 @@
+import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { ContentCard, StatBlock } from "@/components/public/ui";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import RedeemForm from "./RedeemForm";
+
+export const dynamic = "force-dynamic";
+
+export default async function RedeemPage() {
+	const session = await auth();
+	if (!session?.user?.id) redirect("/login");
+
+	const t = await getTranslations("pages.redeem");
+	const id = Number(session.user.id);
+
+	// Show the signed-in user's current credit balance for context (fail soft).
+	let user: { username: string; credits: number } | null = null;
+	try {
+		user = await prisma.user.findUnique({
+			where: { id },
+			select: { username: true, credits: true },
+		});
+	} catch {
+		user = null;
+	}
+
+	if (!user) redirect("/login");
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard icon="🎟️" title={t("title")} subtitle={t("subtitle")} />
+
+			<div className="card-grid sm-2">
+				<ContentCard icon="🔑" title={t("enterCode")}>
+					<RedeemForm />
+					<p
+						className="muted"
+						style={{ marginBottom: 0, marginTop: "0.85rem" }}
+					>
+						{t("oncePerAccount")}
+					</p>
+				</ContentCard>
+
+				<ContentCard
+					icon="💰"
+					title={t("balanceTitle")}
+					subtitle={t("signedInAs", { username: user.username })}
+				>
+					<div className="stat-grid">
+						<StatBlock
+							value={user.credits.toLocaleString()}
+							label={t("credits")}
+							icon="🪙"
+						/>
+					</div>
+					<p
+						className="muted"
+						style={{ marginBottom: 0, marginTop: "0.85rem" }}
+					>
+						{t("instantCredit")}
+					</p>
+				</ContentCard>
+			</div>
+		</main>
+	);
+}