From 034a365f11e3933ca06953bd9dd2935e26724c1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 5 Apr 2026 11:36:29 +0100
Subject: [PATCH] fix(web): theme the auth layout with claudemesh design tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auth routes (/login, /register, /forgot-password, /update-password, /join)
were rendering with the default Geist fonts + shadcn neutral palette +
turbostarter SVG logos — completely off-brand against the marketing
landing. User reported from production.

Rewire auth/layout.tsx to:
- use --cm-bg / --cm-fg / --cm-clay tokens (dark #141413)
- Anthropic Sans for UI, Anthropic Serif for the right-aside tagline
- claudemesh wordmark (mesh glyph + serif) in place of Icons.Logo /
  Icons.LogoText
- right aside: mesh glyph + serif tagline "Every Claude Code session,
  woven into one mesh." + description paragraph, matching the CTA
  copy from the landing
- subtle orange radial glow on the aside for depth

Inner form components (BetterAuth password/social buttons) pick up the
tokens from globals.css, so the forms look native on the dark layout
without per-component rewrites.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/auth/layout.tsx | 107 +++++++++++++++++-----
 1 file changed, 85 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/app/[locale]/auth/layout.tsx b/apps/web/src/app/[locale]/auth/layout.tsx
index 426a662..cb880a3 100644
--- a/apps/web/src/app/[locale]/auth/layout.tsx
+++ b/apps/web/src/app/[locale]/auth/layout.tsx
@@ -1,35 +1,98 @@
-import { getTranslation } from "@turbostarter/i18n/server";
-import { Icons } from "@turbostarter/ui-web/icons";
+import Link from "next/link";
 
-import { pathsConfig } from "~/config/paths";
-import { TurboLink } from "~/modules/common/turbo-link";
-
-export default async function AuthLayout({
+export default function AuthLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const { t } = await getTranslation({ ns: "common" });
-
   return (
-    <main className="grid h-full w-full flex-1 lg:grid-cols-2">
-      <section className="flex h-full flex-col items-center justify-center p-6 lg:p-10">
-        <header className="text-navy -mt-1 mb-auto flex self-start justify-self-start">
-          <TurboLink
-            href={pathsConfig.index}
-            className="flex shrink-0 items-center gap-3"
-            aria-label={t("home")}
+    <main
+      className="grid min-h-screen w-full flex-1 bg-[var(--cm-bg)] text-[var(--cm-fg)] antialiased lg:grid-cols-2"
+      style={{ fontFamily: "var(--cm-font-sans)" }}
+    >
+      <section className="relative flex h-full min-h-screen flex-col items-center justify-center px-6 py-10 lg:px-12">
+        <header className="absolute left-6 top-6 lg:left-12 lg:top-10">
+          <Link
+            href="/"
+            aria-label="claudemesh home"
+            className="group flex shrink-0 items-center gap-2.5"
           >
-            <Icons.Logo className="text-primary h-8" />
-            <Icons.LogoText className="text-foreground h-4" />
-          </TurboLink>
+            <svg
+              width="22"
+              height="22"
+              viewBox="0 0 24 24"
+              fill="none"
+              className="text-[var(--cm-clay)] transition-transform duration-300 group-hover:rotate-180"
+            >
+              <circle cx="12" cy="4" r="2" fill="currentColor" />
+              <circle cx="4" cy="12" r="2" fill="currentColor" />
+              <circle cx="20" cy="12" r="2" fill="currentColor" />
+              <circle cx="12" cy="20" r="2" fill="currentColor" />
+              <path
+                d="M12 4L4 12M12 4L20 12M4 12L12 20M20 12L12 20M4 12L20 12M12 4L12 20"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                opacity="0.45"
+              />
+            </svg>
+            <span
+              className="text-[17px] font-medium tracking-tight text-[var(--cm-fg)]"
+              style={{ fontFamily: "var(--cm-font-serif)" }}
+            >
+              claudemesh
+            </span>
+          </Link>
         </header>
-        <div className="mt-16 mb-auto flex w-full max-w-md flex-col gap-6 pb-16">
-          {children}
-        </div>
+        <div className="flex w-full max-w-md flex-col gap-6">{children}</div>
       </section>
 
-      <aside className="bg-muted hidden flex-1 lg:block"></aside>
+      <aside
+        className="relative hidden overflow-hidden border-l border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] lg:block"
+      >
+        <div
+          className="absolute inset-0 opacity-[0.15]"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle at 50% 50%, var(--cm-clay) 0%, transparent 60%)",
+          }}
+        />
+        <div className="relative flex h-full flex-col items-center justify-center px-10 py-16 text-center">
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            className="mb-8 text-[var(--cm-clay)]"
+          >
+            <circle cx="12" cy="4" r="2" fill="currentColor" />
+            <circle cx="4" cy="12" r="2" fill="currentColor" />
+            <circle cx="20" cy="12" r="2" fill="currentColor" />
+            <circle cx="12" cy="20" r="2" fill="currentColor" />
+            <path
+              d="M12 4L4 12M12 4L20 12M4 12L12 20M20 12L12 20M4 12L20 12M12 4L12 20"
+              stroke="currentColor"
+              strokeWidth="1.2"
+              opacity="0.45"
+            />
+          </svg>
+          <h2
+            className="max-w-sm text-[clamp(1.75rem,3vw,2.25rem)] font-medium leading-[1.15] text-[var(--cm-fg)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            Every Claude Code session,{" "}
+            <span className="italic text-[var(--cm-clay)]">
+              woven into one mesh.
+            </span>
+          </h2>
+          <p
+            className="text-muted-foreground mt-6 max-w-sm text-[15px] leading-[1.6] text-[var(--cm-fg-secondary)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            Connect every Claude Code session on your team into one live mesh.
+            Ship context, not screenshots.
+          </p>
+        </div>
+      </aside>
     </main>
   );
 }