Skip to content

Commit eae5148

Browse files
nik13nik13
committed
404 page
1 parent f2eebf8 commit eae5148

1 file changed

Lines changed: 181 additions & 0 deletions

File tree

‎src/pages/404.astro‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
---
2+
import BaseLayout from '../layouts/BaseLayout.astro';
3+
import Header from '../components/Header.astro';
4+
---
5+
6+
<BaseLayout title="404 - Page Not Found | Future AGI Docs">
7+
<Header />
8+
9+
<main class="relative min-h-screen flex items-center justify-center overflow-hidden">
10+
<!-- Starfield Background -->
11+
<div class="absolute inset-0 pointer-events-none">
12+
<div class="starfield">
13+
<div class="star star-far" style="top: 5%; left: 8%;"></div>
14+
<div class="star star-far" style="top: 12%; left: 25%;"></div>
15+
<div class="star star-far" style="top: 8%; left: 45%;"></div>
16+
<div class="star star-far" style="top: 15%; left: 72%;"></div>
17+
<div class="star star-far" style="top: 6%; left: 88%;"></div>
18+
<div class="star star-mid" style="top: 10%; left: 15%;"></div>
19+
<div class="star star-mid" style="top: 18%; left: 60%;"></div>
20+
<div class="star star-mid" style="top: 22%; left: 85%;"></div>
21+
<div class="star star-close" style="top: 8%; left: 35%;"></div>
22+
<div class="star star-close" style="top: 20%; left: 78%;"></div>
23+
<div class="star star-far" style="top: 40%; left: 3%;"></div>
24+
<div class="star star-far" style="top: 55%; left: 5%;"></div>
25+
<div class="star star-far" style="top: 40%; right: 4%;"></div>
26+
<div class="star star-far" style="top: 60%; right: 6%;"></div>
27+
<div class="star star-mid" style="top: 35%; left: 8%;"></div>
28+
<div class="star star-mid" style="top: 50%; right: 10%;"></div>
29+
<div class="star star-far" style="top: 70%; left: 20%;"></div>
30+
<div class="star star-far" style="top: 75%; left: 65%;"></div>
31+
<div class="star star-mid" style="top: 80%; left: 40%;"></div>
32+
<div class="star star-close" style="top: 85%; left: 90%;"></div>
33+
</div>
34+
</div>
35+
36+
<!-- Subtle gradient glow -->
37+
<div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(ellipse at 50% 40%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);"></div>
38+
39+
<!-- Content -->
40+
<div class="relative z-10 text-center px-6 max-w-2xl mx-auto">
41+
<!-- Lost Ship Illustration -->
42+
<div class="ship-container mb-6">
43+
<svg class="ship-svg w-32 h-32 mx-auto text-[#52525b] opacity-70" viewBox="0 0 200 200" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
44+
<!-- Drifting starship -->
45+
<g class="ship" transform="rotate(-15, 100, 100)">
46+
<path d="M100 40 L130 80 L130 140 L100 170 L70 140 L70 80 Z" stroke-width="2" />
47+
<ellipse cx="100" cy="70" rx="12" ry="18" />
48+
<path d="M88 65 Q100 55 112 65" />
49+
<ellipse cx="80" cy="155" rx="6" ry="10" />
50+
<ellipse cx="120" cy="155" rx="6" ry="10" />
51+
<path class="engine-flicker" d="M80 165 L80 175" stroke-width="3" opacity="0.4" />
52+
<path class="engine-flicker delay" d="M120 165 L120 175" stroke-width="3" opacity="0.4" />
53+
<path d="M70 85 L40 70 L35 75 L35 100 L40 105 L70 95" />
54+
<path d="M130 85 L160 70 L165 75 L165 100 L160 105 L130 95" />
55+
<circle cx="35" cy="75" r="3" fill="currentColor" />
56+
<circle cx="165" cy="75" r="3" fill="currentColor" />
57+
<line x1="85" y1="100" x2="85" y2="130" opacity="0.5" />
58+
<line x1="115" y1="100" x2="115" y2="130" opacity="0.5" />
59+
<circle cx="100" cy="115" r="8" stroke-dasharray="2 2" />
60+
</g>
61+
62+
<!-- Signal waves -->
63+
<g class="signal-waves">
64+
<circle cx="100" cy="100" r="60" stroke-dasharray="4 4" opacity="0.2" class="wave wave-1" />
65+
<circle cx="100" cy="100" r="80" stroke-dasharray="4 4" opacity="0.15" class="wave wave-2" />
66+
<circle cx="100" cy="100" r="95" stroke-dasharray="4 4" opacity="0.1" class="wave wave-3" />
67+
</g>
68+
69+
<!-- Question mark orbit -->
70+
<g class="orbit">
71+
<text x="165" y="55" font-size="24" fill="currentColor" opacity="0.4" font-family="monospace">?</text>
72+
</g>
73+
</svg>
74+
</div>
75+
76+
<!-- Error Code -->
77+
<div class="error-code mb-4">
78+
<span class="text-[80px] sm:text-[100px] font-bold leading-none select-none tracking-tighter" style="background: linear-gradient(180deg, #8b5cf6 0%, #3b1f7a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8;">
79+
404
80+
</span>
81+
</div>
82+
83+
<!-- Headline -->
84+
<h1 class="text-2xl sm:text-3xl md:text-4xl font-light text-[var(--color-text-primary)] mb-4 tracking-tight">
85+
Lost in deep space
86+
</h1>
87+
88+
<!-- Subheadline -->
89+
<p class="text-base sm:text-lg text-[var(--color-text-muted)] mb-8 max-w-md mx-auto leading-relaxed">
90+
This page has drifted beyond our sensors. The coordinates you're looking for don't exist in this sector.
91+
</p>
92+
93+
<!-- Mission Log -->
94+
<div class="mission-log rounded-lg p-4 mb-8 max-w-xs mx-auto text-left font-mono text-xs" style="background: rgba(17,17,17,0.6); border: 1px solid rgba(255,255,255,0.06);">
95+
<div class="text-[var(--color-text-muted)] mb-2">// MISSION LOG</div>
96+
<div class="text-[var(--color-text-secondary)]">
97+
<span class="text-red-400">ERROR:</span> Route not found<br/>
98+
<span class="text-[var(--color-text-muted)]">STATUS:</span> Navigation failure<br/>
99+
<span class="text-[var(--color-text-muted)]">ACTION:</span> Return to base
100+
</div>
101+
</div>
102+
103+
<!-- CTAs -->
104+
<div class="flex gap-3 justify-center">
105+
<a href="/docs" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity" style="background: #8b5cf6;">
106+
Browse Docs
107+
</a>
108+
<a href="/" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors" style="border: 1px solid rgba(255,255,255,0.1);">
109+
Home
110+
</a>
111+
</div>
112+
</div>
113+
114+
<!-- Floating debris -->
115+
<div class="debris debris-1 absolute w-1 h-1 bg-[#3f3f46] rounded-full"></div>
116+
<div class="debris debris-2 absolute w-2 h-2 bg-[#27272a] rounded-full"></div>
117+
<div class="debris debris-3 absolute w-1.5 h-1.5 bg-[#3f3f46] rounded-full"></div>
118+
</main>
119+
</BaseLayout>
120+
121+
<style>
122+
.starfield { position: absolute; inset: 0; }
123+
124+
.star { position: absolute; background: #fafafa; border-radius: 50%; }
125+
.star-far { width: 1px; height: 1px; opacity: 0.3; animation: twinkle 4s ease-in-out infinite; }
126+
.star-mid { width: 2px; height: 2px; opacity: 0.4; animation: twinkle 3s ease-in-out infinite; }
127+
.star-close { width: 3px; height: 3px; opacity: 0.6; animation: twinkle 2.5s ease-in-out infinite; }
128+
.star:nth-child(odd) { animation-delay: 0.5s; }
129+
.star:nth-child(even) { animation-delay: 1.2s; }
130+
.star:nth-child(3n) { animation-delay: 0.8s; }
131+
132+
@keyframes twinkle {
133+
0%, 100% { opacity: 0.2; transform: scale(1); }
134+
50% { opacity: 1; transform: scale(1.2); }
135+
}
136+
137+
.ship-container { animation: drift 8s ease-in-out infinite; }
138+
@keyframes drift {
139+
0%, 100% { transform: translate(0, 0) rotate(0deg); }
140+
25% { transform: translate(10px, -5px) rotate(2deg); }
141+
50% { transform: translate(5px, 5px) rotate(-1deg); }
142+
75% { transform: translate(-5px, -3px) rotate(1deg); }
143+
}
144+
145+
.engine-flicker { animation: flicker 0.5s ease-in-out infinite; }
146+
.engine-flicker.delay { animation-delay: 0.25s; }
147+
@keyframes flicker {
148+
0%, 100% { opacity: 0.2; }
149+
50% { opacity: 0.5; }
150+
}
151+
152+
.wave { animation: expand 3s ease-out infinite; }
153+
.wave-2 { animation-delay: 1s; }
154+
.wave-3 { animation-delay: 2s; }
155+
@keyframes expand {
156+
0% { transform: scale(0.8); opacity: 0.3; }
157+
100% { transform: scale(1.2); opacity: 0; }
158+
}
159+
160+
.orbit { animation: orbit 10s linear infinite; transform-origin: 100px 100px; }
161+
@keyframes orbit {
162+
from { transform: rotate(0deg); }
163+
to { transform: rotate(360deg); }
164+
}
165+
166+
.debris { animation: float 15s ease-in-out infinite; }
167+
.debris-1 { top: 20%; left: 15%; animation-delay: 0s; }
168+
.debris-2 { top: 60%; right: 20%; animation-delay: 5s; }
169+
.debris-3 { bottom: 30%; left: 25%; animation-delay: 10s; }
170+
@keyframes float {
171+
0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
172+
25% { transform: translate(30px, -20px) rotate(90deg); opacity: 0.5; }
173+
50% { transform: translate(60px, 10px) rotate(180deg); opacity: 0.3; }
174+
75% { transform: translate(20px, 30px) rotate(270deg); opacity: 0.4; }
175+
}
176+
177+
.mission-log {
178+
box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.5);
179+
backdrop-filter: blur(8px);
180+
}
181+
</style>

0 commit comments

Comments
 (0)