Skip to content

Commit 7742cbe

Browse files
yash-pouranikyash-pouranik
committed
feat: add beautiful custom 404 page for Astro landing app
1 parent c97ffea commit 7742cbe

1 file changed

Lines changed: 186 additions & 0 deletions

File tree

‎apps/landing/src/pages/404.astro‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
---
2+
import BaseLayout from '../layouts/Base.astro';
3+
import Navbar from '../components/Navbar.astro';
4+
import Footer from '../components/Footer.astro';
5+
import { ArrowLeft, Home } from 'lucide-react';
6+
---
7+
8+
<BaseLayout title="404 Page Not Found - urBackend" description="The page you are looking for does not exist on urBackend.">
9+
<Navbar />
10+
11+
<main class="error-page-container">
12+
<!-- Glowing background elements -->
13+
<div class="radial-glow glow-1"></div>
14+
<div class="radial-glow glow-2"></div>
15+
16+
<div class="error-content">
17+
<div class="error-code">404</div>
18+
<div class="error-title">Endpoint Not Found</div>
19+
<p class="error-message">
20+
It looks like the resource you are trying to query does not exist or has been deleted from our database.
21+
</p>
22+
23+
<div class="error-actions">
24+
<a href="/" class="btn-primary-glow">
25+
<Home size={16} />
26+
<span>Back to Home</span>
27+
</a>
28+
<button onclick="window.history.back()" class="btn-secondary-glow">
29+
<ArrowLeft size={16} />
30+
<span>Go Back</span>
31+
</button>
32+
</div>
33+
</div>
34+
</main>
35+
36+
<Footer />
37+
</BaseLayout>
38+
39+
<style>
40+
.error-page-container {
41+
min-height: 80vh;
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
position: relative;
46+
overflow: hidden;
47+
background-color: #030303;
48+
padding: 2rem;
49+
}
50+
51+
.radial-glow {
52+
position: absolute;
53+
width: 600px;
54+
height: 600px;
55+
border-radius: 50%;
56+
filter: blur(140px);
57+
opacity: 0.15;
58+
pointer-events: none;
59+
z-index: 0;
60+
}
61+
62+
.glow-1 {
63+
background: radial-gradient(circle, #00f5d4 0%, transparent 70%);
64+
top: 10%;
65+
left: 20%;
66+
}
67+
68+
.glow-2 {
69+
background: radial-gradient(circle, #3ecf8e 0%, transparent 70%);
70+
bottom: 10%;
71+
right: 20%;
72+
}
73+
74+
.error-content {
75+
text-align: center;
76+
max-width: 500px;
77+
z-index: 1;
78+
animation: fadeIn 0.8s ease-out;
79+
}
80+
81+
.error-code {
82+
font-size: 8rem;
83+
font-weight: 800;
84+
line-height: 1;
85+
background: linear-gradient(135deg, #3ecf8e 0%, #00f5d4 100%);
86+
-webkit-background-clip: text;
87+
background-clip: text;
88+
-webkit-text-fill-color: transparent;
89+
margin-bottom: 1rem;
90+
font-family: 'JetBrains Mono', monospace;
91+
letter-spacing: -0.05em;
92+
}
93+
94+
.error-title {
95+
font-size: 2rem;
96+
font-weight: 700;
97+
color: #fff;
98+
margin-bottom: 1rem;
99+
letter-spacing: -0.02em;
100+
}
101+
102+
.error-message {
103+
font-size: 1.1rem;
104+
color: #a1a1aa;
105+
line-height: 1.6;
106+
margin-bottom: 2.5rem;
107+
}
108+
109+
.error-actions {
110+
display: flex;
111+
gap: 1rem;
112+
justify-content: center;
113+
align-items: center;
114+
}
115+
116+
.btn-primary-glow {
117+
display: inline-flex;
118+
align-items: center;
119+
gap: 8px;
120+
background: linear-gradient(135deg, #3ecf8e 0%, #00f5d4 100%);
121+
color: #030303;
122+
font-weight: 600;
123+
padding: 12px 24px;
124+
border-radius: 8px;
125+
text-decoration: none;
126+
font-size: 0.95rem;
127+
transition: all 0.2s ease;
128+
border: none;
129+
box-shadow: 0 0 20px rgba(0, 245, 212, 0.2);
130+
}
131+
132+
.btn-primary-glow:hover {
133+
transform: translateY(-2px);
134+
box-shadow: 0 0 30px rgba(0, 245, 212, 0.4);
135+
}
136+
137+
.btn-secondary-glow {
138+
display: inline-flex;
139+
align-items: center;
140+
gap: 8px;
141+
background: rgba(255, 255, 255, 0.03);
142+
color: #fff;
143+
font-weight: 600;
144+
padding: 12px 24px;
145+
border-radius: 8px;
146+
text-decoration: none;
147+
font-size: 0.95rem;
148+
transition: all 0.2s ease;
149+
border: 1px solid rgba(255, 255, 255, 0.08);
150+
cursor: pointer;
151+
}
152+
153+
.btn-secondary-glow:hover {
154+
background: rgba(255, 255, 255, 0.07);
155+
border-color: rgba(255, 255, 255, 0.15);
156+
transform: translateY(-2px);
157+
}
158+
159+
@keyframes fadeIn {
160+
from {
161+
opacity: 0;
162+
transform: translateY(20px);
163+
}
164+
to {
165+
opacity: 1;
166+
transform: translateY(0);
167+
}
168+
}
169+
170+
@media (max-width: 640px) {
171+
.error-code {
172+
font-size: 6rem;
173+
}
174+
.error-title {
175+
font-size: 1.6rem;
176+
}
177+
.error-actions {
178+
flex-direction: column;
179+
width: 100%;
180+
}
181+
.btn-primary-glow, .btn-secondary-glow {
182+
width: 100%;
183+
justify-content: center;
184+
}
185+
}
186+
</style>

0 commit comments

Comments
 (0)