94 lines
4.2 KiB
TypeScript
94 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Home, Compass } from "lucide-react";
|
|
import { motion } from "motion/react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export function InvalidRouteScreen() {
|
|
return (
|
|
<div className="relative min-h-screen overflow-hidden bg-background text-foreground flex items-center justify-center">
|
|
{/* Ambient Background */}
|
|
<div className="fixed inset-0 pointer-events-none">
|
|
<div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] animate-pulse" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-violet-500/5 rounded-full blur-[100px] animate-pulse delay-1000" />
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-emerald-500/3 rounded-full blur-[140px]" />
|
|
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_20%,transparent_100%)]" />
|
|
</div>
|
|
|
|
<main className="relative z-10 flex flex-col items-center justify-center px-6 py-16 text-center max-w-lg mx-auto">
|
|
{/* 404 Code */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8, filter: "blur(10px)" }}
|
|
animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
|
|
transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
|
|
className="relative mb-6"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary/30 via-violet-500/20 to-primary/30 blur-3xl rounded-full scale-150 animate-pulse" />
|
|
<h1 className="relative text-9xl sm:text-[10rem] font-bold tracking-tighter leading-none bg-gradient-to-b from-foreground via-foreground to-muted-foreground/20 bg-clip-text text-transparent select-none">
|
|
404
|
|
</h1>
|
|
</motion.div>
|
|
|
|
{/* Content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.25, duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-border/50 bg-background/50 backdrop-blur-xl px-4 py-1.5 text-[11px] font-bold uppercase tracking-[0.25em] text-muted-foreground">
|
|
<Compass className="w-3.5 h-3.5" />
|
|
Page not found
|
|
</div>
|
|
|
|
<h2 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground">
|
|
This page doesn't exist
|
|
</h2>
|
|
|
|
<p className="text-sm text-muted-foreground leading-relaxed max-w-sm mx-auto">
|
|
The URL you entered doesn't match any known route. Double-check
|
|
the address or return to the homepage.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.45, duration: 0.5 }}
|
|
className="pt-2"
|
|
>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="rounded-xl gap-2 h-11 px-6 shadow-lg shadow-primary/15 hover:shadow-primary/25 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
|
|
>
|
|
<Link href="/">
|
|
<Home className="h-4 w-4" />
|
|
Back to Home
|
|
</Link>
|
|
</Button>
|
|
</motion.div>
|
|
|
|
{/* Decorative footer */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.7, duration: 0.8 }}
|
|
className="pt-16 flex items-center justify-center gap-3"
|
|
>
|
|
<div className="h-px w-10 bg-gradient-to-r from-transparent to-border" />
|
|
<span className="text-[10px] uppercase tracking-[0.3em] font-semibold text-muted-foreground/40">
|
|
LexiChain
|
|
</span>
|
|
<div className="h-px w-10 bg-gradient-to-l from-transparent to-border" />
|
|
</motion.div>
|
|
</motion.div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|