82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Button } from '../components/ui/button';
|
|
import { Card } from '../components/ui/card';
|
|
import { Home, ArrowLeft, Search } from 'lucide-react';
|
|
|
|
const NotFound = () => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
|
|
<Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
|
|
{/* 404 Illustration */}
|
|
<div className="mb-8">
|
|
<div className="relative">
|
|
<h1
|
|
className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-[var(--neutral-800)] to-[var(--lavender-700)] leading-none"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
404
|
|
</h1>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<Search className="h-24 w-24 text-brand-purple opacity-30" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<h2
|
|
className="text-3xl font-semibold text-[var(--purple-ink)] mb-4"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
Page Not Found
|
|
</h2>
|
|
<p
|
|
className="text-lg text-brand-purple mb-8 max-w-md mx-auto"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
>
|
|
Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
|
|
</p>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
onClick={() => navigate(-1)}
|
|
variant="outline"
|
|
className="rounded-xl border-2 border-brand-purple text-brand-purple hover:bg-[var(--lavender-700)] px-6 py-6"
|
|
>
|
|
<ArrowLeft className="h-5 w-5 mr-2" />
|
|
Go Back
|
|
</Button>
|
|
<Button
|
|
onClick={() => navigate('/')}
|
|
className="rounded-xl bg-gradient-to-r from-brand-purple to-[var(--purple-ink)] hover:from-[var(--purple-ink)] hover:to-brand-purple text-white px-6 py-6"
|
|
>
|
|
<Home className="h-5 w-5 mr-2" />
|
|
Back to Home
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Help Text */}
|
|
<div className="mt-8 pt-8 border-t border-[var(--neutral-800)]">
|
|
<p
|
|
className="text-sm text-brand-purple "
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
>
|
|
Need help? Contact us at{' '}
|
|
<a
|
|
href="mailto:support@loaftx.org"
|
|
className="text-brand-purple hover:text-[var(--purple-ink)] font-semibold underline"
|
|
>
|
|
support@loaftx.org
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotFound;
|