Greet with the header's ev-eyes wordmark and a calmer welcome type scale (#184)

Welcome and sign-in now show the same animated wordmark as the sidebar header
("ev" plus the Oo eyes) instead of the teal face. The welcome tagline, subline and
buttons drop to the shared title and body sizes.


Claude-Session: https://claude.ai/code/session_01Tgvrj34NMnaqvtgvruYQZZ

Co-authored-by: Claude <noreply@anthropic.com>

apps/web/e2e/welcome.spec.ts

@@ -1,16 +1,17 @@
 import { expect, test } from "@playwright/test";
 import { captureScreenshot } from "./helpers";
 
-test("the welcome and sign-in screens carry the same evOo logo", async ({ page }, testInfo) => {
+test("the welcome and sign-in screens carry the evOo wordmark from the header", async ({
+  page,
+}, testInfo) => {
   await page.setViewportSize({ width: 390, height: 844 });
   for (const scheme of ["dark", "light"] as const) {
     await page.emulateMedia({ colorScheme: scheme });
     await page.goto("/", { waitUntil: "domcontentloaded" });
-    await expect(page.getByText("evOo", { exact: true })).toBeVisible();
+    await expect(page.locator(".evoo-mascot-container")).toBeVisible();
-    await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
     await captureScreenshot(page, testInfo, `phone-welcome-${scheme}`);
     await page.goto("/sign-in", { waitUntil: "domcontentloaded" });
-    await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
+    await expect(page.locator(".evoo-mascot-container")).toBeVisible();
     await captureScreenshot(page, testInfo, `phone-sign-in-${scheme}`);
   }
 });

apps/web/src/pages/Auth.tsx

@@ -1,6 +1,6 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import { readBoundedJsonResponse, signupRequiresEmailVerification } from "@rakazo/core";
-import { Button, Input, Label } from "@rakazo/ui-web";
+import { Button, EvooMascot, Input, Label } from "@rakazo/ui-web";
 import { Eye, EyeOff } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
@@ -337,7 +337,7 @@ function AuthFrame({
   return (
     <div className="flex min-h-full items-center justify-center bg-background px-6 py-16 text-foreground">
       <form onSubmit={onSubmit} className="flex w-[460px] flex-col items-center">
-        <img src="/evoo-logo.svg" alt="" className="size-[74px]" />
+        <EvooMascot size={56} showWordmark />
         <h1 aria-live="polite" className="mb-9 mt-7 text-4xl font-medium tracking-tight">
           {title}
         </h1>

apps/web/src/pages/Welcome.tsx

@@ -1,4 +1,5 @@
 import { Trans } from "@lingui/react/macro";
+import { EvooMascot } from "@rakazo/ui-web";
 import { useNavigate } from "react-router-dom";
 import { WindowChrome } from "./WindowChrome";
 
@@ -9,33 +10,28 @@ export function WelcomePage() {
       <div className="app-drag flex gap-2 px-5 py-[18px]">
         <WindowChrome />
       </div>
-      <div className="flex flex-1 flex-col items-center justify-center gap-10 px-6 pb-[90px]">
+      <div className="flex flex-1 flex-col items-center justify-center gap-8 px-6 pb-[90px]">
-        <div className="flex flex-col items-center gap-6 sm:flex-row sm:gap-[26px]">
+        <EvooMascot size={72} showWordmark interactive trackPointer="hover" />
-          <img src="/evoo-logo.svg" alt="" className="size-[88px]" />
+        <div className="max-w-[420px] space-y-2 text-center">
-          <div className="text-[76px] leading-none tracking-[-0.03em] text-foreground font-['EvOo_Display',sans-serif]">
+          <p className="text-balance text-ui-title font-medium text-foreground/90">
-            evOo
-          </div>
-        </div>
-        <div className="max-w-[520px] space-y-3 text-center">
-          <p className="text-balance text-[27px] leading-[1.35] text-foreground/90 font-medium">
             <Trans>Your specialists. One calm place to talk.</Trans>
           </p>
-          <p className="text-balance text-ui-title-sm leading-[1.5] text-foreground/60">
+          <p className="text-balance text-ui-body text-foreground/60">
             <Trans>Simple to start. Expert when you need it.</Trans>
           </p>
         </div>
-        <div className="flex flex-col sm:flex-row items-center gap-4">
+        <div className="flex flex-col sm:flex-row items-center gap-3">
           <button
             type="button"
             onClick={() => navigate("/sign-in")}
-            className="app-no-drag rounded-full bg-primary text-primary-foreground px-[34px] py-[15px] text-[19px] font-medium transition hover:scale-[1.04]"
+            className="app-no-drag rounded-full bg-primary text-primary-foreground px-7 py-3 text-ui-body font-medium transition hover:scale-[1.04]"
           >
             <Trans>Sign in</Trans>&nbsp;&nbsp;→
           </button>
           <button
             type="button"
             onClick={() => navigate("/sign-up")}
-            className="app-no-drag rounded-full bg-accent px-[34px] py-[15px] text-[19px] text-foreground transition hover:scale-[1.04]"
+            className="app-no-drag rounded-full bg-accent px-7 py-3 text-ui-body text-foreground transition hover:scale-[1.04]"
           >
             <Trans>Sign up</Trans>
           </button>