feat(i18n): localize 404 not-found page (EN base + SV toggle)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-25 18:22:32 +02:00
co-authored by Claude Sonnet 4.6
parent 580d1aca33
commit ff6273af64
+10 -6
View File
@@ -1,7 +1,11 @@
import Link from "next/link";
"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 />
@@ -14,26 +18,26 @@ export default function NotFound() {
404
</span>
<p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
404 — Not found
{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]">
This page doesn&apos;t exist.
{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">
The link may be outdated or the page was moved. Nothing guessed.
{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)]"
>
Home →
{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"
>
Catalog
{t({ en: "Catalog", sv: "Katalog" })}
</Link>
</div>
</div>