From 383817916dda1d4d7c71cbe5b1fc365fd759f76b Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Thu, 20 Aug 2026 19:00:35 +0200
Subject: [PATCH] perf(landing): scope Clerk provider + fix contrast/landmark
 on marketing page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moves ClerkThemeProvider from the root layout into (app)/layout.tsx and
(auth)/layout.tsx — it was previously mounted globally, shipping the
~240 KiB Clerk client SDK to every route including the public marketing
page. Only Sidebar's UserButton and the (auth) sign-in/sign-up forms
actually need client-side Clerk context; server-side auth() calls are
unaffected since they read from proxy.ts's clerkMiddleware, not React
context.

Also fixes two WCAG AA contrast failures on the hero/header CTAs
(orange-500/600 -> orange-700, ~2.8:1/3.6:1 -> ~5.5:1) and adds a
missing <main> landmark around the landing page content.

Source: PageSpeed Insights audit, mobile Performance 70 -> targets >90.
---
 src/app/(app)/layout.tsx                 | 31 +++++++++++++++---------
 src/app/(auth)/layout.tsx                | 13 +++++++---
 src/app/layout.tsx                       | 19 ++++++---------
 src/app/page.tsx                         |  4 ++-
 src/components/landing/LandingHeader.tsx |  2 +-
 5 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index 880859a..6d87300 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -8,6 +8,7 @@ import { ActivePetInitializer } from "@/components/layout/ActivePetInitializer";
 import { ThemeInitializer } from "@/components/layout/ThemeInitializer";
 import { LegalUpdateBanner } from "@/components/legal/LegalUpdateBanner";
 import { BroadcastBanner } from "@/components/broadcast/BroadcastBanner";
