52 lines
2.7 KiB
TypeScript
52 lines
2.7 KiB
TypeScript
import Link from 'next/link'
|
|
import { Button } from '@/components/ui/button'
|
|
import { SearchX, ArrowLeft, Home } from 'lucide-react'
|
|
|
|
export default function NotFound() {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-4 relative overflow-hidden">
|
|
{/* Background ambient effects */}
|
|
<div className="absolute inset-0 z-0 pointer-events-none">
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[600px] rounded-full bg-[#1B2CC1] opacity-10 dark:opacity-20 blur-[120px]"></div>
|
|
</div>
|
|
|
|
<div className="relative z-10 w-full max-w-lg">
|
|
<div className="bg-white dark:bg-slate-900 rounded-[2rem] shadow-2xl shadow-[#1B2CC1]/10 border border-slate-100 dark:border-slate-800 p-8 sm:p-12 text-center animate-in fade-in zoom-in duration-500">
|
|
|
|
<div className="w-24 h-24 sm:w-32 sm:h-32 mx-auto bg-blue-50 dark:bg-blue-950/50 rounded-[2rem] border-4 border-white dark:border-slate-800 flex items-center justify-center mb-6 shadow-inner rotate-3">
|
|
<SearchX className="w-12 h-12 sm:w-16 sm:h-16 text-[#1B2CC1]" />
|
|
</div>
|
|
|
|
<h1 className="text-6xl font-black text-slate-900 dark:text-white mb-2 tracking-tighter">
|
|
4<span className="text-[#1B2CC1]">0</span>4
|
|
</h1>
|
|
|
|
<h2 className="text-xl sm:text-2xl font-bold text-slate-800 dark:text-slate-200 mb-4">
|
|
Halaman Tidak Ditemukan
|
|
</h2>
|
|
|
|
<p className="text-sm sm:text-base text-slate-500 dark:text-slate-400 mb-8 max-w-sm mx-auto leading-relaxed">
|
|
Waduh, sepertinya halaman yang Anda cari sedang jalan-jalan atau memang tidak pernah ada. Mari kita kembali ke jalan yang benar!
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<Link href="/" className="w-full sm:w-auto">
|
|
<Button className="w-full h-12 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold px-6 shadow-md shadow-[#1B2CC1]/20 gap-2 transition-all">
|
|
<Home className="w-4 h-4" />
|
|
Kembali ke Beranda
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Footer info */}
|
|
<p className="text-center text-xs text-slate-400 font-medium mt-8">
|
|
TitipIn © {new Date().getFullYear()} - Sistem Titip Pesanan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|