mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 20:30:53 +00:00
172 lines
7.4 KiB
TypeScript
172 lines
7.4 KiB
TypeScript
import React from 'react';
|
|
import Navbar from '@/components/Navbar/navbar';
|
|
import { Sparkles, Rocket, Clock } from 'lucide-react';
|
|
|
|
export default function NotFound() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 flex items-center justify-center">
|
|
{/* Coming Soon Message */}
|
|
<Navbar />
|
|
<div className="text-center px-4 py-16 max-w-xl">
|
|
<div className="mb-6 relative">
|
|
<Rocket className="h-16 w-16 text-indigo-600 mx-auto animate-bounce" />
|
|
<div className="absolute top-0 left-1/2 transform -translate-x-1/2">
|
|
<Sparkles className="h-6 w-6 text-purple-400 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
|
|
<h1 className="text-4xl font-bold text-indigo-800 mb-4 tracking-tight">
|
|
Something Awesome is Coming Soon!
|
|
</h1>
|
|
|
|
<p className="text-xl text-indigo-600 mb-8">
|
|
We're building something magical for you. Stay tuned!
|
|
</p>
|
|
|
|
<div className="flex items-center justify-center space-x-2 mb-10">
|
|
<Clock className="h-5 w-5 text-purple-500" />
|
|
<div className="flex space-x-1">
|
|
{[0, 1, 2, 3].map((dot) => (
|
|
<div
|
|
key={dot}
|
|
className="h-2 w-2 rounded-full bg-purple-500"
|
|
style={{
|
|
animation: "pulse 1.5s infinite",
|
|
animationDelay: `${dot * 0.3}s`
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<button className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
|
|
Notify Me
|
|
</button>
|
|
<div className="absolute -top-2 -right-2">
|
|
<div className="h-4 w-4 bg-purple-400 rounded-full animate-ping" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// THis is the not found page and above is the coming soon
|
|
|
|
// "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>
|
|
// );
|
|
// }
|