Adapt + improve all public pages to the atom design system

Extended the same design-system treatment to the public site, faithful
to AtomCMS's "atom" theme. New src/components/public/ui.tsx provides the
signature atom building blocks + a scoped CSS layer:
- ContentCard: surface card with a primary-tinted header (icon circle +
  title + subtitle) and padded body — the atom content-card, used as
  every page's header and section wrapper.
- StatBlock / stat-grid, EmptyState, OnlineBadge (online/offline pill),
  RankBadge (medals for the top 3), and responsive .card-grid helpers.

Swept ~45 public pages (home/community/rankings hand-built as the
reference; the rest via parallel agents that read the schema and
preserved every query, server action, auth gate and field name):
heroes → ContentCard headers, lists → card-grids in ContentCards,
"no X" → EmptyState, status → OnlineBadge/RankBadge. The leaderboard
gained Credits/Diamonds/Duckets tabs (usersCurrency).

Behaviour unchanged. Verified on the prod server against amx_test: 15+
public pages render the content-cards/grids with real data, no errors;
computed styles confirm the tinted header, icon circle, medal + online
pills. Fixed an undefined --color-golden ref. tsc 0, vitest 49/49,
next build 0.

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

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { beginTwoFactor, confirmTwoFactor, disableTwoFactor } from "@/actions/twofactor";
+import { ContentCard } from "@/components/public/ui";
 import { LaravelEncrypter } from "@/lib/auth/laravel-encrypter";
 import { totpKeyUri } from "@/lib/auth/totp";
 import { auth } from "@/lib/auth";
@@ -47,67 +48,81 @@ export default async function TwoFactorPage({
   }
 
   return (
-    <main style={{ maxWidth: 520 }}>
-      <p className="muted">
+    <main style={{ display: "grid", gap: "1.5rem", maxWidth: 560, margin: "0 auto" }}>
+      <p className="muted" style={{ margin: 0 }}>
         <Link href="/settings">← Settings</Link>
       </p>
-      <h1>Two-factor authentication</h1>
 
-      {sp.enabled ? <p style={{ color: "var(--color-accent)" }}>2FA is now enabled. 🔒</p> : null}
-      {sp.disabled ? <p className="muted">2FA has been disabled.</p> : null}
-      {sp.error === "badcode" ? (
-        <p style={{ color: "var(--color-danger)" }}>That code wasn't valid — try again.</p>
-      ) : null}
+      <ContentCard
+        icon="🔒"
+        title="Two-factor authentication"
+        subtitle="Add a second layer of security with an authenticator app"
+      >
+        {sp.enabled ? (
+          <p style={{ color: "var(--color-accent)", marginTop: 0 }}>2FA is now enabled. 🔒</p>
+        ) : null}
+        {sp.disabled ? (
+          <p className="muted" style={{ marginTop: 0 }}>
+            2FA has been disabled.
+          </p>
+        ) : null}
+        {sp.error === "badcode" ? (
+          <p style={{ color: "var(--color-danger)", marginTop: 0 }}>
+            That code wasn't valid — try again.
+          </p>
+        ) : null}
 
-      {!hasAppKey ? (
-        <div className="card">
+        {!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).
           </p>
-        </div>
-      ) : enabled ? (
-        <div className="card">
-          <p>
-            <strong>2FA is enabled</strong> on your account.
-          </p>
-          <form action={disableTwoFactor}>
-            <button type="submit" className="btn btn-danger">
-              Disable 2FA
-            </button>
-          </form>
-        </div>
-      ) : pending ? (
-        <div className="card">
-          <h3 style={{ marginTop: 0 }}>Scan or enter this key</h3>
-          <p className="muted" style={{ marginTop: 0 }}>
-            Add this to Google Authenticator / Authy, then enter the 6-digit code to confirm.
-          </p>
-          <p>
-            Manual key: <code style={{ userSelect: "all" }}>{secret}</code>
-          </p>
-          <p className="muted" style={{ wordBreak: "break-all", fontSize: "0.8rem" }}>
-            {uri}
-          </p>
-          <form action={confirmTwoFactor} style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
-            <input name="code" placeholder="6-digit code" inputMode="numeric" required />
-            <button type="submit" className="btn btn-primary">
-              Confirm
-            </button>
-          </form>
-        </div>
-      ) : (
-        <div className="card">
-          <p style={{ marginTop: 0 }}>
-            Add a second layer of security with an authenticator app.
-          </p>
-          <form action={beginTwoFactor}>
-            <button type="submit" className="btn btn-primary">
-              Enable 2FA
-            </button>
-          </form>
-        </div>
-      )}
+        ) : enabled ? (
+          <>
+            <p style={{ marginTop: 0 }}>
+              <strong>2FA is enabled</strong> on your account.
+            </p>
+            <form action={disableTwoFactor}>
+              <button type="submit" className="btn btn-danger">
+                Disable 2FA
+              </button>
+            </form>
+          </>
+        ) : pending ? (
+          <>
+            <h3 style={{ marginTop: 0 }}>Scan or enter this key</h3>
+            <p className="muted" style={{ marginTop: 0 }}>
+              Add this to Google Authenticator / Authy, then enter the 6-digit code to confirm.
+            </p>
+            <p>
+              Manual key: <code style={{ userSelect: "all" }}>{secret}</code>
+            </p>
+            <p className="muted" style={{ wordBreak: "break-all", fontSize: "0.8rem" }}>
+              {uri}
+            </p>
+            <form
+              action={confirmTwoFactor}
+              style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}
+            >
+              <input name="code" placeholder="6-digit code" inputMode="numeric" required />
+              <button type="submit" className="btn btn-primary">
+                Confirm
+              </button>
+            </form>
+          </>
+        ) : (
+          <>
+            <p style={{ marginTop: 0 }}>
+              Add a second layer of security with an authenticator app.
+            </p>
+            <form action={beginTwoFactor}>
+              <button type="submit" className="btn btn-primary">
+                Enable 2FA
+              </button>
+            </form>
+          </>
+        )}
+      </ContentCard>
     </main>
   );
 }

