From b7caa24f5e1c2692871d7364758fc01966fcbe04 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Wed, 6 May 2026 14:56:16 -0500
Subject: [PATCH] Add rebrand announcement to auth header

---
 frontend/src/components/AppEntryPage.tsx | 38 ++--------
 frontend/src/components/AuthHeader.tsx   | 94 ++++++++++++++++++++++++
 frontend/src/components/AuthMain.tsx     | 28 +------
 3 files changed, 101 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/components/AuthHeader.tsx

diff --git a/frontend/src/components/AppEntryPage.tsx b/frontend/src/components/AppEntryPage.tsx
index 202a1b34d..3dfdc0edd 100644
--- a/frontend/src/components/AppEntryPage.tsx
+++ b/frontend/src/components/AppEntryPage.tsx
@@ -1,42 +1,14 @@
 import { Link } from "@tanstack/react-router";
-import { Home, LogIn, UserPlus } from "lucide-react";
+import { LogIn, UserPlus } from "lucide-react";
+import { AuthHeader } from "@/components/AuthHeader";
 import { Button } from "@/components/ui/button";
-import { MapleWordmark } from "@/components/MapleWordmark";
-import { marketingUrl } from "@/config/domains";
-import { openExternalUrl } from "@/utils/openUrl";
-import { isTauri } from "@/utils/platform";
-
-const marketingHomeUrl = marketingUrl("/");
-
-function MarketingHomeLink({ className }: { className?: string }) {
-  return (
-    <a
-      href={marketingHomeUrl}
-      onClick={(event) => {
-        if (isTauri()) {
-          event.preventDefault();
-          openExternalUrl(marketingHomeUrl);
-        }
-      }}
-      className={className}
-    >
-      <Home className="h-4 w-4" />
-      Learn about Maple
-    </a>
-  );
-}
 
 export function AppEntryPage() {
   return (
-    <div className="min-h-dvh bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">
-      <header className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-5 sm:px-6 lg:px-8">
-        <Link to="/" aria-label="Maple app home" className="flex items-center">
-          <MapleWordmark className="h-5 w-auto text-[#221a18] dark:text-foreground" />
-        </Link>
-        <MarketingHomeLink className="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-[#747474] transition hover:bg-black/5 hover:text-[#221a18] dark:text-muted-foreground dark:hover:bg-white/5 dark:hover:text-foreground" />
-      </header>
+    <div className="flex min-h-dvh flex-col bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">
+      <AuthHeader />
 
-      <main className="flex min-h-[calc(100dvh-5rem)] items-center justify-center px-4 pb-16 pt-8 sm:px-6">
+      <main className="flex flex-1 items-center justify-center px-4 pb-16 pt-8 sm:px-6">
         <section className="w-full max-w-md rounded-lg border border-neutral-900/10 bg-white/75 p-5 text-center shadow-sm backdrop-blur dark:border-white/10 dark:bg-neutral-900/70 sm:p-6">
           <img src="/maple-research-icon.svg" alt="" className="mx-auto mb-4 h-14 w-14" />
           <h1 className="text-2xl font-semibold leading-tight text-[#221a18] dark:text-foreground">
diff --git a/frontend/src/components/AuthHeader.tsx b/frontend/src/components/AuthHeader.tsx
new file mode 100644
index 000000000..d15a8d50d
--- /dev/null
+++ b/frontend/src/components/AuthHeader.tsx
@@ -0,0 +1,94 @@
+import type { MouseEvent } from "react";
+import { Link } from "@tanstack/react-router";
+import { ArrowRight, ExternalLink, Home } from "lucide-react";
+import { MapleWordmark } from "@/components/MapleWordmark";
+import { marketingUrl } from "@/config/domains";
+import { openExternalUrl } from "@/utils/openUrl";
+import { isTauri } from "@/utils/platform";
+import { cn } from "@/utils/utils";
+
+const marketingHomeUrl = marketingUrl("/");
+const rebrandAnnouncementUrl =
+  "https://blog.trymaple.ai/meet-maple-the-personal-intelligence-platform/";
+
+function openExternalLink(event: MouseEvent<HTMLAnchorElement>, url: string) {
+  if (!isTauri()) {
+    return;
+  }
+
+  event.preventDefault();
+  openExternalUrl(url);
+}
+
+function RebrandAnnouncementLink({ className }: { className?: string }) {
+  return (
+    <a
+      href={rebrandAnnouncementUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(event) => openExternalLink(event, rebrandAnnouncementUrl)}
+      className={cn(
+        "group inline-flex min-h-10 w-full max-w-full items-center justify-center gap-2 rounded-md border border-neutral-900/10 bg-white/65 px-3 py-2 text-[11px] font-semibold text-[#221a18] shadow-sm backdrop-blur transition hover:border-neutral-900/15 hover:bg-white/85 dark:border-white/10 dark:bg-white/[0.06] dark:text-foreground dark:hover:border-white/15 dark:hover:bg-white/[0.1] sm:w-auto sm:text-xs",
+        className
+      )}
+      aria-label="Maple AI is now Maple Research. Read the announcement."
+    >
+      <span className="hidden items-center gap-1.5 md:inline-flex" aria-hidden="true">
+        <span className="inline-flex h-6 w-6 overflow-hidden rounded border border-neutral-900/10 bg-[#111111] dark:border-white/10">
+          <img
+            src="/maple-icon-nobg.png"
+            alt=""
+            className="h-full w-full scale-[1.28] object-contain"
+          />
+        </span>
+        <ArrowRight className="h-3 w-3 text-[#747474] dark:text-muted-foreground" />
+        <img src="/maple-research-icon.svg" alt="" className="h-6 w-6 rounded-[6px]" />
+      </span>
+      <span className="min-w-0 truncate">
+        <span className="hidden sm:inline">Maple AI is now Maple Research</span>
+        <span className="sm:hidden">Maple AI -&gt; Maple Research</span>
+      </span>
+      <span
+        className="hidden h-1 w-1 shrink-0 rounded-full bg-neutral-400/80 dark:bg-white/30 sm:block"
+        aria-hidden="true"
+      />
+      <span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[#d65f35] transition group-hover:text-[#b94c26] dark:text-[#ff9b72] dark:group-hover:text-[#ffb095]">
+        <span className="hidden sm:inline">Read announcement</span>
+        <span className="sm:hidden">Read</span>
+        <ExternalLink className="h-3 w-3" aria-hidden="true" />
+      </span>
+    </a>
+  );
+}
+
+function MarketingHomeLink({ className }: { className?: string }) {
+  return (
+    <a
+      href={marketingHomeUrl}
+      onClick={(event) => openExternalLink(event, marketingHomeUrl)}
+      className={className}
+    >
+      <Home className="h-4 w-4" />
+      <span className="hidden sm:inline">Learn about Maple</span>
+      <span className="sm:hidden">Home</span>
+    </a>
+  );
+}
+
+export function AuthHeader() {
+  return (
+    <header className="mx-auto grid w-full max-w-6xl grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-3 px-4 py-5 sm:px-6 lg:grid-cols-[1fr_auto_1fr] lg:px-8">
+      <Link
+        to="/"
+        aria-label="Maple app home"
+        className="col-start-1 row-start-1 flex items-center justify-self-start"
+      >
+        <MapleWordmark className="h-5 w-auto text-[#221a18] dark:text-foreground" />
+      </Link>
+
+      <RebrandAnnouncementLink className="col-span-2 row-start-2 justify-self-stretch sm:justify-self-center lg:col-span-1 lg:col-start-2 lg:row-start-1" />
+
+      <MarketingHomeLink className="col-start-2 row-start-1 inline-flex items-center gap-2 justify-self-end rounded-md px-3 py-2 text-sm font-semibold text-[#747474] transition hover:bg-black/5 hover:text-[#221a18] dark:text-muted-foreground dark:hover:bg-white/5 dark:hover:text-foreground lg:col-start-3" />
+    </header>
+  );
+}
diff --git a/frontend/src/components/AuthMain.tsx b/frontend/src/components/AuthMain.tsx
index 87b2c9392..65195ebb7 100644
--- a/frontend/src/components/AuthMain.tsx
+++ b/frontend/src/components/AuthMain.tsx
@@ -1,9 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { Home } from "lucide-react";
-import { MapleWordmark } from "@/components/MapleWordmark";
-import { marketingUrl } from "@/config/domains";
-import { openExternalUrl } from "@/utils/openUrl";
-import { isTauri } from "@/utils/platform";
+import { AuthHeader } from "@/components/AuthHeader";
 
 type AuthMainProps = {
   children: React.ReactNode;
@@ -12,29 +8,9 @@ type AuthMainProps = {
 };
 
 export function AuthMain({ children, title, description }: AuthMainProps) {
-  const marketingHomeUrl = marketingUrl("/");
-
   return (
     <div className="flex min-h-dvh flex-col bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">
-      <header className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-5 sm:px-6 lg:px-8">
-        <Link to="/" aria-label="Maple app home" className="flex items-center">
-          <MapleWordmark className="h-5 w-auto text-[#221a18] dark:text-foreground" />
-        </Link>
-        <a
-          href={marketingHomeUrl}
-          onClick={(event) => {
-            if (isTauri()) {
-              event.preventDefault();
-              openExternalUrl(marketingHomeUrl);
-            }
-          }}
-          className="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-[#747474] transition hover:bg-black/5 hover:text-[#221a18] dark:text-muted-foreground dark:hover:bg-white/5 dark:hover:text-foreground"
-        >
-          <Home className="h-4 w-4" />
-          <span className="hidden sm:inline">Learn about Maple</span>
-          <span className="sm:hidden">Home</span>
-        </a>
-      </header>
+      <AuthHeader />
 
       <main className="flex flex-1 items-center justify-center px-4 py-10 sm:px-6">
         <section className="w-full max-w-md rounded-lg border border-neutral-900/10 bg-white/75 p-5 shadow-sm backdrop-blur dark:border-white/10 dark:bg-neutral-900/70 sm:p-6">