Skip to content

bring 404 page closer to the designs #2197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 21, 2025
Merged

bring 404 page closer to the designs #2197

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9af0bc
Bring 404 page closer to the designs
hasparus Oct 21, 2025
295d44c
Support dark mode
hasparus Oct 21, 2025
323341c
Use next-themes
hasparus Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 41 additions & 11 deletions src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@

import { usePathname } from "next/navigation"
import { useMounted } from "nextra/hooks"
// @ts-expect-error
import { ThemeProvider } from "next-themes"

import { NewFontsStyleTag } from "./fonts"
import { Button } from "./conf/_design-system/button"

import "@/globals.css"
import "@/app/colors.css"

export default function Page() {
const pathname = usePathname()
Expand All @@ -22,16 +30,38 @@ export default function Page() {
}/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`

return (
<div className="flex h-dvh flex-col items-center justify-center">
<h1 className="text-4xl text-white">404: Page Not Found</h1>
<a
href={url}
target="_blank"
rel="noreferrer"
className="mt-6 text-primary underline decoration-from-font [text-underline-position:from-font]"
>
Submit an issue about broken link →
</a>
</div>
<ThemeProvider attribute="class">
<div className="flex h-dvh flex-col items-center justify-center gap-8 bg-neu-0 font-sans lg:gap-10">
<NewFontsStyleTag />
<FourOhFourIcon className="text-pri-base" />
<h1 className="text-4xl text-neu-900">Page not found</h1>
<div className="flex gap-4">
<Button variant="primary" href={url}>
Submit an issue about broken link
</Button>
<Button variant="secondary" href="/">
Go back home
</Button>
</div>
</div>
</ThemeProvider>
)
}

function FourOhFourIcon({ className }: { className?: string }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="204"
height="80"
viewBox="0 0 204 80"
fill="currentColor"
className={className}
>
<title>404</title>
<path d="M45.2399 80V57.4806H0V33.8414H11.3411V22.5194H22.5576V11.3219H34.0234V0H57.9519V80H45.2399ZM12.5874 44.9145H45.2399V12.5661H35.2696V23.7636H23.8039V34.9611H12.5874V44.9145Z" />
<path d="M84.3652 80V68.8025H73.0241V11.3219H84.3652V0H119.51V11.3219H130.976V68.8025H119.51V80H84.3652ZM85.6115 67.5583H118.264V12.5661H85.6115V67.5583Z" />
<path d="M191.288 80V57.4806H146.048V33.8414H157.389V22.5194H168.606V11.3219H180.071V0H204V80H191.288ZM158.636 44.9145H191.288V12.5661H181.318V23.7636H169.852V34.9611H158.636V44.9145Z" />
</svg>
)
}