forgejo-lila/lila
1
0
Fork 0
Code Issues 50 Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat: add 404 catch-all route and NotFound page

Browse source
This commit is contained in:
lila 2026-04-24 18:28:22 +02:00
parent 4fabde57bd
commit 4de2c40482
3 changed files with 55 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

43
apps/web/src/components/NotFound.tsx Normal file
View file

@ -0,0 +1,43 @@
import { Link } from "@tanstack/react-router";
export default function NotFound() {
return (
<section className="relative flex flex-col items-center justify-center py-24 text-center overflow-hidden">
<div className="absolute inset-0 -z-10">
<div className="absolute top-0 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
<div className="absolute top-10 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
</div>
<div className="-rotate-1 mb-4">
<span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) px-4 py-1 text-xs font-semibold tracking-widest uppercase text-(--color-accent) border border-(--color-primary-light)">
lost in translation
</span>
</div>
<h1 className="text-8xl font-black tracking-tight text-(--color-text) leading-none">
4
<span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
0
</span>
4
</h1>
<p className="mt-6 text-lg font-medium text-(--color-text-muted) max-w-sm">
This page doesn't exist. Maybe it never did - or maybe you{" "}
<span className="text-(--color-accent) font-bold">
just guessed wrong
</span>
.
</p>
<div className="mt-8">
<Link
to="/"
className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
>
Back to home
</Link>
</div>
</section>
);
}

12
apps/web/src/components/landing/Hero.tsx
View file

@ -7,8 +7,8 @@ const Hero = () => {
return (
<section className="relative pt-10 md:pt-16 pb-10 md:pb-14">
<div className="absolute inset-0 -z-10">
<div className="absolute -top-24 left-1/2 h-72 w-[46rem] -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
<div className="absolute -top-10 left-1/2 h-72 w-[46rem] -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
<div className="absolute -top-24 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
<div className="absolute -top-10 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
</div>
<div className="grid items-center gap-10 md:grid-cols-2">
@ -28,9 +28,11 @@ const Hero = () => {
</h1>
<p className="mt-5 text-lg md:text-xl font-medium text-(--color-text-muted) max-w-xl mx-auto md:mx-0">
A word appears. You pick the translation. You score points.
Then you queue up a room and{" "}
<span className="text-(--color-accent) font-bold">beat friends</span>{" "}
A word appears. You pick the translation. You score points. Then you
queue up a room and{" "}
<span className="text-(--color-accent) font-bold">
beat friends
</span>{" "}
in real time.
</p>

6
apps/web/src/routes/__root.tsx
View file

@ -1,6 +1,7 @@
import { createRootRoute, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import Navbar from "../components/navbar/NavBar";
import NotFound from "../components/NotFound";
const RootLayout = () => {
return (
@ -14,4 +15,7 @@ const RootLayout = () => {
);
};
export const Route = createRootRoute({ component: RootLayout });
export const Route = createRootRoute({
component: RootLayout,
notFoundComponent: NotFound,
});