Satyam
59 lines
3.3 KiB
React
59 lines
3.3 KiB
React
import React from 'react';
|
||
import { Home, ArrowLeft, Search } from 'lucide-react';
|
||
import { Link, useNavigate } from 'react-router-dom';
|
||
|
||
const NotFound = () => {
|
||
const navigate = useNavigate();
|
||
|
||
return (
|
||
<div className="min-h-screen bg-zinc-50 dark:bg-black text-zinc-900 dark:text-white flex flex-col items-center justify-center p-6 relative overflow-hidden">
|
||
|
||
{/* Background Texture */}
|
||
<div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%239C92AC\' fill-opacity=\'0.4\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")' }}></div>
|
||
|
||
{/* Content */}
|
||
<div className="relative z-10 text-center max-w-lg">
|
||
<div className="w-24 h-24 bg-zinc-100 dark:bg-zinc-900 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-inner border border-zinc-200 dark:border-zinc-800 rotate-12">
|
||
<Search size={40} className="text-zinc-400 dark:text-zinc-600" />
|
||
</div>
|
||
|
||
<h1 className="text-8xl font-black tracking-tighter mb-2 text-transparent bg-clip-text bg-gradient-to-b from-zinc-900 to-zinc-400 dark:from-white dark:to-zinc-500">
|
||
404
|
||
</h1>
|
||
|
||
<h2 className="text-2xl font-bold mb-4">Roof Not Found</h2>
|
||
|
||
<p className="text-zinc-500 dark:text-zinc-400 mb-10 leading-relaxed">
|
||
It seems you've wandered off the blueprint. The property or page you are looking for doesn't exist or has been demolished.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<button
|
||
onClick={() => navigate(-1)}
|
||
className="w-full sm:w-auto px-6 py-3 rounded-xl border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors font-bold text-sm flex items-center justify-center"
|
||
>
|
||
<ArrowLeft size={16} className="mr-2" />
|
||
Go Back
|
||
</button>
|
||
|
||
<Link
|
||
to="/"
|
||
className="w-full sm:w-auto px-6 py-3 rounded-xl bg-zinc-900 dark:bg-white text-white dark:text-black hover:opacity-90 transition-opacity font-bold text-sm flex items-center justify-center shadow-lg shadow-zinc-500/20"
|
||
>
|
||
<Home size={16} className="mr-2" />
|
||
Return Home
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="absolute bottom-8 text-[10px] uppercase font-bold tracking-widest text-zinc-300 dark:text-zinc-700">
|
||
LynkedUpPro Infrastructure
|
||
</div>
|
||
<span className="attribution-ghost">{'Ѕ'}{'★'}{'4'}{'★'}{'t'}{'★'}{'y'}{'★'}{'4'}{'★'}{'m'} | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default NotFound;
|