Skip to content

Commit 1d47c8f

Browse files
KaranUniqueKaranUnique
authored
Merge pull request #432 from dinesh-2047/404
custom 404 error page added
2 parents b29f69a + 5957b39 commit 1d47c8f

3 files changed

Lines changed: 246 additions & 38 deletions

File tree

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Common/PageNotFound.css‎

Lines changed: 193 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,204 @@
1-
.container{
2-
text-align: center;
3-
height:70vh !important;
1+
.not-found {
2+
position: relative;
3+
min-height: calc(100vh - 120px);
4+
display: grid;
5+
place-items: center;
6+
padding: clamp(2.25rem, 6vw, 5rem) 1rem;
7+
margin-top: clamp(1rem, 2.5vw, 2rem);
8+
overflow: hidden;
9+
isolation: isolate;
10+
}
11+
12+
.not-found__bg-orb {
13+
position: absolute;
14+
width: clamp(220px, 28vw, 420px);
15+
aspect-ratio: 1;
16+
border-radius: 50%;
17+
filter: blur(36px);
18+
opacity: 0.22;
19+
z-index: -1;
20+
animation: orb-drift 11s ease-in-out infinite alternate;
21+
}
22+
23+
.not-found__bg-orb--left {
24+
background: radial-gradient(circle at 30% 30%, rgba(0, 243, 255, 0.88), rgba(0, 243, 255, 0));
25+
top: 8%;
26+
left: -8%;
27+
}
28+
29+
.not-found__bg-orb--right {
30+
background: radial-gradient(circle at 40% 40%, rgba(188, 0, 221, 0.85), rgba(188, 0, 221, 0));
31+
bottom: 2%;
32+
right: -10%;
33+
animation-duration: 14s;
34+
}
35+
36+
.not-found__card {
37+
width: min(760px, 100%);
38+
padding: clamp(1.5rem, 3.3vw, 3rem);
39+
border-radius: 28px;
40+
text-align: center;
41+
position: relative;
42+
overflow: hidden;
43+
}
44+
45+
.not-found__card::before {
46+
content: "";
47+
position: absolute;
48+
inset: 0;
49+
background: linear-gradient(115deg, rgba(0, 243, 255, 0.12), rgba(188, 0, 221, 0.08) 50%, transparent 100%);
50+
pointer-events: none;
51+
}
52+
53+
.not-found__eyebrow {
54+
letter-spacing: 0.2em;
55+
text-transform: uppercase;
56+
color: var(--text-muted);
57+
font-size: 0.8rem;
58+
font-weight: 600;
59+
margin-bottom: 0.65rem;
60+
}
61+
62+
.not-found__code-wrap {
63+
position: relative;
64+
display: inline-grid;
65+
place-items: center;
66+
margin-bottom: 1.1rem;
67+
}
68+
69+
.not-found__code,
70+
.not-found__code-shadow {
71+
font-family: "JetBrains Mono", monospace;
72+
font-size: clamp(4rem, 13vw, 8.25rem);
73+
line-height: 0.95;
74+
font-weight: 800;
75+
letter-spacing: 0.03em;
76+
}
77+
78+
.not-found__code {
79+
color: #fff;
80+
text-shadow: 0 0 18px rgba(0, 243, 255, 0.44), 0 0 32px rgba(188, 0, 221, 0.4);
81+
animation: code-float 2.8s ease-in-out infinite;
82+
position: relative;
83+
z-index: 1;
84+
}
85+
86+
.not-found__code-shadow {
87+
position: absolute;
88+
color: transparent;
89+
-webkit-text-stroke: 1px rgba(0, 243, 255, 0.45);
90+
transform: translate(4px, 4px);
91+
filter: blur(0.35px);
92+
}
93+
94+
.not-found__subtitle {
95+
font-size: clamp(1.1rem, 2.2vw, 1.45rem);
96+
font-weight: 600;
97+
margin-bottom: 0.7rem;
98+
}
99+
100+
.not-found__text {
101+
max-width: 60ch;
102+
margin: 0 auto;
103+
font-size: clamp(0.95rem, 1.9vw, 1.05rem);
104+
line-height: 1.72;
105+
color: rgba(255, 255, 255, 0.8);
106+
}
107+
108+
.not-found__actions {
109+
margin-top: 1.85rem;
4110
display: flex;
5-
flex-direction: column;
111+
flex-wrap: wrap;
6112
justify-content: center;
113+
gap: 0.85rem;
114+
}
115+
116+
.not-found__btn {
117+
border: 1px solid transparent;
118+
border-radius: 12px;
119+
padding: 0.78rem 1.12rem;
120+
display: inline-flex;
7121
align-items: center;
122+
gap: 0.5rem;
123+
font-weight: 600;
124+
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
8125
}
9-
.container h1{
10-
font-size: 3.5rem;
11-
margin-bottom: 1rem;
126+
127+
.not-found__btn:hover {
128+
transform: translateY(-2px);
12129
}
13-
.container h1:hover{
14-
color: #007bff;
15-
transition: color 0.3s ease;
130+
131+
.not-found__btn--primary {
132+
color: #091018;
133+
background: linear-gradient(90deg, var(--neon-cyan), #7dfcff 70%);
134+
box-shadow: 0 10px 28px rgba(0, 243, 255, 0.26);
16135
}
17-
.container h1::after{
18-
content: '';
19-
display: block;
20-
width: 50px;
21-
height: 4px;
22-
background-color: #007bff;
23-
margin: 0.5rem auto 0;
24-
border-radius: 2px;
136+
137+
.not-found__btn--primary:hover {
138+
box-shadow: 0 14px 34px rgba(0, 243, 255, 0.35);
25139
}
26-
.container h1::after:hover{
27-
background-color: #0056b3;
28-
transition: background-color 0.3s ease;
140+
141+
.not-found__btn--ghost {
142+
background: rgba(255, 255, 255, 0.03);
143+
border-color: rgba(255, 255, 255, 0.15);
144+
color: #f4f4f4;
145+
cursor: pointer;
29146
}
30147

31-
.container p{
32-
font-size: 1.5rem;
33-
margin-bottom: 2rem;
148+
.not-found__btn--ghost:hover {
149+
border-color: rgba(0, 243, 255, 0.45);
150+
box-shadow: 0 0 22px rgba(0, 243, 255, 0.13);
34151
}
35-
.back-home{
36-
text-decoration: none !important;
152+
153+
@keyframes orb-drift {
154+
0% {
155+
transform: translate3d(0, 0, 0) scale(1);
156+
}
157+
100% {
158+
transform: translate3d(18px, -26px, 0) scale(1.08);
159+
}
160+
}
161+
162+
@keyframes code-float {
163+
0%,
164+
100% {
165+
transform: translateY(0);
166+
}
167+
50% {
168+
transform: translateY(-6px);
169+
}
170+
}
171+
172+
@media (max-width: 640px) {
173+
.not-found {
174+
min-height: calc(100vh - 80px);
175+
padding-top: 1.4rem;
176+
margin-top: 0.75rem;
177+
}
178+
179+
.not-found__card {
180+
border-radius: 20px;
181+
padding: 1.35rem 1rem 1.5rem;
182+
}
183+
184+
.not-found__actions {
185+
flex-direction: column;
186+
width: 100%;
187+
}
188+
189+
.not-found__btn {
190+
justify-content: center;
191+
width: 100%;
192+
}
193+
}
194+
195+
@media (prefers-reduced-motion: reduce) {
196+
.not-found__bg-orb,
197+
.not-found__code {
198+
animation: none;
199+
}
200+
201+
.not-found__btn {
202+
transition: none;
203+
}
37204
}

‎src/components/Common/PageNotFound.jsx‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,46 @@
1-
import React from 'react'
2-
import { Link } from 'react-router-dom'
3-
import "./PageNotFound.css"
1+
import React from "react";
2+
import { Link, useNavigate } from "react-router-dom";
3+
import { FiArrowLeft, FiCompass } from "react-icons/fi";
4+
import "./PageNotFound.css";
45

56
const PageNotFound = () => {
7+
const navigate = useNavigate();
8+
69
return (
7-
<div className='container'>
8-
<h1>404</h1>
9-
<p>Oops! Page Not Found</p>
10-
<Link className="back-home" to="/">Go back to Home</Link>
11-
</div>
12-
)
13-
}
14-
15-
export default PageNotFound
10+
<section className="not-found" aria-labelledby="not-found-title">
11+
<div className="not-found__bg-orb not-found__bg-orb--left" aria-hidden="true" />
12+
<div className="not-found__bg-orb not-found__bg-orb--right" aria-hidden="true" />
13+
14+
<div className="not-found__card glass-panel" data-aos="zoom-in" data-aos-duration="800">
15+
<p className="not-found__eyebrow">Signal Lost</p>
16+
17+
<div className="not-found__code-wrap" aria-hidden="true">
18+
<span className="not-found__code-shadow">404</span>
19+
<h1 id="not-found-title" className="not-found__code">404</h1>
20+
</div>
21+
22+
<p className="not-found__subtitle">This route drifted outside the market map.</p>
23+
<p className="not-found__text">
24+
The page you requested does not exist or has been moved. Jump back to the dashboard pulse and continue tracking live crypto signals.
25+
</p>
26+
27+
<div className="not-found__actions">
28+
<Link className="not-found__btn not-found__btn--primary" to="/">
29+
<FiCompass size={18} aria-hidden="true" />
30+
<span>Explore Home</span>
31+
</Link>
32+
<button
33+
type="button"
34+
className="not-found__btn not-found__btn--ghost"
35+
onClick={() => navigate(-1)}
36+
>
37+
<FiArrowLeft size={18} aria-hidden="true" />
38+
<span>Go Back</span>
39+
</button>
40+
</div>
41+
</div>
42+
</section>
43+
);
44+
};
45+
46+
export default PageNotFound;

0 commit comments

Comments
 (0)