71 lines
3.0 KiB
TypeScript
71 lines
3.0 KiB
TypeScript
import Link from 'next/link'
|
|
import { Header } from '@/components/header'
|
|
import { Footer } from '@/components/footer'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Home, Search, ArrowLeft, Server } from 'lucide-react'
|
|
|
|
export default function NotFound() {
|
|
return (
|
|
<div className="min-h-screen bg-background flex flex-col">
|
|
<Header />
|
|
<main className="flex-1 flex items-center justify-center py-12">
|
|
<div className="container max-w-2xl text-center">
|
|
{/* 404 Visual */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-center space-x-4 mb-6">
|
|
<div className="w-16 h-16 bg-gradient-hero rounded-lg flex items-center justify-center">
|
|
<Server className="w-8 h-8 text-white" />
|
|
</div>
|
|
<div className="text-6xl font-bold text-primary">404</div>
|
|
</div>
|
|
<h1 className="text-3xl font-bold tracking-tight mb-4">Page Not Found</h1>
|
|
<p className="text-xl text-muted-foreground mb-8">
|
|
Oops! The page you're looking for seems to have wandered off into the digital void.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Helpful Actions */}
|
|
<Card>
|
|
<CardContent className="pt-6 space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Button asChild className="h-12">
|
|
<Link href="/">
|
|
<Home className="w-4 h-4 mr-2" />
|
|
Go Home
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button asChild variant="outline" className="h-12">
|
|
<Link href="/services">
|
|
<Search className="w-4 h-4 mr-2" />
|
|
Browse Services
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground">
|
|
<p className="mb-2">Common pages you might be looking for:</p>
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<Link href="/about" className="text-primary hover:underline">About Us</Link>
|
|
<Link href="/contact" className="text-primary hover:underline">Contact</Link>
|
|
<Link href="/tools" className="text-primary hover:underline">Web Tools</Link>
|
|
<Link href="/auth" className="text-primary hover:underline">Sign In</Link>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Fun Error Message */}
|
|
<div className="mt-8 p-4 bg-muted rounded-lg">
|
|
<p className="text-sm text-muted-foreground">
|
|
<strong>Error Code:</strong> 404 - Page Not Found<br />
|
|
<strong>Suggestion:</strong> Check the URL for typos or use the navigation menu above
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
)
|
|
} |