Add a NotFound page and remove the TanStack devtools panel

Configures a notFoundComponent on the root route so unmatched paths get a
branded empty state instead of TanStack Router's generic "Not Found" text,
and drops the always-on devtools panel from the root layout.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/ui/NotFound.module.scss

@@ -0,0 +1,37 @@
+@use '../../styles/variables' as *;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $space-1;
+  max-width: 640px;
+  margin: 0 auto;
+  padding: $space-5 $space-3;
+  text-align: center;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.text {
+  margin: 0 0 $space-3;
+  color: $color-text-muted;
+}
+
+.cta {
+  padding: $space-2 $space-4;
+  border-radius: $radius;
+  background: $color-primary;
+  color: $color-primary-contrast;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}

src/components/ui/NotFound.tsx

@@ -0,0 +1,15 @@
+import { Link } from '@tanstack/react-router'
+
+import styles from './NotFound.module.scss'
+
+export const NotFound = () => (
+  <div className={styles.wrapper}>
+    <p className={styles.title}>Page not found</p>
+    <p className={styles.text}>
+      The page you're looking for doesn't exist or may have moved.
+    </p>
+    <Link to="/" className={styles.cta}>
+      Browse the menu
+    </Link>
+  </div>
+)

src/routes/__root.tsx

@@ -4,11 +4,10 @@ import {
   Scripts,
   createRootRoute,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
 
 import { BasketLink } from '#/components/basket/BasketLink.tsx'
 import { Logo } from '#/components/ui/Logo.tsx'
+import { NotFound } from '#/components/ui/NotFound.tsx'
 import BetterAuthHeader from '#/integrations/better-auth/header-user.tsx'
 import { BasketProvider } from '#/lib/basket.tsx'
 import { getBrand } from '#/server/brand.ts'
@@ -40,17 +39,6 @@ const RootDocument = ({ children }: { children: React.ReactNode }) => {
           </div>
           {children}
         </BasketProvider>
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
         <Scripts />
       </body>
     </html>
@@ -59,6 +47,7 @@ const RootDocument = ({ children }: { children: React.ReactNode }) => {
 
 export const Route = createRootRoute({
   loader: async () => ({ brand: await getBrand() }),
+  notFoundComponent: NotFound,
   head: () => ({
     meta: [
       {