feat: add ErrorPage component with back-to-home link

src/components/ErrorPage.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ErrorPage from './ErrorPage'
+
+describe('ErrorPage', () => {
+  it('renders default 404 content', () => {
+    render(<ErrorPage />)
+
+    expect(screen.getByText('404')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Page introuvable' })).toBeInTheDocument()
+  })
+
+  it('renders a link back to the home page', () => {
+    render(<ErrorPage />)
+
+    const link = screen.getByRole('link', { name: "Retour à l'accueil" })
+    expect(link).toHaveAttribute('href', '/')
+  })
+
+  it('uses custom code, title and message when provided', () => {
+    render(<ErrorPage code={500} title="Erreur serveur" message="Une erreur est survenue." />)
+
+    expect(screen.getByText('500')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Erreur serveur' })).toBeInTheDocument()
+    expect(screen.getByText('Une erreur est survenue.')).toBeInTheDocument()
+  })
+})

src/components/ErrorPage.tsx

@@ -0,0 +1,25 @@
+import type { ErrorPageProps } from '../interfaces/error-page'
+
+function ErrorPage({
+  code = 404,
+  title = 'Page introuvable',
+  message = "Désolé, la page que vous cherchez n'existe pas.",
+}: ErrorPageProps) {
+  return (
+    <main className="mx-auto flex w-full max-w-2xl min-h-dvh flex-col items-center justify-center gap-6 px-4 text-center">
+      <p className="text-6xl font-bold text-blue-700">{code}</p>
+      <div>
+        <h1 className="text-2xl font-semibold">{title}</h1>
+        <p className="mt-2 text-gray-600">{message}</p>
+      </div>
+      <a
+        href="/"
+        className="rounded-lg bg-blue-700 px-5 py-2.5 text-white transition-colors hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-800 focus:ring-offset-2"
+      >
+        Retour à l'accueil
+      </a>
+    </main>
+  )
+}
+
+export default ErrorPage