47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Header } from "@/components/header";
|
|
import { useT } from "@/components/locale-provider";
|
|
|
|
export default function NotFound() {
|
|
const t = useT();
|
|
return (
|
|
<main id="main-content" className="min-h-screen bg-background text-foreground">
|
|
<Header />
|
|
<div className="mx-auto max-w-[80rem] px-6 py-28 md:py-40">
|
|
<div className="relative">
|
|
<span
|
|
aria-hidden
|
|
className="pointer-events-none absolute -top-8 right-0 select-none font-mono text-[clamp(6rem,22vw,18rem)] font-medium leading-none tracking-[-0.05em] text-foreground/[0.04]"
|
|
>
|
|
404
|
|
</span>
|
|
<p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
|
|
{t({ en: "404 — Not found", sv: "404 — Sidan hittades ej" })}
|
|
</p>
|
|
<h1 className="mt-5 max-w-[14ch] text-[clamp(2.6rem,7vw,5.5rem)] font-medium leading-[0.95] tracking-[-0.035em]">
|
|
{t({ en: "This page doesn't exist.", sv: "Den här sidan finns inte." })}
|
|
</h1>
|
|
<p className="mt-6 max-w-[40ch] font-mono text-sm text-muted-foreground">
|
|
{t({ en: "The link may be outdated or the page was moved. Nothing guessed.", sv: "Länken kan vara inaktuell eller sidan har flyttats. Inget gissades." })}
|
|
</p>
|
|
<div className="mt-12 flex flex-wrap gap-3">
|
|
<Link
|
|
href="/"
|
|
className="bg-foreground px-7 py-4 font-mono text-[12px] uppercase tracking-[0.14em] text-background transition-colors hover:bg-[var(--accent-red)]"
|
|
>
|
|
{t({ en: "Home →", sv: "Hem →" })}
|
|
</Link>
|
|
<Link
|
|
href="/katalog"
|
|
className="border border-foreground px-7 py-4 font-mono text-[12px] uppercase tracking-[0.14em] transition-colors hover:bg-foreground hover:text-background"
|
|
>
|
|
{t({ en: "Catalog", sv: "Katalog" })}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
} |