Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 4x 4x 4x 2x 4x | import {useTranslation} from 'react-i18next';
import {useEffect, useState} from 'react';
/**
* NotFound component – displays a custom 404 page with support for light/dark mode.
*
* The content includes:
* - A title with the error code
* - A brief error description
* - A link to return to the home page
* *
* The section features a fade-in effect managed via `useState` and `useEffect`.
* Strings are localized using `react-i18next`.
*
* @component
* @module components/ui/NotFound
*
* @returns {JSX.Element} The rendered 404 page
*/
export default function NotFound() {
const {t} = useTranslation();
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setIsVisible(true);
}, []);
return (
<section className="px-4 py-8 sm:px-6 md:px-8 max-w-4xl mx-auto">
<div
className={`bg-gradient-to-br from-red-50 to-white dark:from-gray-800 dark:to-gray-900 rounded-3xl p-6 sm:p-8 md:p-10 shadow-lg text-center transition-opacity duration-700 ${
isVisible ? 'opacity-100' : 'opacity-0'
}`}
>
<h1 className="text-4xl sm:text-5xl font-extrabold mb-6 text-gray-900 dark:text-white">
404 - {t("notfound_title")}
</h1>
<p className="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6">
{t("notfound_description")}
</p>
<a
href="/ingdanielemasone/"
className="inline-block mt-4 px-6 py-3 bg-blue-600 text-white font-semibold rounded-xl shadow hover:bg-blue-700 transition-colors"
>
{t("go_home")}
</a>
</div>
</section>
);
}
|