51 lines
2.7 KiB
TypeScript
51 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="relative flex min-h-screen items-center justify-center overflow-hidden bg-slate-50 p-4 dark:bg-slate-950">
|
|
{/* Background ambient effects */}
|
|
<div className="pointer-events-none absolute inset-0 z-0">
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] bg-[size:24px_24px]"></div>
|
|
<div className="absolute top-1/2 left-1/2 h-[400px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#1B2CC1] opacity-10 blur-[120px] dark:opacity-20"></div>
|
|
</div>
|
|
|
|
<div className="relative z-10 w-full max-w-lg">
|
|
<div className="animate-in fade-in zoom-in rounded-[2rem] border border-slate-100 bg-white p-8 text-center shadow-2xl shadow-[#1B2CC1]/10 duration-500 sm:p-12 dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="mx-auto mb-6 flex h-24 w-24 rotate-3 items-center justify-center rounded-[2rem] border-4 border-white bg-blue-50 shadow-inner sm:h-32 sm:w-32 dark:border-slate-800 dark:bg-blue-950/50">
|
|
<SearchX className="h-12 w-12 text-[#1B2CC1] sm:h-16 sm:w-16" />
|
|
</div>
|
|
|
|
<h1 className="mb-2 text-6xl font-black tracking-tighter text-slate-900 dark:text-white">
|
|
4<span className="text-[#1B2CC1]">0</span>4
|
|
</h1>
|
|
|
|
<h2 className="mb-4 text-xl font-bold text-slate-800 sm:text-2xl dark:text-slate-200">
|
|
Halaman Tidak Ditemukan
|
|
</h2>
|
|
|
|
<p className="mx-auto mb-8 max-w-sm text-sm leading-relaxed text-slate-500 sm:text-base dark:text-slate-400">
|
|
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 justify-center gap-3 sm:flex-row">
|
|
<Link href="/" className="w-full sm:w-auto">
|
|
<Button className="h-12 w-full gap-2 rounded-xl bg-[#1B2CC1] px-6 font-bold text-white shadow-md shadow-[#1B2CC1]/20 transition-all hover:bg-[#15229E]">
|
|
<Home className="h-4 w-4" />
|
|
Kembali ke Beranda
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer info */}
|
|
<p className="mt-8 text-center text-xs font-medium text-slate-400">
|
|
TitipIn © {new Date().getFullYear()} - Sistem Titip Pesanan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|