💄(app-desk) integrate design 404 page

Introduce a first draft of 404 page based on Johann's design. Please
refer to the Figma file for more info. This page is tested through
tests e2e. It closes the issue #112

src/frontend/apps/desk/src/i18n/translations.json

@@ -19,6 +19,7 @@
       "Add team icon": "Icône ajout de groupe",
       "Admin": "Admin",
       "Are you sure you want to delete {{teamName}} team?": "Êtes-vous sûr de vouloir supprimer le groupe {{teamName}}?",
+      "Back to home page": "Retour à la page d'accueil",
       "Cancel": "Annuler",
       "Cells icon": "Icône Cellules",
       "Choose a role": "Choisissez un rôle",
@@ -47,6 +48,7 @@
       "Groups": "Groupes",
       "Invitation sent to {{email}}": "Invitation envoyée à {{email}}",
       "Invite new members to {{teamName}}": "Invitez de nouveaux membres à rejoindre {{teamName}}",
+      "It seems that the page you are looking for does not exist or cannot be displayed correctly.": "Il semble que la page que vous cherchez n'existe pas ou ne puisse pas être affichée correctement.",
       "Language": "Langue",
       "Language Icon": "Icône de langue",
       "Last update at": "Dernière modification le",
@@ -61,6 +63,7 @@
       "New name...": "Nouveau nom...",
       "Open the member options modal": "Ouvrir les options de membre dans la fenêtre modale",
       "Open the team options": "Ouvrir les options de groupe",
+      "Ouch !": "Ooops !",
       "Owner": "Propriétaire",
       "People": "People",
       "People Description": "Description de People",

src/frontend/apps/desk/src/pages/404.tsx

@@ -1,25 +1,43 @@
+import { Button } from '@openfun/cunningham-react';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
-import { Text } from '@/components';
+import Icon404 from '@/assets/icons/icon-404.svg';
+import { Box, StyledLink, Text } from '@/components';
 import { NextPageWithLayout } from '@/types/next';
 
 import MainLayout from './MainLayout';
 
+const StyledButton = styled(Button)`
+  width: fit-content;
+  padding-left: 2rem;
+  padding-right: 2rem;
+`;
+
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
 
   return (
-    <Text
-      className="mt-xl"
-      as="h1"
-      $justify="center"
-      $align="center"
-      $theme="danger"
-      $textAlign="center"
-    >
-      {t('404 - Page not found')}
-    </Text>
+    <Box $align="center" className="m-auto" $height="70vh" $gap="2rem">
+      <Icon404 aria-label="Image 404" role="img" />
+
+      <Text $size="h2" $weight="700" $theme="greyscale" $variation="900">
+        {t('Ouch !')}
+      </Text>
+
+      <Text as="p" $textAlign="center" $maxWidth="400px" $size="m">
+        {t(
+          'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+        )}
+      </Text>
+
+      <Box className="mt-l">
+        <StyledLink href="/">
+          <StyledButton>{t('Back to home page')}</StyledButton>
+        </StyledLink>
+      </Box>
+    </Box>
   );
 };
 

src/frontend/apps/e2e/__tests__/app-desk/404.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+  await page.goto('unknown-page404');
+});
+
+test.describe('404', () => {
+  test('Checks all the elements are visible', async ({ page }) => {
+    await expect(page.getByLabel('Image 404')).toBeVisible();
+    await expect(page.getByText('Ouch')).toBeVisible();
+    await expect(
+      page.getByText(
+        'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+      ),
+    ).toBeVisible();
+    await expect(page.getByText('Back to home page')).toBeVisible();
+  });
+
+  test('checks go back to home page redirects to home page', async ({
+    page,
+  }) => {
+    await page.getByText('Back to home page').click();
+    await expect(page).toHaveURL('/');
+  });
+});

src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts

@@ -116,7 +116,11 @@ test.describe('Teams Create', () => {
 
   test('checks 404 on teams/[id] page', async ({ page }) => {
     await page.goto('/teams/some-unknown-team');
-    await expect(page.getByText('404 - Page not found')).toBeVisible({
+    await expect(
+      page.getByText(
+        'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+      ),
+    ).toBeVisible({
       timeout: 15000,
     });
   });