style: apply consistent code formatting across project files

This commit is contained in:
Firman Ramdhani
2026-09-16 13:14:02 +07:00
parent d5791e759e
commit 51d05653c6
48 changed files with 3585 additions and 2575 deletions
+19 -20
View File
@@ -4,45 +4,44 @@ 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">
<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="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 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="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 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="text-6xl font-black text-slate-900 dark:text-white mb-2 tracking-tighter">
<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="text-xl sm:text-2xl font-bold text-slate-800 dark:text-slate-200 mb-4">
<h2 className="mb-4 text-xl font-bold text-slate-800 sm:text-2xl dark:text-slate-200">
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 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 sm:flex-row gap-3 justify-center">
<div className="flex flex-col justify-center gap-3 sm:flex-row">
<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" />
<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="text-center text-xs text-slate-400 font-medium mt-8">
<p className="mt-8 text-center text-xs font-medium text-slate-400">
TitipIn &copy; {new Date().getFullYear()} - Sistem Titip Pesanan
</p>
</div>