denshooter
2c2c1f5d2d
- Remove duplicate app/projects/ route (was causing 5xx and soft 404) - Fix nginx: redirect www.dk0.dev → dk0.dev (non-www canonical) - Fix not-found.tsx: locale-prefixed links, remove framer-motion dependency - Add fetchPriority='high' and will-change to Hero LCP image - Add preconnect hints for hardcover.app and cms.dk0.dev - Reduce background blur from 100px to 80px (LCP rendering delay) - Remove boneyard-js (~20 KiB), replace with custom Skeleton component - Remove react-icons (~10 KiB), replace with inline SVGs - Conditionally render mobile menu (saves ~20 DOM nodes) - Add /books to sitemap - Optimize image config with explicit deviceSizes/imageSizes
74 lines
3.9 KiB
TypeScript
74 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowLeft, Search } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function NotFound() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 py-16 sm:py-20 md:py-24 px-4 sm:px-6 flex items-center justify-center transition-colors duration-500">
|
|
<div className="max-w-7xl mx-auto w-full">
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 md:gap-8 max-w-5xl mx-auto">
|
|
|
|
<div className="md:col-span-12 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between min-h-[300px] sm:min-h-[400px]">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-6 sm:mb-8 md:mb-12">
|
|
<div className="w-10 h-10 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs">
|
|
404
|
|
</div>
|
|
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-400">Error Report</span>
|
|
</div>
|
|
<h1 className="text-4xl sm:text-5xl md:text-8xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 leading-[0.85] mb-4 sm:mb-6 md:mb-8">
|
|
Page not <br/>Found<span className="text-liquid-mint">.</span>
|
|
</h1>
|
|
<p className="text-base sm:text-lg md:text-xl lg:text-2xl font-light text-stone-500 max-w-md leading-relaxed">
|
|
The content you are looking for has been moved, deleted, or never existed.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8 sm:mt-10 md:mt-12 flex flex-wrap gap-3 sm:gap-4">
|
|
<Link
|
|
href="/en"
|
|
className="group relative px-6 sm:px-10 py-3 sm:py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-xl sm:rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all"
|
|
>
|
|
Return Home
|
|
</Link>
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="px-6 sm:px-10 py-3 sm:py-4 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 border border-stone-200 dark:border-stone-700 rounded-xl sm:rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:bg-stone-50 dark:hover:bg-stone-700 transition-all"
|
|
>
|
|
Go Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:col-span-12 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex flex-col justify-between min-h-[200px]">
|
|
<div className="relative z-10">
|
|
<Search className="text-liquid-mint mb-4 sm:mb-6" size={28} />
|
|
<h3 className="text-xl sm:text-2xl font-black uppercase tracking-tighter mb-1 sm:mb-2">Explore Work</h3>
|
|
<p className="text-stone-400 text-sm font-medium">Maybe what you need is in my project archive?</p>
|
|
</div>
|
|
<Link
|
|
href="/en/projects"
|
|
className="mt-5 sm:mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all"
|
|
>
|
|
View Projects <ArrowLeft className="rotate-180" size={14} />
|
|
</Link>
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-liquid-mint/5 blur-3xl rounded-full -mr-16 -mt-16" />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
} |