+import { ClerkThemeProvider } from "@/components/providers/ClerkThemeProvider";
 import { recordVisit } from "@/lib/visit-tracking";
 
 /**
@@ -22,6 +23,10 @@ import { recordVisit } from "@/lib/visit-tracking";
  * Security (T-2-03): pets.list scoped by ctx.userId — no cross-owner pet leakage.
  *
  * ActivePetProvider is already mounted in root layout.tsx so we do NOT re-wrap here.
+ *
+ * ClerkThemeProvider (client-side Clerk SDK) is scoped to this layout instead of
+ * root layout.tsx — only Sidebar's <UserButton/> needs it, so the public marketing
+ * page and legal routes no longer ship the ~240 KiB Clerk bundle (SpeedUp-Plan P0).
  */
 export default async function AppLayout({
   children,
@@ -69,19 +74,21 @@ export default async function AppLayout({
   }
 
   return (
-    <div className="flex min-h-screen">
-      <ActivePetInitializer firstPetId={pets[0].id} />
-      <ThemeInitializer dbTheme={dbTheme} />
-      <LegalUpdateBanner />
-      <BroadcastBanner />
-      {/* Desktop sidebar — hidden on mobile */}
-      <Sidebar pets={pets} />
+    <ClerkThemeProvider>
+      <div className="flex min-h-screen">
+        <ActivePetInitializer firstPetId={pets[0].id} />
+        <ThemeInitializer dbTheme={dbTheme} />
+        <LegalUpdateBanner />
+        <BroadcastBanner />
+        {/* Desktop sidebar — hidden on mobile */}
+        <Sidebar pets={pets} />
 
-      {/* Main content area */}
-      <main className="flex-1 overflow-auto pb-32 lg:pb-0">{children}</main>
+        {/* Main content area */}
+        <main className="flex-1 overflow-auto pb-32 lg:pb-0">{children}</main>
 
-      {/* Mobile bottom nav — hidden on desktop */}
-      <MobileNav pets={pets} />
-    </div>
+        {/* Mobile bottom nav — hidden on desktop */}
+        <MobileNav pets={pets} />
+      </div>
+    </ClerkThemeProvider>
   );
 }
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index 8db9f34..6cbb3f1 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -1,8 +1,13 @@
+import { ClerkThemeProvider } from "@/components/providers/ClerkThemeProvider";
+
 /**
  * Auth layout — centers all auth pages in a 448px card.
  *
  * No sidebar or navigation — auth pages are standalone experiences.
  * Applied to all routes under /(auth)/.
+ *
+ * ClerkThemeProvider is scoped here (not root layout.tsx) — the <SignIn>/<SignUp>
+ * components need it, but the public marketing page doesn't (SpeedUp-Plan P0).
  */
 export default function AuthLayout({
   children,
@@ -10,8 +15,10 @@ export default function AuthLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <div className="w-full mx-auto max-w-[448px] px-4">{children}</div>
-    </div>
+    <ClerkThemeProvider>
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="w-full mx-auto max-w-[448px] px-4">{children}</div>
+      </div>
+    </ClerkThemeProvider>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0003b8e..bcdf88c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,7 +5,6 @@ import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages } from "next-intl/server";
 import { TRPCReactProvider } from "@/trpc/client";
 import { ActivePetProvider } from "@/context/ActivePetContext";
-import { ClerkThemeProvider } from "@/components/providers/ClerkThemeProvider";
 import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
 
@@ -54,16 +53,14 @@ export default async function RootLayout({
     >
       <body className="min-h-full flex flex-col">
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-          <ClerkThemeProvider>
-            <NextIntlClientProvider locale={locale} messages={messages}>
-              <TRPCReactProvider>
-                <ActivePetProvider>
-                  {children}
-                  <Toaster />
-                </ActivePetProvider>
-              </TRPCReactProvider>
-            </NextIntlClientProvider>
-          </ClerkThemeProvider>
+          <NextIntlClientProvider locale={locale} messages={messages}>
+            <TRPCReactProvider>
+              <ActivePetProvider>
+                {children}
+                <Toaster />
+              </ActivePetProvider>
+            </TRPCReactProvider>
+          </NextIntlClientProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 34c5a03..b67a3d4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -43,6 +43,7 @@ export default async function RootPage() {
     <div className="min-h-screen bg-background">
       <LandingHeader />
 
+      <main>
       {/* Hero */}
       <section className="px-4 pt-8 sm:px-6 sm:pt-10">
         <div className="relative mx-auto max-w-6xl overflow-hidden rounded-4xl bg-gradient-to-br from-orange-400 via-orange-500 to-orange-700">
@@ -64,7 +65,7 @@ export default async function RootPage() {
               <div className="mt-10 flex flex-col justify-center gap-3 sm:flex-row lg:justify-start">
                 <Link
                   href="/sign-up"
-                  className="inline-flex items-center justify-center rounded-xl bg-white px-7 py-3.5 text-base font-semibold text-orange-600 shadow-lg transition-transform hover:-translate-y-0.5 hover:bg-orange-50"
+                  className="inline-flex items-center justify-center rounded-xl bg-white px-7 py-3.5 text-base font-semibold text-orange-700 shadow-lg transition-transform hover:-translate-y-0.5 hover:bg-orange-50"
                 >
                   {t("getStarted")}
                 </Link>
@@ -180,6 +181,7 @@ export default async function RootPage() {
           </div>
         </ScrollReveal>
       </section>
+      </main>
 
       {/* Footer — repeats the navbar */}
       <LandingFooter />
diff --git a/src/components/landing/LandingHeader.tsx b/src/components/landing/LandingHeader.tsx
index 77b7730..92db18f 100644
--- a/src/components/landing/LandingHeader.tsx
+++ b/src/components/landing/LandingHeader.tsx
@@ -45,7 +45,7 @@ export async function LandingHeader() {
           </Link>
           <Link
             href="/sign-up"
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-full bg-orange-500 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-orange-600 sm:px-4"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-full bg-orange-700 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-orange-800 sm:px-4"
           >
             {t("navSignUp")}
           </Link>