9aaf7512ff
Fixes: - Chart hover dot now uses DOM element instead of SVG circle (no more squished dots) - Chart hover line uses proper stroke-dasharray - Tooltip positioning improved New Components: - Shimmer.tsx: Unified shimmer component for loading/locked states - 404 Page: Professional not-found page with navigation options Consistency improvements identified for future: - All pages now use consistent Header/Footer - Trend colors standardized (orange=up, green=down) - Typography system follows design tokens
69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { Header } from '@/components/Header'
|
|
import { Footer } from '@/components/Footer'
|
|
import { Home, Search, ArrowLeft } from 'lucide-react'
|
|
|
|
export default function NotFound() {
|
|
return (
|
|
<div className="min-h-screen bg-background relative flex flex-col">
|
|
{/* Ambient glow */}
|
|
<div className="fixed inset-0 pointer-events-none">
|
|
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
<Header />
|
|
|
|
<main className="relative flex-1 flex items-center justify-center px-4 sm:px-6 py-20">
|
|
<div className="text-center max-w-md">
|
|
{/* 404 Number */}
|
|
<div className="mb-8">
|
|
<span className="font-mono text-[8rem] sm:text-[10rem] leading-none font-bold text-foreground/[0.06] select-none">
|
|
404
|
|
</span>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<h1 className="font-display text-[2rem] sm:text-[2.5rem] leading-[1.1] tracking-[-0.03em] text-foreground mb-4">
|
|
Page not found
|
|
</h1>
|
|
<p className="text-body text-foreground-muted mb-10">
|
|
The page you're looking for doesn't exist or has been moved.
|
|
</p>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3 bg-foreground text-background font-medium rounded-xl hover:bg-foreground/90 transition-all"
|
|
>
|
|
<Home className="w-4 h-4" />
|
|
Go Home
|
|
</Link>
|
|
<Link
|
|
href="/tld-pricing"
|
|
className="flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3 bg-background-secondary border border-border text-foreground font-medium rounded-xl hover:border-border-hover hover:bg-background-secondary/80 transition-all"
|
|
>
|
|
<Search className="w-4 h-4" />
|
|
Browse TLDs
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Back Link */}
|
|
<button
|
|
onClick={() => window.history.back()}
|
|
className="mt-8 inline-flex items-center gap-2 text-body-sm text-foreground-muted hover:text-foreground transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Go back
|
|
</button>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|
|
|