feat: add "Hello from the otter side" easter eggs

Custom 404 pages for landing and docs sites, otter greeting on the
first-login sidebar, and a one-time welcome toast after password change.

apps/web/src/App.tsx

@@ -1,7 +1,7 @@
 import { APP_VERSION, en, shouldShowConsent } from "@snapotter/shared";
 import { Component, type ErrorInfo, lazy, type ReactNode, Suspense, useEffect } from "react";
 import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
-import { Toaster } from "sonner";
+import { Toaster, toast } from "sonner";
 import { ConnectionMonitor } from "./components/common/connection-monitor";
 import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
 import { I18nProvider } from "./contexts/i18n-context";
@@ -186,6 +186,15 @@ export function App() {
     fetchAnalyticsConfig();
   }, [fetchAnalyticsConfig]);
 
+  useEffect(() => {
+    if (localStorage.getItem("snapotter-welcome") === "1") {
+      localStorage.removeItem("snapotter-welcome");
+      toast("Hello from the otter side! 🦦", {
+        duration: 5000,
+      });
+    }
+  }, []);
+
   useEffect(() => {
     if (
       !analyticsConfigLoaded ||

apps/web/src/pages/change-password-page.tsx

@@ -100,6 +100,7 @@ export function ChangePasswordPage() {
         return;
       }
 
+      localStorage.setItem("snapotter-welcome", "1");
       // Trigger browser password save prompt via real form submission + navigation
       const username = localStorage.getItem("snapotter-username") || "admin";
       triggerBrowserPasswordSave(username, newPassword);
@@ -218,6 +219,7 @@ export function ChangePasswordPage() {
       </div>
       <div className="hidden lg:flex flex-1 bg-primary/90 items-center justify-center p-12 text-white rounded-s-3xl">
         <div className="max-w-lg space-y-6 text-center">
+          <span className="text-7xl">🦦</span>
           <h2 className="text-3xl font-bold">{t.changePassword.sidebarTitle}</h2>
           <p className="text-lg text-white/80">{t.changePassword.sidebarDescription}</p>
         </div>