feat(web): add custom 404 pages for global and authenticated routes #472
160
apps/web/src/app/(authenticated)/not-found.tsx
Normal file
160
apps/web/src/app/(authenticated)/not-found.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import type { ReactElement } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AuthenticatedNotFound(): ReactElement {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
minHeight: "60vh",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: "24px",
|
||||
padding: "48px 40px",
|
||||
background: "var(--surface)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--r-xl)",
|
||||
boxShadow: "var(--shadow-md)",
|
||||
textAlign: "center",
|
||||
maxWidth: "420px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{/* Compass icon in blue-tinted icon well */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: "var(--r-lg)",
|
||||
background: "rgba(47, 128, 255, 0.1)",
|
||||
color: "var(--ms-blue-400)",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polygon
|
||||
points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
opacity="0.3"
|
||||
/>
|
||||
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* 404 badge pill */}
|
||||
<span
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
padding: "4px 12px",
|
||||
borderRadius: "9999px",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 600,
|
||||
fontFamily: "var(--mono)",
|
||||
background: "rgba(47, 128, 255, 0.15)",
|
||||
color: "var(--ms-blue-400)",
|
||||
}}
|
||||
>
|
||||
404
|
||||
</span>
|
||||
|
||||
{/* Heading + description */}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "1.25rem",
|
||||
fontWeight: 600,
|
||||
color: "var(--text)",
|
||||
margin: 0,
|
||||
letterSpacing: "-0.01em",
|
||||
}}
|
||||
>
|
||||
Page not found
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "0.875rem",
|
||||
color: "var(--muted)",
|
||||
margin: 0,
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
This page doesn't exist or you may not have permission to view it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "12px",
|
||||
marginTop: "8px",
|
||||
}}
|
||||
>
|
||||
{/* Primary: Dashboard */}
|
||||
<Link
|
||||
href="/"
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "9px 20px",
|
||||
background: "var(--ms-blue-500)",
|
||||
color: "#ffffff",
|
||||
borderRadius: "var(--r)",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 500,
|
||||
textDecoration: "none",
|
||||
transition: "opacity 0.15s ease",
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
|
||||
{/* Ghost: Settings */}
|
||||
<Link
|
||||
href="/settings"
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "9px 20px",
|
||||
background: "transparent",
|
||||
color: "var(--text-2)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--r)",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 500,
|
||||
textDecoration: "none",
|
||||
transition: "all 0.15s ease",
|
||||
}}
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
175
apps/web/src/app/not-found.tsx
Normal file
175
apps/web/src/app/not-found.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import type { Metadata } from "next";
|
||||
import type { ReactElement } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "404 — Page Not Found | Mosaic Stack",
|
||||
};
|
||||
|
||||
export default function NotFound(): ReactElement {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
minHeight: "100vh",
|
||||
background: "var(--bg)",
|
||||
padding: "24px",
|
||||
textAlign: "center",
|
||||
gap: "32px",
|
||||
}}
|
||||
>
|
||||
{/* Mosaic logo mark — inline spans replicating the 5-element logo */}
|
||||
<div
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
position: "relative",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
role="img"
|
||||
aria-label="Mosaic logo"
|
||||
>
|
||||
{/* Top-left: blue */}
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 19,
|
||||
height: 19,
|
||||
borderRadius: 4,
|
||||
background: "var(--ms-blue-500)",
|
||||
}}
|
||||
/>
|
||||
{/* Top-right: purple */}
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
width: 19,
|
||||
height: 19,
|
||||
borderRadius: 4,
|
||||
background: "var(--ms-purple-500)",
|
||||
}}
|
||||
/>
|
||||
{/* Bottom-right: teal */}
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 19,
|
||||
height: 19,
|
||||
borderRadius: 4,
|
||||
background: "var(--ms-teal-500)",
|
||||
}}
|
||||
/>
|
||||
{/* Bottom-left: amber */}
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: 19,
|
||||
height: 19,
|
||||
borderRadius: 4,
|
||||
background: "var(--ms-amber-500)",
|
||||
}}
|
||||
/>
|
||||
{/* Center: pink circle */}
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 15,
|
||||
height: 15,
|
||||
borderRadius: "50%",
|
||||
background: "var(--ms-pink-500)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 404 gradient text */}
|
||||
<h1
|
||||
style={{
|
||||
fontFamily: "var(--mono)",
|
||||
fontSize: "6rem",
|
||||
fontWeight: 700,
|
||||
lineHeight: 1,
|
||||
margin: 0,
|
||||
background: "linear-gradient(135deg, var(--ms-blue-400), var(--ms-purple-500))",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
backgroundClip: "text",
|
||||
}}
|
||||
>
|
||||
404
|
||||
</h1>
|
||||
|
||||
{/* Heading + description */}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "1.5rem",
|
||||
fontWeight: 600,
|
||||
color: "var(--text)",
|
||||
margin: 0,
|
||||
letterSpacing: "-0.025em",
|
||||
}}
|
||||
>
|
||||
Page not found
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "0.9375rem",
|
||||
color: "var(--muted)",
|
||||
margin: 0,
|
||||
maxWidth: "400px",
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
The page you're looking for doesn't exist or has been moved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Dashboard link styled as button */}
|
||||
<Link
|
||||
href="/"
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "10px 24px",
|
||||
background: "var(--ms-blue-500)",
|
||||
color: "#ffffff",
|
||||
borderRadius: "var(--r)",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 500,
|
||||
textDecoration: "none",
|
||||
transition: "opacity 0.15s ease",
|
||||
}}
|
||||
>
|
||||
Go to Dashboard
|
||||
</Link>
|
||||
|
||||
{/* Subtle status footer */}
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "var(--mono)",
|
||||
fontSize: "0.75rem",
|
||||
color: "var(--muted)",
|
||||
margin: 0,
|
||||
opacity: 0.6,
|
||||
}}
|
||||
>
|
||||
HTTP 404 — Not Found
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user