Merge pull request #38 from Inist-CNRS/feat/description

Update and add a new description

tdm-fe/src/app/App.tsx

@@ -1,6 +1,7 @@
 import '~/app/App.scss';
 import Footer from '~/app/components/layout/Footer';
 import Header from '~/app/components/layout/Header';
+import WebServicesDescription from '~/app/components/layout/WebServicesDescription';
 import WebServicesFooter from '~/app/components/layout/WebServicesFooter';
 import WebServicesHeader from '~/app/components/layout/WebServicesHeader';
 import ProcessingCreationForm from '~/app/pages/ProcessingCreationForm';
@@ -21,6 +22,7 @@ const App = () => {
                     <Route path={`${RouteProcessingStatus}/:id`} element={<ProcessingStatus />} />
                 </Routes>
             </Container>
+            <WebServicesDescription />
             <WebServicesFooter />
             <Footer />
         </>

tdm-fe/src/app/components/layout/WebServicesDescription.tsx

@@ -0,0 +1,31 @@
+import '~/app/components/layout/scss/WebServicesDescription.scss';
+import Container from '@mui/material/Container';
+
+const WebServicesDescription = () => {
+    return (
+        <div id="ws-description">
+            <Container className="text">
+                <p>Par exemple&#8239;:</p>
+                <ul>
+                    <li>
+                        chargez vos données au format CSV&#8239;: VosData.csv (dans le cas de corpus ISTEX on pourra
+                        utiliser le fichier compressé fourni par ISTEX),
+                    </li>
+                    <li>
+                        choisissez le convertisseur adapté au csv («&#8239;Transformation d&apos;un fichier CSV en
+                        fichier&#8239;») (Dans le cas de corpus ISTEX on pourra utiliser «&#8239;Transformation
+                        d&apos;un fichier ISTEX (format tar.gz) en fichier corpus&#8239;»),
+                    </li>
+                    <li>dans la liste déroulante, sélectionnez le nom de la colonne que vous voulez traiter,</li>
+                    <li>puis sélectionnez le web service que vous voulez exécuter,</li>
+                    <li>
+                        et enfin remplissez votre adresse mail, vous recevrez un message au lancement du service et à la
+                        fin du traitement avec un lien de téléchargement des résultats.
+                    </li>
+                </ul>
+            </Container>
+        </div>
+    );
+};
+
+export default WebServicesDescription;

tdm-fe/src/app/components/layout/WebServicesFooter.tsx

@@ -12,7 +12,7 @@ const WebServicesFooter = () => {
                     L'équipe Istex vous propose une pluralité d'outils pour répondre à vos besoins
                 </p>
                 <Button variant="contained" size="large" href="https://services.istex.fr/">
-                    Objectif TDM
+                    ISTEX TDM
                 </Button>
             </Container>
         </div>

tdm-fe/src/app/components/layout/WebServicesHeader.tsx

@@ -5,17 +5,23 @@ const WebServicesHeader = () => {
     return (
         <div id="ws-header">
             <Container>
-                <p className="text" id="ws-header-pre-title">
+                <p className="text" id="ws-header-title">
                     Chargez vos corpus et découvrez les résultats des services TDM
                 </p>
-                <h1 id="ws-header-title">
-                    <span id="ws-header-title-blue">IA</span>
-                    <span id="ws-header-title-green">Factory</span>
-                </h1>
-                <p className="text">
-                    Une interface simple de chargement de corpus et d&apos;exécution d&apos;outils de TDM vous
-                    permettent d&apos;exploiter vos propres données simplement.
-                </p>
+                <div className="text" id="ws-header-content">
+                    <p>
+                        IA Factory est une interface de chargement de corpus et d&apos;exécution d&apos;outils de TDM
+                        vous permettant d&apos;exploiter vos propres données en simplement 3 étapes&#8239;:
+                    </p>
+                    <ul>
+                        <li>Téléchargez vos données et choisissez le format et le champ à traiter,</li>
+                        <li>Choisissez le service web de TDM que vous voulez exécuter,</li>
+                        <li>Remplissez votre adresse mail.</li>
+                    </ul>
+                    <p>
+                        À l&apos;issue du traitement vous recevrez un mail avec un lien de téléchargement du résultat.
+                    </p>
+                </div>
             </Container>
         </div>
     );

tdm-fe/src/app/components/layout/scss/WebServicesDescription.scss

@@ -0,0 +1,18 @@
+@import "../../../scss/colors";
+
+#ws-description {
+  max-width: 1000px;
+  padding-bottom: 40px;
+  margin-right: auto;
+  margin-left: auto;
+  font-size: .85em;
+  text-align: justify;
+
+  p {
+    padding: 0;
+
+    li {
+      margin-top: 2px;
+    }
+  }
+}

tdm-fe/src/app/components/layout/scss/WebServicesHeader.scss

@@ -9,20 +9,25 @@
   margin-left: auto;
   text-align: center;
 
-  #ws-header-pre-title {
-    font-size: .85em;
+  #ws-header-title {
+    font-size: 1em;
+    font-weight: 700;
     text-transform: uppercase;
   }
 
-  #ws-header-title {
+  #ws-header-content {
     margin: 0;
+    font-size: .75em;
 
-    #ws-header-title-blue {
-      color: $blue;
-    }
+    ul {
+      width: fit-content;
+      margin-right: auto;
+      margin-left: auto;
+      text-align: justify;
 
-    #ws-header-title-green {
-      color: $light-green;
+      li {
+        width: fit-content;
+      }
     }
   }
 }