-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathNotFoundPage.jsx
More file actions
86 lines (76 loc) · 3.17 KB
/
NotFoundPage.jsx
File metadata and controls
86 lines (76 loc) · 3.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { WarningIcon, ArrowLeftIcon } from '@phosphor-icons/react';
import Seo from '../components/Seo';
import { useAchievements } from '../context/AchievementContext';
const NotFoundPage = () => {
const { unlockAchievement } = useAchievements();
useEffect(() => {
const visits = parseInt(localStorage.getItem('wrongs') || '0', 10) + 1;
localStorage.setItem('wrongs', visits.toString());
if (visits >= 3) {
unlockAchievement('glitch_in_the_matrix');
}
}, [unlockAchievement]);
return (
<div className="min-h-screen bg-[#050505] text-white font-mono flex flex-col items-center justify-center p-4 relative overflow-hidden">
<Seo
title="404 | DATA_NOT_FOUND"
description="System Error: The requested data segment could not be located."
/>
{/* Background Noise/Grid */}
<div
className="absolute inset-0 opacity-10 pointer-events-none"
style={{
backgroundImage:
'linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)',
backgroundSize: '40px 40px',
}}
/>
<div className="relative z-10 max-w-2xl w-full border-2 border-white p-8 md:p-12 bg-black/50 backdrop-blur-sm">
<div className="flex items-center gap-4 mb-8 text-red-500 animate-pulse">
<WarningIcon size={32} weight="bold" />
<span className="text-xl font-bold uppercase tracking-widest">
System_Error: 404
</span>
</div>
<h1 className="text-6xl md:text-8xl font-black uppercase tracking-tighter leading-none mb-8">
Data_Not
<br />
Found
</h1>
<div className="space-y-4 mb-12 text-sm md:text-base text-gray-400">
<p className="uppercase tracking-wider">
> Querying database...{' '}
<span className="text-red-500">FAILED</span>
</p>
<p className="uppercase tracking-wider">
> Locating asset... <span className="text-red-500">NULL</span>
</p>
<p className="uppercase tracking-wider">
> Diagnostic: The requested URL endpoint does not exist in the
current spacetime coordinate system.
</p>
</div>
<div className="flex flex-col md:flex-row gap-4">
<Link
to="/"
className="group flex items-center justify-center gap-3 bg-white text-black px-8 py-4 font-bold uppercase tracking-widest text-sm hover:bg-emerald-400 transition-colors w-full md:w-auto"
>
<ArrowLeftIcon
size={20}
weight="bold"
className="group-hover:-translate-x-1 transition-transform"
/>
Return_To_Base
</Link>
</div>
</div>
<div className="absolute bottom-8 left-8 right-8 flex justify-between text-[10px] uppercase tracking-[0.2em] text-gray-600 font-bold">
<span>ERR_CODE: 404_NOT_FOUND</span>
<span>SYS_STATUS: UNSTABLE</span>
</div>
</div>
);
};
export default NotFoundPage;