diff --git a/src/assets/css/pages/Warning.scss b/src/assets/css/pages/Warning.scss
new file mode 100644
index 0000000..62e8c9e
--- /dev/null
+++ b/src/assets/css/pages/Warning.scss
@@ -0,0 +1,14 @@
+.page-container--warning {
+ @apply bg-lhoist min-h-screen py-12 px-4 flex flex-col justify-center items-center;
+ box-sizing: border-box ;
+ .warning-content__title {
+ @apply bg-construction p-4 text-5xl;
+ transform: rotate(-3deg);
+ }
+ .warning-content__cover {
+ @apply max-w-64 max-h-64 my-12;
+ }
+ .warning-content__text {
+ @apply text-white text-center text-xl max-w-2xl pb-12;
+ }
+}
diff --git a/src/assets/img/illustrations/lhoist-prevention-smartphone-sticker.svg b/src/assets/img/illustrations/lhoist-prevention-smartphone-sticker.svg
new file mode 100644
index 0000000..795c582
--- /dev/null
+++ b/src/assets/img/illustrations/lhoist-prevention-smartphone-sticker.svg
@@ -0,0 +1,589 @@
+
+
\ No newline at end of file
diff --git a/src/data/screensTranslations_FR.json b/src/data/screensTranslations_FR.json
index 05c8992..7900a1b 100644
--- a/src/data/screensTranslations_FR.json
+++ b/src/data/screensTranslations_FR.json
@@ -7,6 +7,10 @@
"start": "Commencer",
"enter": "Entrer"
},
+ "warning": {
+ "safety_text": "Pour votre sécurité, n'utilisez pas votre téléphone ou la plateforme de jeu en marchant. Prenez une pause et jouez uniquement lorsque vous êtes bien installés et à l'arrêt.",
+ "warning": "Attention"
+ },
"home": {
"app_description": "Découvrez le jeu interactif Stay Safe, où vos choix détermineront votre sécurité sur votre lieu de travail."
},
@@ -41,9 +45,9 @@
"tutorial": {
"how_to_play": "Comment jouer ?",
"move_around": "Déplacez vous dans le jeu",
- "move_around_description": "Déplacez et restez appuyer avec le curseur de votre souris ou glisser votre doigt sur l'écran de votre téléphone pour explorer la scène.",
+ "move_around_description": "Déplacez et restez appuyé avec le curseur de votre souris ou glissez votre doigt sur l'écran de votre smartphone pour explorer la scène.",
"walkthrough": "Déroulement d'une partie",
- "walkthrough_description": "Identifiez les bonnes et mauvaises pratiques en cliquant sur les objets et actions de la scène.",
+ "walkthrough_description": "Identifiez les bonnes et mauvaises pratiques en cliquant sur les actions de la scène.",
"points_and_time": "Points et chronomètre",
"points_and_time_description": "Identifiez les diverses actions en commettant le moins d'erreurs possible, sécurité oblige, et ce, le plus rapidement possible !"
},
@@ -69,6 +73,7 @@
"back": "Retour",
"next": "Suivant",
"previous": "Précédent",
+ "continue": "Continuer",
"submit": "Soumettre",
"yes": "Oui",
"no": "Non",
diff --git a/src/pages/Warning.jsx b/src/pages/Warning.jsx
new file mode 100644
index 0000000..a4324e4
--- /dev/null
+++ b/src/pages/Warning.jsx
@@ -0,0 +1,27 @@
+import { Link } from "react-router-dom";
+import React from "react";
+import AnimatedPage from "../components/AnimatedPage";
+import Loading from "../components/animations/Loading";
+import { useUser } from "../hooks/useUser";
+import warningSticker from "../assets/img/illustrations/lhoist-prevention-smartphone-sticker.svg";
+
+export default function Warning() {
+ const { language, screensTranslations } = useUser();
+ if (!screensTranslations || !screensTranslations.warning) return ;
+ const currentScreenTranslations = screensTranslations.warning;
+ const uiTranslations = screensTranslations.ui;
+
+ return (
+
+