Skip to content

Commit 615fd39

Browse files
fezcodefezcode
committed
fix: loading and 404 page.
1 parent ab4cf84 commit 615fd39

File tree

2 files changed

+68
-29
lines changed

2 files changed

+68
-29
lines changed

‎src/components/Loading.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import React from 'react';
2-
import { CircleNotch } from '@phosphor-icons/react';
32

43
const Loading = () => {
54
return (
6-
<div className="flex items-center justify-center h-screen w-full bg-gray-900 text-primary-500">
7-
<CircleNotch size={48} className="animate-spin" />
5+
<div className="flex flex-col items-center justify-center h-screen w-full bg-[#050505] text-white font-mono uppercase tracking-widest gap-4">
6+
<div className="flex items-center gap-2">
7+
<span className="w-2 h-2 bg-emerald-500 animate-pulse" />
8+
<span className="animate-pulse">Loading_System_Resources...</span>
9+
</div>
10+
<div className="w-64 h-1 bg-gray-800 rounded-full overflow-hidden">
11+
<div className="h-full bg-emerald-500 animate-progress origin-left" />
12+
</div>
813
</div>
914
);
1015
};

‎src/pages/NotFoundPage.js‎

Lines changed: 60 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from 'react';
22
import { Link } from 'react-router-dom';
3-
import { ArrowLeftIcon } from '@phosphor-icons/react';
3+
import { Warning, ArrowLeft } from '@phosphor-icons/react';
44
import Seo from '../components/Seo';
55
import { useAchievements } from '../context/AchievementContext';
66

@@ -17,33 +17,67 @@ const NotFoundPage = () => {
1717
}, [unlockAchievement]);
1818

1919
return (
20-
<div className="text-center mt-20 mb-20">
20+
<div className="min-h-screen bg-[#050505] text-white font-mono flex flex-col items-center justify-center p-4 relative overflow-hidden">
2121
<Seo
22-
title="404 - Page Not Found | Fezcodex"
23-
description="The page you are looking for does not exist."
24-
keywords={['Fezcodex', '404', 'not found']}
25-
ogTitle="404 - Page Not Found | Fezcodex"
26-
ogDescription="The page you are looking for does not exist."
27-
ogImage="/images/asset/ogtitle.png"
28-
twitterCard="summary_large_image"
29-
twitterTitle="404 - Page Not Found | Fezcodex"
30-
twitterDescription="The page you are looking for does not exist."
31-
twitterImage="/images/asset/ogtitle.png"
22+
title="404 | DATA_NOT_FOUND"
23+
description="System Error: The requested data segment could not be located."
3224
/>
33-
<h1 className="text-9xl font-bold text-gray-400">404</h1>
34-
<p className="text-2xl md:text-3xl font-light mb-8 text-white">
35-
{' '}
36-
{/* Added text-white class */}
37-
Sorry, the page you are looking for does not exist.
38-
</p>
39-
<Link
40-
to="/"
41-
className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg"
42-
>
43-
{' '}
44-
{/* Changed styling and text */}
45-
<ArrowLeftIcon size={24} /> Back to Home
46-
</Link>
25+
26+
{/* Background Noise/Grid */}
27+
<div
28+
className="absolute inset-0 opacity-10 pointer-events-none"
29+
style={{
30+
backgroundImage:
31+
'linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)',
32+
backgroundSize: '40px 40px',
33+
}}
34+
/>
35+
36+
<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">
37+
<div className="flex items-center gap-4 mb-8 text-red-500 animate-pulse">
38+
<Warning size={32} weight="bold" />
39+
<span className="text-xl font-bold uppercase tracking-widest">
40+
System_Error: 404
41+
</span>
42+
</div>
43+
44+
<h1 className="text-6xl md:text-8xl font-black uppercase tracking-tighter leading-none mb-8">
45+
Data_Not
46+
<br />
47+
Found
48+
</h1>
49+
50+
<div className="space-y-4 mb-12 text-sm md:text-base text-gray-400">
51+
<p className="uppercase tracking-wider">
52+
&gt; Querying database... <span className="text-red-500">FAILED</span>
53+
</p>
54+
<p className="uppercase tracking-wider">
55+
&gt; Locating asset... <span className="text-red-500">NULL</span>
56+
</p>
57+
<p className="uppercase tracking-wider">
58+
&gt; Diagnostic: The requested URL endpoint does not exist in the current spacetime coordinate system.
59+
</p>
60+
</div>
61+
62+
<div className="flex flex-col md:flex-row gap-4">
63+
<Link
64+
to="/"
65+
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"
66+
>
67+
<ArrowLeft
68+
size={20}
69+
weight="bold"
70+
className="group-hover:-translate-x-1 transition-transform"
71+
/>
72+
Return_To_Base
73+
</Link>
74+
</div>
75+
</div>
76+
77+
<div className="absolute bottom-8 left-8 right-8 flex justify-between text-[10px] uppercase tracking-[0.2em] text-gray-600 font-bold">
78+
<span>ERR_CODE: 404_NOT_FOUND</span>
79+
<span>SYS_STATUS: UNSTABLE</span>
80+
</div>
4781
</div>
4882
);
4983
};

0 commit comments

Comments
 (0)