src/app/settings/connections/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { ContentCard } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { env } from "@/env";
@@ -14,11 +15,13 @@ const PROVIDERS = [
   {
     key: "discord",
     label: "Discord",
+    icon: "🎮",
     available: Boolean(env.DISCORD_CLIENT_ID && env.DISCORD_CLIENT_SECRET),
   },
   {
     key: "google",
     label: "Google",
+    icon: "🔵",
     available: Boolean(env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET),
   },
 ] as const;
@@ -48,85 +51,82 @@ export default async function ConnectionsPage() {
   const callbackUrl = "/settings/connections";
 
   return (
-    <main style={{ maxWidth: 560 }}>
-      <p className="muted">
+    <main style={{ display: "grid", gap: "1.5rem", maxWidth: 620, margin: "0 auto" }}>
+      <p className="muted" style={{ margin: 0 }}>
         <Link href="/settings">← Settings</Link>
       </p>
-      <h1>Connected accounts</h1>
-      <p className="muted" style={{ marginTop: 0 }}>
-        Link a social account so you can sign in with one click. We match it to
-        your hotel account by e-mail, so use the address on file:{" "}
-        <strong>{session.user.name}</strong>.
-      </p>
 
-      {lookupFailed ? (
-        <div className="card" style={{ marginBottom: "1.5rem" }}>
-          <p className="muted" style={{ margin: 0 }}>
-            We couldn't read your linked accounts right now. You can still connect
-            below — your status will show once it's available.
+      <ContentCard
+        icon="🔗"
+        title="Connected accounts"
+        subtitle="Link a social account so you can sign in with one click"
+      >
+        <p className="muted" style={{ marginTop: 0 }}>
+          We match it to your hotel account by e-mail, so use the address on file:{" "}
+          <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.
           </p>
-        </div>
-      ) : null}
+        ) : null}
+      </ContentCard>
 
-      <div className="grid" style={{ gap: "1rem" }}>
+      <div className="card-grid sm-2">
         {PROVIDERS.map((p) => {
           const isLinked = linked.has(p.key);
           return (
-            <div
+            <ContentCard
               key={p.key}
-              className="card"
-              style={{ display: "flex", alignItems: "center", gap: "1rem" }}
+              icon={p.icon}
+              title={p.label}
+              subtitle={
+                !p.available
+                  ? "Not available on this hotel."
+                  : isLinked
+                    ? "Connected — sign in with this account."
+                    : "Not connected."
+              }
             >
-              <div style={{ flex: 1 }}>
-                <h3 style={{ margin: "0 0 0.25rem" }}>{p.label}</h3>
-                <p className="muted" style={{ margin: 0 }}>
-                  {!p.available
-                    ? "Not available on this hotel."
-                    : isLinked
-                      ? "Connected — you can sign in with this account."
-                      : "Not connected."}
-                </p>
-              </div>
-              <div>
-                {isLinked ? (
-                  <span
-                    className="btn btn-outline"
-                    style={{ cursor: "default", pointerEvents: "none" }}
-                    aria-disabled="true"
-                  >
-                    Connected
-                  </span>
-                ) : p.available ? (
-                  // Plain link into NextAuth's built-in sign-in handler. Re-using
-                  // the same OAuth flow as /login binds the provider to the
-                  // matching hotel account (see auth.ts signIn callback).
-                  <a
-                    className="btn btn-primary"
-                    href={`/api/auth/signin/${p.key}?callbackUrl=${encodeURIComponent(
-                      callbackUrl,
-                    )}`}
-                  >
-                    Connect {p.label}
-                  </a>
-                ) : (
-                  <span
-                    className="btn"
-                    style={{ cursor: "not-allowed", opacity: 0.55, pointerEvents: "none" }}
-                    aria-disabled="true"
-                  >
-                    Unavailable
-                  </span>
-                )}
-              </div>
-            </div>
+              {isLinked ? (
+                <span
+                  className="btn btn-outline"
+                  style={{ cursor: "default", pointerEvents: "none" }}
+                  aria-disabled="true"
+                >
+                  Connected
+                </span>
+              ) : p.available ? (
+                // Plain link into NextAuth's built-in sign-in handler. Re-using
+                // the same OAuth flow as /login binds the provider to the
+                // matching hotel account (see auth.ts signIn callback).
+                <a
+                  className="btn btn-primary"
+                  href={`/api/auth/signin/${p.key}?callbackUrl=${encodeURIComponent(
+                    callbackUrl,
+                  )}`}
+                >
+                  Connect {p.label}
+                </a>
+              ) : (
+                <span
+                  className="btn"
+                  style={{ cursor: "not-allowed", opacity: 0.55, pointerEvents: "none" }}
+                  aria-disabled="true"
+                >
+                  Unavailable
+                </span>
+              )}
+            </ContentCard>
           );
         })}
       </div>
 
