Added optimizations for mobile

This commit is contained in:
2026-02-08 15:27:44 +01:00
parent f1e9e3f8d4
commit da2e32d004
28 changed files with 1667 additions and 1075 deletions

View File

@@ -16,49 +16,50 @@ export default function Error({ error, reset }: ErrorProps) {
}, [error]);
return (
<div className="min-h-screen flex items-center justify-center bg-cwhite">
<div className="text-center px-4">
<div className="min-h-screen flex items-center justify-center bg-cwhite px-4 py-8">
<div className="text-center w-full max-w-md mx-auto">
{/* Logo */}
<div className="flex justify-center mb-8">
<div className="flex justify-center mb-6 md:mb-8">
<Image
src="/logo.svg"
alt="MAD Logo"
width={120}
height={120}
width={100}
height={100}
className="w-20 h-20 md:w-[120px] md:h-[120px]"
/>
</div>
{/* 500 Content */}
<div className="max-w-md mx-auto">
<h1 className="text-9xl font-bold text-lorange mb-4">500</h1>
<h2 className="text-3xl font-semibold text-gray-900 mb-4">
<h1 className="text-7xl md:text-9xl font-bold text-lorange mb-3 md:mb-4">500</h1>
<h2 className="text-2xl md:text-3xl font-semibold text-gray-900 mb-3 md:mb-4">
Erreur serveur
</h2>
<p className="text-gray-600 mb-2">
<p className="text-sm md:text-base text-gray-600 mb-2 px-2">
Une erreur inattendue s'est produite sur le serveur.
</p>
{error.message && (
<p className="text-sm text-gray-500 mb-8 font-mono bg-gray-100 p-3 rounded-lg">
<p className="text-xs md:text-sm text-gray-500 mb-6 md:mb-8 font-mono bg-gray-100 p-2 md:p-3 rounded-lg break-all text-left mt-3">
{error.message}
</p>
)}
{!error.message && (
<p className="text-gray-600 mb-8">
<p className="text-sm md:text-base text-gray-600 mb-6 md:mb-8 px-2">
Veuillez réessayer dans quelques instants.
</p>
)}
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<div className="flex flex-col gap-3 md:gap-4 justify-center">
<button
onClick={reset}
className="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-lorange hover:bg-dorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors"
className="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-lorange hover:bg-dorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors w-full md:w-auto"
>
Réessayer
</button>
<Link
href="/dashboard"
className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors"
className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors w-full md:w-auto"
>
Retour au tableau de bord
</Link>
@@ -66,8 +67,8 @@ export default function Error({ error, reset }: ErrorProps) {
</div>
{/* Footer */}
<div className="mt-12 text-center text-xs text-gray-500">
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
<div className="mt-8 md:mt-12 text-center text-xs text-gray-500 px-4">
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" rel="noopener noreferrer" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</div>
</div>
</div>