61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { Home, Search } from 'lucide-react';
|
|
import { getSiteSettings } from '../lib/settings';
|
|
|
|
export default async function NotFound() {
|
|
const settings = await getSiteSettings();
|
|
const quotes = (settings as any)?.notFoundQuotes && (settings as any).notFoundQuotes.length > 0
|
|
? (settings as any).notFoundQuotes
|
|
: ["L'échec est une étape vers la réussite, mais une erreur 404 est juste une impasse."];
|
|
|
|
// Sélection d'une phrase aléatoire
|
|
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white flex items-center justify-center px-4 sm:px-6 lg:px-8 py-24">
|
|
<div className="max-w-md w-full text-center">
|
|
{/* Animated 404 number */}
|
|
<div className="relative mb-8">
|
|
<h1 className="text-9xl font-serif font-black text-gray-100 select-none">404</h1>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-4xl md:text-5xl font-serif font-bold text-brand-600">Oups !</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4 font-serif">
|
|
Page introuvable
|
|
</h2>
|
|
|
|
<p className="text-gray-500 mb-10 text-lg">
|
|
Il semblerait que le chemin que vous avez emprunté n'existe pas ou a été déplacé.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-brand-600 hover:bg-brand-700 shadow-lg hover:shadow-xl transition-all"
|
|
>
|
|
<Home className="w-5 h-5 mr-2" />
|
|
Retour à l'accueil
|
|
</Link>
|
|
<Link
|
|
href="/annuaire"
|
|
className="inline-flex items-center justify-center px-6 py-3 border border-gray-200 text-base font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50 shadow-sm transition-all"
|
|
>
|
|
<Search className="w-5 h-5 mr-2" />
|
|
Explorer l'annuaire
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-12 pt-12 border-t border-gray-100">
|
|
<p className="text-sm text-gray-400 italic">
|
|
"{randomQuote}"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|