-      <p className="muted" style={{ marginTop: "1.5rem", marginBottom: 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.
+      <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.
       </p>
     </main>
   );

src/app/settings/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { updateMotto } from "@/actions/user-settings";
+import { ContentCard } from "@/components/public/ui";
 import { avatarImageUrl } from "@/lib/format";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
@@ -42,29 +43,39 @@ export default async function SettingsPage() {
   const avatar = avatarImageUrl(imagerBase, user.look, { size: "l" });
 
   return (
-    <main>
-      <h1>Account settings</h1>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="⚙️"
+        title="Account settings"
+        subtitle="Manage your profile, security and connected accounts"
+      />
 
-      <div
-        className="card"
-        style={{ display: "flex", gap: "1.5rem", alignItems: "center", marginBottom: "1.5rem" }}
-      >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img className="avatar" src={avatar} alt={`${user.username} avatar`} width={100} height={150} />
-        <div>
-          <h2 style={{ margin: "0 0 0.25rem" }}>{user.username}</h2>
-          <p style={{ margin: "0 0 0.5rem" }}>
-            {user.motto || <span className="muted">No motto</span>}
-          </p>
-          <p className="muted" style={{ margin: 0 }}>
-            {user.mail || "No e-mail on file"}
-          </p>
+      <ContentCard icon="🙂" title={user.username} subtitle="Your public profile">
+        <div style={{ display: "flex", gap: "1.5rem", alignItems: "center", flexWrap: "wrap" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            className="avatar"
+            src={avatar}
+            alt={`${user.username} avatar`}
+            width={100}
+            height={150}
+          />
+          <div style={{ minWidth: 0 }}>
+            <p style={{ margin: "0 0 0.5rem", fontSize: "1.05rem" }}>
+              {user.motto || <span className="muted">No motto</span>}
+            </p>
+            <p className="muted" style={{ margin: 0 }}>
+              {user.mail || "No e-mail on file"}
+            </p>
+          </div>
         </div>
-      </div>
+      </ContentCard>
 
-      <div className="card" style={{ maxWidth: 520 }}>
-        <h3 style={{ marginTop: 0 }}>Change motto</h3>
-        <form action={updateMotto} style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+      <ContentCard icon="✏️" title="Change motto" subtitle="Updates instantly in-game if you are online">
+        <form
+          action={updateMotto}
+          style={{ display: "flex", flexDirection: "column", gap: "0.75rem", maxWidth: 520 }}
+        >
           <input
             name="motto"
             defaultValue={user.motto}
@@ -78,29 +89,26 @@ export default async function SettingsPage() {
             </button>
           </div>
         </form>
-        <p className="muted" style={{ marginBottom: 0 }}>
-          Updates instantly in-game if you are online.
-        </p>
-      </div>
+      </ContentCard>
 
-      <div className="card" style={{ maxWidth: 520, marginTop: "1.5rem" }}>
-        <h3 style={{ marginTop: 0 }}>Security</h3>
-        <p className="muted" style={{ marginTop: 0 }}>
-          Protect your account with two-factor authentication.
-        </p>
-        <Link href="/settings/2fa" className="btn btn-outline">
-          Two-factor authentication
-        </Link>
-      </div>
+      <div className="card-grid sm-2">
+        <ContentCard icon="🔒" title="Security" subtitle="Two-factor authentication">
+          <p className="muted" style={{ marginTop: 0 }}>
+            Add a second layer of protection to your account.
+          </p>
+          <Link href="/settings/2fa" className="btn btn-outline">
+            Two-factor authentication
+          </Link>
+        </ContentCard>
 
-      <div className="card" style={{ maxWidth: 520, marginTop: "1.5rem" }}>
-        <h3 style={{ marginTop: 0 }}>Connected accounts</h3>
-        <p className="muted" style={{ marginTop: 0 }}>
-          Link Discord or Google to sign in with one click.
-        </p>
-        <Link href="/settings/connections" className="btn btn-outline">
-          Manage connections
-        </Link>
+        <ContentCard icon="🔗" title="Connected accounts" subtitle="Sign in with one click">
+          <p className="muted" style={{ marginTop: 0 }}>
+            Link Discord or Google to your hotel account.
+          </p>
+          <Link href="/settings/connections" className="btn btn-outline">
+            Manage connections
+          </Link>
+        </ContentCard>
       </div>
     </main>
   );