i18n: translate all public page bodies (EN + IT)

Internationalised the ~44 public pages with next-intl (the shell was
already translated). Each page now pulls its copy from a "pages.<slug>"
namespace via getTranslations (server) / useTranslations (client); the
EN + IT catalogs were authored by parallel agents and merged centrally,
with natural Italian (ICU plurals) and it backfilled from en for any
gap. request.ts gained getMessageFallback/onError so a missing key
degrades to the English value, never a raw key.

Behaviour unchanged (only display text moved to t() calls; queries,
actions, fields, ContentCard structure preserved). Verified on the prod
server: with NEXT_LOCALE=it, home/community/staff/news/shop/rankings all
render Italian copy, no raw-key leakage; English unchanged. The nav
language switcher toggles EN/IT live. tsc 0, vitest 49/49, next build 0.

Admin pages intentionally left in English (staff tooling).

src/app/apply/staff/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { applyStaff } from "@/actions/applications";
 import { ContentCard, EmptyState } from "@/components/public/ui";
@@ -10,18 +11,20 @@ export const dynamic = "force-dynamic";
 // Canonical Habbo badge image CDN (same base used by the profile page).
 const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
 
-function formatDeadline(d: Date | null | undefined): string {
-  if (!d) return "No deadline set";
-  return d.toISOString().slice(0, 16).replace("T", " ");
-}
-
 export default async function ApplyStaffPage() {
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
+  const t = await getTranslations("pages.applyStaff");
+
   const userId = Number(session.user.id);
   const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
 
+  function formatDeadline(d: Date | null | undefined): string {
+    if (!d) return t("noDeadline");
+    return d.toISOString().slice(0, 16).replace("T", " ");
+  }
+
   // ── Open positions ──────────────────────────────────────────
   // Each query is isolated so a DB hiccup degrades that section to empty
   // rather than 500-ing the whole page.
@@ -52,16 +55,13 @@ export default async function ApplyStaffPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🛡️"
-        title={`Apply for ${hotelName} staff`}
-        subtitle="We open staff applications every now and then. If you come across a position you feel you would fit perfectly into, do not hesitate to apply for it."
+        title={t("title", { hotel: hotelName })}
+        subtitle={t("subtitle")}
       />
 
       {positions.length === 0 ? (
-        <ContentCard icon="🛡️" title="No positions open">
-          <EmptyState icon="🛡️">
-            There are currently no positions open. Please come back at a later time to check if we
-            have any openings by then. Thank you for your interest.
-          </EmptyState>
+        <ContentCard icon="🛡️" title={t("noPositionsTitle")}>
+          <EmptyState icon="🛡️">{t("noPositionsBody")}</EmptyState>
         </ContentCard>
       ) : (
         <div className="card-grid sm-2">
@@ -98,7 +98,7 @@ export default async function ApplyStaffPage() {
                 <div className="content-card-body">
                   <p style={{ margin: "0 0 0.5rem" }}>{position.description}</p>
                   <p className="muted" style={{ margin: "0 0 0.75rem" }}>
-                    Application deadline: {formatDeadline(position.applyTo)}
+                    {t("deadline", { date: formatDeadline(position.applyTo) })}
                   </p>
 
                   {alreadyApplied ? (
@@ -108,7 +108,7 @@ export default async function ApplyStaffPage() {
                       disabled
                       style={{ width: "100%" }}
                     >
-                      You have already applied for {rankName}
+                      {t("alreadyApplied", { rank: rankName })}
                     </button>
                   ) : (
                     <form action={applyStaff}>
@@ -116,7 +116,7 @@ export default async function ApplyStaffPage() {
                           re-read from the session inside the action. */}
                       <input type="hidden" name="rankId" value={String(position.permissionId)} />
                       <label htmlFor={`content-${position.id}`} className="muted">
-                        About you
+                        {t("aboutYou")}
                       </label>
                       <textarea
                         id={`content-${position.id}`}
@@ -124,11 +124,11 @@ export default async function ApplyStaffPage() {
                         required
                         minLength={10}
                         rows={5}
-                        placeholder={`Tell us why you'd be a great ${rankName}…`}
+                        placeholder={t("aboutPlaceholder", { rank: rankName })}
                         style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
                       />
                       <button type="submit" className="btn btn-secondary" style={{ width: "100%" }}>
-                        Apply for {rankName}
+                        {t("applyFor", { rank: rankName })}
                       </button>
                     </form>
                   )}

src/app/apply/team/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { applyTeam } from "@/actions/applications";
 import { ContentCard, EmptyState } from "@/components/public/ui";
@@ -14,6 +15,8 @@ export default async function ApplyTeamPage() {
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
+  const t = await getTranslations("pages.applyTeam");
+
   const userId = Number(session.user.id);
   const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
 
@@ -39,16 +42,13 @@ export default async function ApplyTeamPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🤝"
-        title={`Apply for the ${hotelName} team`}
-        subtitle="We open team applications periodically. If you see a team you fit, do not hesitate to apply!"
+        title={t("title", { hotel: hotelName })}
+        subtitle={t("subtitle")}
       />
 
       {teams.length === 0 ? (
-        <ContentCard icon="🤝" title="No team positions open">
-          <EmptyState icon="🤝">
-            There are currently no open team positions. Please come back later to check for new
-            openings. Thank you!
-          </EmptyState>
+        <ContentCard icon="🤝" title={t("noPositionsTitle")}>
+          <EmptyState icon="🤝">{t("noPositionsBody")}</EmptyState>
         </ContentCard>
       ) : (
         <div className="card-grid sm-2">
@@ -89,7 +89,7 @@ export default async function ApplyTeamPage() {
                       disabled
                       style={{ width: "100%" }}
                     >
-                      Your application is pending
+                      {t("pending")}
                     </button>
                   ) : (
                     <form action={applyTeam}>
@@ -97,7 +97,7 @@ export default async function ApplyTeamPage() {
                           is re-read from the session inside the action. */}
                       <input type="hidden" name="teamId" value={String(team.id)} />
                       <label htmlFor={`content-${team.id}`} className="muted">
-                        About you
+                        {t("aboutYou")}
                       </label>
                       <textarea
                         id={`content-${team.id}`}
@@ -105,11 +105,11 @@ export default async function ApplyTeamPage() {
                         required
                         minLength={10}
                         rows={5}
-                        placeholder={`Tell us why you'd be a great fit for ${team.rankName}…`}
+                        placeholder={t("aboutPlaceholder", { rank: team.rankName })}
                         style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
                       />
                       <button type="submit" className="btn btn-primary" style={{ width: "100%" }}>
-                        Apply for {team.rankName}
+                        {t("applyFor", { rank: team.rankName })}
                       </button>
                     </form>
                   )}

src/app/badges/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
@@ -9,6 +10,8 @@ export const metadata = { title: "Badges" };
 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" },
@@ -19,13 +22,13 @@ export default async function BadgesPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🏅"
-        title="Badges"
-        subtitle="The badges you can earn and show off around the hotel"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <ContentCard padded={badges.length === 0}>
         {badges.length === 0 ? (
-          <EmptyState icon="🏅">No badges available yet.</EmptyState>
+          <EmptyState icon="🏅">{t("noBadges")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {badges.map((badge) => (

src/app/banned/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
@@ -7,6 +8,7 @@ export const dynamic = "force-dynamic";
 const FAR_FUTURE = Math.floor(Date.now() / 1000) + 50 * 365 * 24 * 3600;
 
 export default async function BannedPage() {
+  const t = await getTranslations("pages.banned");
   const session = await auth();
   let reason = "";
   let expire = 0;
@@ -31,21 +33,23 @@ export default async function BannedPage() {
     expire === 0
       ? ""
       : expire > FAR_FUTURE
-        ? "This ban is permanent."
-        : `Expires ${new Date(expire * 1000).toISOString().slice(0, 16).replace("T", " ")}.`;
+        ? t("permanent")
+        : t("expires", {
+            date: new Date(expire * 1000).toISOString().slice(0, 16).replace("T", " "),
+          });
 
   return (
     <main style={{ maxWidth: 560, margin: "2rem auto" }}>
-      <ContentCard icon="🚫" title="You are banned" subtitle="Account suspended">
-        <p style={{ marginTop: 0 }}>Your account has been suspended from the hotel.</p>
+      <ContentCard icon="🚫" title={t("title")} subtitle={t("subtitle")}>
+        <p style={{ marginTop: 0 }}>{t("body")}</p>
         {reason ? (
           <p>
-            <strong>Reason:</strong> {reason}
+            <strong>{t("reasonLabel")}</strong> {reason}
           </p>
         ) : null}
         {expiryText ? <p className="muted">{expiryText}</p> : null}
         <p className="muted" style={{ marginBottom: 0 }}>
-          If you believe this is a mistake, contact the staff team.
+          {t("contactStaff")}
         </p>
       </ContentCard>
     </main>

src/app/community/page.tsx

@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { ContentCard } from "@/components/public/ui";
 
@@ -7,50 +8,46 @@ export const metadata = { title: "Community" };
 
 const LINKS = [
   {
+    key: "rankings",
     href: "/rankings",
     icon: "🏆",
-    title: "Rankings",
-    text: "See the wealthiest players in the hotel, ranked by credits.",
   },
   {
+    key: "staff",
     href: "/staff",
     icon: "🛡️",
-    title: "Staff",
-    text: "Meet the team that keeps the hotel running every day.",
   },
   {
+    key: "news",
     href: "/news",
     icon: "📰",
-    title: "News",
-    text: "The latest announcements, events and updates.",
   },
   {
+    key: "photos",
     href: "/photos",
     icon: "📸",
-    title: "Photos",
-    text: "Snapshots shared by the community from around the hotel.",
   },
   {
+    key: "guilds",
     href: "/guilds",
     icon: "🚪",
-    title: "Guilds",
-    text: "Browse the groups players have created and joined.",
   },
   {
+    key: "leaderboards",
     href: "/leaderboard",
     icon: "📊",
-    title: "Leaderboards",
-    text: "Who's on top this season across the hotel's stats.",
   },
 ];
 
 export default function CommunityPage() {
+  const t = useTranslations("pages.community");
+
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🌍"
-        title="Community"
-        subtitle="Everything happening around the hotel in one place"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <div className="card-grid sm-2 lg-3">
@@ -66,14 +63,14 @@ export default function CommunityPage() {
                 {l.icon}
               </span>
               <div className="content-card-head-text">
-                <p className="content-card-title">{l.title}</p>
+                <p className="content-card-title">{t(`links.${l.key}.title`)}</p>
               </div>
             </div>
             <div className="content-card-body">
               <p className="muted" style={{ margin: "0 0 0.75rem" }}>
-                {l.text}
+                {t(`links.${l.key}.text`)}
               </p>
-              <span className="btn btn-outline">Open →</span>
+              <span className="btn btn-outline">{t("open")}</span>
             </div>
           </Link>
         ))}

src/app/forgot/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { requestReset } from "@/actions/password-reset";
 import { ContentCard } from "@/components/public/ui";
 
@@ -7,29 +8,30 @@ export default async function ForgotPage({
 }: {
   searchParams: Promise<{ sent?: string }>;
 }) {
+  const t = await getTranslations("pages.forgot");
   const { sent } = await searchParams;
 
   return (
     <main style={{ maxWidth: 420, margin: "2rem auto" }}>
       <ContentCard
         icon="🔑"
-        title="Reset password"
-        subtitle="We'll email you a secure link to set a new password."
+        title={t("title")}
+        subtitle={t("subtitle")}
       >
         {sent ? (
           <p className="muted" style={{ textAlign: "center", margin: 0 }}>
-            If that email is registered, a reset link has been sent. Check your inbox.
+            {t("sentNotice")}
           </p>
         ) : (
           <form action={requestReset} style={{ display: "grid", gap: "0.7rem" }}>
-            <input name="email" type="email" placeholder="Your email" autoComplete="email" required />
+            <input name="email" type="email" placeholder={t("emailPlaceholder")} autoComplete="email" required />
             <button type="submit" className="btn btn-primary">
-              Send reset link
+              {t("sendResetLink")}
             </button>
           </form>
         )}
         <p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
-          <Link href="/login">Back to login</Link>
+          <Link href="/login">{t("backToLogin")}</Link>
         </p>
       </ContentCard>
     </main>

src/app/friends/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
@@ -11,6 +12,7 @@ export const dynamic = "force-dynamic";
 export const metadata = { title: "Friends" };
 
 export default async function FriendsPage() {
+  const t = await getTranslations("pages.friends");
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
@@ -56,18 +58,18 @@ export default async function FriendsPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🤝"
-        title="Friends"
+        title={t("title")}
         subtitle={
           friends.length === 0
-            ? "You have no friends added yet"
-            : `You have ${friends.length} friend${friends.length === 1 ? "" : "s"}`
+            ? t("emptySubtitle")
+            : t("subtitle", { count: friends.length })
         }
       />
 
       <ContentCard padded={friends.length === 0}>
         {friends.length === 0 ? (
           <EmptyState icon="🤝">
-            Add friends in the hotel and they will show up here.
+            {t("emptyState")}
           </EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
@@ -104,7 +106,7 @@ export default async function FriendsPage() {
                         whiteSpace: "nowrap",
                       }}
                     >
-                      {friend.motto || "No motto"}
+                      {friend.motto || t("noMotto")}
                     </p>
                     <OnlineBadge online={isOnline} />
                   </div>

src/app/guilds/[id]/forum/new/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
 import { ContentCard } from "@/components/public/ui";
@@ -12,6 +13,7 @@ export default async function NewThreadPage({
 }: {
   params: Promise<{ id: string }>;
 }) {
+  const t = await getTranslations("pages.guildForumNew");
   const { id } = await params;
   const guildId = Number(id);
   if (!Number.isInteger(guildId) || guildId <= 0) notFound();
@@ -36,13 +38,13 @@ export default async function NewThreadPage({
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <p style={{ margin: 0 }}>
-        <Link href={`/guilds/${guild.id}/forum`}>← Back to forum</Link>
+        <Link href={`/guilds/${guild.id}/forum`}>{t("backToForum")}</Link>
       </p>
 
       <ContentCard
         icon="✍️"
-        title="New thread"
-        subtitle={`in ${guild.name || "Unnamed guild"} forum`}
+        title={t("title")}
+        subtitle={t("subtitle", { guild: guild.name || t("unnamedGuild") })}
       >
         <form action={postThread}>
           {/* Guild target drives the write; the author is taken from the session
@@ -50,35 +52,35 @@ export default async function NewThreadPage({
           <input type="hidden" name="guildId" value={String(guild.id)} />
 
           <label htmlFor="thread-subject" className="muted">
-            Subject
+            {t("subjectLabel")}
           </label>
           <input
             id="thread-subject"
             name="subject"
             required
             maxLength={255}
-            placeholder="Thread subject"
+            placeholder={t("subjectPlaceholder")}
             style={{ width: "100%", margin: "0.4rem 0 0.9rem" }}
           />
 
           <label htmlFor="thread-message" className="muted">
-            Message
+            {t("messageLabel")}
           </label>
           <textarea
             id="thread-message"
             name="message"
             required
             rows={8}
-            placeholder="Write your opening post…"
+            placeholder={t("messagePlaceholder")}
             style={{ width: "100%", margin: "0.4rem 0 1rem", resize: "vertical" }}
           />
 
           <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
             <button type="submit" className="btn btn-primary">
-              Post thread
+              {t("postThread")}
             </button>
             <Link href={`/guilds/${guild.id}/forum`} className="btn btn-outline">
-              Cancel
+              {t("cancel")}
             </Link>
           </div>
         </form>

src/app/guilds/[id]/forum/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ContentCard, EmptyState } from "@/components/public/ui";
@@ -26,6 +27,7 @@ export default async function GuildForumPage({
 }: {
   params: Promise<{ id: string }>;
 }) {
+  const t = await getTranslations("pages.guildForum");
   const { id } = await params;
   const guildId = Number(id);
   if (!Number.isInteger(guildId) || guildId <= 0) notFound();
@@ -92,51 +94,51 @@ export default async function GuildForumPage({
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <p style={{ margin: 0 }}>
-        <Link href={`/guilds/${guild.id}`}>← Back to guild</Link>
+        <Link href={`/guilds/${guild.id}`}>{t("backToGuild")}</Link>
       </p>
 
       <ContentCard
         icon="🗣️"
-        title={`${guild.name || "Unnamed guild"} — Forum`}
-        subtitle={`${threads.length} ${threads.length === 1 ? "thread" : "threads"}`}
+        title={t("forumTitle", { guild: guild.name || t("unnamedGuild") })}
+        subtitle={`${threads.length} ${threads.length === 1 ? t("threadSingular") : t("threadPlural")}`}
         action={
           <Link href={`/guilds/${guild.id}/forum/new`} className="btn btn-primary">
-            + New thread
+            {t("newThread")}
           </Link>
         }
       />
 
       <ContentCard padded={threads.length === 0}>
         {threads.length === 0 ? (
-          <EmptyState icon="🗣️">No threads in this forum yet.</EmptyState>
+          <EmptyState icon="🗣️">{t("empty")}</EmptyState>
         ) : (
           <table>
             <thead>
               <tr>
-                <th style={{ padding: "0.6rem 0.75rem" }}>Subject</th>
-                <th style={{ padding: "0.6rem 0.75rem" }}>Author</th>
-                <th style={{ padding: "0.6rem 0.75rem" }}>Posts</th>
-                <th style={{ padding: "0.6rem 0.75rem" }}>Date</th>
+                <th style={{ padding: "0.6rem 0.75rem" }}>{t("colSubject")}</th>
+                <th style={{ padding: "0.6rem 0.75rem" }}>{t("colAuthor")}</th>
+                <th style={{ padding: "0.6rem 0.75rem" }}>{t("colPosts")}</th>
+                <th style={{ padding: "0.6rem 0.75rem" }}>{t("colDate")}</th>
               </tr>
             </thead>
             <tbody>
-              {threads.map((t) => {
-                const opener = t.openerId ?? 0;
+              {threads.map((t2) => {
+                const opener = t2.openerId ?? 0;
                 const username = opener > 0 ? usernameById.get(opener) : undefined;
                 return (
-                  <tr key={t.id}>
+                  <tr key={t2.id}>
                     <td style={{ padding: "0.6rem 0.75rem" }}>
                       <span style={{ fontWeight: 700 }}>
-                        {t.subject?.trim() || "(no subject)"}
+                        {t2.subject?.trim() || t("noSubject")}
                       </span>
-                      {t.pinned ? (
+                      {t2.pinned ? (
                         <span className="online-badge online" style={{ marginLeft: "0.5rem" }}>
-                          📌 Pinned
+                          📌 {t("pinned")}
                         </span>
                       ) : null}
-                      {t.locked ? (
+                      {t2.locked ? (
                         <span className="online-badge" style={{ marginLeft: "0.5rem" }}>
-                          🔒 Locked
+                          🔒 {t("locked")}
                         </span>
                       ) : null}
                     </td>
@@ -145,15 +147,15 @@ export default async function GuildForumPage({
                         <Link href={`/u/${username}`}>{username}</Link>
                       ) : (
                         <span className="muted">
-                          {opener > 0 ? `User #${opener}` : "Unknown"}
+                          {opener > 0 ? t("userNumber", { id: opener }) : t("unknown")}
                         </span>
                       )}
                     </td>
                     <td style={{ padding: "0.6rem 0.75rem" }}>
-                      {t.postsCount ?? 0}
+                      {t2.postsCount ?? 0}
                     </td>
                     <td className="muted" style={{ padding: "0.6rem 0.75rem" }}>
-                      {formatTimestamp(t.createdAt)}
+                      {formatTimestamp(t2.createdAt)}
                     </td>
                   </tr>
                 );

src/app/guilds/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
@@ -35,6 +36,7 @@ export default async function GuildPage({
 }: {
   params: Promise<{ id: string }>;
 }) {
+  const t = await getTranslations("pages.guild");
   const { id } = await params;
   const guildId = Number(id);
   if (!Number.isInteger(guildId) || guildId <= 0) notFound();
@@ -121,7 +123,7 @@ export default async function GuildPage({
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <p style={{ margin: 0 }}>
-        <Link href="/guilds">← All guilds</Link>
+        <Link href="/guilds">{t("allGuilds")}</Link>
       </p>
 
       <ContentCard>
@@ -137,9 +139,9 @@ export default async function GuildPage({
             />
           ) : null}
           <div style={{ minWidth: 0, flex: 1 }}>
-            <h1 style={{ margin: "0 0 0.35rem" }}>{guild.name || "Unnamed guild"}</h1>
+            <h1 style={{ margin: "0 0 0.35rem" }}>{guild.name || t("unnamedGuild")}</h1>
             <p style={{ margin: 0 }}>
-              {guild.description || <span className="muted">No description</span>}
+              {guild.description || <span className="muted">{t("noDescription")}</span>}
             </p>
           </div>
         </div>
@@ -148,29 +150,29 @@ export default async function GuildPage({
           <StatBlock
             icon="👥"
             value={members.length}
-            label={members.length === 1 ? "Member" : "Members"}
+            label={members.length === 1 ? t("memberSingular") : t("memberPlural")}
           />
-          {created ? <StatBlock icon="📅" value={created} label="Founded" /> : null}
+          {created ? <StatBlock icon="📅" value={created} label={t("founded")} /> : null}
           <StatBlock
             icon="🚪"
             value={
               <Link href={`/guilds/${guild.id}/forum`} style={{ textDecoration: "none" }}>
-                Forum →
+                {t("forumLink")}
               </Link>
             }
-            label="Discussion"
+            label={t("discussion")}
           />
         </div>
       </ContentCard>
 
       <ContentCard
         icon="👥"
-        title="Members"
-        subtitle={`${members.length} ${members.length === 1 ? "member" : "members"}`}
+        title={t("membersTitle")}
+        subtitle={`${members.length} ${members.length === 1 ? t("memberLowerSingular") : t("memberLowerPlural")}`}
         padded={members.length === 0}
       >
         {members.length === 0 ? (
-          <EmptyState icon="👥">No members.</EmptyState>
+          <EmptyState icon="👥">{t("noMembers")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {members.map((m) => (
@@ -197,11 +199,11 @@ export default async function GuildPage({
                       className="online-badge online"
                       style={{ marginBottom: "0.25rem" }}
                     >
-                      👑 Owner
+                      👑 {t("owner")}
                     </span>
                   ) : null}
                   <p className="muted" style={{ margin: m.isOwner ? "0.25rem 0 0" : 0 }}>
-                    {m.motto || "No motto"}
+                    {m.motto || t("noMotto")}
                   </p>
                 </div>
               </div>

src/app/guilds/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
@@ -28,19 +29,20 @@ async function getGuilds(): Promise<GuildCard[]> {
 }
 
 export default async function GuildsPage() {
+  const t = await getTranslations("pages.guilds");
   const guilds = await getGuilds();
 
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🚪"
-        title="Guilds"
-        subtitle="Browse the groups players have created and joined"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <ContentCard padded={guilds.length === 0}>
         {guilds.length === 0 ? (
-          <EmptyState icon="🚪">No guilds yet.</EmptyState>
+          <EmptyState icon="🚪">{t("empty")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {guilds.map((g) => (
@@ -68,10 +70,10 @@ export default async function GuildsPage() {
                 ) : null}
                 <div style={{ minWidth: 0 }}>
                   <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
-                    {g.name || "Unnamed guild"}
+                    {g.name || t("unnamedGuild")}
                   </h3>
                   <p className="muted" style={{ margin: 0 }}>
-                    {g.description ? excerpt(g.description, 120) : "No description"}
+                    {g.description ? excerpt(g.description, 120) : t("noDescription")}
                   </p>
                 </div>
               </Link>

src/app/help/[category]/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ContentCard } from "@/components/public/ui";
@@ -39,6 +40,7 @@ export default async function HelpCategoryPage({
 }: {
   params: Promise<{ category: string }>;
 }) {
+  const t = await getTranslations("pages.helpCategory");
   const { category } = await params;
 
   let categoryId: bigint;
@@ -96,10 +98,10 @@ export default async function HelpCategoryPage({
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <p style={{ margin: 0 }}>
-        <Link href="/help">← Help Center</Link>
+        <Link href="/help">{t("back")}</Link>
       </p>
 
-      <ContentCard icon="❓" title={title} subtitle="Help Center topic">
+      <ContentCard icon="❓" title={title} subtitle={t("topicSubtitle")}>
         {imageSrc ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
@@ -140,8 +142,8 @@ export default async function HelpCategoryPage({
       {siblings.length > 0 ? (
         <ContentCard
           icon="🧭"
-          title="More help topics"
-          subtitle="Jump to another support topic"
+          title={t("moreTitle")}
+          subtitle={t("moreSubtitle")}
         >
           <div className="card-grid sm-2 lg-3">
             {siblings.map((s) => (

src/app/help/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
@@ -35,6 +36,8 @@ function isExternal(url: string): boolean {
 }
 
 export default async function HelpCenterPage() {
+  const t = await getTranslations("pages.help");
+
   let categories: HelpCategory[] = [];
   try {
     categories = await prisma.websiteHelpCenterCategories.findMany({
@@ -91,23 +94,23 @@ export default async function HelpCenterPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="❓"
-        title="Help Center"
-        subtitle="Find guides, support topics, and the hotel rules — everything you need to get help."
+        title={t("title")}
+        subtitle={t("subtitle")}
         action={
           <Link className="btn btn-outline" href="/help/tickets">
-            My tickets →
+            {t("myTickets")}
           </Link>
         }
       />
 
       <ContentCard
         icon="🧭"
-        title="Support topics"
-        subtitle="Browse guides and answers to common questions"
+        title={t("topicsTitle")}
+        subtitle={t("topicsSubtitle")}
         padded={categories.length === 0}
       >
         {categories.length === 0 ? (
-          <EmptyState icon="🧭">No help topics yet.</EmptyState>
+          <EmptyState icon="🧭">{t("topicsEmpty")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {categories.map((c) => (
@@ -169,12 +172,12 @@ export default async function HelpCenterPage() {
 
       <ContentCard
         icon="📜"
-        title="Hotel rules"
-        subtitle="Please read these before hanging out in the hotel"
+        title={t("rulesTitle")}
+        subtitle={t("rulesSubtitle")}
         padded={ruleCategories.length === 0}
       >
         {ruleCategories.length === 0 ? (
-          <EmptyState icon="📜">No rules published yet.</EmptyState>
+          <EmptyState icon="📜">{t("rulesEmpty")}</EmptyState>
         ) : (
           <div style={{ display: "grid", gap: "1rem", padding: "1rem" }}>
             {ruleCategories.map((cat) => {
@@ -200,7 +203,7 @@ export default async function HelpCenterPage() {
 
                   {catRules.length === 0 ? (
                     <p className="muted" style={{ marginBottom: 0 }}>
-                      No rules in this category.
+                      {t("categoryEmpty")}
                     </p>
                   ) : (
                     <ul style={{ margin: "0.85rem 0 0", paddingLeft: "1.2rem" }}>

src/app/help/tickets/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { createTicket } from "@/actions/help-tickets";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
@@ -14,6 +15,8 @@ export default async function HelpTicketsPage() {
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
+  const t = await getTranslations("pages.helpTickets");
+
   const userId = Number(session.user.id);
 
   let tickets: Awaited<ReturnType<typeof prisma.websiteHelpCenterTickets.findMany>> = [];
@@ -34,30 +37,30 @@ export default async function HelpTicketsPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🎫"
-        title="Help Tickets"
-        subtitle="Submit a ticket to staff and track your open requests."
+        title={t("title")}
+        subtitle={t("subtitle")}
       >
         <div className="stat-grid">
-          <StatBlock icon="🎫" value={tickets.length} label="Total tickets" />
-          <StatBlock icon="📬" value={openCount} label="Open" />
-          <StatBlock icon="✅" value={closedCount} label="Closed" />
+          <StatBlock icon="🎫" value={tickets.length} label={t("statTotal")} />
+          <StatBlock icon="📬" value={openCount} label={t("statOpen")} />
+          <StatBlock icon="✅" value={closedCount} label={t("statClosed")} />
         </div>
       </ContentCard>
 
-      <ContentCard icon="✏️" title="New ticket" subtitle="Describe your issue and staff will follow up">
+      <ContentCard icon="✏️" title={t("newTitle")} subtitle={t("newSubtitle")}>
         <form action={createTicket}>
           <div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
-            <input name="title" placeholder="Subject" maxLength={255} required />
+            <input name="title" placeholder={t("subjectPlaceholder")} maxLength={255} required />
             <textarea
               name="content"
-              placeholder="Describe your issue…"
+              placeholder={t("contentPlaceholder")}
               rows={5}
               maxLength={5000}
               required
             />
             <div>
               <button type="submit" className="btn btn-primary">
-                Submit ticket
+                {t("submit")}
               </button>
             </div>
           </div>
@@ -66,34 +69,34 @@ export default async function HelpTicketsPage() {
 
       <ContentCard
         icon="📋"
-        title="Your tickets"
-        subtitle="Every request you have sent to staff"
+        title={t("listTitle")}
+        subtitle={t("listSubtitle")}
         padded={tickets.length === 0}
       >
         {tickets.length === 0 ? (
-          <EmptyState icon="🎫">You have no tickets yet.</EmptyState>
+          <EmptyState icon="🎫">{t("listEmpty")}</EmptyState>
         ) : (
           <table>
             <thead>
               <tr>
-                <th>ID</th>
-                <th>Subject</th>
-                <th>Status</th>
-                <th>Created</th>
+                <th>{t("colId")}</th>
+                <th>{t("colSubject")}</th>
+                <th>{t("colStatus")}</th>
+                <th>{t("colCreated")}</th>
               </tr>
             </thead>
             <tbody>
-              {tickets.map((t) => (
-                <tr key={String(t.id)}>
-                  <td>{String(t.id)}</td>
-                  <td>{t.title}</td>
+              {tickets.map((t2) => (
+                <tr key={String(t2.id)}>
+                  <td>{String(t2.id)}</td>
+                  <td>{t2.title}</td>
                   <td>
-                    <span className={`online-badge${t.open ? " online" : ""}`}>
+                    <span className={`online-badge${t2.open ? " online" : ""}`}>
                       <span className="online-dot" aria-hidden />
-                      {t.open ? "Open" : "Closed"}
+                      {t2.open ? t("statusOpen") : t("statusClosed")}
                     </span>
                   </td>
-                  <td className="muted">{formatDate(t.createdAt)}</td>
+                  <td className="muted">{formatDate(t2.createdAt)}</td>
                 </tr>
               ))}
             </tbody>

src/app/leaderboard/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
 import { avatarImageUrl } from "@/lib/format";
@@ -71,6 +72,7 @@ export default async function LeaderboardPage({
 }: {
   searchParams: Promise<{ type?: string }>;
 }) {
+  const t = await getTranslations("pages.leaderboard");
   const { type } = await searchParams;
   const active: TabKey = TABS.some((t) => t.key === type) ? (type as TabKey) : "credits";
   const activeTab = TABS.find((t) => t.key === active)!;
@@ -86,33 +88,33 @@ export default async function LeaderboardPage({
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="📊"
-        title="Leaderboard"
-        subtitle={`Top 20 players by ${activeTab.label.toLowerCase()}`}
+        title={t("title")}
+        subtitle={t("subtitle", { currency: t(`tab_${active}`).toLowerCase() })}
       />
 
       <div className="nav" style={{ gap: "0.5rem" }}>
-        {TABS.map((t) => (
+        {TABS.map((t2) => (
           <Link
-            key={t.key}
-            href={`/leaderboard?type=${t.key}`}
-            className={`btn ${t.key === active ? "btn-primary" : "btn-outline"}`}
+            key={t2.key}
+            href={`/leaderboard?type=${t2.key}`}
+            className={`btn ${t2.key === active ? "btn-primary" : "btn-outline"}`}
           >
-            {t.label}
+            {t(`tab_${t2.key}`)}
           </Link>
         ))}
       </div>
 
       <ContentCard padded={rows.length === 0}>
         {rows.length === 0 ? (
-          <EmptyState icon="📊">No rankings to show yet.</EmptyState>
+          <EmptyState icon="📊">{t("emptyState")}</EmptyState>
         ) : (
           <table>
             <thead>
               <tr>
                 <th style={{ width: "3rem" }}>#</th>
-                <th style={{ width: "3.5rem" }}>Avatar</th>
-                <th>Player</th>
-                <th style={{ textAlign: "right" }}>{activeTab.label}</th>
+                <th style={{ width: "3.5rem" }}>{t("colAvatar")}</th>
+                <th>{t("colPlayer")}</th>
+                <th style={{ textAlign: "right" }}>{t(`tab_${active}`)}</th>
               </tr>
             </thead>
             <tbody>

src/app/login/page.tsx

@@ -1,12 +1,14 @@
 "use client";
 
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { signIn } from "next-auth/react";
 import { type FormEvent, useState } from "react";
 import { precheckLogin } from "@/actions/auth-precheck";
 import { ContentCard } from "@/components/public/ui";
 
 export default function LoginPage() {
+  const t = useTranslations("pages.login");
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [code, setCode] = useState("");
@@ -22,7 +24,7 @@ export default function LoginPage() {
       if (!needs2fa) {
         const pre = await precheckLogin(username, password);
         if (pre === "invalid") {
-          setError("Invalid username or password");
+          setError(t("errorInvalidCredentials"));
           return;
         }
         if (pre === "twofactor") {
@@ -37,7 +39,7 @@ export default function LoginPage() {
         redirect: false,
       });
       if (!res || res.error) {
-        setError(needs2fa ? "Invalid 2FA code" : "Invalid username or password");
+        setError(needs2fa ? t("errorInvalid2fa") : t("errorInvalidCredentials"));
         return;
       }
       window.location.href = "/";
@@ -50,18 +52,14 @@ export default function LoginPage() {
     <main style={{ maxWidth: 420, margin: "2rem auto" }}>
       <ContentCard
         icon={needs2fa ? "🔒" : "🔑"}
-        title="Sign in"
-        subtitle={
-          needs2fa
-            ? "Enter the 6-digit code from your authenticator."
-            : "Welcome back — log in to enter the hotel."
-        }
+        title={t("title")}
+        subtitle={needs2fa ? t("subtitle2fa") : t("subtitle")}
       >
         <form onSubmit={onSubmit} style={{ display: "grid", gap: "0.7rem" }}>
           <input
             value={username}
             onChange={(e) => setUsername(e.target.value)}
-            placeholder="Username"
+            placeholder={t("usernamePlaceholder")}
             autoComplete="username"
             disabled={needs2fa}
           />
@@ -69,7 +67,7 @@ export default function LoginPage() {
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            placeholder="Password"
+            placeholder={t("passwordPlaceholder")}
             autoComplete="current-password"
             disabled={needs2fa}
           />
@@ -77,7 +75,7 @@ export default function LoginPage() {
             <input
               value={code}
               onChange={(e) => setCode(e.target.value)}
-              placeholder="2FA code"
+              placeholder={t("codePlaceholder")}
               inputMode="numeric"
               autoComplete="one-time-code"
               // biome-ignore lint/a11y/noAutofocus: focus the only relevant field in the 2FA step
@@ -85,7 +83,7 @@ export default function LoginPage() {
             />
           ) : null}
           <button type="submit" className="btn btn-primary" disabled={pending}>
-            {pending ? "Please wait…" : needs2fa ? "Verify" : "Sign in"}
+            {pending ? t("pleaseWait") : needs2fa ? t("verify") : t("signIn")}
           </button>
         </form>
 
@@ -93,7 +91,7 @@ export default function LoginPage() {
           <>
             <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", margin: "1rem 0" }}>
               <span style={{ flex: 1, height: 1, background: "var(--border-color)" }} />
-              <span className="muted">or</span>
+              <span className="muted">{t("or")}</span>
               <span style={{ flex: 1, height: 1, background: "var(--border-color)" }} />
             </div>
             <div style={{ display: "grid", gap: "0.5rem" }}>
@@ -102,14 +100,14 @@ export default function LoginPage() {
                 className="btn btn-outline"
                 onClick={() => signIn("discord", { callbackUrl: "/" })}
               >
-                Continue with Discord
+                {t("continueWithDiscord")}
               </button>
               <button
                 type="button"
                 className="btn btn-outline"
                 onClick={() => signIn("google", { callbackUrl: "/" })}
               >
-                Continue with Google
+                {t("continueWithGoogle")}
               </button>
             </div>
           </>
@@ -121,8 +119,8 @@ export default function LoginPage() {
           </p>
         ) : null}
         <p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
-          No account? <Link href="/register">Create one</Link> ·{" "}
-          <Link href="/forgot">Forgot password?</Link>
+          {t("noAccount")} <Link href="/register">{t("createOne")}</Link> ·{" "}
+          <Link href="/forgot">{t("forgotPassword")}</Link>
         </p>
       </ContentCard>
     </main>

src/app/maintenance/page.tsx

@@ -1,9 +1,11 @@
+import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export const dynamic = "force-dynamic";
 
 export default async function MaintenancePage() {
+  const t = await getTranslations("pages.maintenance");
   const [hotel, message] = await Promise.all([
     siteSettings.get("hotel_name", "Atom"),
     siteSettings.get(
@@ -16,12 +18,12 @@ export default async function MaintenancePage() {
     <main style={{ maxWidth: 560, margin: "2rem auto" }}>
       <ContentCard
         icon="🛠️"
-        title={`${hotel} is under maintenance`}
-        subtitle="We'll be back shortly"
+        title={t("title", { hotel: hotel ?? "Atom" })}
+        subtitle={t("subtitle")}
       >
         <p style={{ marginTop: 0 }}>{message}</p>
         <p className="muted" style={{ marginBottom: 0 }}>
-          Staff can still log in.
+          {t("staffCanLogIn")}
         </p>
       </ContentCard>
     </main>

src/app/marketplace/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
@@ -8,16 +9,18 @@ export const metadata = { title: "Marketplace" };
 // state == 1 → an active, unsold offer in the Arcturus marketplace.
 const STATE_ACTIVE = 1;
 
-function listedAgo(ts: number): string {
+type RelativeTimeTranslator = (key: string, values?: Record<string, number>) => string;
+
+function listedAgo(ts: number, t: RelativeTimeTranslator): string {
   const now = Math.floor(Date.now() / 1000);
   const diff = Math.max(0, now - ts);
-  if (diff < 60) return "just now";
+  if (diff < 60) return t("justNow");
   const mins = Math.floor(diff / 60);
-  if (mins < 60) return `${mins}m ago`;
+  if (mins < 60) return t("minutesAgo", { count: mins });
   const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
+  if (hours < 24) return t("hoursAgo", { count: hours });
   const days = Math.floor(hours / 24);
-  return `${days}d ago`;
+  return t("daysAgo", { count: days });
 }
 
 function listedAt(ts: number): string {
@@ -25,6 +28,7 @@ function listedAt(ts: number): string {
 }
 
 export default async function MarketplacePage() {
+  const t = await getTranslations("pages.marketplace");
   let offers: {
     id: number;
     itemId: number;
@@ -64,51 +68,51 @@ export default async function MarketplacePage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🛍️"
-        title="Marketplace"
-        subtitle="Browse furniture and rares listed by players. Listings are placed in-game and update live — head into the hotel to make an offer."
+        title={t("title")}
+        subtitle={t("subtitle")}
       >
         <div className="stat-grid">
-          <StatBlock value={offers.length.toLocaleString()} label="Active offers" icon="🏷️" />
+          <StatBlock value={offers.length.toLocaleString()} label={t("activeOffers")} icon="🏷️" />
           <StatBlock
             value={new Set(offers.map((o) => o.userId)).size.toLocaleString()}
-            label="Sellers"
+            label={t("sellers")}
             icon="👥"
           />
-          <StatBlock value={`${total.toLocaleString()} cr`} label="Total value" icon="🪙" />
+          <StatBlock value={`${total.toLocaleString()} cr`} label={t("totalValue")} icon="🪙" />
         </div>
       </ContentCard>
 
       <ContentCard
         icon="📋"
-        title="Active listings"
-        subtitle={offers.length > 0 ? "Most recently listed first" : undefined}
+        title={t("activeListings")}
+        subtitle={offers.length > 0 ? t("mostRecentFirst") : undefined}
         padded={offers.length === 0}
       >
         {offers.length === 0 ? (
           <EmptyState icon="🛍️">
-            There are no active marketplace offers right now. Check back later.
+            {t("empty")}
           </EmptyState>
         ) : (
           <div style={{ padding: "0.25rem 1rem 0.75rem", overflowX: "auto" }}>
             <table>
               <thead>
                 <tr>
-                  <th>Offer</th>
-                  <th>Item</th>
-                  <th>Seller</th>
-                  <th>Price</th>
-                  <th>Listed</th>
+                  <th>{t("colOffer")}</th>
+                  <th>{t("colItem")}</th>
+                  <th>{t("colSeller")}</th>
+                  <th>{t("colPrice")}</th>
+                  <th>{t("colListed")}</th>
                 </tr>
               </thead>
               <tbody>
                 {offers.map((o) => (
                   <tr key={o.id}>
                     <td className="muted">#{o.id}</td>
-                    <td>Item #{o.itemId}</td>
-                    <td>{sellers.get(o.userId) ?? `User #${o.userId}`}</td>
+                    <td>{t("itemLabel", { id: o.itemId })}</td>
+                    <td>{sellers.get(o.userId) ?? t("userLabel", { id: o.userId })}</td>
                     <td style={{ fontWeight: 700 }}>{o.price.toLocaleString()} cr</td>
                     <td className="muted" title={listedAt(o.timestamp)}>
-                      {listedAgo(o.timestamp)}
+                      {listedAgo(o.timestamp, t)}
                     </td>
                   </tr>
                 ))}

src/app/messages/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ContentCard, EmptyState } from "@/components/public/ui";
@@ -16,6 +17,7 @@ function formatTimestamp(seconds: number): string {
 }
 
 export default async function MessagesPage() {
+  const t = await getTranslations("pages.messages");
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
@@ -83,23 +85,23 @@ export default async function MessagesPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="✉️"
-        title="Messages"
-        subtitle="Friend requests and offline messages waiting for you"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       {/* ── Pending friend requests ───────────────────────────── */}
       <ContentCard
         icon="🙋"
-        title="Friend requests"
+        title={t("requestsTitle")}
         subtitle={
           requests.length === 0
-            ? "Nobody's asked to be your friend yet"
-            : `${requests.length} pending request${requests.length === 1 ? "" : "s"}`
+            ? t("requestsEmptySubtitle")
+            : t("requestsSubtitle", { count: requests.length })
         }
         padded={requests.length === 0}
       >
         {requests.length === 0 ? (
-          <EmptyState icon="🙋">No pending friend requests.</EmptyState>
+          <EmptyState icon="🙋">{t("requestsEmptyState")}</EmptyState>
         ) : (
           <div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
             {requests.map((req) => {
@@ -129,17 +131,17 @@ export default async function MessagesPage() {
                           <strong>{from.username}</strong>
                         </Link>
                       ) : (
-                        <strong>User #{req.userFromId}</strong>
+                        <strong>{t("unknownUser", { id: req.userFromId })}</strong>
                       )}
                     </p>
                     <p className="muted" style={{ margin: 0 }}>
-                      wants to be your friend.
+                      {t("wantsToBeFriend")}
                     </p>
                   </div>
                   <form action={acceptFriend}>
                     <input type="hidden" name="requestId" value={String(req.id)} />
                     <button type="submit" className="btn btn-secondary">
-                      Accept
+                      {t("accept")}
                     </button>
                   </form>
                 </div>
@@ -152,16 +154,16 @@ export default async function MessagesPage() {
       {/* ── Offline messages ──────────────────────────────────── */}
       <ContentCard
         icon="💬"
-        title="Offline messages"
+        title={t("offlineTitle")}
         subtitle={
           messages.length === 0
-            ? "Your inbox is empty"
-            : `${messages.length} message${messages.length === 1 ? "" : "s"} received`
+            ? t("offlineEmptySubtitle")
+            : t("offlineSubtitle", { count: messages.length })
         }
         padded={messages.length === 0}
       >
         {messages.length === 0 ? (
-          <EmptyState icon="💬">You have no offline messages.</EmptyState>
+          <EmptyState icon="💬">{t("offlineEmptyState")}</EmptyState>
         ) : (
           <div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
             {messages.map((msg) => {
@@ -193,7 +195,7 @@ export default async function MessagesPage() {
                       {from ? (
                         <Link href={`/u/${from.username}`}>{from.username}</Link>
                       ) : (
-                        <span>User #{msg.userFromId}</span>
+                        <span>{t("unknownUser", { id: msg.userFromId })}</span>
                       )}
                       {when ? <span> · {when}</span> : null}
                     </p>

src/app/news/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ContentCard, EmptyState } from "@/components/public/ui";
@@ -25,10 +26,10 @@ export async function generateMetadata({
 
 // The reaction set offered by the voting UI. Must stay in sync with
 // ALLOWED_REACTIONS in src/actions/article-reactions.ts.
-const REACTIONS: { key: string; label: string }[] = [
-  { key: "like", label: "👍 Like" },
-  { key: "love", label: "❤️ Love" },
-  { key: "wow", label: "😮 Wow" },
+const REACTIONS: { key: string; emoji: string }[] = [
+  { key: "like", emoji: "👍" },
+  { key: "love", emoji: "❤️" },
+  { key: "wow", emoji: "😮" },
 ];
 
 function formatDate(d: Date | null | undefined): string {
@@ -41,6 +42,7 @@ export default async function ArticlePage({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = await params;
+  const t = await getTranslations("pages.article");
 
   let article: Awaited<ReturnType<typeof prisma.websiteArticles.findUnique>> = null;
   try {
@@ -109,7 +111,7 @@ export default async function ArticlePage({
         subtitle={article.createdAt ? article.createdAt.toISOString().slice(0, 10) : undefined}
         action={
           <Link className="btn btn-outline" href="/news">
-            ← News
+            {t("backToNews")}
           </Link>
         }
       >
@@ -125,12 +127,13 @@ export default async function ArticlePage({
       </ContentCard>
 
       {/* ── Reactions ─────────────────────────────────────────── */}
-      <ContentCard icon="💬" title="Reactions" subtitle="Tell us what you think">
+      <ContentCard icon="💬" title={t("reactionsTitle")} subtitle={t("reactionsSubtitle")}>
         {loggedIn ? (
           <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
             {REACTIONS.map((r) => {
               const active = myReaction === r.key;
               const count = reactionCounts.get(r.key) ?? 0;
+              const label = `${r.emoji} ${t(`reaction.${r.key}`)}`;
               return (
                 <form key={r.key} action={toggleReaction} style={{ margin: 0 }}>
                   <input type="hidden" name="articleId" value={String(articleId)} />
@@ -139,9 +142,9 @@ export default async function ArticlePage({
                     type="submit"
                     aria-pressed={active}
                     className={`btn ${active ? "btn-primary" : "btn-outline"}`}
-                    title={active ? "Click to remove your reaction" : `React with ${r.key}`}
+                    title={active ? t("removeReaction") : t("reactWith", { reaction: r.key })}
                   >
-                    <span>{r.label}</span>
+                    <span>{label}</span>
                     <span
                       className="muted"
                       style={{ fontSize: "0.85rem", color: "inherit", opacity: 0.85 }}
@@ -155,14 +158,14 @@ export default async function ArticlePage({
           </div>
         ) : reactionCounts.size === 0 ? (
           <EmptyState icon="💬">
-            No reactions yet. <Link href="/login">Log in</Link> to react.
+            {t("noReactions")} <Link href="/login">{t("logIn")}</Link> {t("toReact")}
           </EmptyState>
         ) : (
           <>
             <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
               {REACTIONS.filter((r) => (reactionCounts.get(r.key) ?? 0) > 0).map((r) => (
                 <span key={r.key} className="currency">
-                  <span style={{ fontWeight: 800 }}>{r.label}</span>
+                  <span style={{ fontWeight: 800 }}>{`${r.emoji} ${t(`reaction.${r.key}`)}`}</span>
                   <span className="muted" style={{ fontSize: "0.85rem" }}>
                     {reactionCounts.get(r.key) ?? 0}
                   </span>
@@ -170,7 +173,7 @@ export default async function ArticlePage({
               ))}
             </div>
             <p className="muted" style={{ marginTop: "0.6rem" }}>
-              <Link href="/login">Log in</Link> to react.
+              <Link href="/login">{t("logIn")}</Link> {t("toReact")}
             </p>
           </>
         )}
@@ -179,11 +182,11 @@ export default async function ArticlePage({
       {/* ── Comments ──────────────────────────────────────────── */}
       <ContentCard
         icon="🗨️"
-        title="Comments"
-        subtitle={comments.length > 0 ? `${comments.length} so far` : "Join the conversation"}
+        title={t("commentsTitle")}
+        subtitle={comments.length > 0 ? t("commentsCount", { count: comments.length }) : t("commentsSubtitle")}
       >
         {comments.length === 0 ? (
-          <EmptyState icon="🗨️">No comments yet. Be the first to comment.</EmptyState>
+          <EmptyState icon="🗨️">{t("noComments")}</EmptyState>
         ) : (
           <div className="grid" style={{ marginBottom: "1.5rem" }}>
             {comments.map((c) => {
@@ -194,7 +197,7 @@ export default async function ArticlePage({
                     {name ? (
                       <Link href={`/u/${name}`}>{name}</Link>
                     ) : (
-                      <span>User #{c.userId}</span>
+                      <span>{t("userNumber", { id: c.userId })}</span>
                     )}
                     {c.createdAt ? <span> · {formatDate(c.createdAt)}</span> : null}
                   </p>
@@ -212,7 +215,7 @@ export default async function ArticlePage({
               htmlFor="comment"
               style={{ display: "block", fontWeight: 700, marginBottom: "0.5rem" }}
             >
-              Add a comment
+              {t("addComment")}
             </label>
             <textarea
               id="comment"
@@ -220,18 +223,18 @@ export default async function ArticlePage({
               required
               maxLength={255}
               rows={3}
-              placeholder="Write your comment…"
+              placeholder={t("commentPlaceholder")}
               style={{ width: "100%", resize: "vertical" }}
             />
             <div style={{ marginTop: "0.75rem" }}>
               <button type="submit" className="btn btn-primary">
-                Post comment
+                {t("postComment")}
               </button>
             </div>
           </form>
         ) : (
           <p className="muted">
-            <Link href="/login">Log in</Link> to leave a comment.
+            <Link href="/login">{t("logIn")}</Link> {t("toComment")}
           </p>
         )}
       </ContentCard>

src/app/news/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
@@ -12,6 +13,8 @@ function formatDate(d: Date | null): string {
 }
 
 export default async function NewsPage() {
+  const t = await getTranslations("pages.news");
+
   let articles: Awaited<ReturnType<typeof prisma.websiteArticles.findMany>> = [];
   try {
     articles = await prisma.websiteArticles.findMany({
@@ -27,13 +30,13 @@ export default async function NewsPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="📰"
-        title="News"
-        subtitle="The latest announcements, events and updates from the hotel"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <ContentCard padded={articles.length === 0}>
         {articles.length === 0 ? (
-          <EmptyState icon="📰">No articles yet.</EmptyState>
+          <EmptyState icon="📰">{t("noArticles")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {articles.map((a) => (

src/app/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
@@ -7,6 +8,7 @@ import { siteSettings } from "@/lib/services/site-settings";
 export const dynamic = "force-dynamic";
 
 export default async function HomePage() {
+  const t = await getTranslations("pages.home");
   const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
 
   let articles: Array<{ slug: string; title: string; shortStory: string; image: string }> = [];
@@ -24,34 +26,34 @@ export default async function HomePage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🏨"
-        title={`Welcome to ${hotelName}`}
-        subtitle="Your retro hotel, now powered by Next.js"
+        title={t("welcome", { hotelName })}
+        subtitle={t("welcomeSubtitle")}
       >
         <p className="muted" style={{ margin: "0 0 0.9rem" }}>
-          Hang out, collect furni, and meet friends.
+          {t("welcomeBody")}
         </p>
         <div style={{ display: "flex", gap: "0.6rem", flexWrap: "wrap" }}>
           <Link className="btn btn-primary" href="/client">
-            Enter hotel
+            {t("enterHotel")}
           </Link>
           <Link className="btn btn-outline" href="/news">
-            Latest news
+            {t("latestNews")}
           </Link>
         </div>
       </ContentCard>
 
       <ContentCard
         icon="📰"
-        title="Latest news"
-        subtitle="Fresh from the hotel"
+        title={t("newsTitle")}
+        subtitle={t("newsSubtitle")}
         action={
           <Link className="btn btn-outline" href="/news">
-            All news →
+            {t("allNews")}
           </Link>
         }
       >
         {articles.length === 0 ? (
-          <EmptyState icon="📰">No articles yet.</EmptyState>
+          <EmptyState icon="📰">{t("noArticles")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-4">
             {articles.map((a) => (

src/app/photos/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
@@ -21,6 +22,8 @@ function formatDate(timestamp: number): string {
 }
 
 export default async function PhotosPage() {
+  const t = await getTranslations("pages.photos");
+
   let photos: Photo[] = [];
   try {
     photos = await prisma.cameraWeb.findMany({
@@ -35,13 +38,13 @@ export default async function PhotosPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="📸"
-        title="Photos"
-        subtitle="The latest snapshots taken in the hotel"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <ContentCard padded={photos.length === 0}>
         {photos.length === 0 ? (
-          <EmptyState icon="📸">No photos yet.</EmptyState>
+          <EmptyState icon="📸">{t("noPhotos")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 md-3 lg-4" style={{ padding: "1rem" }}>
             {photos.map((p) => (
@@ -49,7 +52,7 @@ export default async function PhotosPage() {
                 {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img
                   src={p.url}
-                  alt={`Photo by user #${p.userId}`}
+                  alt={t("photoAlt", { id: p.userId })}
                   style={{
                     width: "100%",
                     height: "auto",
@@ -61,7 +64,7 @@ export default async function PhotosPage() {
                     {formatDate(p.timestamp)}
                   </p>
                   <p className="muted" style={{ margin: 0, fontSize: "0.85rem" }}>
-                    by user #{p.userId}
+                    {t("byUser", { id: p.userId })}
                   </p>
                 </div>
               </article>

src/app/radio/apply/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { ContentCard } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
@@ -10,6 +11,8 @@ export default async function RadioApplyPage() {
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
+  const t = await getTranslations("pages.radioApply");
+
   const userId = Number(session.user.id);
 
   // Surface the applicant's most recent application (if any) so they aren't
@@ -30,30 +33,30 @@ export default async function RadioApplyPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🎤"
-        title="Apply to be a Radio DJ"
-        subtitle="Tell us about yourself and why you'd be a great fit for the airwaves"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       {existing ? (
-        <ContentCard icon="📋" title="Your latest application">
+        <ContentCard icon="📋" title={t("latestTitle")}>
           <p style={{ margin: 0 }}>
-            <strong>Status:</strong> {existing.status}
+            <strong>{t("statusLabel")}</strong> {existing.status}
             {submittedDate ? (
-              <span className="muted"> · submitted {submittedDate}</span>
+              <span className="muted"> {t("submittedOn", { date: submittedDate })}</span>
             ) : null}
           </p>
           <p className="muted" style={{ margin: "0.4rem 0 0" }}>
-            You can submit again below if your details have changed.
+            {t("submitAgain")}
           </p>
         </ContentCard>
       ) : null}
 
-      <ContentCard icon="📝" title="Application form" subtitle="All fields marked required must be filled in">
+      <ContentCard icon="📝" title={t("formTitle")} subtitle={t("formSubtitle")}>
         <form action={applyDj}>
           <div className="card-grid sm-2">
             <div>
               <label htmlFor="realName" className="muted">
-                Real name
+                {t("realNameLabel")}
               </label>
               <input
                 id="realName"
@@ -61,13 +64,13 @@ export default async function RadioApplyPage() {
                 type="text"
                 required
                 maxLength={255}
-                placeholder="Your full name"
+                placeholder={t("realNamePlaceholder")}
                 style={{ width: "100%", marginTop: "0.3rem" }}
               />
             </div>
             <div>
               <label htmlFor="age" className="muted">
-                Age
+                {t("ageLabel")}
               </label>
               <input
                 id="age"
@@ -84,61 +87,61 @@ export default async function RadioApplyPage() {
 
           <div style={{ marginTop: "1rem" }}>
             <label htmlFor="availability" className="muted">
-              Availability
+              {t("availabilityLabel")}
             </label>
             <textarea
               id="availability"
               name="availability"
               required
               rows={3}
-              placeholder="Which days and times can you broadcast?"
+              placeholder={t("availabilityPlaceholder")}
               style={{ width: "100%", marginTop: "0.3rem", resize: "vertical" }}
             />
           </div>
 
           <div style={{ marginTop: "1rem" }}>
             <label htmlFor="musicStyle" className="muted">
-              Music style
+              {t("musicStyleLabel")}
             </label>
             <input
               id="musicStyle"
               name="musicStyle"
               type="text"
               maxLength={255}
-              placeholder="e.g. House, Pop, Hip-Hop"
+              placeholder={t("musicStylePlaceholder")}
               style={{ width: "100%", marginTop: "0.3rem" }}
             />
           </div>
 
           <div style={{ marginTop: "1rem" }}>
             <label htmlFor="experience" className="muted">
-              Experience <span className="muted">(optional)</span>
+              {t("experienceLabel")} <span className="muted">{t("optional")}</span>
             </label>
             <textarea
               id="experience"
               name="experience"
               rows={3}
-              placeholder="Any prior DJ or hosting experience?"
+              placeholder={t("experiencePlaceholder")}
               style={{ width: "100%", marginTop: "0.3rem", resize: "vertical" }}
             />
           </div>
 
           <div style={{ marginTop: "1rem" }}>
             <label htmlFor="motivation" className="muted">
-              Motivation
+              {t("motivationLabel")}
             </label>
             <textarea
               id="motivation"
               name="motivation"
               required
               rows={4}
-              placeholder="Why do you want to join the radio team?"
+              placeholder={t("motivationPlaceholder")}
               style={{ width: "100%", marginTop: "0.3rem", resize: "vertical" }}
             />
           </div>
 
           <button type="submit" className="btn btn-primary" style={{ marginTop: "1.25rem" }}>
-            Submit application
+            {t("submitButton")}
           </button>
         </form>
       </ContentCard>

src/app/radio/contests/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
@@ -9,6 +10,8 @@ function formatDate(d: Date | null | undefined): string {
 }
 
 export default async function RadioContestsPage() {
+  const t = await getTranslations("pages.radioContests");
+
   // RadioContests.id is a BigInt — stringify before use in keys/routes.
   const contests = await prisma.radioContests
     .findMany({
@@ -21,13 +24,13 @@ export default async function RadioContestsPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🎉"
-        title="Radio Contests"
-        subtitle="Tune in and take part in our latest on-air contests"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <ContentCard padded={contests.length === 0}>
         {contests.length === 0 ? (
-          <EmptyState icon="🎉">No contests yet.</EmptyState>
+          <EmptyState icon="🎉">{t("empty")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {contests.map((c) => {
@@ -40,10 +43,10 @@ export default async function RadioContestsPage() {
                   style={{ color: "inherit", textDecoration: "none", display: "grid", gap: "0.3rem" }}
                 >
                   <h3 style={{ margin: 0, fontSize: "1rem" }}>
-                    <span aria-hidden>🎉</span> Contest #{id}
+                    <span aria-hidden>🎉</span> {t("contestLabel", { id })}
                   </h3>
                   <p className="muted" style={{ margin: 0 }}>
-                    {formatDate(c.createdAt) || "Date unknown"}
+                    {formatDate(c.createdAt) || t("dateUnknown")}
                   </p>
                 </Link>
               );

src/app/radio/giveaways/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
@@ -9,6 +10,8 @@ function formatDate(d: Date | null | undefined): string {
 }
 
 export default async function RadioGiveawaysPage() {
+  const t = await getTranslations("pages.radioGiveaways");
+
   // RadioGiveaways.id is a BigInt — stringify before use in keys/routes.
   const giveaways = await prisma.radioGiveaways
     .findMany({
@@ -21,13 +24,13 @@ export default async function RadioGiveawaysPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🎁"
-        title="Radio Giveaways"
-        subtitle="Listen in for your chance to win in our radio giveaways"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <ContentCard padded={giveaways.length === 0}>
         {giveaways.length === 0 ? (
-          <EmptyState icon="🎁">No giveaways yet.</EmptyState>
+          <EmptyState icon="🎁">{t("empty")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {giveaways.map((g) => {
@@ -40,10 +43,10 @@ export default async function RadioGiveawaysPage() {
                   style={{ color: "inherit", textDecoration: "none", display: "grid", gap: "0.3rem" }}
                 >
                   <h3 style={{ margin: 0, fontSize: "1rem" }}>
-                    <span aria-hidden>🎁</span> Giveaway #{id}
+                    <span aria-hidden>🎁</span> {t("giveawayLabel", { id })}
                   </h3>
                   <p className="muted" style={{ margin: 0 }}>
-                    {formatDate(g.createdAt) || "Date unknown"}
+                    {formatDate(g.createdAt) || t("dateUnknown")}
                   </p>
                 </Link>
               );

src/app/radio/leaderboard/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
 import { avatarImageUrl } from "@/lib/format";
@@ -38,6 +39,8 @@ async function loadRows(): Promise<{ username: string; look: string; points: num
 }
 
 export default async function RadioLeaderboardPage() {
+  const t = await getTranslations("pages.radioLeaderboard");
+
   const [rows, imagerBase] = await Promise.all([
     loadRows(),
     siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage"),
@@ -47,21 +50,21 @@ export default async function RadioLeaderboardPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🏆"
-        title="Radio Listener Leaderboard"
-        subtitle="Top 50 listeners by points earned tuning in to the radio"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <ContentCard padded={rows.length === 0}>
         {rows.length === 0 ? (
-          <EmptyState icon="🏆">No listener points to show yet.</EmptyState>
+          <EmptyState icon="🏆">{t("empty")}</EmptyState>
         ) : (
           <table>
             <thead>
               <tr>
-                <th style={{ width: "3.5rem" }}>Rank</th>
-                <th style={{ width: "3.5rem" }}>Avatar</th>
-                <th>Listener</th>
-                <th style={{ textAlign: "right" }}>Points</th>
+                <th style={{ width: "3.5rem" }}>{t("colRank")}</th>
+                <th style={{ width: "3.5rem" }}>{t("colAvatar")}</th>
+                <th>{t("colListener")}</th>
+                <th style={{ textAlign: "right" }}>{t("colPoints")}</th>
               </tr>
             </thead>
             <tbody>

src/app/radio/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
@@ -6,15 +7,6 @@ import { siteSettings } from "@/lib/services/site-settings";
 // Radio config + today's schedule are read live from the DB / settings table.
 export const dynamic = "force-dynamic";
 
-// Sub-pages linked from the radio home hub.
-const RADIO_LINKS: { label: string; href: string; icon: string; text: string }[] = [
-  { label: "Schedule", href: "/radio/schedule", icon: "🗓️", text: "Our weekly line-up of DJs and shows." },
-  { label: "Shouts", href: "/radio/shouts", icon: "📣", text: "Shout-outs and requests from the community." },
-  { label: "Requests", href: "/radio/requests", icon: "🎵", text: "Ask the DJ to spin your favourite track." },
-  { label: "Apply as DJ", href: "/radio/apply", icon: "🎤", text: "Join the team and take to the airwaves." },
-  { label: "Leaderboard", href: "/radio/leaderboard", icon: "🏆", text: "Top listeners ranked by points earned." },
-];
-
 // Canonical weekday order so today's slots come out chronologically and we can
 // match the current day against whatever casing the `day` column stores.
 const WEEKDAYS = [
@@ -36,6 +28,17 @@ function formatTime(d: Date | null | undefined): string {
 }
 
 export default async function RadioPage() {
+  const t = await getTranslations("pages.radio");
+
+  // Sub-pages linked from the radio home hub.
+  const RADIO_LINKS: { label: string; href: string; icon: string; text: string }[] = [
+    { label: t("linkSchedule"), href: "/radio/schedule", icon: "🗓️", text: t("linkScheduleText") },
+    { label: t("linkShouts"), href: "/radio/shouts", icon: "📣", text: t("linkShoutsText") },
+    { label: t("linkRequests"), href: "/radio/requests", icon: "🎵", text: t("linkRequestsText") },
+    { label: t("linkApply"), href: "/radio/apply", icon: "🎤", text: t("linkApplyText") },
+    { label: t("linkLeaderboard"), href: "/radio/leaderboard", icon: "🏆", text: t("linkLeaderboardText") },
+  ];
+
   // ── Radio config from website_settings (graceful fallbacks) ──
   const [streamUrl, currentDj, currentSong] = await Promise.all([
     siteSettings.get("radio_stream_url", ""),
@@ -77,20 +80,20 @@ export default async function RadioPage() {
       {/* ── Header: live stream + now playing ─────────────────────── */}
       <ContentCard
         icon="📻"
-        title="Radio"
-        subtitle="Tune in to the hotel radio — live DJ sets, requests and shoutouts."
+        title={t("title")}
+        subtitle={t("subtitle")}
         action={<OnlineBadge online={isLive} />}
       >
         <div className="card-grid sm-2" style={{ alignItems: "stretch" }}>
           <div className="card" style={{ display: "grid", gap: "0.35rem", alignContent: "center" }}>
             <p className="muted" style={{ margin: 0, fontSize: "0.8rem", textTransform: "uppercase", letterSpacing: "0.05em" }}>
-              Now playing
+              {t("nowPlaying")}
             </p>
             <p style={{ margin: 0, fontSize: "1.1rem", fontWeight: 700 }}>
-              {currentSong ? currentSong : <span className="muted" style={{ fontWeight: 400 }}>Nothing playing right now.</span>}
+              {currentSong ? currentSong : <span className="muted" style={{ fontWeight: 400 }}>{t("nothingPlaying")}</span>}
             </p>
             <p className="muted" style={{ margin: 0 }}>
-              {currentDj ? `On air: ${currentDj}` : "No DJ on air."}
+              {currentDj ? t("onAir", { dj: currentDj }) : t("noDj")}
             </p>
           </div>
           <div className="card" style={{ display: "flex", alignItems: "center" }}>
@@ -101,11 +104,11 @@ export default async function RadioPage() {
                 style={{ width: "100%" }}
                 preload="none"
               >
-                Your browser does not support the audio element.
+                {t("audioUnsupported")}
               </audio>
             ) : (
               <p className="muted" style={{ margin: 0 }}>
-                The stream is currently offline.
+                {t("streamOffline")}
               </p>
             )}
           </div>
@@ -115,8 +118,8 @@ export default async function RadioPage() {
       {/* ── Sub-page links ──────────────────────────────────────── */}
       <ContentCard
         icon="🎚️"
-        title="Explore the radio"
-        subtitle="Schedule, shouts, requests and more"
+        title={t("exploreTitle")}
+        subtitle={t("exploreSubtitle")}
       >
         <div className="card-grid sm-2 lg-3">
           {RADIO_LINKS.map((l) => (
@@ -140,24 +143,24 @@ export default async function RadioPage() {
       {/* ── Today's schedule ────────────────────────────────────── */}
       <ContentCard
         icon="🗓️"
-        title={`Today's schedule${today ? ` · ${today}` : ""}`}
-        subtitle="What's on the airwaves today"
+        title={today ? t("todayTitleWithDay", { day: today }) : t("todayTitle")}
+        subtitle={t("todaySubtitle")}
         action={
           <Link className="btn btn-outline" href="/radio/schedule">
-            Full week →
+            {t("fullWeek")}
           </Link>
         }
         padded={todaysSlots.length === 0}
       >
         {todaysSlots.length === 0 ? (
-          <EmptyState icon="📻">No shows scheduled for today.</EmptyState>
+          <EmptyState icon="📻">{t("noShowsToday")}</EmptyState>
         ) : (
           <table>
             <thead>
               <tr>
-                <th>Time</th>
-                <th>Show</th>
-                <th>DJ</th>
+                <th>{t("colTime")}</th>
+                <th>{t("colShow")}</th>
+                <th>{t("colDj")}</th>
               </tr>
             </thead>
             <tbody>
@@ -169,13 +172,13 @@ export default async function RadioPage() {
                       {formatTime(s.startTime)} &ndash; {formatTime(s.endTime)}
                     </td>
                     <td>
-                      {s.showName || <span className="muted">Untitled show</span>}
+                      {s.showName || <span className="muted">{t("untitledShow")}</span>}
                     </td>
                     <td>
                       {djName ? (
                         <Link href={`/u/${djName}`}>{djName}</Link>
                       ) : (
-                        <span className="muted">{`User #${s.userId}`}</span>
+                        <span className="muted">{t("userNumber", { id: String(s.userId) })}</span>
                       )}
                     </td>
                   </tr>

src/app/radio/schedule/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
@@ -32,6 +33,8 @@ type Slot = {
 };
 
 export default async function RadioSchedulePage() {
+  const t = await getTranslations("pages.radioSchedule");
+
   const schedules = await prisma.radioSchedules
     .findMany({
       where: { isActive: true },
@@ -76,21 +79,21 @@ export default async function RadioSchedulePage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🗓️"
-        title="Radio Schedule"
-        subtitle="Our weekly line-up of DJs and shows"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <ContentCard padded={!hasAny}>
         {!hasAny ? (
-          <EmptyState icon="🗓️">No shows scheduled yet.</EmptyState>
+          <EmptyState icon="🗓️">{t("empty")}</EmptyState>
         ) : (
           <table>
             <thead>
               <tr>
-                <th>Day</th>
-                <th>Time</th>
-                <th>DJ</th>
-                <th>Show</th>
+                <th>{t("colDay")}</th>
+                <th>{t("colTime")}</th>
+                <th>{t("colDj")}</th>
+                <th>{t("colShow")}</th>
               </tr>
             </thead>
             <tbody>
@@ -103,7 +106,7 @@ export default async function RadioSchedulePage() {
                         <strong>{day}</strong>
                       </td>
                       <td colSpan={3} className="muted">
-                        No shows
+                        {t("noShows")}
                       </td>
                     </tr>
                   );

src/app/radio/shouts/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
@@ -12,6 +13,8 @@ function formatDate(d: Date | null | undefined): string {
 }
 
 export default async function RadioShoutsPage() {
+  const t = await getTranslations("pages.radioShouts");
+
   const [shouts, imagerBase, session] = await Promise.all([
     prisma.radioShouts
       .findMany({
@@ -44,17 +47,17 @@ export default async function RadioShoutsPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="📣"
-        title="Radio Shouts"
-        subtitle="Shout-outs and requests from the community"
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       {isLoggedIn ? (
-        <ContentCard icon="✍️" title="Post a shout" subtitle="Send a message to the DJ on air">
+        <ContentCard icon="✍️" title={t("postTitle")} subtitle={t("postSubtitle")}>
           {/* The author is taken from the session inside the action, never from
               this form — no user id is submitted. */}
           <form action={postShout}>
             <label htmlFor="shout-message" className="muted">
-              Your message
+              {t("messageLabel")}
             </label>
             <textarea
               id="shout-message"
@@ -62,28 +65,28 @@ export default async function RadioShoutsPage() {
               required
               maxLength={255}
               rows={3}
-              placeholder="Send a shout to the DJ…"
+              placeholder={t("messagePlaceholder")}
               style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
             />
             <button type="submit" className="btn btn-primary">
-              Shout
+              {t("shoutButton")}
             </button>
           </form>
         </ContentCard>
       ) : (
         <ContentCard padded>
-          <EmptyState icon="🔒">Log in to post a shout.</EmptyState>
+          <EmptyState icon="🔒">{t("loginToPost")}</EmptyState>
         </ContentCard>
       )}
 
       <ContentCard
         icon="💬"
-        title="Latest shouts"
-        subtitle="The most recent messages from listeners"
+        title={t("latestTitle")}
+        subtitle={t("latestSubtitle")}
         padded={shouts.length === 0}
       >
         {shouts.length === 0 ? (
-          <EmptyState icon="📣">No shouts yet. Be the first!</EmptyState>
+          <EmptyState icon="📣">{t("empty")}</EmptyState>
         ) : (
           <div className="card-grid">
             {shouts.map((s) => {

src/app/rankings/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState, OnlineBadge, RankBadge } from "@/components/public/ui";
 import { avatarImageUrl } from "@/lib/format";
@@ -17,6 +18,7 @@ type TopUser = {
 };
 
 export default async function RankingsPage() {
+  const t = await getTranslations("pages.rankings");
   let users: TopUser[] = [];
   try {
     users = await prisma.user.findMany({
@@ -35,11 +37,11 @@ export default async function RankingsPage() {
 
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
-      <ContentCard icon="🏆" title="Rankings" subtitle="The top 12 players ranked by credits" />
+      <ContentCard icon="🏆" title={t("title")} subtitle={t("subtitle")} />
 
       <ContentCard padded={users.length === 0}>
         {users.length === 0 ? (
-          <EmptyState icon="🏆">No players to rank yet.</EmptyState>
+          <EmptyState icon="🏆">{t("emptyState")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {users.map((u, i) => {

src/app/rares/[category]/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ContentCard, EmptyState } from "@/components/public/ui";
@@ -16,17 +17,19 @@ type RareRow = {
   itemId: number | null;
 };
 
-function prettyCurrency(type: string): string {
+type CurrencyTranslator = (key: string) => string;
+
+function prettyCurrency(type: string, t: CurrencyTranslator): string {
   switch (type) {
     case "0":
     case "duckets":
-      return "Duckets";
+      return t("duckets");
     case "5":
     case "diamonds":
-      return "Diamonds";
+      return t("diamonds");
     case "-1":
     case "credits":
-      return "Credits";
+      return t("credits");
     default:
       return type.charAt(0).toUpperCase() + type.slice(1);
   }
@@ -37,6 +40,7 @@ export default async function RareCategoryPage({
 }: {
   params: Promise<{ category: string }>;
 }) {
+  const t = await getTranslations("pages.rareCategory");
   const { category } = await params;
 
   let categoryId: bigint;
@@ -98,25 +102,25 @@ export default async function RareCategoryPage({
             {cat.name}
           </span>
         }
-        subtitle={`${rares.length} ${rares.length === 1 ? "rare" : "rares"} in this category`}
+        subtitle={t("rareCount", { count: rares.length })}
         action={
           <Link className="btn btn-outline" href="/rares">
-            ← All rares
+            {t("allRares")}
           </Link>
         }
         padded={rares.length === 0}
       >
         {rares.length === 0 ? (
-          <EmptyState icon="💎">No rares listed in this category yet.</EmptyState>
+          <EmptyState icon="💎">{t("empty")}</EmptyState>
         ) : (
           <div style={{ padding: "0.25rem 1rem 0.75rem", overflowX: "auto" }}>
             <table>
               <thead>
                 <tr>
                   <th style={{ width: 56 }}></th>
-                  <th>Rare</th>
-                  <th>Credits</th>
-                  <th>Currency</th>
+                  <th>{t("colRare")}</th>
+                  <th>{t("colCredits")}</th>
+                  <th>{t("colCurrency")}</th>
                 </tr>
               </thead>
               <tbody>
@@ -147,14 +151,14 @@ export default async function RareCategoryPage({
                       </td>
                       <td>
                         {r.creditValue && r.creditValue !== "" ? (
-                          `${r.creditValue} credits`
+                          t("creditsValue", { value: r.creditValue })
                         ) : (
                           <span className="muted">—</span>
                         )}
                       </td>
                       <td>
                         {r.currencyValue && r.currencyValue !== "" ? (
-                          `${r.currencyValue} ${prettyCurrency(r.currencyType)}`
+                          `${r.currencyValue} ${prettyCurrency(r.currencyType, t)}`
                         ) : (
                           <span className="muted">—</span>
                         )}

src/app/rares/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
@@ -15,6 +16,7 @@ type CategoryRow = {
 };
 
 export default async function RareValuesPage() {
+  const t = await getTranslations("pages.rares");
   let categories: CategoryRow[] = [];
   try {
     categories = await prisma.websiteRareValueCategories.findMany({
@@ -45,13 +47,13 @@ export default async function RareValuesPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="💎"
-        title="Rare values"
-        subtitle="Get an overview of all of the rares on the hotel, grouped by category."
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       {categories.length === 0 ? (
         <ContentCard padded={false}>
-          <EmptyState icon="💎">We currently have no rares listed here.</EmptyState>
+          <EmptyState icon="💎">{t("empty")}</EmptyState>
         </ContentCard>
       ) : (
         <div className="card-grid sm-2 lg-3">
@@ -84,12 +86,12 @@ export default async function RareValuesPage() {
                   <div className="content-card-head-text">
                     <p className="content-card-title">{c.name}</p>
                     <p className="content-card-subtitle">
-                      {count} {count === 1 ? "rare" : "rares"}
+                      {t("rareCount", { count })}
                     </p>
                   </div>
                 </div>
                 <div className="content-card-body">
-                  <span className="btn btn-outline">View rares →</span>
+                  <span className="btn btn-outline">{t("viewRares")}</span>
                 </div>
               </Link>
             );

src/app/redeem/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import RedeemForm from "./RedeemForm";
 import { ContentCard, StatBlock } from "@/components/public/ui";
@@ -10,6 +11,7 @@ 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).
@@ -29,24 +31,28 @@ export default async function RedeemPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🎟️"
-        title="Redeem a voucher"
-        subtitle="Got a voucher code? Enter it below to add the reward to your account."
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       <div className="card-grid sm-2">
-        <ContentCard icon="🔑" title="Enter your code">
+        <ContentCard icon="🔑" title={t("enterCode")}>
           <RedeemForm />
           <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
-            Each voucher can only be redeemed once per account.
+            {t("oncePerAccount")}
           </p>
         </ContentCard>
 
-        <ContentCard icon="💰" title="Your balance" subtitle={`Signed in as ${user.username}`}>
+        <ContentCard
+          icon="💰"
+          title={t("balanceTitle")}
+          subtitle={t("signedInAs", { username: user.username })}
+        >
           <div className="stat-grid">
-            <StatBlock value={user.credits.toLocaleString()} label="Credits" icon="🪙" />
+            <StatBlock value={user.credits.toLocaleString()} label={t("credits")} icon="🪙" />
           </div>
           <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
-            Redeemed rewards are credited instantly and appear in-game the next time you log in.
+            {t("instantCredit")}
           </p>
         </ContentCard>
       </div>

src/app/register/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { register } from "@/actions/register";
 import { ContentCard } from "@/components/public/ui";
 
@@ -7,27 +8,28 @@ export default async function RegisterPage({
 }: {
   searchParams: Promise<{ error?: string }>;
 }) {
+  const t = await getTranslations("pages.register");
   const { error } = await searchParams;
 
   return (
     <main style={{ maxWidth: 420, margin: "2rem auto" }}>
       <ContentCard
         icon="🎉"
-        title="Create account"
-        subtitle="Join the hotel — it only takes a moment."
+        title={t("title")}
+        subtitle={t("subtitle")}
       >
         <form action={register} style={{ display: "grid", gap: "0.7rem" }}>
-          <input name="username" placeholder="Username" autoComplete="username" required />
-          <input name="mail" type="email" placeholder="Email" autoComplete="email" required />
+          <input name="username" placeholder={t("usernamePlaceholder")} autoComplete="username" required />
+          <input name="mail" type="email" placeholder={t("emailPlaceholder")} autoComplete="email" required />
           <input
             name="password"
             type="password"
-            placeholder="Password (min 6 chars)"
+            placeholder={t("passwordPlaceholder")}
             autoComplete="new-password"
             required
           />
           <button type="submit" className="btn btn-primary">
-            Register
+            {t("register")}
           </button>
         </form>
         {error ? (
@@ -36,7 +38,7 @@ export default async function RegisterPage({
           </p>
         ) : null}
         <p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
-          Already have an account? <Link href="/login">Sign in</Link>
+          {t("alreadyHaveAccount")} <Link href="/login">{t("signIn")}</Link>
         </p>
       </ContentCard>
     </main>

src/app/reset/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { resetPassword } from "@/actions/password-reset";
 import { ContentCard } from "@/components/public/ui";
 
@@ -7,14 +8,15 @@ export default async function ResetPage({
 }: {
   searchParams: Promise<{ email?: string; token?: string; error?: string }>;
 }) {
+  const t = await getTranslations("pages.reset");
   const { email = "", token = "", error } = await searchParams;
 
   return (
     <main style={{ maxWidth: 420, margin: "2rem auto" }}>
       <ContentCard
         icon="🔐"
-        title="Set a new password"
-        subtitle="Choose a strong password you don't use elsewhere."
+        title={t("title")}
+        subtitle={t("subtitle")}
       >
         <form action={resetPassword} style={{ display: "grid", gap: "0.7rem" }}>
           <input type="hidden" name="email" value={email} />
@@ -22,12 +24,12 @@ export default async function ResetPage({
           <input
             name="password"
             type="password"
-            placeholder="New password (min 6 chars)"
+            placeholder={t("passwordPlaceholder")}
             autoComplete="new-password"
             required
           />
           <button type="submit" className="btn btn-primary">
-            Reset password
+            {t("resetPassword")}
           </button>
         </form>
         {error ? (
@@ -36,7 +38,7 @@ export default async function ResetPage({
           </p>
         ) : null}
         <p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
-          <Link href="/login">Back to login</Link>
+          <Link href="/login">{t("backToLogin")}</Link>
         </p>
       </ContentCard>
     </main>

src/app/settings/2fa/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { beginTwoFactor, confirmTwoFactor, disableTwoFactor } from "@/actions/twofactor";
 import { ContentCard } from "@/components/public/ui";
@@ -16,6 +17,7 @@ export default async function TwoFactorPage({
 }: {
   searchParams: Promise<{ error?: string; enabled?: string; disabled?: string }>;
 }) {
+  const t = await getTranslations("pages.settings2fa");
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
   const sp = await searchParams;
@@ -50,52 +52,52 @@ export default async function TwoFactorPage({
   return (
     <main style={{ display: "grid", gap: "1.5rem", maxWidth: 560, margin: "0 auto" }}>
       <p className="muted" style={{ margin: 0 }}>
-        <Link href="/settings">← Settings</Link>
+        <Link href="/settings">{t("backToSettings")}</Link>
       </p>
 
       <ContentCard
         icon="🔒"
-        title="Two-factor authentication"
-        subtitle="Add a second layer of security with an authenticator app"
+        title={t("title")}
+        subtitle={t("subtitle")}
       >
         {sp.enabled ? (
-          <p style={{ color: "var(--color-accent)", marginTop: 0 }}>2FA is now enabled. 🔒</p>
+          <p style={{ color: "var(--color-accent)", marginTop: 0 }}>{t("nowEnabled")}</p>
         ) : null}
         {sp.disabled ? (
           <p className="muted" style={{ marginTop: 0 }}>
-            2FA has been disabled.
+            {t("disabledNotice")}
           </p>
         ) : null}
         {sp.error === "badcode" ? (
           <p style={{ color: "var(--color-danger)", marginTop: 0 }}>
-            That code wasn't valid — try again.
+            {t("badCode")}
           </p>
         ) : null}
 
         {!hasAppKey ? (
           <p style={{ margin: 0 }}>
-            2FA is unavailable until <code>APP_KEY</code> is configured (the same Laravel
-            <code> APP_KEY</code> as your AtomCMS install, so existing secrets stay readable).
+            {t("noAppKeyPrefix")} <code>APP_KEY</code> {t("noAppKeyMiddle")}
+            <code> APP_KEY</code> {t("noAppKeySuffix")}
           </p>
         ) : enabled ? (
           <>
             <p style={{ marginTop: 0 }}>
-              <strong>2FA is enabled</strong> on your account.
+              <strong>{t("isEnabled")}</strong> {t("onYourAccount")}
             </p>
             <form action={disableTwoFactor}>
               <button type="submit" className="btn btn-danger">
-                Disable 2FA
+                {t("disable")}
               </button>
             </form>
           </>
         ) : pending ? (
           <>
-            <h3 style={{ marginTop: 0 }}>Scan or enter this key</h3>
+            <h3 style={{ marginTop: 0 }}>{t("scanOrEnter")}</h3>
             <p className="muted" style={{ marginTop: 0 }}>
-              Add this to Google Authenticator / Authy, then enter the 6-digit code to confirm.
+              {t("scanInstructions")}
             </p>
             <p>
-              Manual key: <code style={{ userSelect: "all" }}>{secret}</code>
+              {t("manualKey")} <code style={{ userSelect: "all" }}>{secret}</code>
             </p>
             <p className="muted" style={{ wordBreak: "break-all", fontSize: "0.8rem" }}>
               {uri}
@@ -104,20 +106,20 @@ export default async function TwoFactorPage({
               action={confirmTwoFactor}
               style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}
             >
-              <input name="code" placeholder="6-digit code" inputMode="numeric" required />
+              <input name="code" placeholder={t("codePlaceholder")} inputMode="numeric" required />
               <button type="submit" className="btn btn-primary">
-                Confirm
+                {t("confirm")}
               </button>
             </form>
           </>
         ) : (
           <>
             <p style={{ marginTop: 0 }}>
-              Add a second layer of security with an authenticator app.
+              {t("enableIntro")}
             </p>
             <form action={beginTwoFactor}>
               <button type="submit" className="btn btn-primary">
-                Enable 2FA
+                {t("enable")}
               </button>
             </form>
           </>

src/app/settings/connections/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { ContentCard } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
@@ -27,6 +28,7 @@ const PROVIDERS = [
 ] as const;
 
 export default async function ConnectionsPage() {
+  const t = await getTranslations("pages.connections");
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
@@ -53,23 +55,22 @@ export default async function ConnectionsPage() {
   return (
     <main style={{ display: "grid", gap: "1.5rem", maxWidth: 620, margin: "0 auto" }}>
       <p className="muted" style={{ margin: 0 }}>
-        <Link href="/settings">← Settings</Link>
+        <Link href="/settings">{t("backToSettings")}</Link>
       </p>
 
       <ContentCard
         icon="🔗"
-        title="Connected accounts"
-        subtitle="Link a social account so you can sign in with one click"
+        title={t("title")}
+        subtitle={t("subtitle")}
       >
         <p className="muted" style={{ marginTop: 0 }}>
-          We match it to your hotel account by e-mail, so use the address on file:{" "}
+          {t("matchByEmail")}{" "}
           <strong>{session.user.name}</strong>.
         </p>
 
         {lookupFailed ? (
           <p className="muted" style={{ marginBottom: 0 }}>
-            We couldn't read your linked accounts right now. You can still connect below — your
-            status will show once it's available.
+            {t("lookupFailed")}
           </p>
         ) : null}
       </ContentCard>
@@ -84,10 +85,10 @@ export default async function ConnectionsPage() {
               title={p.label}
               subtitle={
                 !p.available
-                  ? "Not available on this hotel."
+                  ? t("statusUnavailable")
                   : isLinked
-                    ? "Connected — sign in with this account."
-                    : "Not connected."
+                    ? t("statusConnected")
+                    : t("statusNotConnected")
               }
             >
               {isLinked ? (
@@ -96,7 +97,7 @@ export default async function ConnectionsPage() {
                   style={{ cursor: "default", pointerEvents: "none" }}
                   aria-disabled="true"
                 >
-                  Connected
+                  {t("connected")}
                 </span>
               ) : p.available ? (
                 // Plain link into NextAuth's built-in sign-in handler. Re-using
@@ -108,7 +109,7 @@ export default async function ConnectionsPage() {
                     callbackUrl,
                   )}`}
                 >
-                  Connect {p.label}
+                  {t("connectProvider", { provider: p.label })}
                 </a>
               ) : (
                 <span
@@ -116,7 +117,7 @@ export default async function ConnectionsPage() {
                   style={{ cursor: "not-allowed", opacity: 0.55, pointerEvents: "none" }}
                   aria-disabled="true"
                 >
-                  Unavailable
+                  {t("unavailable")}
                 </span>
               )}
             </ContentCard>
@@ -125,8 +126,7 @@ export default async function ConnectionsPage() {
       </div>
 
       <p className="muted" style={{ margin: 0 }}>
-        Connecting takes you to the provider to authorise, then back here. If your social account's
-        e-mail doesn't match a hotel account, you'll be returned to the login screen with a note.
+        {t("footerNote")}
       </p>
     </main>
   );

src/app/settings/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { updateMotto } from "@/actions/user-settings";
 import { ContentCard } from "@/components/public/ui";
@@ -10,6 +11,7 @@ import { siteSettings } from "@/lib/services/site-settings";
 export const dynamic = "force-dynamic";
 
 export default async function SettingsPage() {
+  const t = await getTranslations("pages.settings");
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
@@ -46,11 +48,11 @@ export default async function SettingsPage() {
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="⚙️"
-        title="Account settings"
-        subtitle="Manage your profile, security and connected accounts"
+        title={t("accountSettings")}
+        subtitle={t("accountSettingsSubtitle")}
       />
 
-      <ContentCard icon="🙂" title={user.username} subtitle="Your public profile">
+      <ContentCard icon="🙂" title={user.username} subtitle={t("publicProfile")}>
         <div style={{ display: "flex", gap: "1.5rem", alignItems: "center", flexWrap: "wrap" }}>
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
@@ -62,16 +64,16 @@ export default async function SettingsPage() {
           />
           <div style={{ minWidth: 0 }}>
             <p style={{ margin: "0 0 0.5rem", fontSize: "1.05rem" }}>
-              {user.motto || <span className="muted">No motto</span>}
+              {user.motto || <span className="muted">{t("noMotto")}</span>}
             </p>
             <p className="muted" style={{ margin: 0 }}>
-              {user.mail || "No e-mail on file"}
+              {user.mail || t("noEmail")}
             </p>
           </div>
         </div>
       </ContentCard>
 
-      <ContentCard icon="✏️" title="Change motto" subtitle="Updates instantly in-game if you are online">
+      <ContentCard icon="✏️" title={t("changeMotto")} subtitle={t("changeMottoSubtitle")}>
         <form
           action={updateMotto}
           style={{ display: "flex", flexDirection: "column", gap: "0.75rem", maxWidth: 520 }}
@@ -80,33 +82,33 @@ export default async function SettingsPage() {
             name="motto"
             defaultValue={user.motto}
             maxLength={127}
-            placeholder="Your motto"
+            placeholder={t("mottoPlaceholder")}
             aria-label="Motto"
           />
           <div>
             <button type="submit" className="btn btn-primary">
-              Save motto
+              {t("saveMotto")}
             </button>
           </div>
         </form>
       </ContentCard>
 
       <div className="card-grid sm-2">
-        <ContentCard icon="🔒" title="Security" subtitle="Two-factor authentication">
+        <ContentCard icon="🔒" title={t("securityTitle")} subtitle={t("securitySubtitle")}>
           <p className="muted" style={{ marginTop: 0 }}>
-            Add a second layer of protection to your account.
+            {t("securityDescription")}
           </p>
           <Link href="/settings/2fa" className="btn btn-outline">
-            Two-factor authentication
+            {t("twoFactorLink")}
           </Link>
         </ContentCard>
 
-        <ContentCard icon="🔗" title="Connected accounts" subtitle="Sign in with one click">
+        <ContentCard icon="🔗" title={t("connectionsTitle")} subtitle={t("connectionsSubtitle")}>
           <p className="muted" style={{ marginTop: 0 }}>
-            Link Discord or Google to your hotel account.
+            {t("connectionsDescription")}
           </p>
           <Link href="/settings/connections" className="btn btn-outline">
-            Manage connections
+            {t("manageConnections")}
           </Link>
         </ContentCard>
       </div>

src/app/shop/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
@@ -53,6 +54,7 @@ export default async function ShopPage({
 }: {
   searchParams: Promise<{ category?: string }>;
 }) {
+  const t = await getTranslations("pages.shop");
   const sp = await searchParams;
   const rawCategory = (sp.category ?? "").trim();
   const categoryId = /^\d+$/.test(rawCategory) ? rawCategory : "";
@@ -110,11 +112,11 @@ export default async function ShopPage({
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="🛒"
-        title="Shop"
+        title={t("title")}
         subtitle={
           activeCategory
-            ? `Browsing the ${activeCategory.name} packages.`
-            : "Top up your account and grab exclusive packages, currency and badges."
+            ? t("browsingCategory", { category: activeCategory.name })
+            : t("subtitle")
         }
       >
         {categories.length > 0 ? (
@@ -126,7 +128,7 @@ export default async function ShopPage({
             }}
           >
             <Link href="/shop" className={`btn ${categoryId ? "btn-outline" : "btn-primary"}`}>
-              All
+              {t("all")}
             </Link>
             {categories.map((c) => (
               <Link
@@ -143,16 +145,16 @@ export default async function ShopPage({
 
       <ContentCard
         icon="📦"
-        title={activeCategory ? activeCategory.name : "All packages"}
+        title={activeCategory ? activeCategory.name : t("allPackages")}
         subtitle={
           articles.length > 0
-            ? `${articles.length} ${articles.length === 1 ? "package" : "packages"} available`
+            ? t("packagesAvailable", { count: articles.length })
             : undefined
         }
         padded={articles.length === 0}
       >
         {articles.length === 0 ? (
-          <EmptyState icon="🛒">No packages available right now.</EmptyState>
+          <EmptyState icon="🛒">{t("empty")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {articles.map((a) => (
@@ -237,7 +239,7 @@ export default async function ShopPage({
                 >
                   <span style={{ fontWeight: 800 }}>{priceLabel(a.costs)}</span>
                   <span className="btn btn-primary" aria-disabled="true">
-                    Buy
+                    {t("buy")}
                   </span>
                 </div>
               </article>

src/app/shop/topup/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import TopUpForm from "./TopUpForm";
 import { ContentCard, StatBlock } from "@/components/public/ui";
@@ -15,6 +16,7 @@ export default async function TopUpPage({
   const session = await auth();
   if (!session?.user?.id) redirect("/login");
 
+  const t = await getTranslations("pages.topup");
   const sp = await searchParams;
   const id = Number(session.user.id);
 
@@ -37,37 +39,48 @@ export default async function TopUpPage({
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
         icon="💳"
-        title="Top up with PayPal"
-        subtitle="Pay securely with PayPal and your credits are added the moment the payment clears."
+        title={t("title")}
+        subtitle={t("subtitle")}
       />
 
       {sp.status === "cancel" ? (
         <div className="card" style={{ borderColor: "var(--color-danger)" }}>
-          <p style={{ margin: 0 }}>Checkout was cancelled — no payment was taken.</p>
+          <p style={{ margin: 0 }}>{t("cancelled")}</p>
         </div>
       ) : null}
 
       <div className="card-grid sm-2">
-        <ContentCard icon="🪙" title="Choose an amount">
+        <ContentCard icon="🪙" title={t("chooseAmount")}>
           {configured ? (
             <TopUpForm currency={PAYPAL_CURRENCY} creditsPerUnit={rate} />
           ) : (
             <p className="muted" style={{ margin: 0 }}>
-              PayPal isn&apos;t configured yet. An administrator needs to set{" "}
-              <code>PAYPAL_CLIENT_ID</code> and <code>PAYPAL_SECRET</code> (and optionally{" "}
-              <code>PAYPAL_API</code> for sandbox vs. live).
+              {t("notConfiguredPre")} <code>PAYPAL_CLIENT_ID</code>{" "}
+              {t("notConfiguredAnd")} <code>PAYPAL_SECRET</code>{" "}
+              {t("notConfiguredOptional")} <code>PAYPAL_API</code>{" "}
+              {t("notConfiguredPost")}
             </p>
           )}
         </ContentCard>
 
-        <ContentCard icon="💰" title="Your balance" subtitle={`Signed in as ${user.username}`}>
+        <ContentCard
+          icon="💰"
+          title={t("balanceTitle")}
+          subtitle={t("signedInAs", { username: user.username })}
+        >
           <div className="stat-grid">
-            <StatBlock value={user.credits.toLocaleString()} label="Credits" icon="🪙" />
-            <StatBlock value={rate.toLocaleString()} label={`Credits per 1.00 ${PAYPAL_CURRENCY}`} />
+            <StatBlock value={user.credits.toLocaleString()} label={t("credits")} icon="🪙" />
+            <StatBlock
+              value={rate.toLocaleString()}
+              label={t("creditsPerUnit", { currency: PAYPAL_CURRENCY })}
+            />
           </div>
           <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
-            You receive <strong>{rate.toLocaleString()}</strong> credits per 1.00 {PAYPAL_CURRENCY}.
-            Credits appear in-game the next time you log in.
+            {t.rich("rateLine", {
+              amount: rate.toLocaleString(),
+              currency: PAYPAL_CURRENCY,
+              strong: (chunks) => <strong>{chunks}</strong>,
+            })}
           </p>
         </ContentCard>
       </div>

src/app/staff/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
@@ -23,6 +24,7 @@ type Team = {
 };
 
 export default async function StaffPage() {
+  const t = await getTranslations("pages.staff");
   const minStaffRank = Number(await siteSettings.get("min_staff_rank", "7")) || 7;
 
   let staff: StaffMember[] = [];
@@ -57,10 +59,10 @@ export default async function StaffPage() {
 
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
-      <ContentCard icon="🛡️" title="Staff" subtitle="The team behind the hotel" />
+      <ContentCard icon="🛡️" title={t("title")} subtitle={t("subtitle")} />
 
       {teams.length > 0 ? (
-        <ContentCard icon="⭐" title="Ranks" subtitle="What each part of the team takes care of">
+        <ContentCard icon="⭐" title={t("ranksTitle")} subtitle={t("ranksSubtitle")}>
           <div className="card-grid sm-2 lg-3">
             {teams.map((t) => (
               <div key={t.id} className="card">
@@ -78,23 +80,23 @@ export default async function StaffPage() {
 
       <ContentCard
         icon="👥"
-        title="Team members"
+        title={t("membersTitle")}
         subtitle={
           staff.length === 0
-            ? "Nobody to show right now"
-            : `${staff.length} member${staff.length === 1 ? "" : "s"} keeping things running`
+            ? t("membersEmptySubtitle")
+            : t("membersSubtitle", { count: staff.length })
         }
         padded={staff.length === 0}
       >
         {staff.length === 0 ? (
-          <EmptyState icon="🛡️">No staff members to show.</EmptyState>
+          <EmptyState icon="🛡️">{t("emptyState")}</EmptyState>
         ) : (
           <table>
             <thead>
               <tr>
-                <th>Username</th>
-                <th>Rank</th>
-                <th>Motto</th>
+                <th>{t("colUsername")}</th>
+                <th>{t("colRank")}</th>
+                <th>{t("colMotto")}</th>
               </tr>
             </thead>
             <tbody>

src/app/u/[username]/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";
 import { ContentCard, EmptyState, OnlineBadge, StatBlock } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
@@ -39,6 +40,7 @@ export default async function ProfilePage({
 }: {
   params: Promise<{ username: string }>;
 }) {
+  const t = await getTranslations("pages.profile");
   const { username } = await params;
 
   const [user, imagerBase, session] = await Promise.all([
@@ -115,22 +117,22 @@ export default async function ProfilePage({
           <div style={{ minWidth: 0, flex: 1 }}>
             <h1 style={{ margin: "0 0 0.25rem" }}>{user.username}</h1>
             <p style={{ margin: "0 0 0.6rem" }}>
-              {user.motto || <span className="muted">No motto</span>}
+              {user.motto || <span className="muted">{t("noMotto")}</span>}
             </p>
             <OnlineBadge online={user.online === "1"} />
           </div>
         </div>
         <div className="stat-grid" style={{ padding: "0 1.1rem 1.1rem" }}>
-          <StatBlock icon="🏅" value={user.rank} label="Rank" />
-          <StatBlock icon="💰" value={user.credits.toLocaleString()} label="Credits" />
-          <StatBlock icon="📅" value={registered} label="Registered" />
+          <StatBlock icon="🏅" value={user.rank} label={t("statRank")} />
+          <StatBlock icon="💰" value={user.credits.toLocaleString()} label={t("statCredits")} />
+          <StatBlock icon="📅" value={registered} label={t("statRegistered")} />
         </div>
       </ContentCard>
 
       {/* ── Badges ───────────────────────────────────────────── */}
-      <ContentCard icon="🏅" title="Badges" padded={badges.length === 0}>
+      <ContentCard icon="🏅" title={t("badgesTitle")} padded={badges.length === 0}>
         {badges.length === 0 ? (
-          <EmptyState icon="🏅">No badges yet.</EmptyState>
+          <EmptyState icon="🏅">{t("badgesEmpty")}</EmptyState>
         ) : (
           <div
             style={{
@@ -157,9 +159,9 @@ export default async function ProfilePage({
       </ContentCard>
 
       {/* ── Photos ───────────────────────────────────────────── */}
-      <ContentCard icon="📸" title="Photos" padded={photos.length === 0}>
+      <ContentCard icon="📸" title={t("photosTitle")} padded={photos.length === 0}>
         {photos.length === 0 ? (
-          <EmptyState icon="📸">No photos yet.</EmptyState>
+          <EmptyState icon="📸">{t("photosEmpty")}</EmptyState>
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {photos.map((p) => (
@@ -180,7 +182,7 @@ export default async function ProfilePage({
       </ContentCard>
 
       {/* ── Guestbook ────────────────────────────────────────── */}
-      <ContentCard icon="📝" title="Guestbook" subtitle={`Messages on ${user.username}'s wall`}>
+      <ContentCard icon="📝" title={t("guestbookTitle")} subtitle={t("guestbookSubtitle", { username: user.username })}>
         {isLoggedIn ? (
           <form action={postGuestbook} className="card" style={{ marginBottom: "1rem" }}>
             {/* Profile owner id drives the write target; the author is taken from
@@ -188,7 +190,7 @@ export default async function ProfilePage({
             <input type="hidden" name="profileId" value={String(user.id)} />
             <input type="hidden" name="username" value={user.username} />
             <label htmlFor="gb-message" className="muted">
-              Leave a message
+              {t("leaveMessage")}
             </label>
             <textarea
               id="gb-message"
@@ -196,19 +198,19 @@ export default async function ProfilePage({
               required
               maxLength={255}
               rows={3}
-              placeholder={`Write something on ${user.username}'s guestbook…`}
+              placeholder={t("guestbookPlaceholder", { username: user.username })}
               style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
             />
             <button type="submit" className="btn btn-primary">
-              Post
+              {t("post")}
             </button>
           </form>
         ) : (
-          <p className="muted">Log in to leave a guestbook message.</p>
+          <p className="muted">{t("loginToPost")}</p>
         )}
 
         {guestbook.length === 0 ? (
-          <EmptyState icon="📝">No guestbook entries yet.</EmptyState>
+          <EmptyState icon="📝">{t("guestbookEmpty")}</EmptyState>
         ) : (
           <div className="grid" style={{ gap: "0.75rem" }}>
             {guestbook.map((g) => {
@@ -234,7 +236,7 @@ export default async function ProfilePage({
                   ) : null}
                   <div style={{ flex: 1 }}>
                     <p style={{ margin: "0 0 0.25rem" }}>
-                      <strong>{author?.username ?? `User #${g.userId}`}</strong>{" "}
+                      <strong>{author?.username ?? t("unknownUser", { id: g.userId })}</strong>{" "}
                       <span className="muted">{formatDate(g.createdAt)}</span>
                     </p>
                     <p style={{ margin: 0 }}>{g.message}</p>

src/app/verify/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { isValidVerificationToken } from "@/actions/email-verify";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
@@ -13,6 +14,7 @@ export default async function VerifyPage({
 }: {
   searchParams: Promise<{ token?: string; email?: string }>;
 }) {
+  const t = await getTranslations("pages.verify");
   // Next 16: searchParams is a Promise.
   const { token = "", email = "" } = await searchParams;
   const normalisedEmail = email.trim().toLowerCase();
@@ -53,38 +55,37 @@ export default async function VerifyPage({
   return (
     <main style={{ maxWidth: 480, margin: "2rem auto" }}>
       {status === "verified" ? (
-        <ContentCard icon="✅" title="You're all set" subtitle="Email verified">
+        <ContentCard icon="✅" title={t("verifiedTitle")} subtitle={t("verifiedSubtitle")}>
           <p className="muted" style={{ marginTop: 0 }}>
-            Your email address has been verified. You can now log in and play.
+            {t("verifiedBody")}
           </p>
           <Link href="/login" className="btn btn-primary">
-            Go to login
+            {t("goToLogin")}
           </Link>
         </ContentCard>
       ) : status === "already" ? (
-        <ContentCard icon="✅" title="Already verified" subtitle="Nothing left to do">
+        <ContentCard icon="✅" title={t("alreadyTitle")} subtitle={t("alreadySubtitle")}>
           <p className="muted" style={{ marginTop: 0 }}>
-            This email address has already been confirmed.
+            {t("alreadyBody")}
           </p>
           <Link href="/login" className="btn btn-primary">
-            Go to login
+            {t("goToLogin")}
           </Link>
         </ContentCard>
       ) : status === "unavailable" ? (
-        <ContentCard icon="⏳" title="Try again shortly" subtitle="Server unreachable">
+        <ContentCard icon="⏳" title={t("unavailableTitle")} subtitle={t("unavailableSubtitle")}>
           <p className="muted" style={{ margin: 0 }}>
-            We couldn't reach the server to verify your email. Please retry the link in a moment.
+            {t("unavailableBody")}
           </p>
         </ContentCard>
       ) : (
-        <ContentCard icon="📧" title="Email verification" subtitle="Invalid or expired link">
+        <ContentCard icon="📧" title={t("invalidTitle")} subtitle={t("invalidSubtitle")}>
           <EmptyState icon="🔗">
-            This verification link is not valid. Make sure you opened the full link from your email,
-            or request a new one.
+            {t("invalidBody")}
           </EmptyState>
           <div style={{ textAlign: "center" }}>
             <Link href="/login" className="btn btn-outline">
-              Back to login
+              {t("backToLogin")}
             </Link>
           </div>
         </ContentCard>