116 lines
5.1 KiB
JavaScript
116 lines
5.1 KiB
JavaScript
"use client";
|
|
import Link from 'next/link';
|
|
import { useEffect, useState } from 'react';
|
|
import { Home, Search, MoveLeft } from 'lucide-react';
|
|
|
|
export default function NotFound() {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsLoaded(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-[#080E12] min-h-screen flex flex-col items-center justify-center px-4 py-12">
|
|
<div className={`text-center transition-all duration-1000 transform ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
|
|
{/* Animated 404 number */}
|
|
<div className="relative mb-8">
|
|
<h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500">
|
|
404
|
|
</h1>
|
|
<div className="absolute -top-6 -right-6">
|
|
<div className="h-12 w-12 rounded-full border-4 border-indigo-900 border-t-indigo-400 animate-spin" />
|
|
</div>
|
|
<div className="absolute -bottom-4 -left-4">
|
|
<Search className="h-8 w-8 text-purple-300 animate-bounce" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Page not found message */}
|
|
<h2 className={`text-2xl font-semibold text-indigo-200 mb-4 transition-all delay-300 duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
|
|
Oops! Page Not Found
|
|
</h2>
|
|
|
|
<p className={`text-indigo-300/80 max-w-md mx-auto mb-8 transition-all delay-500 duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
|
|
The page you are looking for seems to have wandered off into the digital void. Let's guide you back to reality.
|
|
</p>
|
|
|
|
{/* Animated dots - glowing effect */}
|
|
<div className="flex justify-center mb-8">
|
|
{[0, 1, 2, 3, 4].map((dot) => (
|
|
<div
|
|
key={dot}
|
|
className="h-2 w-2 mx-1 rounded-full bg-purple-400"
|
|
style={{
|
|
animation: "pulse 1.5s infinite",
|
|
animationDelay: `${dot * 0.2}s`,
|
|
boxShadow: "0 0 8px 2px rgba(167, 139, 250, 0.3)"
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Home link button - glowing effect */}
|
|
<Link
|
|
href="/"
|
|
className={`inline-flex items-center bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium py-3 px-6 rounded-full hover:from-indigo-500 hover:to-purple-500 transition-all duration-300 transform hover:scale-105 hover:shadow-lg delay-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
|
|
style={{
|
|
boxShadow: "0 0 15px rgba(129, 140, 248, 0.5)"
|
|
}}
|
|
>
|
|
<MoveLeft className="mr-2 h-5 w-5" />
|
|
Return to Home
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Floating particles for atmosphere */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
{[...Array(20)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute rounded-full bg-indigo-500/10"
|
|
style={{
|
|
width: `${Math.random() * 6 + 2}px`,
|
|
height: `${Math.random() * 6 + 2}px`,
|
|
top: `${Math.random() * 100}%`,
|
|
left: `${Math.random() * 100}%`,
|
|
animation: `float ${Math.random() * 10 + 10}s linear infinite`,
|
|
animationDelay: `${Math.random() * 5}s`,
|
|
opacity: Math.random() * 0.5 + 0.2
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add keyframes for floating animation */}
|
|
<style jsx global>{`
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0) translateX(0);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 0.5;
|
|
}
|
|
90% {
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: translateY(-100vh) translateX(20px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 0.6;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|