"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> ); }